/* ===================== Sadran Safar — Design System ===================== */
/* Palette: Brand identity red (#EE212E) reserved strictly for CTA / Highlight / Price / Active-state;
   Dark Navy = structural complementary color used broadly for icons, headings, chrome;
   White + very light gray drive the main canvas. Gradients/shadows kept minimal for a premium feel. */
:root{
  --brand: #13294B;        /* Navy — structural/complementary color (icons, section chrome, borders) */
  --brand-dark: #0B1B33;
  --brand-darker: #060F1F;
  --brand-light: #EAF0F7;
  --accent: #EE212E;       /* Brand identity red — CTA / Highlight / Price / Active state ONLY */
  --accent-dark: #C81824;
  --accent-light: #FDEAEA;
  --ink: #14181F;
  --ink-soft: #4B5563;
  --muted: #8A93A3;
  --line: #E7E9EE;
  --surface: #FFFFFF;
  --bg: #F7F8FA;
  --teal: #0B3B4B;
  --teal-dark: #082B37;
  --gold: #D8B26A;
  --success: #13294B;      /* Was green (#16A34A) — replaced site-wide with brand navy per request (WhatsApp button intentionally excluded, stays brand green) */
  --danger: #EE212E;
  --danger-light: #FDEAEA;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 3px rgba(20,24,31,.05);
  --shadow-md: 0 4px 16px rgba(20,24,31,.07);
  --shadow-lg: 0 10px 30px rgba(20,24,31,.10);
}

