/* ============ متغيرات وأساسيات ============ */
:root {
  --indigo: #2E3192;
  --indigo-dark: #1B1E5C;
  --teal: #00B8A9;
  --teal-dark: #009688;
}

* { scrollbar-width: thin; scrollbar-color: #00B8A9 #0f172a; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #00B8A9; border-radius: 8px; }

body { -webkit-tap-highlight-color: transparent; }

.gate-lang-btn.active-choice,
.gate-curr-btn.active-choice {
  border-color: #00B8A9 !important;
  background: linear-gradient(90deg, rgba(46,49,146,.35), rgba(0,184,169,.35));
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .35s ease-out; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,169,.5); }
  50% { box-shadow: 0 0 0 10px rgba(0,184,169,0); }
}
.pulse-glow { animation: pulseGlow 2s infinite; }

/* شبكة الخلفية الإلكترونية */
.bg-grid {
  background-image:
    linear-gradient(rgba(0,184,169,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,184,169,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero-glow {
  background: radial-gradient(600px circle at 20% 0%, rgba(46,49,146,.45), transparent 60%),
              radial-gradient(600px circle at 90% 30%, rgba(0,184,169,.35), transparent 60%);
}

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px rgba(0,184,169,.35); border-color: rgba(0,184,169,.6); }

.badge-discount {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.badge-unavailable {
  background: rgba(100,116,139,.5);
}

/* أزرار عائمة (واتساب / ديسكورد) */
.floating-actions { position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 10px; }

/* الشات بوت */
#chatbot-panel { transition: all .25s ease; }
.chat-msg-bubble { max-width: 85%; }
.chat-btn-option {
  border: 1px solid rgba(0,184,169,.5);
  transition: background .2s;
}
.chat-btn-option:hover { background: rgba(0,184,169,.18); }

/* لودر */
.loader-spin { border: 3px solid rgba(255,255,255,.15); border-top-color: #00B8A9; border-radius: 50%; width: 28px; height: 28px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* تايبات إنجليزي */
.font-en { font-family: 'Poppins', sans-serif; }

/* toast */
#toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast-item { background: #1e293b; border: 1px solid rgba(0,184,169,.5); padding: 10px 20px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: fadeIn .25s ease; }

input, select, textarea { color: inherit; }
input::placeholder, textarea::placeholder { color: #64748b; }


/* ---------- Rotation branding + video background ---------- */
.site-background-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  filter: saturate(1.05) contrast(1.05);
}

.site-background-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 184, 169, 0.10), transparent 38%),
    rgba(2, 6, 23, 0.70);
}

#app {
  position: relative;
  z-index: 2;
}

.gate-logo {
  width: min(250px, 72vw);
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 184, 169, 0.25));
}

.brand-logo {
  width: auto;
  object-fit: contain;
  object-position: center;
}

.brand-logo-header {
  width: 42px;
  height: 34px;
}

.brand-logo-footer {
  width: 42px;
  height: 32px;
}

.admin-logo {
  width: 170px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0, 184, 169, 0.25));
}

.admin-logo-sm {
  width: 44px;
  height: 32px;
  object-fit: contain;
}

.hero-video-section {
  min-height: 430px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.78)),
    radial-gradient(circle at center, rgba(0, 184, 169, 0.10), transparent 60%);
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-background-video {
    display: none;
  }
}

.hero-logo {
  width: min(420px, 78vw);
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(0, 184, 169, 0.22));
}