:root{
    --navy-950:#0b1526;
    --navy-900:#0f172a;
    --navy-800:#132444;
    --navy-700:#1e3a8a;
    --gold:#d4af37;
    --gold-soft:#e8cf7a;
}

body.lang-ar{ font-family:'Tajawal', sans-serif; direction:rtl; }
body.lang-en{ font-family:'Poppins', sans-serif; direction:ltr; }
.font-display{ font-family:'Playfair Display','Tajawal',serif; }

body.lang-ar .en-text{ display:none !important; }
body.lang-en .ar-text{ display:none !important; }
body.lang-ar .rtl-flip{ display:inline-block; transform:scaleX(-1); }

/* ---------------- Loader ---------------- */
#loader{
    position:fixed; inset:0; z-index:99999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px; box-sizing:border-box; text-align:center;
    background:radial-gradient(1000px 500px at 50% -10%, #1e3a8a66, transparent), linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
    transition:opacity .9s ease, visibility .9s ease;
}
.loader-inner{ width:100%; max-width:460px; margin:0 auto; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.loader-ring{ position:relative; width:clamp(210px, 62vw, 288px); height:clamp(210px, 62vw, 288px); margin-bottom:30px; }
.loader-ring .ring-track{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.10); }
.loader-ring .ring-outer{ position:absolute; inset:-14px; border-radius:50%; border:1px dashed rgba(232,207,122,.25); animation:ringspin 14s linear infinite reverse; }
.loader-ring .ring-spin{ position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--gold); border-right-color:var(--gold-soft); animation:ringspin 1.6s cubic-bezier(.5,.05,.5,.95) infinite; }
.loader-ring .ring-spin2{ position:absolute; inset:10px; border-radius:50%; border:2px solid transparent; border-bottom-color:rgba(232,207,122,.55); animation:ringspin 2.3s linear infinite reverse; }
.loader-ring .ring-logo{ position:absolute; inset:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 0 40px rgba(212,175,55,.15), inset 0 0 30px rgba(0,0,0,.25); animation:logoPulse 2.6s ease-in-out infinite; }
.loader-ring img{ width:68%; height:68%; object-fit:contain; filter:drop-shadow(0 4px 18px rgba(0,0,0,.35)); }
@keyframes logoPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes ringspin{ to{ transform:rotate(360deg);} }
.loader-title{ font-family:'Playfair Display','Tajawal',serif; font-weight:700; color:#fff; font-size:clamp(1.3rem,4vw,1.6rem); margin:0 0 8px; letter-spacing:.3px; }
.loader-sub{ color:#93c5fd; font-size:.85rem; font-weight:600; max-width:320px; line-height:1.6; }
.loader-track{ width:220px; max-width:70vw; height:3px; border-radius:9999px; background:rgba(255,255,255,.12); margin-top:28px; overflow:hidden; position:relative; }
.loader-track::after{ content:''; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:linear-gradient(90deg, transparent, var(--gold), transparent); animation:loaderbar 1.6s ease-in-out infinite; }
.loader-dots{ margin-top:16px; display:flex; gap:6px; }
.loader-dots span{ width:6px; height:6px; border-radius:50%; background:var(--gold-soft); opacity:.3; animation:dotPulse 1.4s ease-in-out infinite; }
.loader-dots span:nth-child(2){ animation-delay:.2s; }
.loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dotPulse{ 0%,100%{ opacity:.25; transform:scale(1); } 50%{ opacity:1; transform:scale(1.3); } }
@keyframes loaderbar{ 0%{left:-40%;} 100%{left:100%;} }

/* ---------------- Hero ---------------- */
.premium-gradient{ background:radial-gradient(1200px 600px at 15% -10%, #1e3a8a55, transparent), linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-700) 100%); }
.gold-accent{ color:var(--gold); }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.float-slow{ animation:floatSlow 6s ease-in-out infinite; }

/* ---------------- Fade utility ---------------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.fade-up{ animation:fadeUp .4s ease both; }

/* ---------------- Step dots ---------------- */
.step-dots{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:2rem; }
.step-dot{ height:6px; border-radius:9999px; background:#e2e8f0; width:16px; transition:all .3s ease; }
.step-dot.active{ width:32px; background:var(--gold); }
.step-dot.done{ background:#94a3b8; }

/* ---------------- Flip cards ---------------- */
.flip-card{ perspective:1000px; height:168px; cursor:pointer; }
.flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.2,.2,1); }
.flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-front, .flip-back{ position:absolute; inset:0; backface-visibility:hidden; border-radius:1rem; border-width:2px; border-style:solid; padding:1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; }
.flip-front{ background:#fff; border-color:#e2e8f0; }
.flip-front.selected{ background:var(--navy-900); border-color:var(--gold); }
.flip-back{ transform:rotateY(180deg); background:var(--navy-900); border-color:var(--gold); }
.flip-back p{ font-size:.75rem; color:#bfdbfe; line-height:1.5; }
.flip-icon-wrap{ width:48px; height:48px; border-radius:.75rem; display:flex; align-items:center; justify-content:center; background:#f1f5f9; }
.flip-front.selected .flip-icon-wrap{ background:var(--gold); }
.flip-check{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; }
body.lang-ar .flip-check{ right:auto; left:8px; }

/* ---------------- Chips ---------------- */
.chip{ padding:.5rem 1rem; border-radius:9999px; font-size:.875rem; font-weight:600; border:1px solid #e2e8f0; background:#fff; color:#475569; transition:all .15s ease; cursor:pointer; }
.chip.active{ background:var(--gold-soft); border-color:var(--gold); color:#1e293b; }
.chip:hover{ border-color:var(--gold); }

/* ---------------- Cards / inputs ---------------- */
.wizard-card{ background:#fff; border-radius:1.5rem; box-shadow:0 20px 50px rgba(0,0,0,.08); border:1px solid #f1f5f9; padding:1.75rem; }
@media(min-width:768px){ .wizard-card{ padding:2.5rem; } }
.field-input{ width:100%; border:2px solid #e2e8f0; border-radius:.75rem; padding:.75rem 1rem; outline:none; transition:border-color .15s ease; background:#fff; }
.field-input:focus{ border-color:var(--gold); }
.field-label{ font-size:.7rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:.35rem; }

/* ---------------- City tags ---------------- */
.city-tag{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:9999px; border:2px solid #e2e8f0; font-weight:600; font-size:.85rem; cursor:pointer; background:#fff; color:#475569; }
.city-tag.active{ border-color:var(--gold); background:var(--gold-soft); color:#1e293b; }
.destination-block{ border:2px solid #e2e8f0; border-radius:1.25rem; padding:1.25rem; background:#fafafa; position:relative; }
.activity-card{ background:#f0fdf4; border:1px solid #bbf7d0; border-radius:.75rem; padding:.9rem 1.1rem; }

/* ---------------- Family cards ---------------- */
.family-card{ border:2px solid #e2e8f0; border-radius:1rem; padding:1rem; position:relative; background:#f8fafc; }
.counter-btn{ width:32px; height:32px; border-radius:9999px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.counter-btn.minus{ background:#fff; border:1px solid #cbd5e1; color:#475569; }
.counter-btn.plus{ background:var(--navy-900); color:#fff; }

/* ---------------- Domestic options ---------------- */
.domestic-item{ display:flex; align-items:center; gap:.75rem; background:#f0f9ff; border:1px solid #bae6fd; border-radius:.75rem; padding:.75rem 1rem; }

/* ---------------- Admin ---------------- */
.badge{ font-size:.7rem; font-weight:700; padding:.25rem .65rem; border-radius:9999px; border:1px solid; }
.badge-new{ background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.badge-contacted{ background:#fef3c7; color:#b45309; border-color:#fde68a; }
.badge-confirmed{ background:#d1fae5; color:#047857; border-color:#a7f3d0; }
.badge-cancelled{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }

.admin-sidebar a.active{ background:var(--navy-800); color:#fff; }

/* Utility */
.scrollbar-thin::-webkit-scrollbar{ width:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
