/* ==========================================================================
   وكيل العبد جروب - الهوية البصرية وتنسيقات التصميم
   ========================================================================== */

/* إعدادات الأساسية وسلوك التمرير */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: #0A0D24;
  color: #F3F4F8;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Changa', sans-serif;
}

/* ==========================================================================
   التأثيرات الضوئية والنيون (Neon Effects)
   ========================================================================== */

/* كود لون النيون الأصفر المستخدم للهوية: #F4E333 */
.neon-text {
  color: #F4E333;
  text-shadow: 0 0 6px rgba(244, 227, 51, 0.65), 
              0 0 18px rgba(244, 227, 51, 0.45), 
              0 0 46px rgba(244, 227, 51, 0.25);
}

.neon-btn {
  box-shadow: 0 0 8px rgba(244, 227, 51, 0.55), 
              0 0 24px rgba(244, 227, 51, 0.35), 
              0 0 60px rgba(244, 227, 51, 0.12);
}

@media (prefers-reduced-motion: no-preference) {
  .neon-btn-pulse {
    animation: pulseGlow 3.2s ease-in-out infinite;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(244, 227, 51, 0.5), 
                0 0 24px rgba(244, 227, 51, 0.3), 
                0 0 60px rgba(244, 227, 51, 0.1);
  }
  50% {
    box-shadow: 0 0 14px rgba(244, 227, 51, 0.75), 
                0 0 36px rgba(244, 227, 51, 0.5), 
                0 0 80px rgba(244, 227, 51, 0.22);
  }
}

/* خلفية الطوب الدقيقة التي تعكس اللوجو والخلفية */
.brick-bg {
  background-color: #0A0D24;
  background-image:
    repeating-linear-gradient(0deg, rgba(244, 227, 51, 0.035) 0px, rgba(244, 227, 51, 0.035) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 92px);
}

/* ==========================================================================
   حاويات الصور والـ Placeholders المتجاوبة
   ========================================================================== */
.image-slot {
  background: repeating-linear-gradient(45deg, #141A3F, #141A3F 10px, #171d47 10px, #171d47 20px);
  border: 1.5px dashed #2A335F;
  position: relative;
  overflow: hidden;
}

.image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* اخفاء الصورة المعطوبة وتفعيل الفولباك التلقائي */
.img-fallback-active {
  display: flex !important;
}

/* ==========================================================================
   الأكورديون والقوائم المنسدلة (Accordion)
   ========================================================================== */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-panel.open {
  max-height: 800px;
}

.accordion-chevron {
  transition: transform 0.3s ease;
}

.accordion-chevron.rot {
  transform: rotate(180deg);
}

/* ==========================================================================
   شريط التمرير وشريط التصفح (Scrollbar & Animations)
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0A0D24;
}

::-webkit-scrollbar-thumb {
  background: #2A335F;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #F4E333;
}

.snap-row {
  scroll-snap-type: x mandatory;
}

.snap-item {
  scroll-snap-align: start;
}

[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   التوافق المتقدم مع أزرار الواتساب والاتصال
   ========================================================================== */
.btn-whatsapp {
  background-color: transparent;
  color: #25D366;
  border: 2px solid #25D366;
  transition: all 0.25s ease;
}

.btn-whatsapp:hover {
  background-color: rgba(37, 211, 102, 0.12);
  border-color: #25D366;
  transform: translateY(-1px);
}

.brand-chip {
  transition: all 0.2s ease;
}

.brand-chip:hover {
  transform: translateY(-2px);
}