@font-face{
  font-family:'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight:600; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Vazirmatn','Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--brand); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#D7DBE3; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

.container-x{ max-width:1360px; margin-inline:auto; padding-inline:20px; }
@media(min-width:1024px){ .container-x{ padding-inline:32px; } }

.text-brand{ color:var(--brand); }
.bg-brand{ background:var(--brand); }
.border-brand{ border-color:var(--brand); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14.5px; border-radius:14px; padding:12px 22px;
  transition:all .18s ease; white-space:nowrap; cursor:pointer; border:1.5px solid transparent;
}
/* Primary CTA — brand identity red, used deliberately and sparingly per section */
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(238,33,46,.22); }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 10px 22px rgba(238,33,46,.30); }
.btn-gold{ background:linear-gradient(135deg,#E7C77E,#C99B3E); color:#3a2a06; }
.btn-gold:hover{ filter:brightness(1.05); transform:translateY(-1px); }
/* Secondary action — navy outline, structural */
.btn-outline{ background:transparent; border-color:var(--brand); color:var(--brand); }
.btn-outline:hover{ background:var(--brand-light); }
.btn-ghost{ background:#fff; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-sm{ padding:8px 16px; font-size:13px; border-radius:10px; }
.btn-lg{ padding:16px 30px; font-size:16px; border-radius:16px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.card-hover{ transition:transform .25s ease, box-shadow .25s ease; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; line-height:1.6; }
.badge-brand{ background:var(--brand); color:#fff; }
/* Highlight badge — brand identity red, reserved for: پیشنهاد صدران / VIP / تخفیف / محبوب */
.badge-accent{ background:var(--accent); color:#fff; }
.badge-outline{ background:#fff; color:var(--brand); border:1.5px solid var(--brand); }
.badge-dark{ background:rgba(20,24,31,.72); color:#fff; backdrop-filter:blur(4px); }
.badge-gold{ background:linear-gradient(135deg,#EFD9A3,#C99B3E); color:#3a2a06; }
.badge-success{ background:var(--success); color:#fff; }
.badge-danger{ background:var(--danger); color:#fff; }
.badge-danger-soft{ background:var(--danger-light); color:var(--danger); }
.badge-soft{ background:#F1F2F5; color:var(--ink-soft); }
.badge-booking{ background:#003580; color:#fff; }
.badge-white{ background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08); }

/* Price — brand identity red, used only for the price figure itself */
.price-tag{ color:var(--accent); font-weight:800; }

/* Tour / Hotel card */
.media-card{ position:relative; overflow:hidden; border-radius:var(--radius-md); }
.media-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.media-card:hover img{ transform:scale(1.06); }
.media-overlay-top{ position:absolute; inset-inline:0; top:0; padding:12px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2; }
.media-overlay-bottom{ position:absolute; inset-inline:0; bottom:0; padding:12px; display:flex; justify-content:space-between; align-items:flex-end; z-index:2; }
.media-gradient::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%); pointer-events:none; }

/* Tour card meta row — hotel-count chip (right) + airline logo badge (left), no redundant text label */
.tour-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:#F7F8FA; border-radius:12px; padding:8px 10px; }
.tour-meta-item{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.tour-meta-item i{ color:var(--brand); font-size:12px; }
.tour-card .media-overlay-bottom .badge-dark{ font-weight:700; }

/* Hotel card score/transfer chips — matches reference design (peach rating pill, dark navy score box, transfer capsule) */
.hotel-score-chip{ display:inline-flex; align-items:center; gap:4px; background:#FDECC8; color:#8A5A00; font-weight:800; font-size:12px; padding:5px 10px; border-radius:999px; }
.hotel-score-chip i{ color:#E8A200; font-size:10px; }
.hotel-transfer-pill{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.96); color:var(--ink-soft); font-weight:700; font-size:11px; padding:5px 10px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.10); }
/* Negative "no transfer" state — same pill shape, red-tinted so it clearly reads as an absence, not a feature */
.hotel-transfer-pill-off{ background:rgba(255,255,255,.96); color:var(--danger); }
.hotel-score-box{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px; padding:0 8px; background:var(--brand); color:#fff; font-weight:800; font-size:13px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.20); }

/* Board-type label pill (e.g. "HALF BOARD", "BB", "ALL INCLUSIVE") shown on hotel cards */
.badge-board{ display:inline-flex; align-items:center; gap:5px; background:var(--brand-light); color:var(--brand); font-weight:800; font-size:10.5px; letter-spacing:.03em; padding:4px 10px; border-radius:8px; }

/* Booking.com-style rating widget — clearly branded (real Booking.com navy #003580 + wordmark),
   not just a plain colored box with a number, per explicit user request. */
.badge-booking-widget{ display:inline-flex; align-items:center; gap:8px; }
.badge-booking-box{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 6px; background:#003580; color:#fff; font-weight:800; font-size:14px; border-radius:6px 6px 6px 0; box-shadow:0 2px 6px rgba(0,53,128,.30); }
.badge-booking-text{ display:flex; flex-direction:column; line-height:1.3; }
.badge-booking-text b{ font-size:12px; color:var(--ink); }
.badge-booking-brand{ font-size:10px; font-weight:800; color:#003580; letter-spacing:.01em; }

/* ===== Flight info widget — redesigned per reference (Mahan Air IST↔IKA style):
   a two-tone card: light meta column (dates/baggage/flight code) + dark-navy route diagram
   with large airport codes, city names, plane icon, and a distinct airline badge. Replaces the
   previous plain all-navy .flight-card look. ===== */
.flight-widget{ display:grid; grid-template-columns:1fr; gap:0; border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(19,41,75,.14); background:#fff; }
@media (min-width:640px){ .flight-widget{ grid-template-columns:200px 1fr; } }
.flight-widget-meta{ background:#F7F8FA; padding:18px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.flight-widget-meta-item{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-soft); font-weight:600; line-height:1.7; }
.flight-widget-meta-item i{ color:var(--accent); font-size:12px; margin-top:2px; }
.flight-widget-route{ background:linear-gradient(155deg, var(--brand) 0%, var(--brand-darker) 100%); padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; }
.flight-widget-airline{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; shrink:0; }
.flight-widget-airline-name{ font-size:11.5px; font-weight:800; color:#fff; white-space:nowrap; }
.flight-widget-airline-tag{ font-size:10px; color:#9FADC7; }
.flight-widget-code{ font-size:clamp(26px,4vw,34px); font-weight:800; color:#fff; letter-spacing:.02em; line-height:1; }
.flight-widget-city{ font-size:12px; color:#EAF0FA; font-weight:700; margin-top:6px; }
.flight-widget-sub{ font-size:10.5px; color:#9FADC7; margin-top:2px; }
.flight-widget-mid{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; padding:0 6px; min-width:60px; }
.flight-widget-line{ width:100%; display:flex; align-items:center; }
.flight-widget-line .dash{ flex:1; border-top:1.5px dashed rgba(255,255,255,.3); }
.flight-widget-direct{ font-size:9.5px; color:#9FADC7; margin-top:4px; white-space:nowrap; }

/* Pricing matrix table (room-type x hotel-pairing) — clear, readable table matching the
   Russia-tour / Antalya-tour reference design. */
.pricing-matrix{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.pricing-matrix thead th{ background:var(--brand); color:#fff; font-weight:800; padding:12px 14px; text-align:center; white-space:nowrap; }
.pricing-matrix thead th:first-child{ text-align:right; border-radius:12px 0 0 0; }
.pricing-matrix thead th:last-child{ border-radius:0 12px 0 0; }
[dir="rtl"] .pricing-matrix thead th:first-child{ border-radius:0 12px 0 0; }
[dir="rtl"] .pricing-matrix thead th:last-child{ border-radius:12px 0 0 0; }
.pricing-matrix tbody td{ padding:12px 14px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
.pricing-matrix tbody td:first-child{ text-align:right; font-weight:700; color:var(--ink); background:var(--bg); white-space:normal; }
.pricing-matrix tbody tr:nth-child(even) td:not(:first-child){ background:#FAFBFC; }
.pricing-matrix tbody tr:last-child td:first-child{ border-radius:0 0 0 12px; }
.pricing-matrix tbody tr:last-child td:last-child{ border-radius:0 0 12px 0; }
[dir="rtl"] .pricing-matrix tbody tr:last-child td:first-child{ border-radius:0 0 12px 0; }
[dir="rtl"] .pricing-matrix tbody tr:last-child td:last-child{ border-radius:0 0 0 12px; }
.pricing-matrix-price{ font-weight:800; color:var(--accent); }
.pricing-matrix-wrap{ overflow-x:auto; border-radius:16px; box-shadow:var(--shadow-md); }

/* Old flat flight-card kept for backward compatibility with any remaining usage */
.flight-card{ background:linear-gradient(155deg, var(--brand) 0%, var(--brand-darker) 100%); border-radius:18px; padding:20px; box-shadow:0 6px 20px rgba(19,41,75,.18); }
.flight-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.flight-card-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:11.5px; color:#B7C3DB; }

/* ---------- Inputs ---------- */
.field{ width:100%; border:1.5px solid var(--line); border-radius:14px; padding:13px 16px; font-size:14.5px; background:#fff; transition:border-color .15s, box-shadow .15s; color:var(--ink); }
.field:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(19,41,75,.10); }
.field-label{ font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; display:block; }

/* Chips — active state uses brand identity red per design rule */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft); background:#fff; cursor:pointer; transition:.15s; white-space:nowrap; }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip:hover:not(.active){ border-color:var(--brand); color:var(--brand); }

/* Section headings — clear hierarchy, generous Persian line-height */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.02em; }
.eyebrow::before{ content:''; width:22px; height:3px; background:var(--accent); border-radius:99px; }
.section-title{ font-size:clamp(22px,3vw,32px); font-weight:800; color:var(--ink); line-height:1.4; }
.section-sub{ color:var(--ink-soft); font-size:15px; line-height:2; }

/* Standard section rhythm */
.section-gap{ margin-top:88px; }
@media(max-width:767px){ .section-gap{ margin-top:56px; } }

/* Header — active nav item uses brand identity red (active-state rule) */
.header-nav a{ position:relative; color:var(--ink-soft); font-weight:500; font-size:14.5px; transition:color .15s; }
.header-nav a:hover{ color:var(--brand); }
.header-nav a.active{ color:var(--accent); }
.header-nav a.active::after{ content:''; position:absolute; bottom:-22px; inset-inline:0; height:2px; background:var(--accent); border-radius:2px; }

/* Mega-menu — two/multi-column country → destination dropdown for Tour/Hotel nav items.
   IMPORTANT: the hover-to-open behavior below is scoped to `(hover:hover) and (pointer:fine)`
   (real mouse devices) only. Without this guard, touch/tablet browsers that still match the
   `lg:` desktop breakpoint (e.g. iPad, some Android tablets, some hybrid laptops) fall into the
   classic ":hover requires two taps" trap: the FIRST tap on the "تورها"/"هتل ها" link only
   triggers the :hover state (opening the panel) instead of following the href, so the tour/hotel
   main-menu link appears completely broken ("تور در منو اصلی کار نمیکنه"). On such devices this
   rule block no longer applies, so the anchor's native href navigates immediately on first tap
   — exactly like every other plain nav link — while the panel itself is still reachable via the
   caret/label hover on real desktops. */
.mega-trigger{ position:relative; }
.mega-trigger > a{ display:flex; align-items:center; gap:6px; }
.mega-caret{ transition:transform .18s ease; color:var(--muted); }
.mega-panel{
  position:absolute; top:100%; inset-inline-start:50%; transform:translateX(50%) translateY(8px);
  min-width:640px; max-width:820px;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 48px rgba(20,24,31,.16);
  padding:18px; z-index:70;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
@media (hover:hover) and (pointer:fine){
  .mega-trigger:hover .mega-caret{ transform:rotate(180deg); color:var(--brand); }
  .mega-trigger:hover .mega-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(50%) translateY(0); }
}
.mega-panel-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 20px; }
.mega-col-title{ display:block; font-weight:800; font-size:13.5px; color:var(--brand); padding:8px 10px; border-radius:10px; background:var(--brand-light); margin-bottom:6px; }
.mega-col-title:hover{ background:var(--brand); color:#fff; }
.mega-col ul{ display:flex; flex-direction:column; }
.mega-col ul li a{ display:block; padding:7px 10px; border-radius:8px; font-size:13px; color:var(--ink-soft); }
.mega-col ul li a:hover{ background:#F5F6F8; color:var(--brand); }

/* Footer — dark navy, matching the site's own brand palette (no more teal) */
.footer-sadran{ background: radial-gradient(1200px 400px at 15% -10%, rgba(255,255,255,.05), transparent), linear-gradient(180deg, var(--brand) 0%, var(--brand-darker) 100%); color:#D7DEE8; }
.footer-sadran a{ color:#AEB9CA; transition:color .15s; }
.footer-sadran a:hover{ color:#fff; }
.footer-social{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:.2s; }
.footer-social:hover{ background:var(--accent); }
/* Transparent, uniformly-sized trust/certification badges — previously a solid white box made the
   logos look like ugly mismatched stickers against the dark footer; now the logos sit directly on
   the footer background at one consistent height/width so they read as a clean, unified row. */
.trust-badge{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:6px 12px; display:flex; align-items:center; justify-content:center; height:48px; width:120px; flex-shrink:0; }
.trust-badge img{ max-height:34px; max-width:96px; width:auto; height:auto; object-fit:contain; }

/* Mobile bottom nav */
.mobile-nav{ position:fixed; bottom:0; inset-inline:0; z-index:50; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.06); }
.mobile-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--muted); padding:10px 0; flex:1; }
.mobile-nav-item.active{ color:var(--brand); }

/* ================= 3D Orbital Hero (h3d) =================
   Motion language: slides travel through a 1500px perspective stage with rotateY + translateZ
   cover-flow transitions. The background photo lives at -140px Z (slower, with Ken-Burns drift),
   while glass stat cards float at +60/+110px Z. All layers are steered by lerped mouse parallax
   driven from /static/hero3d.js via the --mx/--my custom properties. Respects reduced-motion. */
.h3d{ padding-top:16px; --mx:0; --my:0; }
@media(min-width:768px){ .h3d{ padding-top:24px; } }
.h3d-scene{
  position:relative; height:min(88vh,660px); min-height:480px; border-radius:28px; overflow:hidden;
  background:#060F1F; box-shadow:0 32px 70px rgba(6,15,31,.28); perspective:1500px; perspective-origin:50% 42%;
}
@media(max-width:767px){ .h3d-scene{ height:540px; min-height:520px; border-radius:22px; } }
.h3d-tilt{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateY(calc(var(--mx) * 3.4deg)) rotateX(calc(var(--my) * -2.4deg));
  will-change:transform;
}
/* ---- slides + 3D cover-flow states ---- */
.h3d-slide{
  position:absolute; inset:0; transform-style:preserve-3d; visibility:hidden; pointer-events:none;
  opacity:0; transform:translateZ(-460px) translateX(-26%) rotateY(30deg) scale(.9);
  transition:transform 1.1s cubic-bezier(.22,.85,.26,1), opacity .85s ease, filter 1.1s ease;
  filter:brightness(.5) saturate(.85);
}
.h3d-slide.is-active{
  visibility:visible; pointer-events:auto; opacity:1; z-index:2;
  transform:translateZ(0) translateX(0) rotateY(0) scale(1); filter:brightness(1) saturate(1);
}
.h3d-slide.is-exit{
  visibility:visible; z-index:1; opacity:0;
  transform:translateZ(-460px) translateX(26%) rotateY(-30deg) scale(.9);
}
/* ---- background layer (negative Z) ---- */
.h3d-bg{ position:absolute; inset:-9%; transform:translateZ(-140px); will-change:transform; }
.h3d-bg img{
  width:100%; height:100%; object-fit:cover;
  animation:h3dZoom 24s ease-in-out infinite alternate; will-change:transform;
}
@keyframes h3dZoom{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.1) translate(-1.4%,-1%); } }
.h3d-shade{
  position:absolute; inset:0; transform:translateZ(-60px);
  background:
    linear-gradient(180deg, rgba(6,15,31,.28) 0%, rgba(6,15,31,.12) 34%, rgba(6,15,31,.86) 100%),
    linear-gradient(270deg, rgba(6,15,31,.5) 0%, transparent 42%);
}
/* ---- copy + glass cards ---- */
.h3d-inner{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:0 clamp(20px,5vw,64px) clamp(88px,12vh,120px); transform-style:preserve-3d; }
@media(max-width:767px){ .h3d-inner{ padding-bottom:104px; } }
.h3d-copy{ max-width:640px; transform-style:preserve-3d; }
.h3d-copy > *{
  opacity:0; transform:translateY(34px) translateZ(0);
  transition:opacity .7s ease, transform .85s cubic-bezier(.22,.85,.26,1);
}
.h3d-slide.is-active .h3d-copy > *{ opacity:1; transform:translateY(0) translateZ(var(--dz,0px)); }
.h3d-slide.is-active .h3d-copy > *:nth-child(1){ transition-delay:.22s; }
.h3d-slide.is-active .h3d-copy > *:nth-child(2){ transition-delay:.32s; }
.h3d-slide.is-active .h3d-copy > *:nth-child(3){ transition-delay:.42s; }
.h3d-slide.is-active .h3d-copy > *:nth-child(4){ transition-delay:.52s; }
.h3d-chip{
  display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:8px 16px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); margin-bottom:16px;
}
.h3d-chip i{ color:var(--gold, #D8B26A); }
.h3d-title{ color:#fff; font-weight:900; font-size:clamp(26px,4.2vw,50px); line-height:1.3; letter-spacing:-.5px; margin-bottom:14px; text-shadow:0 4px 30px rgba(0,0,0,.35); }
.h3d-sub{ color:rgba(255,255,255,.85); font-size:clamp(13px,1.3vw,16.5px); line-height:2; margin-bottom:26px; max-width:520px; }
.h3d-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.h3d-cards{ position:absolute; top:26px; inset-inline-end:26px; display:none; flex-direction:column; gap:14px; transform-style:preserve-3d; }
@media(min-width:900px){ .h3d-cards{ display:flex; } }
.h3d-card{
  display:flex; align-items:center; gap:12px; color:#fff; padding:14px 18px; border-radius:18px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 14px 34px rgba(0,0,0,.22);
  animation:h3dFloat 7s ease-in-out infinite;
}
.h3d-card-b{ animation-delay:-3.5s; }
@keyframes h3dFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-12px; } }
.h3d-card-ic{ width:42px; height:42px; border-radius:13px; background:rgba(216,178,106,.22); color:#D8B26A; display:flex; align-items:center; justify-content:center; font-size:17px; }
.h3d-card-ic.alt{ background:rgba(238,33,46,.22); color:#ff8b92; }
.h3d-card-num{ font-weight:800; font-size:17px; line-height:1.2; }
.h3d-card-num span{ font-size:11px; font-weight:600; color:rgba(255,255,255,.65); }
.h3d-card-lbl{ font-size:11px; color:rgba(255,255,255,.75); margin-top:2px; }
/* ---- controls ---- */
.h3d-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:6; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:15px;
  display:flex; align-items:center; justify-content:center; transition:background .25s, transform .25s;
}
.h3d-arrow:hover{ background:rgba(255,255,255,.24); transform:scale(1.08); }
.h3d-prev{ inset-inline-start:18px; } .h3d-next{ inset-inline-end:18px; }
@media(max-width:767px){ .h3d-arrow{ display:none; } }
.h3d-nav{ position:absolute; z-index:6; bottom:22px; inset-inline:0; display:flex; align-items:center; justify-content:center; gap:22px; }
.h3d-dots{ display:flex; gap:10px; }
.h3d-dot{ position:relative; width:34px; height:6px; border-radius:99px; background:rgba(255,255,255,.28); border:0; cursor:pointer; overflow:hidden; padding:0; transition:background .3s; }
.h3d-dot-fill{ position:absolute; inset:0; width:0; border-radius:99px; background:#fff; }
.h3d-dot.is-active .h3d-dot-fill{ animation:h3dProg 7s linear forwards; }
@keyframes h3dProg{ from{ width:0; } to{ width:100%; } }
.h3d-count{ color:rgba(255,255,255,.8); font-size:12px; display:flex; gap:5px; align-items:baseline; }
.h3d-count-cur{ color:#fff; font-size:16px; font-weight:800; }
@media (prefers-reduced-motion: reduce){
  .h3d-bg img, .h3d-card, .h3d-dot.is-active .h3d-dot-fill{ animation:none !important; }
  .h3d-slide{ transition:opacity .3s ease; transform:none; }
  .h3d-tilt{ transform:none !important; }
}

/* Search widget — the primary homepage element; kept clean/neutral so it doesn't visually compete */
.search-widget{ background:#fff; border-radius:var(--radius-lg); box-shadow:0 16px 40px rgba(20,24,31,.14); padding:16px; border:1px solid var(--line); }
@media(max-width:767px){
  /* Prevent the search widget from over-stretching/locking up on mobile (tall screens) */
  .search-widget{ padding:14px; border-radius:20px; }
  .search-widget .field{ padding:12px 14px; font-size:14px; }
}

/* Divider dot list */
.dot-list li{ position:relative; padding-inline-start:18px; }
.dot-list li::before{ content:''; position:absolute; inset-inline-start:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--brand); }

/* Star rating */
.stars{ color:#F5B400; letter-spacing:1px; }

/* Utility: line clamp */
.clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Sticky tab pills */
.pill-tabs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.pill-tabs::-webkit-scrollbar{ display:none; }
.pill-tab{ white-space:nowrap; padding:10px 18px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--ink-soft); background:#F1F2F5; cursor:pointer; transition:.15s; }
.pill-tab.active{ background:var(--accent); color:#fff; }

/* Skeleton shimmer (progressive enhancement placeholder) */
.shimmer{ background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* Fade-in on scroll (simple CSS-only fallback via animation) */
.fade-up{ animation:fadeUp .6s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* Range slider (native styling) */
input[type="range"]{ -webkit-appearance:none; width:100%; height:4px; border-radius:4px; background:var(--line); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); cursor:pointer; }

/* Table */
.table-sadran{ width:100%; border-collapse:collapse; }
.table-sadran th{ text-align:right; font-size:13px; color:var(--muted); font-weight:600; padding:12px 14px; border-bottom:1px solid var(--line); }
.table-sadran td{ padding:14px; border-bottom:1px solid var(--line); font-size:14px; }

/* Print/hidden utilities extension for RTL icons */
.flip-rtl{ transform:scaleX(-1); }

/* Elite luxury theme override scope */
.elite-scope{ --brand:#D8B26A; background:#0B0D10; color:#EDEDEE; }
.elite-scope .card{ background:#15181D; border-color:#262A31; }
.elite-scope .section-title{ color:#F5F1E6; }
.elite-scope .section-sub{ color:#B7B9BE; }

/* Toast */
.toast{ position:fixed; bottom:90px; inset-inline:0; margin-inline:auto; width:fit-content; background:var(--ink); color:#fff; padding:12px 22px; border-radius:14px; font-size:14px; z-index:100; box-shadow:var(--shadow-lg); }

/* Focus ring accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

@media (max-width: 767px){
  .hero-wrap{ border-radius:var(--radius-lg); }
}

/* AI Chat Widget (rule-based assistant) */
.chat-fab{ position:fixed; inset-inline-end:20px; bottom:96px; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(238,33,46,.30); z-index:90; border:none; cursor:pointer; }
.chat-fab:hover{ background:var(--accent-dark); transform:translateY(-2px); }
@media (min-width: 768px){ .chat-fab{ bottom:28px; } }

.chat-panel{ position:fixed; inset-inline-end:20px; bottom:160px; width:min(360px, calc(100vw - 32px)); height:min(480px, calc(100vh - 220px)); background:#fff; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.22); z-index:91; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); }
@media (min-width: 768px){ .chat-panel{ bottom:96px; } }
.chat-panel.hidden{ display:none; }

/* Mobile nav drawer/backdrop — hard-coded fixed positioning (NOT Tailwind utility classes).
   Root cause of the "menu freeze / duplicate content" bug on mobile: the drawer/backdrop relied
   on Tailwind CDN JIT-compiled utilities (fixed, inset-0, w-[82%], end-0, z-[60]) for their critical
   positioning. On slower connections/devices the CDN script can still be compiling those exact
   arbitrary-value classes when the user taps the hamburger, so the drawer briefly renders as normal
   in-flow block content instead of a true fixed overlay — exposing the Hero/search-widget behind it.
   These rules (same pattern as .chat-fab/.chat-panel above) guarantee correct positioning immediately,
   regardless of CDN timing. display is intentionally NOT set here — that stays controlled by the
   critical inline <style> in renderer.tsx + the open/close script in Header.tsx. */
#mobile-backdrop{ position:fixed !important; inset:0 !important; z-index:59 !important; background:rgba(0,0,0,.4); }
#mobile-drawer{ position:fixed !important; top:0 !important; inset-inline-end:0 !important; height:100% !important; width:82% !important; max-width:320px !important; z-index:60 !important; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.25); flex-direction:column; }

.chat-header{ background:var(--ink); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.chat-header button{ color:#fff; opacity:.8; background:none; border:none; font-size:16px; cursor:pointer; }
.chat-header button:hover{ opacity:1; }
.chat-avatar{ width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }

.chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#F7F8FA; }
.chat-msg{ max-width:88%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.9; }
.chat-msg a{ color:var(--brand); text-decoration:underline; }
.chat-msg-bot{ background:#fff; border:1px solid var(--line); align-self:flex-start; border-start-start-radius:4px; }
.chat-typing{ color:var(--muted,#8A93A3); font-size:12px; }
.chat-msg-user{ background:var(--brand); color:#fff; align-self:flex-end; border-start-end-radius:4px; }

.chat-suggestions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.chat-chip{ font-size:11.5px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.chat-chip:hover{ border-color:var(--brand); color:var(--brand); }

.chat-input-row{ display:flex; align-items:center; gap:8px; padding:10px; border-top:1px solid var(--line); background:#fff; }
.chat-input-row input{ flex:1; border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:13px; background:#F7F8FA; }
.chat-input-row input:focus{ outline:none; border-color:var(--brand); }
.chat-input-row button{ width:36px; height:36px; border-radius:10px; background:var(--brand); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-input-row button:hover{ background:var(--brand-dark); }

/* ===================== Sadran 2.0 — Premium Refresh ===================== */
:root{
  --glow: rgba(238,33,46,.18);
  --mesh-1: #EE212E;
  --mesh-2: #13294B;
  --glass: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
}
html[data-theme="dark"]{
  --bg: #0B0F16;
  --surface: #141A24;
  --ink: #F2F4F8;
  --ink-soft: #A8B0C0;
  --muted: #7A8498;
  --line: #243042;
  --brand-light: #1A2740;
  --glass: rgba(20,26,36,.78);
  --glass-border: rgba(255,255,255,.08);
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .search-widget,
html[data-theme="dark"] .field,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .btn-ghost{ background:var(--surface); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] #site-header{ background:rgba(11,15,22,.88) !important; border-color:var(--line); }
html[data-theme="dark"] #mobile-drawer{ background:var(--surface) !important; color:var(--ink); }
html[data-theme="dark"] .mobile-nav{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .chat-panel{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .chat-body{ background:var(--bg); }
html[data-theme="dark"] .chat-msg-bot{ background:var(--surface); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .mega-panel{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .mega-col ul li a:hover{ background:var(--brand-light); }

/* Noise texture overlay for premium depth */
body::before{
  content:''; pointer-events:none; position:fixed; inset:0; z-index:9999; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
html[data-theme="dark"] body::before{ opacity:.06; }

/* Header polish */
#site-header{ transition: transform .28s ease, box-shadow .28s ease, background .28s ease; }
#site-header.is-scrolled{ box-shadow:0 8px 28px rgba(19,41,75,.08); backdrop-filter:blur(16px); }
#site-header.is-hidden{ transform:translateY(-110%); }
.icon-btn{
  width:40px; height:40px; border-radius:12px; border:1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; background:var(--surface);
  color:var(--ink-soft); transition:.18s; position:relative; cursor:pointer;
}
.icon-btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }
.icon-btn .badge-dot{
  position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(238,33,46,.35);
}
.wish-btn.is-wished, [data-wish].is-wished{ color:var(--accent) !important; }
.wish-btn.is-wished i, [data-wish].is-wished i{ color:var(--accent); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.85,.26,1); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* Mesh / aurora background blocks */
.mesh-bg{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(238,33,46,.10), transparent 55%),
    radial-gradient(700px 380px at 95% 10%, rgba(19,41,75,.10), transparent 50%),
    var(--bg);
}
.glass-panel{
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:24px; box-shadow:0 18px 50px rgba(19,41,75,.10);
}

/* Smart search widget upgrade */
.search-widget-pro{
  background:var(--surface); border-radius:28px; border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(19,41,75,.14); padding:18px;
  position:relative; overflow:hidden;
}
.search-widget-pro::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(238,33,46,.06), transparent 40%, rgba(19,41,75,.05));
}
.search-tabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.search-tab{
  padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--ink-soft); background:transparent; border:1.5px solid transparent; cursor:pointer;
}
.search-tab.is-active{ background:var(--accent-light); color:var(--accent); border-color:rgba(238,33,46,.15); }

/* Mood matcher */
.mood-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.mood-strip::-webkit-scrollbar{ display:none; }
.mood-chip{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); font-weight:700; font-size:13.5px;
  color:var(--ink-soft); white-space:nowrap; cursor:pointer; transition:.2s; flex-shrink:0;
}
.mood-chip i{ color:var(--brand); }
.mood-chip:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mood-chip.is-active{
  background:linear-gradient(135deg, var(--accent), #ff4d57); color:#fff; border-color:transparent;
  box-shadow:0 10px 24px rgba(238,33,46,.28);
}
.mood-chip.is-active i{ color:#fff; }
.mood-loading{ padding:28px; text-align:center; color:var(--muted); font-weight:600; }
.mood-card{
  display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; transition:transform .2s, box-shadow .2s; text-decoration:none; color:inherit;
}
.mood-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.mood-card img{ width:110px; height:100%; min-height:96px; object-fit:cover; flex-shrink:0; }
.mood-card-body{ padding:12px 14px 12px 0; display:flex; flex-direction:column; gap:4px; min-width:0; }
.mood-card-body b{ font-size:13.5px; line-height:1.5; }
.mood-card-body span{ font-size:11.5px; color:var(--muted); }
.mood-card-body strong{ font-size:14px; margin-top:auto; }

/* Bento feature grid */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.bento-item{
  grid-column:span 12; border-radius:24px; overflow:hidden; position:relative; min-height:180px;
  border:1px solid var(--line); background:var(--surface);
}
@media(min-width:768px){
  .bento-item.span-7{ grid-column:span 7; min-height:280px; }
  .bento-item.span-5{ grid-column:span 5; min-height:280px; }
  .bento-item.span-4{ grid-column:span 4; min-height:200px; }
  .bento-item.span-8{ grid-column:span 8; min-height:200px; }
  .bento-item.span-6{ grid-column:span 6; }
}
.bento-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bento-item .bento-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 20%, rgba(6,15,31,.78) 100%);
}
.bento-item .bento-body{ position:relative; z-index:2; padding:22px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
.bento-item .bento-body h3{ font-size:18px; font-weight:800; margin-bottom:6px; }
.bento-item .bento-body p{ font-size:12.5px; color:rgba(255,255,255,.8); line-height:1.8; }
.bento-solid{
  background:linear-gradient(145deg, var(--brand) 0%, var(--brand-darker) 100%); color:#fff;
  padding:24px; display:flex; flex-direction:column; justify-content:space-between;
}
.bento-solid .num{ font-size:40px; font-weight:900; letter-spacing:-1px; line-height:1; }
.bento-accent{ background:linear-gradient(145deg, #EE212E 0%, #a30f1a 100%); color:#fff; }

/* Season destination marquee */
.marquee-wrap{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:marquee 42s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
[dir="rtl"] .marquee-track{ animation-name:marqueeRtl; }
@keyframes marqueeRtl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-card{
  width:220px; height:140px; border-radius:18px; overflow:hidden; position:relative; flex-shrink:0;
  box-shadow:var(--shadow-md);
}
.marquee-card img{ width:100%; height:100%; object-fit:cover; }
.marquee-card span{
  position:absolute; inset-inline:10px; bottom:10px; color:#fff; font-weight:800; font-size:13px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* Command palette */
#cmdk{
  position:fixed; inset:0; z-index:200; background:rgba(6,15,31,.55); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px;
}
#cmdk.is-open{ display:flex; }
.cmdk-box{
  width:min(640px,100%); background:var(--surface); border-radius:20px; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden;
}
.cmdk-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.cmdk-head input{
  flex:1; border:0; outline:none; background:transparent; font-size:15px; font-weight:600; color:var(--ink);
  font-family:inherit;
}
.cmdk-kbd{
  font-size:11px; font-weight:700; color:var(--muted); background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:4px 8px;
}
.cmdk-results{ max-height:380px; overflow-y:auto; padding:8px; }
.cmdk-hint{ padding:24px; text-align:center; color:var(--muted); font-size:13px; }
.cmdk-item{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; text-decoration:none; color:inherit;
  transition:background .15s;
}
.cmdk-item:hover{ background:var(--brand-light); }
.cmdk-item-ic{
  width:40px; height:40px; border-radius:12px; background:var(--bg); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cmdk-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cmdk-item-body b{ font-size:13.5px; }
.cmdk-item-body small{ font-size:11.5px; color:var(--muted); }
.cmdk-item-price{ font-size:12.5px; font-weight:800; color:var(--accent); white-space:nowrap; }

/* Toast show state */
.toast{ opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s; }
.toast.is-show{ opacity:1; pointer-events:auto; transform:none; }

/* Floating promo ribbon */
.promo-ribbon{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(90deg, #0B1B33, #13294B 40%, #EE212E 100%);
  color:#fff; font-size:12.5px; font-weight:600; padding:9px 16px; text-align:center;
}
.promo-ribbon a{ color:#fff; text-decoration:underline; font-weight:800; }

/* Tour card heart polish */
.media-overlay-top .wish-btn, .media-overlay-top [data-wish]{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.12); transition:.18s; color:var(--ink-soft);
}
.media-overlay-top .wish-btn:hover, .media-overlay-top [data-wish]:hover{ transform:scale(1.08); }

/* Trust pulse bar */
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block;
  box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); }
  70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Final CTA upgrade */
.cta-aurora{
  position:relative; overflow:hidden; border-radius:28px;
  background:linear-gradient(120deg, #13294B 0%, #0B1B33 45%, #EE212E 120%);
  color:#fff; padding:40px 28px;
}
.cta-aurora::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 60%);
  top:-120px; inset-inline-end:-80px; pointer-events:none;
}
.cta-aurora::after{
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(216,178,106,.25), transparent 65%);
  bottom:-100px; inset-inline-start:-40px; pointer-events:none;
}

/* Mobile nav active accent */
.mobile-nav-item.is-active, .mobile-nav-item.active{ color:var(--accent); }

/* Magnetic micro-interaction helper */
.magnetic{ transition:transform .2s ease; will-change:transform; }

/* Selection uses accent in dark too */
html[data-theme="dark"] ::selection{ background:var(--accent); color:#fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .live-dot{ animation:none; }
}