/* ═══════════════════════════════════════════════════════
   LUXE DRIVE DUBAI — Design System
   Shared across all pages
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --gold:      #c9a84c;
  --gold-l:    #e2c96e;
  --gold-d:    #9a7a2e;
  --black:     #0a0a0a;
  --dark:      #0e0e13;
  --dark2:     #161620;
  --dark3:     #1e1e28;
  --dark4:     #252530;
  --white:     #f3f1ec;
  --white2:    #e6e2d8;
  --gray:      #86867e;
  --gray2:     #4e4e4a;
  --font-d:    'Cormorant Garamond', Georgia, serif;
  --font-b:    'Montserrat', Arial, sans-serif;
  --r:         4px;
  --r-lg:      10px;
  --nav-h:     72px;
  --max-w:     1360px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); background:var(--dark); color:var(--white); overflow-x:hidden; line-height:1.6; }
img  { max-width:100%; display:block; }
a    { color:inherit; }

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 4rem;
  background:rgba(14,14,19,0.95); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(201,168,76,0.12);
}
.nav-logo  { font-family:var(--font-d); font-size:1.75rem; color:var(--gold); letter-spacing:5px; text-decoration:none; font-weight:500; }
.nav-links { display:flex; align-items:center; gap:2.5rem; }
.nav-link  { font-size:10px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:var(--white2); text-decoration:none; transition:color .2s; background:none; border:none; cursor:pointer; font-family:var(--font-b); }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.nav-cta   { background:var(--gold); color:var(--black); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:10px 26px; border:none; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:background .2s; font-family:var(--font-b); white-space:nowrap; }
.nav-cta:hover { background:var(--gold-l); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--r); cursor:pointer; font-family:var(--font-b); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; transition:all .25s; }
.btn-primary  { background:var(--gold); color:var(--black); font-size:11px; padding:13px 36px; }
.btn-primary:hover  { background:var(--gold-l); transform:translateY(-2px); }
.btn-outline  { background:transparent; color:var(--white); font-size:11px; padding:12px 34px; border:1px solid rgba(255,255,255,0.2); }
.btn-outline:hover  { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-whatsapp { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; font-size:12px; padding:15px; width:100%; }
.btn-whatsapp:hover { opacity:.88; transform:translateY(-2px); }
.btn-sm { font-size:10px !important; padding:8px 18px !important; }
.btn-ghost { background:rgba(255,255,255,0.05); color:var(--gray); font-size:10px; padding:8px 16px; border:1px solid rgba(255,255,255,0.08); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* ── FORM ────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gray); }
.form-input { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r); padding:11px 14px; color:var(--white); font-family:var(--font-b); font-size:13px; transition:border-color .2s; width:100%; }
.form-input:focus { outline:none; border-color:var(--gold); background:rgba(201,168,76,0.04); }
.form-input option { background:var(--dark2); color:var(--white); }
textarea.form-input { resize:vertical; min-height:110px; }
select.form-input   { cursor:pointer; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.eyebrow    { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.5rem; }
.title      { font-family:var(--font-d); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:300; color:var(--white); line-height:1.15; }
.title em   { font-style:italic; color:var(--gold); }
.subtitle   { font-size:13px; color:var(--gray); line-height:1.85; margin-top:.5rem; max-width:520px; }

/* ── BADGES ──────────────────────────────────────────────── */
.badge      { display:inline-block; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; padding:4px 12px; border-radius:2px; }
.badge-gold { background:var(--gold); color:var(--black); }
.badge-avail{ background:rgba(26,138,74,0.15); color:#2ecc71; border:1px solid rgba(46,204,113,0.3); }
.badge-hot  { background:rgba(192,57,43,0.15); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }

/* ── STATUS PILLS ────────────────────────────────────────── */
.pill          { display:inline-block; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:20px; font-weight:600; }
.pill-pending  { background:rgba(201,168,76,0.12); color:var(--gold); border:1px solid rgba(201,168,76,0.3); }
.pill-confirmed{ background:rgba(26,138,74,0.12); color:#2ecc71; border:1px solid rgba(26,138,74,0.3); }
.pill-active   { background:rgba(52,152,219,0.12); color:#3498db; border:1px solid rgba(52,152,219,0.3); }
.pill-completed{ background:rgba(155,89,182,0.12); color:#9b59b6; border:1px solid rgba(155,89,182,0.3); }
.pill-cancelled{ background:rgba(192,57,43,0.12); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }

/* ── TOAST ───────────────────────────────────────────────── */
#toast { position:fixed; bottom:2rem; right:2rem; z-index:9999; padding:1rem 1.5rem; border-radius:var(--r); font-size:13px; font-weight:500; transform:translateY(120px); opacity:0; transition:all .4s cubic-bezier(.34,1.56,.64,1); max-width:360px; pointer-events:none; }
#toast.show    { transform:translateY(0); opacity:1; }
#toast.success { background:#0f2119; border:1px solid rgba(46,204,113,0.4); color:#2ecc71; }
#toast.error   { background:#21100f; border:1px solid rgba(231,76,60,0.4); color:#e74c3c; }
#toast.info    { background:#0f1521; border:1px solid rgba(52,152,219,0.4); color:#3498db; }

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:2000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--dark2); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-lg); padding:2.5rem; width:100%; max-width:600px; max-height:92vh; overflow-y:auto; }
.modal-box h3 { font-family:var(--font-d); font-size:1.8rem; font-weight:400; margin-bottom:1.5rem; }
.modal-grid   { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.modal-full   { grid-column:1/-1; }
.modal-actions{ display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,0.06); }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background:#06060a; border-top:1px solid rgba(255,255,255,0.05); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; padding:5rem 4rem 3rem; max-width:var(--max-w); margin:0 auto; }
.footer-brand { font-family:var(--font-d); font-size:1.8rem; color:var(--gold); letter-spacing:4px; margin-bottom:1rem; }
.footer-desc  { font-size:12px; color:var(--gray); line-height:1.9; }
.footer-col-title { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.footer-link  { display:block; font-size:12px; color:var(--gray); margin-bottom:.6rem; text-decoration:none; transition:color .2s; }
.footer-link:hover { color:var(--white); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.05); padding:1.5rem 4rem; display:flex; justify-content:space-between; align-items:center; max-width:var(--max-w); margin:0 auto; }
.footer-copy  { font-size:11px; color:var(--gray2); }

/* ── WA FLOAT BUTTON ─────────────────────────────────────── */
.wa-float { position:fixed; bottom:2rem; left:2rem; z-index:800; width:56px; height:56px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 4px 24px rgba(37,211,102,0.45); transition:transform .25s, box-shadow .25s; }
.wa-float:hover { transform:scale(1.12); box-shadow:0 6px 32px rgba(37,211,102,0.6); }
.wa-float svg { width:28px; height:28px; fill:white; }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar       { width:4px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--gray2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-d); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav { padding:0 2rem; }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 2rem; }
  .footer-bottom { padding:1.25rem 2rem; }
}
@media (max-width: 680px) {
  .nav-links .nav-link:not(.nav-cta) { display:none; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
}


/* Media helpers */
.media-cover{width:100%;height:100%;object-fit:cover;display:block;}
.media-contain{width:100%;height:100%;object-fit:contain;display:block;}