/* ==========================================================================
   Dubai Elite Tours & Travel — Design System
   Palette: deep navy + gold, luxury travel aesthetic
   ========================================================================== */

:root{
  --navy-950:#071426;
  --navy-900:#0A1D37;
  --navy-800:#101d34;
  --navy-700:#16274a;
  --navy-600:#1e3560;
  --gold-400:#E8C66A;
  --gold-500:#D4AF37;
  --gold-600:#b8912a;
  --cream-50:#F8F3EA;
  --cream-100:#f4ecdd;
  --gray-100:#F3F4F6;
  --ink-900:#17233A;
  --ink-600:#667085;
  --ink-400:#8b8f9a;
  --line:#e7e2d6;
  --white:#ffffff;
  /* Heading/text color on card surfaces - identical to --navy-900 in light mode, but kept as
     its own token because --navy-900 is also used as a background (header, buttons, chips) that
     must NOT change in dark mode, while text-on-card headings must flip to a light color. */
  --text-heading:var(--navy-900);
  --success:#168A5B;
  --danger:#D64545;
  --turquoise:#0084B8;
  --accent-blue:#0084B8;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(11,21,38,.06);
  --shadow-md:0 12px 32px rgba(11,21,38,.12);
  --shadow-lg:0 24px 60px rgba(11,21,38,.18);
  --font-head:'Playfair Display', 'Noto Sans Hebrew', serif;
  --font-body:'Plus Jakarta Sans','Tajawal','Noto Sans Hebrew',sans-serif;
  --container:1240px;
}

/* language-aware font stacks */
html[lang="ar"]{ --font-head:'Tajawal','Playfair Display',sans-serif; --font-body:'Tajawal','Poppins',sans-serif; }
html[lang="he"]{ --font-head:'Noto Sans Hebrew','Playfair Display',sans-serif; --font-body:'Noto Sans Hebrew','Poppins',sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-50);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); margin:0 0 .5em; line-height:1.25; color:var(--text-heading); }
p{ margin:0 0 1em; color:var(--ink-600); }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
[dir="rtl"] .container{ direction:rtl; }

/* ---------- Page loader ---------- */
.page-loader{
  position:fixed; inset:0; z-index:9999; background:var(--navy-950);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.page-loader.hide{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader-logo{ height:56px; width:auto; animation:loaderBreathe 1.8s ease-in-out infinite; }
@keyframes loaderBreathe{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }
.loader-flightpath{ position:relative; width:130px; height:2px; background:repeating-linear-gradient(90deg, rgba(212,175,55,.35) 0 6px, transparent 6px 12px); }
.loader-plane-icon{ position:absolute; top:50%; inset-inline-start:0; color:var(--gold-500); transform:translateY(-50%); animation:loaderFly 1.6s ease-in-out infinite; }
[dir="rtl"] .loader-plane-icon{ transform:translateY(-50%) scaleX(-1); }
@keyframes loaderFly{ 0%{ inset-inline-start:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ inset-inline-start:114px; opacity:0; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:14.5px; letter-spacing:.2px; transition:all .25s ease;
  white-space:nowrap; cursor:pointer;
}
.btn-gold{ background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:var(--navy-950); box-shadow:0 8px 20px rgba(212,175,55,.35); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(212,175,55,.45); }
.btn-outline-gold{ background:transparent; border-color:var(--gold-500); color:var(--gold-600); }
.btn-outline-gold:hover{ background:var(--gold-500); color:var(--navy-950); }
/* #fff literal, deliberately not var(--white) - this is real white text on a navy button, not
   a page surface, so it must stay white in dark mode too (var(--white) is a dark panel color
   there and would make this text unreadable against the still-navy background). */
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); }
.btn-outline-white{ border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.05); backdrop-filter:blur(4px); }
/* Same reasoning - this button lives on a photo/hero backdrop regardless of site theme, so its
   hover fill must stay real white (#fff), not the theme's var(--white) surface token. */
.btn-outline-white:hover{ background:#fff; color:var(--navy-950); }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
/* Real bug fixed here: the base .btn forces white-space:nowrap (right for short labels like
   "Book Now"), but a full-width .btn-block can hold a genuinely long sentence (e.g. the
   itinerary page's "or message us directly on WhatsApp without filling any form" CTA) - nowrap
   text doesn't shrink to fit, so it visually spilled out past the button's own rounded pill
   border instead of wrapping. Block buttons get to wrap onto 2 lines with room to breathe
   instead, and a less extreme radius so a wrapped 2-line pill still looks like one shape. */
.btn-block{ width:100%; white-space:normal; text-align:center; line-height:1.35; border-radius:16px; padding-block:16px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ---------- Top bar ---------- */
.topbar{ background:var(--navy-950); color:#cfd6e4; font-size:13px; padding:8px 0; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar-tagline{ opacity:.85; }
.topbar-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; row-gap:6px; }
.topbar-link{ opacity:.9; transition:opacity .2s; display:inline-flex; align-items:center; gap:6px; }
.topbar-link:hover{ opacity:1; color:var(--gold-400); }
.theme-toggle{ background:none; border:none; padding:0; margin:0; color:inherit; opacity:.9; cursor:pointer; display:inline-flex; align-items:center; transition:opacity .2s; }
.theme-toggle:hover{ opacity:1; color:var(--gold-400); }
.theme-icon-moon{ display:none; }
:root[data-theme="dark"] .theme-icon-sun{ display:none; }
:root[data-theme="dark"] .theme-icon-moon{ display:inline-flex; }
.cart-link{ position:relative; }
.cart-count-badge{
  display:none; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--gold-500); color:var(--navy-950); font-size:10px; font-weight:800;
  position:absolute; top:-8px; inset-inline-end:-10px;
}
.cart-count-badge.show{ display:flex; }
/* Real running subtotal next to the cart link - a visitor building a trip can see roughly
   where they stand without opening the cart page. Only ever shows a real, computed total from
   the visitor's own real cart contents (assets/js/cart.js), never a placeholder value. */
.cart-total-badge{
  display:none; align-items:center; font-variant-numeric:tabular-nums;
  font-size:11.5px; font-weight:700; color:var(--gold-400);
  background:rgba(255,255,255,.08); padding:2px 9px; border-radius:999px; margin-inline-start:2px;
}
.cart-total-badge.show{ display:inline-flex; }

.lang-switch{ position:relative; }
.lang-current{ background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; padding:5px 14px; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.caret{ font-size:10px; }
.lang-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; background:var(--white); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:6px; min-width:150px; display:none; z-index:200;
}
.lang-menu.open{ display:block; }
.lang-option{ display:block; padding:9px 12px; border-radius:6px; color:var(--ink-900); font-size:13.5px; }
.lang-option:hover{ background:var(--cream-100); }
.lang-option.active{ color:var(--gold-600); font-weight:700; }

/* ---------- Main nav ---------- */
.main-nav{ background:var(--white); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:150; transition:box-shadow .3s; }
.main-nav.scrolled{ box-shadow:var(--shadow-md); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:14px; flex-wrap:nowrap; }

.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ font-size:26px; color:var(--gold-500); }
.logo-mark-img{ width:42px; height:42px; border-radius:10px; background:var(--navy-950); padding:4px; flex-shrink:0; }
.footer-logo .logo-mark-img{ background:rgba(255,255,255,.06); }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-text strong{ font-family:var(--font-head); font-size:19px; color:var(--text-heading); letter-spacing:.5px; }
.logo-text em{ font-style:normal; font-size:10.5px; letter-spacing:2px; color:var(--gold-600); text-transform:uppercase; }

.primary-nav ul{ display:flex; gap:11px; align-items:center; }
.primary-nav li{ position:relative; }
.primary-nav a, .primary-nav .mega-trigger{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:500; color:var(--text-heading); position:relative; padding:8px 1px; white-space:nowrap; background:none; border:none; font-family:inherit; cursor:pointer; }
.primary-nav .nav-icon{ display:inline-flex; line-height:1; opacity:.8; }
.primary-nav a::after{ content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:2px; background:var(--gold-500); transition:width .25s; }
.primary-nav a:hover,.primary-nav a.active,.primary-nav .mega-trigger:hover,.primary-nav .mega-trigger.active{ color:var(--gold-600); }
.primary-nav a:hover::after,.primary-nav a.active::after{ width:100%; }
.primary-nav .caret{ font-size:9px; opacity:.6; transition:transform .2s; }
.primary-nav li.has-mega:hover .caret, .mega-trigger[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.mobile-nav .nav-icon{ display:inline-flex; width:22px; }

/* ---------- Mega-menu dropdowns (desktop) — real multi-column layout, not a plain list ---------- */
.mega-dropdown{
  display:none; position:absolute; top:calc(100% + 14px); inset-inline-start:0;
  width:max-content; max-width:min(1000px, 94vw);
  background:var(--white); border-radius:16px; box-shadow:var(--shadow-lg); border:1px solid var(--line);
  padding:22px; z-index:60; gap:24px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.mega-dropdown.open{ display:flex; opacity:1; transform:translateY(0); pointer-events:auto; }
/* The last few nav triggers sit near the right edge - a left-anchored ~900px-wide dropdown there
   would run off the viewport, so flip anchoring to the right for those. */
.primary-nav li.has-mega:nth-last-child(-n+3) .mega-dropdown{ inset-inline-start:auto; inset-inline-end:0; }

.mega-links{ display:grid; gap:2px 10px; align-content:start; flex:1; min-width:0; }
.mega-links-1{ grid-template-columns:minmax(260px,320px); }
.mega-links-2{ grid-template-columns:repeat(2,minmax(240px,270px)); }
.mega-links-3{ grid-template-columns:repeat(3,minmax(200px,225px)); }

.mega-link-tile{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; min-width:0; }
.mega-link-tile:hover{ background:var(--cream-100); }
.mega-dropdown-icon{ display:inline-flex; flex-shrink:0; color:var(--text-heading); opacity:.85; margin-top:1px; }
.mega-dropdown-icon.icon-water{ color:var(--turquoise); opacity:1; }
.mega-link-tile:hover .mega-dropdown-icon{ color:var(--gold-600); }
.mega-link-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mega-link-text strong{ font-size:13.5px; font-weight:700; color:var(--text-heading); line-height:1.3; white-space:normal; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mega-link-tile:hover .mega-link-text strong{ color:var(--gold-600); }
.mega-link-text small{ font-size:11.5px; color:#64748b; white-space:normal; overflow-wrap:break-word; line-height:1.3; }
/* Real per-category attraction count next to the label (e.g. "Towers & Views  5") - computed
   fresh from the real data every page load, see the $megaNavCatCounts comment in header.php. */
.mega-link-count{ display:inline-block; margin-inline-start:6px; font-size:11px; font-weight:700; color:var(--gold-600); background:var(--cream-100); padding:1px 7px; border-radius:999px; vertical-align:middle; }

.mega-promo{
  flex:0 0 220px; border-radius:12px; overflow:hidden; position:relative; min-height:230px;
  display:block; align-self:stretch; background:var(--navy-900);
}
.mega-promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega-promo::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,29,55,.1) 0%, rgba(10,29,55,.92) 100%); z-index:1; }
.mega-promo-body{ position:absolute; inset-inline:0; bottom:0; padding:18px; z-index:2; color:#fff; }
.mega-promo-body strong{ display:block; font-family:var(--font-head); font-size:17px; margin-bottom:4px; }
.mega-promo-body p{ font-size:12px; opacity:.85; margin:0 0 12px; line-height:1.4; }
.mega-promo-cta{ display:inline-flex; align-items:center; gap:5px; background:var(--gold-500); color:var(--navy-950); font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px; }
.mega-promo:hover .mega-promo-cta{ background:var(--gold-400); }

.mobile-accordion-panel a{ display:flex; align-items:flex-start; gap:9px; padding:9px 6px; }
.mobile-accordion-panel .mega-link-text{ display:flex; flex-direction:column; gap:1px; }
.mobile-accordion-panel .mega-link-text strong{ font-size:13.5px; font-weight:600; color:var(--text-heading); }
.mobile-accordion-panel .mega-link-text small{ font-size:11px; color:#64748b; }
.mobile-accordion-panel .mega-dropdown-icon{ display:inline-flex; flex-shrink:0; color:var(--text-heading); opacity:.85; margin-top:2px; }

.mobile-nav-utility{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.mobile-nav-utility a{ display:flex; align-items:center; gap:9px; padding:11px 6px; font-size:14px; font-weight:600; color:var(--text-heading); }
.mobile-nav-utility a:hover{ color:var(--gold-600); }

/* ---------- Mobile bottom nav (phone-app style tab bar, hidden above 860px) ---------- */
.mobile-bottom-nav{ display:none; }
@media (max-width:860px){
  .mobile-bottom-nav{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:300;
    background:var(--white); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(11,21,38,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  /* Real fix (previous flat-px version wasn't enough): the tab bar's own real height grows with
     env(safe-area-inset-bottom) (the home-indicator strip on notched iPhones, ~34px there vs 0
     on older/Android devices) - a flat px offset for the content padding and the two floating
     buttons above the bar was measured against a phone with little/no safe-area inset, so on a
     real iPhone with a home indicator the bar is taller than assumed and both the page content
     and the WhatsApp bubble still overlapped it. Every offset below now adds the SAME
     env(safe-area-inset-bottom) the bar itself uses, so the clearance is correct on any device. */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  .scroll-top{ bottom:calc(70px + env(safe-area-inset-bottom)); }
  /* Repositioning the floating WhatsApp bubble (previous attempts: 90px, then a safe-area-aware
     calc()) still overlapped the bottom tab bar's last real item ("More") on a real device -
     hidden here instead of chasing another offset. The exact same WhatsApp contact action is
     already one tap away via the icon in the topbar (includes/header.php), which stays visible
     on mobile (only its text label collapses at this width, not the icon) - so nothing is lost. */
  .whatsapp-float{ display:none; }
  /* The "Custom Trip Plan" pill in the topbar was competing with the logo for space on narrow
     phones (the long AR/HE label made it wrap/overflow), and the same destination is already
     one tap away in the hamburger menu - hide the topbar pill here rather than shrink its text. */
  .nav-book-btn{ display:none; }
}
.mbn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:none; font-family:inherit; padding:6px 2px; color:var(--ink-400);
  font-size:10.5px; font-weight:600; position:relative; cursor:pointer;
}
.mbn-item.active{ color:var(--gold-600); }
.mbn-cart{ position:relative; }
.mbn-cart .cart-count-badge{ position:absolute; top:0; inset-inline-end:22%; }
.mbn-more.open{ color:var(--gold-600); }

.nav-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.hamburger span{ width:24px; height:2px; background:var(--navy-900); border-radius:2px; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ max-height:0; overflow:hidden; transition:max-height .35s ease; background:var(--white); border-top:1px solid var(--line); }
.mobile-nav.open{ max-height:80vh; overflow-y:auto; }
.mobile-nav ul{ padding:10px 24px 20px; display:flex; flex-direction:column; gap:4px; }
.mobile-nav a{ display:block; padding:11px 4px; font-size:15px; font-weight:500; color:var(--text-heading); border-bottom:1px solid var(--line); }
.mobile-nav a.active{ color:var(--gold-600); }
.mobile-accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; font-family:inherit; padding:11px 4px; font-size:15px; font-weight:500; color:var(--text-heading); border-bottom:1px solid var(--line); cursor:pointer; }
.mobile-accordion-trigger span:first-child{ display:flex; align-items:center; gap:8px; }
.mobile-accordion-trigger .caret{ font-size:11px; opacity:.6; transition:transform .2s; }
.mobile-accordion-trigger.open .caret{ transform:rotate(180deg); }
.mobile-accordion-panel{ display:none; flex-direction:column; padding-inline-start:30px; background:var(--cream-100); }
.mobile-accordion-panel.open{ display:flex; }
.mobile-accordion-panel a{ padding:10px 4px; font-size:13.5px; border-bottom:1px solid var(--line); color:var(--ink-600); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:min(460px, 68vh); display:flex; align-items:center; color:#fff;
  /* Same real, verified long-exposure Burj Khalifa night skyline used elsewhere on the site (category
     tile, mega-menu promo) - replaces a hazy, washed-out daytime skyline photo that read as low-quality
     behind the hero text. A dark, well-lit night shot also holds up better under the navy overlay below. */
  background:linear-gradient(180deg, rgba(7,13,26,.55), rgba(7,13,26,.85)), url('https://commons.wikimedia.org/wiki/Special:FilePath/Long%20exposure%20photo%20of%20Burj%20Khalifa%20in%20Dubai%20at%20night%20by%20Robert%20Bock%2C%202016%20(Unsplash).jpg?width=1920') center/cover no-repeat;
}
.hero-inner{ position:relative; z-index:2; max-width:760px; padding-block:52px; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(212,175,55,.15); border:1px solid rgba(212,175,55,.4); color:var(--gold-400); padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:22px; }
.hero h1{ color:#fff; font-size:clamp(30px,4.2vw,48px); margin-bottom:14px; }
.hero h1 span{ color:var(--gold-400); }
.hero-sub{ color:#dfe4ee; font-size:17.5px; max-width:560px; margin-bottom:34px; }
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.hero-stats{ display:flex; gap:40px; flex-wrap:wrap; }
.hero-stat strong{ display:block; font-family:var(--font-head); font-size:28px; color:var(--gold-400); }
.hero-stat span{ font-size:13px; color:#c6cddb; }

.hero-search{
  position:relative; z-index:3; background:var(--white); border-radius:18px; box-shadow:var(--shadow-lg);
  padding:22px; display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:14px; margin-top:-70px; margin-bottom:18px;
}
.hero-search .form-row{ margin:0; }
.hero-search label{ font-size:12px; }

/* ---------- Hero search autocomplete (real Dubai/UAE place names via Google Places) ---------- */
.search-autocomplete-wrap{ position:relative; }
/* Explicit, can't-lose-the-cascade rule: the real bug this fixes was .search-focus-panel setting
   display:flex directly on itself - the browser's own [hidden]{display:none} rule and that class
   rule have equal (0,1,0) specificity, so source order decided the tie and our stylesheet (loaded
   after the UA default) won, making the panel visible all the time regardless of the hidden
   attribute. Layout-mode properties now live on the always-visible inner wrapper instead (see
   .search-focus-groups below), and this rule guarantees [hidden] always wins outright either way. */
.search-autocomplete-wrap [hidden]{ display:none !important; }
.search-suggest{
  position:absolute; top:calc(100% + 6px); inset-inline-start:0; inset-inline-end:0; z-index:20;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  max-height:280px; overflow-y:auto; padding:6px;
}
.search-suggest li{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:8px; cursor:pointer;
  font-size:13.5px; color:var(--ink-900); line-height:1.3;
}
.search-suggest li svg{ flex-shrink:0; color:var(--gold-600); }
.search-suggest li:hover, .search-suggest li.active{ background:var(--cream-50); }

/* Grouped "Popular Searches" panel shown when the search box is focused empty - every link is a
   real product page, grouped by content type, same footprint/positioning as .search-suggest. */
.search-focus-panel{
  position:absolute; top:calc(100% + 6px); inset-inline-start:0; inset-inline-end:0; z-index:20;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  max-height:340px; overflow-y:auto; padding:14px 16px;
}
.search-focus-panel-title{
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--text-heading);
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.search-focus-panel-title svg{ color:var(--gold-600); flex-shrink:0; }
.search-focus-groups{ display:flex; flex-wrap:wrap; gap:18px 28px; }
.search-focus-group{ display:flex; flex-direction:column; gap:6px; min-width:150px; }
.search-focus-group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gold-600); }
.search-focus-group a{ font-size:13.5px; color:var(--ink-900); padding:3px 0; }
.search-focus-group a:hover{ color:var(--gold-600); text-decoration:underline; }

.popular-searches{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:56px; }
.popular-searches-label{ font-size:13px; font-weight:700; color:var(--ink-600); }
.search-chip{ background:var(--cream-100); border:1px solid var(--line); color:var(--text-heading); font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; transition:.2s; }
.search-chip:hover{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }

/* ---------- Section basics ---------- */
.section{ padding:88px 0; }

/* Short, real intro paragraph at the top of hub/listing pages (attractions.php, tours.php,
   packages.php, etc.) - gives visitors real context and gives the page real body text to
   support its SEO keyword target, instead of jumping straight from the hero into a filter/grid. */
.hub-intro{ max-width:780px; margin:0 auto 36px; text-align:center; color:var(--ink-600); font-size:15px; line-height:1.75; }
.hub-intro strong{ color:var(--text-heading); }
.section-tight{ padding:56px 0; }
.section-alt{ background:var(--cream-100); }

/* ---------- "Dubai Attractions Map" — real Leaflet map, OpenStreetMap/CARTO tiles ---------- */
.map-abu-dhabi-link{ display:inline-block; margin-top:8px; color:var(--gold-600); font-weight:700; font-size:13.5px; }
.map-abu-dhabi-link:hover{ text-decoration:underline; }

/* Same visual treatment as .filter-tabs/.filter-tab, kept as a distinct class so the generic
   initFilterTabs() (which expects a data-target selector) never picks this row up - this
   section wires its own click handlers because filtering here toggles real Leaflet map layers,
   not just CSS display. */
.map-filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; }

.map-explore-wrap{ display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.map-explore-canvas{
  /* Real bug found and fixed here via a live on-device diagnostic: this relied on flexbox's
     default align-items:stretch (in the <860px column layout) / grid's default justify-items:
     stretch (desktop) to get its width, with no explicit width of its own. On at least one real
     mobile browser that stretch never resolved - offsetWidth measured 0 while offsetHeight
     correctly measured 420px - so Leaflet built a real, correctly-tiled map into a container
     with zero visible width, which is indistinguishable from "no map at all". An explicit
     width:100% removes the dependency on stretch resolving at all. */
  width:100%; box-sizing:border-box;
  height:560px; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--cream-50);
}
.map-fallback{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:20px; text-align:center; }
.map-fallback p{ color:var(--ink-400); font-size:15px; margin:0; }

/* Custom IsDubai marker (Leaflet divIcon) - navy by default, gold for real best-sellers. */
.map-marker{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50% 50% 50% 4px; transform:rotate(45deg);
  background:var(--navy-900); border:2px solid #fff; color:#fff; box-shadow:var(--shadow-md);
}
.map-marker svg{ transform:rotate(-45deg); }
.map-marker.featured{ background:var(--gold-500); color:var(--navy-950); }
.leaflet-marker-icon:hover .map-marker{ filter:brightness(1.1); }

.dxb-map-popup{ width:200px; font-family:var(--font-body); }
.dxb-map-popup img{ width:100%; height:100px; object-fit:cover; border-radius:8px; margin-bottom:8px; }
.dxb-map-popup strong{ display:block; font-size:13.5px; color:var(--text-heading); line-height:1.3; }
.dxb-map-popup-cat{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-400); margin-top:2px; }
.dxb-map-popup-rating{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--gold-600); margin-top:2px; }
.dxb-map-popup-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.dxb-map-popup-footer strong{ color:var(--text-heading); font-size:15px; }

.map-explore-side{ display:flex; flex-direction:column; gap:14px; height:560px; }
.map-side-title{ font-size:16px; margin:0; }
.map-attraction-list-wrap{ position:relative; flex:1; min-height:0; }
.map-attraction-list{ display:flex; flex-direction:column; gap:10px; height:100%; overflow-y:auto; padding-inline-end:2px; }
.map-attraction-card{ cursor:pointer; border:2px solid transparent; transition:.2s; flex-shrink:0; }
.map-attraction-card:hover{ box-shadow:var(--shadow-md); }
.map-attraction-card.is-active{ border-color:var(--gold-500); box-shadow:var(--shadow-md); }
/* .map-attraction-list is height:100% of its non-scrolling wrapper (.map-attraction-list-wrap)
   with overflow-y:auto, so it scrolls once it has more cards than fit - but flex columns default
   every child to flex-shrink:1, and some engines (WebKit especially) will squeeze flex items down
   to near-zero to avoid overflowing a constrained-height ancestor instead of actually overflowing
   and scrolling as intended. flex-shrink:0 above (and on the card's own two children below) pins
   every card at its real, full content size so the list overflows/scrolls the way it was meant to. */
.map-explore-side .card-media{ height:100px; flex-shrink:0; }
.map-explore-side .card-body{ padding:12px 14px 14px; flex-shrink:0; }
.map-explore-side .card-body h3{ font-size:14.5px; margin-bottom:0; }
.map-explore-side .card-cat{ font-size:10.5px; }
.map-explore-side .card-footer{ padding-top:10px; }
.map-explore-side .card-footer .btn{ padding:7px 14px; font-size:12px; }
/* A soft fade at the bottom of the scrollable list hints "there's more below, keep scrolling"
   instead of the list just cutting off mid-card, which read as broken/unfinished. Sits on the
   non-scrolling wrapper so it stays pinned to the bottom edge regardless of scroll position. */
.map-attraction-list-wrap::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:28px;
  background:linear-gradient(to bottom, transparent, var(--cream-100));
  pointer-events:none; border-radius:0 0 var(--radius-md) var(--radius-md);
}

@media (max-width:860px){
  /* .map-filter-tabs sits before .map-explore-wrap in the markup, and .map-explore-canvas comes
     before .map-explore-side within it - so switching to a single column already yields the
     wanted Title -> Filters -> Map -> Cards order with no explicit `order` needed. */
  .map-explore-wrap{ display:flex; flex-direction:column; }
  .map-explore-canvas{ height:420px; }
  .map-explore-side{ height:auto; }
  .map-attraction-list-wrap{ flex:none; }
  .map-attraction-list{ height:auto; max-height:480px; }
}
.section-navy{ background:var(--navy-950); color:#e6e9f2; }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-navy p{ color:#b9c0d1; }

.section-head{ max-width:640px; margin:0 auto 50px; text-align:center; }
.section-head.align-start{ margin-inline-start:0; text-align:start; }
.eyebrow{ display:inline-block; color:var(--gold-600); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:12.5px; margin-bottom:12px; }
.section-navy .eyebrow{ color:var(--gold-400); }
.section-head h2{ font-size:clamp(26px,3.4vw,40px); }

/* ---------- Category grid ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.category-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; color:#fff;
  box-shadow:var(--shadow-md); transition:transform .35s ease;
}
.category-card:hover{ transform:translateY(-8px); }
.category-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.category-card:hover img{ transform:scale(1.08); }
.category-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,13,26,0) 30%, rgba(7,13,26,.9)); }
.category-card-body{ position:absolute; inset-inline:0; bottom:0; padding:22px; z-index:2; }
.category-card-icon{ margin-bottom:8px; display:block; color:var(--gold-400); }
.category-card h3{ color:#fff; font-size:19px; margin-bottom:4px; }
.category-card span{ font-size:13px; color:var(--gold-400); font-weight:600; }
.category-count-badge{
  position:absolute; top:16px; inset-inline-end:16px; z-index:3;
  background:rgba(7,13,26,.55); backdrop-filter:blur(4px); color:#fff;
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(232,194,122,.4);
}

/* ---------- Cards (attractions/tours/etc) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .3s, transform .3s; display:flex; flex-direction:column; border:1px solid var(--line);
}
.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.card-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover .card-media img{ transform:scale(1.07); }
.card-badge{ position:absolute; top:14px; inset-inline-start:14px; background:var(--gold-500); color:var(--navy-950); font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; }
.card-badge.badge-navy{ background:var(--navy-900); color:#fff; }
.card-badge.card-badge-location{ top:50px; background:var(--navy-900); color:#fff; }
.hero-location-badge{ display:inline-block; background:rgba(255,255,255,.14); backdrop-filter:blur(3px); color:#fff; font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:999px; margin:6px 0 4px; }
/* Small play-button overlay for a real uploaded video on a listing-card image (cars, yachts,
   transportation - these have no individual detail page to host a full video-embed section). */
.card-video-badge{ position:absolute; bottom:12px; inset-inline-end:12px; width:34px; height:34px; border-radius:50%; background:rgba(7,13,26,.65); backdrop-filter:blur(3px); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.card-video-badge:hover{ background:var(--gold-500); color:var(--navy-950); transform:scale(1.08); }
.price-verified-note{ color:var(--ink-600); font-size:12.5px; }

/* Attraction status badges: new / trending / seasonal / currently closed / coming soon */
.card-badge.badge-new{ background:var(--success); color:#fff; }
.card-badge.badge-trending{ background:var(--danger); color:#fff; }
.card-badge.badge-seasonal{ background:var(--navy-700); color:#fff; }
.card-badge.badge-closed{ background:var(--danger); color:#fff; }
.card-badge.badge-soon{ background:#6b6350; color:#fff; }
.card-badge.badge-status{ top:50px; inset-inline-end:14px; inset-inline-start:auto; }
.hero-status-badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.5px; padding:5px 14px; border-radius:999px; margin-inline-start:8px; }
.hero-status-badge.badge-new{ background:var(--success); color:#fff; }
.hero-status-badge.badge-trending{ background:var(--danger); color:#fff; }
.hero-status-badge.badge-seasonal{ background:rgba(255,255,255,.16); color:#fff; }
.hero-status-badge.badge-closed{ background:var(--danger); color:#fff; }
.hero-status-badge.badge-soon{ background:rgba(255,255,255,.16); color:#fff; }
.closed-notice{ background:#fdf1f1; border:1px solid #f3caca; border-radius:10px; padding:14px 16px; margin:16px 0; color:#7a2222; font-size:14px; line-height:1.5; }
.closed-notice strong{ display:block; margin-bottom:4px; font-size:15px; }

/* Official video section */
.official-video-tag{ display:inline-flex; align-items:center; gap:6px; background:#fbf1da; color:var(--gold-600); font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.video-unmute-hint{ font-size:12.5px; color:var(--ink-400); margin-top:8px; }

/* Flight route flow diagram (helicopter tours) */
.route-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--cream-100); border-radius:var(--radius-md); padding:20px; }
.route-stop{ display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:700; font-size:13.5px; color:var(--text-heading); white-space:nowrap; }
.route-stop-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--gold-500); color:var(--navy-950); font-size:11.5px; flex-shrink:0; }
.route-arrow{ color:var(--gold-600); font-weight:700; font-size:16px; }
[dir="rtl"] .route-arrow{ display:inline-block; transform:scaleX(-1); }
.route-map-img-wrap{ margin-top:14px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); position:relative; }
.route-map-img-wrap img{ width:100%; height:auto; display:block; }
.route-map-credit{ position:absolute; bottom:8px; inset-inline-end:10px; background:rgba(7,13,26,.65); color:#fff; font-size:10.5px; padding:3px 9px; border-radius:999px; }
/* Gallery photo credit - a plain caption under the grid, NOT an overlay, so (unlike
   .route-map-credit above, which is only ever used inside a position:relative image wrapper)
   this must not be position:absolute - it has no positioned ancestor here, so it was escaping
   into the page's normal flow and floating in an unrelated spot (fixed bug, see gallery-grid). */
.gallery-credit{ display:block; text-align:end; font-size:11px; color:var(--ink-400); margin-top:6px; }
.route-label{ font-weight:700; font-size:13.5px; color:var(--gold-600); margin:0 0 8px; }

/* Featured/standalone cruise block (e.g. Exclusive Yacht) — deliberately not just another card */
.featured-cruise{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--navy-950); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:48px; box-shadow:var(--shadow-lg); }
.featured-cruise-media{ position:relative; min-height:280px; }
.featured-cruise-media img{ width:100%; height:100%; object-fit:cover; }
.featured-cruise-badge{ position:absolute; top:16px; inset-inline-start:16px; background:var(--gold-500); color:var(--navy-950); font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; }
.featured-cruise-body{ padding:32px 36px; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.featured-cruise-body h2{ color:#fff; margin-bottom:10px; font-size:24px; }
.featured-cruise-body p{ color:#c6cddb; font-size:14.5px; margin-bottom:20px; }
.featured-cruise-slots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:22px; }
.featured-cruise-slot{ display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:8px 12px; font-size:12.5px; }
.featured-cruise-slot span{ color:#c6cddb; }
.featured-cruise-slot strong{ color:var(--gold-400); }
.featured-cruise-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.featured-cruise-actions .btn-outline{ border-color:rgba(255,255,255,.3); color:#fff; }
@media (max-width:860px){ .featured-cruise{ grid-template-columns:1fr; } .featured-cruise-media{ min-height:220px; } }
.video-channel-link{ display:inline-flex; align-items:center; gap:8px; padding:14px 20px; background:var(--cream-100); border-radius:var(--radius-sm); font-weight:700; color:var(--text-heading); text-decoration:none; }
.video-channel-link:hover{ background:var(--cream-50); }
.card-rating{ position:absolute; top:14px; inset-inline-end:14px; background:rgba(7,13,26,.75); color:#fff; font-size:12.5px; padding:5px 10px; border-radius:999px; backdrop-filter:blur(3px); }
.card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-cat{ font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--gold-600); font-weight:700; }
.card-body h3{ font-size:19px; margin-bottom:2px; }
.card-meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--ink-400); margin-bottom:6px; }
.card-desc{ font-size:13.5px; color:var(--ink-600); margin-bottom:6px; flex:1; }
.card-benefits{ display:flex; flex-direction:column; gap:4px; margin-bottom:4px; }
.card-benefits li{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-500); }
.card-benefits li::before{ content:'✓'; color:var(--success); font-weight:800; }
.card-footer{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; margin-top:auto; }
.card-price small{ display:block; font-size:11px; color:var(--ink-400); }
.card-price strong{ font-size:18px; color:var(--text-heading); font-family:var(--font-head); }
.card-footer .btn{ padding:9px 18px; font-size:13px; }

/* ---------- Combo deal cards (ticket-stub style) ---------- */
.combo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.combo-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .3s, transform .3s; }
.combo-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.combo-media{ position:relative; display:flex; aspect-ratio:16/9; }
.combo-media img{ width:50%; height:100%; object-fit:cover; }
.combo-plus{
  position:absolute; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--gold-500); color:var(--navy-950);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.3); border:3px solid #fff; z-index:2;
}
.combo-badge{ position:absolute; top:12px; inset-inline-start:12px; background:var(--navy-950); color:var(--gold-400); font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:999px; z-index:2; }
.combo-body{ padding:20px 22px 22px; position:relative; }
.combo-body h3{ font-size:17.5px; margin-bottom:4px; }
.combo-sub{ font-size:12px; color:var(--ink-400); margin-bottom:16px; line-height:1.5; }
.combo-price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.combo-price-old{ font-size:13px; color:var(--ink-400); text-decoration:line-through; }
.combo-price-new{ font-family:var(--font-head); font-size:22px; color:var(--gold-600); }
.combo-save{ background:#eafaf0; color:var(--success); font-size:11px; font-weight:800; padding:3px 10px; border-radius:6px; }

.ticket-stub-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding-top:16px; border-top:2px dashed var(--line); }
.ticket-stub-row::before, .ticket-stub-row::after{
  content:''; position:absolute; top:-10px; width:18px; height:18px; border-radius:50%;
  background:var(--cream-50); border:1px solid var(--line);
}
.ticket-stub-row::before{ inset-inline-start:-9px; }
.ticket-stub-row::after{ inset-inline-end:-9px; }

/* ---------- Filters/tabs ---------- */
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.filter-tab{ display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-weight:600; font-size:13.5px; color:var(--ink-600); transition:.2s; }
.filter-tab:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.filter-tab.active{ background:var(--navy-950); border-color:var(--navy-950); color:#fff; }

/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.why-card{ text-align:center; padding:34px 22px; border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .3s; }
.why-icon{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--navy-950); }
.why-card:nth-child(odd) .why-icon{ background:linear-gradient(135deg,var(--navy-700),var(--navy-950)); color:var(--gold-400); }
@media (min-width:1081px){
  .why-card:nth-child(even){ transform:translateY(22px); }
}
.why-card h3{ font-size:17.5px; }
.why-card p{ font-size:13.5px; margin:0; }

/* ---------- Stats strip ---------- */
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:44px; }
.stat-item{ text-align:center; }
.stat-item strong{ display:block; font-family:var(--font-head); font-size:38px; color:var(--gold-400); }
.stat-item span{ font-size:13px; color:#b9c0d1; }

/* ---------- Package / itinerary ---------- */
.package-card{ display:grid; grid-template-columns:1fr 1.15fr; background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); margin-bottom:28px; }
.package-media{ position:relative; min-height:100%; }
.package-media img{ width:100%; height:100%; object-fit:cover; }
.package-days-badge{ position:absolute; bottom:16px; inset-inline-start:16px; background:var(--navy-950); color:#fff; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:700; }
.package-body{ padding:30px 32px; display:flex; flex-direction:column; }
.package-tags{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.tag{ font-size:11.5px; background:var(--cream-100); color:var(--text-heading); padding:4px 11px; border-radius:999px; font-weight:600; }
.package-body h3{ font-size:23px; }
.package-highlights{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0; }
.package-highlights li{ font-size:13px; color:var(--ink-600); display:flex; align-items:center; gap:6px; }
.package-highlights li::before{ content:'✓'; color:var(--success); font-weight:700; }
.package-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }

.itinerary-timeline{ position:relative; padding-inline-start:34px; }
.itinerary-timeline::before{ content:''; position:absolute; inset-inline-start:11px; top:6px; bottom:6px; width:2px; background:var(--line); }
.itinerary-day{ position:relative; padding-bottom:34px; }
.itinerary-day::before{ content:''; position:absolute; inset-inline-start:-34px; top:2px; width:24px; height:24px; border-radius:50%; background:var(--gold-500); border:4px solid var(--cream-50); }
.itinerary-day h4{ font-size:16.5px; margin-bottom:6px; }
.itinerary-day .day-label{ font-size:11.5px; color:var(--gold-600); font-weight:700; text-transform:uppercase; letter-spacing:1px; }

/* ---------- Detail page ---------- */
.detail-hero{ position:relative; height:52vh; min-height:380px; color:#fff; display:flex; align-items:flex-end; }
.detail-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,13,26,.15), rgba(7,13,26,.92)); }
.detail-hero-content{ position:relative; z-index:2; padding:40px 0; width:100%; }
.detail-hero h1{ color:#fff; font-size:clamp(28px,4vw,46px); margin-bottom:10px; }
.breadcrumb{ font-size:13px; color:#cfd6e4; margin-bottom:14px; }
.breadcrumb a{ color:var(--gold-400); }

.detail-layout{ display:grid; grid-template-columns:1fr 380px; gap:44px; align-items:start; }
.detail-main h2{ font-size:24px; margin-top:40px; }
.detail-main h2:first-child{ margin-top:0; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery-grid img{ border-radius:10px; aspect-ratio:1; object-fit:cover; }
.gallery-grid img:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }

.highlight-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.highlight-list li{ display:flex; gap:8px; font-size:14.5px; color:var(--ink-600); }
.highlight-list li::before{ content:'✦'; color:var(--gold-500); }

.ticket-options{ display:flex; flex-direction:column; gap:14px; }
.ticket-option{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:.2s; }
.ticket-option:hover{ border-color:var(--gold-500); background:var(--cream-100); }
.ticket-option-info{ flex:1; min-width:0; }
.ticket-option-name{ font-weight:700; font-size:15px; color:var(--text-heading); margin-bottom:3px; }
.ticket-option-desc{ font-size:12.5px; color:var(--ink-400); line-height:1.5; }
.ticket-option-price{ font-family:var(--font-head); font-size:19px; color:var(--gold-600); white-space:nowrap; }

.booking-sidebar{ position:sticky; top:110px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-md); }
.booking-sidebar .price-from{ font-family:var(--font-head); font-size:30px; color:var(--navy-950); }
.booking-sidebar .price-from small{ font-size:13px; color:var(--ink-400); font-family:var(--font-body); }
.sidebar-feature{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-600); padding:9px 0; border-top:1px dashed var(--line); }
.sidebar-feature:first-of-type{ border-top:none; }

/* ---------- Forms ---------- */
.form-row{ margin-bottom:16px; text-align:start; }
.form-row label{ display:block; font-size:13px; font-weight:600; color:var(--text-heading); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--ink-900); transition:.2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--gold-500); background:var(--white); box-shadow:0 0 0 3px rgba(212,175,55,.15); }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.required-note{ font-size:12px; color:var(--ink-400); margin-bottom:14px; }

.hero-search .form-row select, .hero-search .form-row input{ background:var(--cream-100); border-color:var(--line); }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(7,13,26,.65); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; visibility:hidden; transition:.25s; padding:20px; }
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{ background:var(--white); border-radius:var(--radius-lg); padding:34px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; position:relative; transform:translateY(20px); transition:transform .3s; }
.modal-overlay.open .modal{ transform:translateY(0); }
.modal-close{ position:absolute; top:18px; inset-inline-end:18px; background:var(--cream-100); border:none; width:34px; height:34px; border-radius:50%; font-size:18px; color:var(--ink-600); }
.modal-title{ font-size:21px; margin-bottom:4px; padding-inline-end:30px; }
.modal-subtitle{ font-size:13.5px; color:var(--ink-400); margin-bottom:22px; }
.step-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--navy-950); color:var(--gold-400); font-size:10.5px; font-weight:800; margin-inline-end:4px; }
.qty-section{ margin-bottom:16px; }
.qty-section > label{ display:block; font-size:13px; font-weight:600; color:var(--text-heading); margin-bottom:10px; }
.qty-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--cream-100); }
.qty-row-info strong{ display:block; font-size:14px; color:var(--text-heading); }
.qty-unit-price{ font-size:12px; color:var(--ink-400); }
.qty-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--white); }
.qty-btn{ width:32px; height:32px; border:none; background:var(--white); color:var(--text-heading); font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:.2s; }
.qty-btn:hover{ background:var(--gold-500); color:var(--navy-950); }
.qty-stepper input{ width:36px; border:none; text-align:center; font-weight:700; font-size:14px; padding:0; background:transparent; -moz-appearance:textfield; }
.qty-stepper input:focus{ outline:none; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-btn{ cursor:pointer; }
.qty-btn:active{ background:var(--gold-600); }
.booking-total-bar{ display:flex; justify-content:space-between; align-items:center; background:var(--cream-100); border-radius:10px; padding:12px 16px; margin-bottom:16px; font-weight:700; }
.booking-total-bar strong{ color:var(--gold-600); font-family:var(--font-head); font-size:19px; }
.booking-success{ text-align:center; padding:20px 0; }
.success-icon{ width:70px; height:70px; border-radius:50%; background:var(--success); color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.success-actions{ display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.success-actions .btn{ flex:1; min-width:150px; }

/* ---------- Testimonials ---------- */
.testimonial-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; }
.testimonial-stars{ color:var(--gold-500); margin-bottom:12px; letter-spacing:2px; }
.testimonial-text{ font-size:14.5px; font-style:italic; color:var(--ink-600); margin-bottom:18px; }
.testimonial-person{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial-person strong{ display:block; font-size:14px; color:var(--text-heading); }
.testimonial-person span{ font-size:12px; color:var(--ink-400); }

/* Real Google reviews (attraction-detail.php) - fetched live via the Places API, never
   fabricated. See includes/google_ratings.php for the honesty/attribution notes. */
.google-reviews-attr{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--ink-600); margin:-6px 0 18px; }
.google-reviews-attr svg{ color:var(--success); flex-shrink:0; }
.google-reviews-attr a{ color:var(--gold-600); font-weight:600; }
.google-review-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; margin-bottom:8px; }
.google-review-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; gap:10px; }
.google-review-head{ display:flex; align-items:center; gap:12px; }
.google-review-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.google-review-avatar-fallback{ display:flex; align-items:center; justify-content:center; background:var(--navy-900); color:var(--gold-400); font-weight:700; font-family:var(--font-head); }
.google-review-who{ min-width:0; }
.google-review-author{ display:block; font-size:14px; color:var(--text-heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.google-review-stars{ display:flex; gap:1px; margin-top:2px; }
.google-review-stars .star-filled{ color:var(--gold-500); }
.google-review-stars .star-empty{ color:var(--line); }
.google-review-text{ font-size:13.5px; line-height:1.6; color:var(--ink-600); margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.google-review-time{ font-size:11.5px; color:var(--ink-400); margin-top:auto; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:linear-gradient(120deg,var(--navy-950),var(--navy-700)); border-radius:var(--radius-lg); padding:60px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff; position:relative; overflow:hidden; }
.cta-banner::before{ content:'✦'; position:absolute; font-size:220px; color:rgba(212,175,55,.06); top:-60px; inset-inline-end:-20px; }
.cta-banner h2{ color:#fff; margin-bottom:8px; font-size:28px; }
.cta-banner p{ color:#c6cddb; margin:0; }

/* ---------- Specs table (cars/yachts) ---------- */
.specs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 24px; }
.spec-box{ text-align:center; background:var(--cream-100); border-radius:10px; padding:16px 10px; }
.spec-box strong{ display:block; font-size:17px; color:var(--text-heading); font-family:var(--font-head); }
.spec-box span{ font-size:11.5px; color:var(--ink-400); }

/* ---------- FAQ ---------- */
/* ---------- Cancellation policy page ---------- */
.policy-block{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 28px; margin-bottom:20px; }
.policy-block h2{ font-size:19px; margin-top:0; }
.policy-tier{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px dashed var(--line); flex-wrap:wrap; }
.policy-tier:first-of-type{ border-top:none; }
.policy-tier strong{ font-size:14px; color:var(--text-heading); font-weight:600; }
.policy-badge{ font-size:12px; font-weight:800; padding:6px 14px; border-radius:999px; white-space:nowrap; }
.policy-badge-good{ background:#dcf5e6; color:var(--success); }
.policy-badge-mid{ background:#fff3cd; color:#8a6d00; }
.policy-badge-bad{ background:#fde8e8; color:var(--danger); }
.policy-note{ font-size:12.5px; color:var(--ink-400); margin-top:14px; margin-bottom:0; padding-top:14px; border-top:1px dashed var(--line); }

.policy-link{ display:block; text-align:center; font-size:12px; color:var(--ink-400); margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.policy-link:hover{ color:var(--gold-600); }
.policy-banner{ display:flex; align-items:center; gap:10px; background:var(--cream-100); border:1px solid var(--line); border-radius:10px; padding:12px 18px; margin-bottom:32px; font-size:13px; color:var(--ink-600); }

/* Section sub-headings (used to split one page into labeled groups, e.g. yacht-cruise.php) */
.section-subhead{ display:flex; align-items:center; gap:10px; font-size:24px; margin-bottom:6px; color:var(--text-heading); }
.section-subhead svg{ color:var(--gold-500); flex-shrink:0; }
.section-subhead-note{ color:var(--ink-600); font-size:14px; margin-bottom:22px; max-width:640px; }
.jetski-addon-note{ background:var(--cream-100); border-radius:8px; padding:8px 12px; font-size:12.5px; color:var(--ink-600); margin-bottom:12px; }

/* Casual cross-sell mention (e.g. luxury cars, no longer a dedicated nav section) */
.luxury-car-teaser{ display:flex; align-items:center; gap:16px; background:var(--cream-100); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 24px; margin-top:36px; flex-wrap:wrap; }
.luxury-car-teaser svg{ color:var(--gold-500); flex-shrink:0; }
.luxury-car-teaser div{ flex:1; min-width:200px; }
.luxury-car-teaser strong{ display:block; font-size:15px; color:var(--text-heading); margin-bottom:2px; }
.luxury-car-teaser p{ font-size:13px; color:var(--ink-600); margin:0; }
.policy-banner a{ color:var(--gold-600); font-weight:700; text-decoration:underline; }

.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:start; padding:18px 4px; background:none; border:none; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:15.5px; color:var(--text-heading); }
.faq-icon{ transition:.25s; color:var(--gold-600); }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; font-size:14px; color:var(--ink-600); }
.faq-item.open .faq-a{ max-height:200px; padding-bottom:18px; }

/* ---------- Steps (about/process) ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step-item{ position:relative; padding-inline-start:20px; }
@media (min-width:1081px){
  .step-item:nth-child(even){ margin-top:26px; }
}
.step-item strong.step-num{ font-family:var(--font-head); font-size:44px; color:rgba(212,175,55,.35); display:block; }
.step-item h4{ font-size:16px; margin-top:-14px; }
.step-item p{ font-size:13.5px; }

/* ---------- Contact page ---------- */
.contact-layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; }
.contact-info-card{ background:var(--navy-950); color:#fff; border-radius:var(--radius-lg); padding:36px; }
.contact-info-card h3{ color:#fff; }
.contact-info-item{ display:flex; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
.contact-info-item:first-of-type{ border-top:none; }
.contact-info-item .ci-icon{ font-size:20px; }
.contact-info-item strong{ display:block; font-size:14px; margin-bottom:2px; }
.contact-info-item span, .contact-info-item a{ font-size:13px; color:#b9c0d1; }
.map-embed{ border-radius:var(--radius-md); overflow:hidden; margin-top:22px; border:1px solid rgba(255,255,255,.12); }
.detail-main .map-embed{ border:1px solid var(--line); box-shadow:var(--shadow-sm); }

.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm); }

.interest-checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.interest-check{ display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:13.5px; color:var(--ink-600); cursor:pointer; transition:.2s; }
.interest-check:hover{ border-color:var(--gold-500); background:var(--cream-100); }
.interest-check input{ width:16px; height:16px; accent-color:var(--gold-600); }
.interest-check:has(input:checked){ border-color:var(--gold-500); background:var(--cream-100); color:var(--text-heading); font-weight:600; }

.itinerary-or-divider{ display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--ink-400); font-size:12.5px; }
.itinerary-or-divider::before, .itinerary-or-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- Cart page ---------- */
.cart-empty{ text-align:center; padding:70px 20px; max-width:480px; margin:0 auto; }
.cart-empty-icon{ font-size:60px; margin-bottom:20px; }
.cart-empty h2{ font-size:22px; }

.notfound-search{ display:flex; gap:10px; margin:26px 0 18px; }
.notfound-search input{ flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-md); font-family:var(--font-body); font-size:14px; background:var(--white); color:var(--ink-900); }
.notfound-search input:focus{ outline:2px solid var(--gold-500); outline-offset:1px; }
.notfound-search .btn{ padding:0 18px; display:inline-flex; align-items:center; justify-content:center; }
.notfound-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.notfound-whatsapp{ margin:22px 0 0; }

.cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start; }
.cart-items{ display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:grid; grid-template-columns:1fr auto auto; gap:22px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; }
.cart-item-badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--gold-600); background:var(--cream-100); padding:3px 10px; border-radius:999px; margin-bottom:6px; }
.cart-item-name{ font-size:16px; margin:0 0 4px; color:var(--text-heading); }
.cart-item-option{ font-size:12.5px; color:var(--ink-400); margin:0 0 6px; }
.cart-item-meta{ font-size:12px; color:var(--ink-400); }
.cart-item-qty{ display:flex; flex-direction:column; gap:8px; min-width:150px; }
.mini-qty-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-600); }
.qty-stepper-sm{ transform:scale(.9); transform-origin:right center; }
[dir="ltr"] .qty-stepper-sm{ transform-origin:left center; }
.qty-stepper-sm .qty-btn{ width:24px; height:24px; font-size:13px; }
.mini-qty-value{ min-width:20px; text-align:center; font-weight:700; font-size:13px; padding:0 4px; }
.cart-item-fixed-note{ font-size:13px; color:var(--ink-400); font-weight:600; }
.cart-item-price{ text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-item-total{ font-family:var(--font-head); font-size:18px; color:var(--text-heading); white-space:nowrap; }
.cart-item-remove{ background:none; border:none; color:var(--danger); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
.cart-item-remove:hover{ text-decoration:underline; }

.cart-summary{ position:sticky; top:110px; display:flex; flex-direction:column; gap:20px; }
.cart-summary-card{ background:var(--navy-950); color:#fff; border-radius:var(--radius-md); padding:22px; }
.cart-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; }
.cart-summary-total{ border-top:1px solid rgba(255,255,255,.15); margin-top:6px; padding-top:14px; font-size:16px; font-weight:700; }
.cart-summary-total strong{ color:var(--gold-400); font-family:var(--font-head); font-size:22px; }
.cart-estimate-note{ margin:14px 0 0; font-size:11.5px; color:#a8b0c2; line-height:1.6; }
.cart-checkout-card h3{ font-size:18px; }
.cart-checkout-card p{ font-size:13px; margin-bottom:18px; }

/* ---------- Misc pages ---------- */
.page-header{ background:var(--navy-950); color:#fff; padding:64px 0 54px; text-align:center; position:relative; overflow:hidden; }
.page-header::before{ content:''; position:absolute; inset:0; background:url('https://picsum.photos/seed/dubai-pattern/1600/400') center/cover; opacity:.15; }
.page-header-inner{ position:relative; z-index:2; }
.page-header h1{ color:#fff; font-size:clamp(28px,4vw,42px); }
.page-header p{ color:#c6cddb; max-width:600px; margin:10px auto 0; }

.about-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-card{ padding:28px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--line); }
.value-card .why-icon{ margin:0 0 16px; }

.split-section{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split-media{ position:relative; }
.split-media img{ border-radius:var(--radius-lg); width:100%; aspect-ratio:4/3.2; object-fit:cover; }
.split-media-badge{ position:absolute; bottom:-22px; inset-inline-start:-22px; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:18px 22px; display:flex; align-items:center; gap:14px; }
.split-media-badge strong{ font-family:var(--font-head); font-size:26px; color:var(--gold-600); display:block; }
.split-media-badge span{ font-size:11.5px; color:var(--ink-400); }

/* ---------- Site footer ---------- */
.site-footer{ background:var(--navy-950); color:#c6cddb; }
.footer-top{ padding:64px 0 40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; }
.footer-col h4{ color:#fff; font-size:15px; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col ul li a{ color:#b9c0d1; font-size:13.5px; transition:.2s; }
.footer-col ul li a:hover{ color:var(--gold-400); }
.footer-about p{ font-size:13.5px; color:#a8b0c2; margin:16px 0 20px; line-height:1.75; }
.footer-logo .logo-text strong{ color:#fff; }
.footer-logo .logo-text em{ color:var(--gold-400); }
.social-links{ display:flex; gap:10px; }
.social-links a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:15px; transition:.2s; }
.social-links a:hover{ background:var(--gold-500); transform:translateY(-3px); }
.footer-contact li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:#b9c0d1; line-height:1.6; }
.footer-contact li a{ color:#b9c0d1; }
.footer-contact li a:hover{ color:var(--gold-400); }

.footer-newsletter{ border-bottom:1px solid rgba(255,255,255,.08); }
.newsletter-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:32px; flex-wrap:wrap; }
.newsletter-inner h4{ color:#fff; font-size:16.5px; margin-bottom:4px; }
.newsletter-inner p{ font-size:13px; color:#a8b0c2; margin:0; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{ padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; min-width:240px; }
.newsletter-form input::placeholder{ color:#8b93a6; }
.newsletter-form input:focus{ outline:none; border-color:var(--gold-500); }

.footer-trust{ border-bottom:1px solid rgba(255,255,255,.08); }
.footer-trust-inner{ display:flex; align-items:center; justify-content:center; gap:8px; padding-block:20px; flex-wrap:wrap; text-align:center; }
.trust-secure{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#a8b0c2; font-weight:600; }

.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:20px; flex-wrap:wrap; font-size:12.5px; color:#8b93a6; }
.footer-bottom-inner p{ margin:0; color:inherit; }
.footer-license{ opacity:.8; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.scroll-top{ position:fixed; bottom:26px; inset-inline-start:26px; width:46px; height:46px; border-radius:50%; background:var(--navy-950); color:var(--gold-400); border:none; font-size:18px; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; z-index:400; }
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.whatsapp-float{ position:fixed; bottom:26px; inset-inline-end:26px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.55); z-index:400; animation:floatPulse 2.4s ease-in-out infinite; }
.whatsapp-float svg{ width:30px; height:30px; }
@keyframes floatPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} }

.toast{ position:fixed; bottom:26px; inset-inline-start:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-950); color:#fff; padding:14px 26px; border-radius:999px; font-size:13.5px; box-shadow:var(--shadow-lg); z-index:2000; opacity:0; visibility:hidden; transition:.3s; }
[dir="rtl"] .toast{ transform:translateX(50%) translateY(20px); }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
[dir="rtl"] .toast.show{ transform:translateX(50%) translateY(0); }
.toast.error{ background:var(--danger); }

.field-error{ color:var(--danger); font-size:12px; margin-top:4px; display:none; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea{ border-color:var(--danger); }
.form-row.invalid .field-error{ display:block; }

/* ==========================================================================
   Best Sellers carousel
   ========================================================================== */
.best-sellers-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; margin:0 0 32px; text-align:start; }
.best-sellers-head p{ max-width:520px; }
.best-sellers-logo{ height:52px; width:auto; flex-shrink:0; opacity:.92; }
.best-sellers-track{ display:flex; gap:20px; overflow-x:auto; padding:6px 2px 18px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.best-sellers-track::-webkit-scrollbar{ height:6px; }
.best-sellers-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.best-seller-card{ scroll-snap-align:start; flex:0 0 260px; background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:.3s; border:1px solid var(--line); }
.best-seller-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.bsc-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.bsc-media img{ width:100%; height:100%; object-fit:cover; }
.bsc-ribbon{ position:absolute; top:12px; inset-inline-start:12px; background:var(--gold-500); color:var(--navy-950); font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.bsc-discount{ position:absolute; top:12px; inset-inline-end:12px; background:var(--danger); color:#fff; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.bsc-body{ padding:14px 16px 18px; }
.bsc-body h4{ font-size:15.5px; margin-bottom:8px; line-height:1.4; }
.bsc-price{ display:flex; align-items:baseline; gap:8px; }
.bsc-price-old{ color:var(--ink-400); font-size:12.5px; }
.bsc-price strong{ color:var(--gold-600); font-size:16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* 8 mega-menu categories + logo + Custom Trip Plan button need real room - below this width
   the desktop nav row starts running out of space, so switch to the hamburger earlier than the
   general tablet breakpoint to guarantee the header never overflows/clips off-screen. */
@media (max-width:1240px){
  .primary-nav{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:1080px){
  .best-sellers-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .best-sellers-logo{ height:40px; }
  .category-grid{ grid-template-columns:repeat(2,1fr); }
  .card-grid, .combo-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid, .stats-strip, .steps-grid, .about-values{ grid-template-columns:repeat(2,1fr); }
  .detail-layout{ grid-template-columns:1fr; }
  .booking-sidebar{ position:static; }
  .package-card{ grid-template-columns:1fr; }
  .package-media{ aspect-ratio:16/9; }
  .contact-layout{ grid-template-columns:1fr; }
  .split-section{ grid-template-columns:1fr; }
  .testimonial-track{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cart-layout{ grid-template-columns:1fr; }
  .cart-summary{ position:static; }
}
@media (max-width:860px){
  .hero-search{ grid-template-columns:1fr 1fr; }
  .topbar-tagline{ display:none; }
}
@media (max-width:640px){
  .topbar-link:not(.cart-link){ font-size:0; }
  .topbar-right{ gap:12px; }
  .category-grid, .card-grid, .combo-grid, .why-grid, .stats-strip, .steps-grid, .about-values, .testimonial-track, .interest-checks{ grid-template-columns:1fr; }
  .hero-search{ grid-template-columns:1fr; margin-top:-40px; }
  .hero-stats{ gap:24px; }
  .form-grid-2{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid img:first-child{ grid-column:span 2; }
  .specs-grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:56px 0; }
  .cta-banner{ padding:40px 26px; text-align:center; justify-content:center; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .newsletter-inner{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ width:100%; }
  .newsletter-form input{ flex:1; min-width:0; }
  .footer-trust-inner{ flex-direction:column; align-items:flex-start; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; align-items:center; }
  .cart-item{ grid-template-columns:1fr; text-align:start; }
  .cart-item-price{ align-items:flex-start; flex-direction:row; justify-content:space-between; width:100%; }
}

/* ==========================================================================
   Print stylesheet - real use case: a visitor prints their "My Trip" (cart.php)
   or a sent itinerary (itinerary.php) to keep offline. Strips chrome (nav, mega
   menu, footer, WhatsApp float button, search panel) and every interactive
   control that does nothing on paper, and switches to plain black-on-white ink.
   ========================================================================== */
@media print{
  .topbar, .main-nav, .mobile-bottom-nav, .site-footer, .whatsapp-float,
  .search-focus-panel, .filter-tabs, .lang-switch, .booking-modal, .toast,
  iframe, video, .video-embed{ display:none !important; }
  button, .btn, a.btn{ display:none !important; }
  /* Hardcoded #fff, deliberately not var(--white) - print output must always be plain white
     paper regardless of the visitor's light/dark theme preference. */
  body{ background:#fff; color:#000; }
  a{ color:#000; text-decoration:underline; }
  a[href]:after{ content:""; } /* don't print raw URLs after every link - too noisy for a trip list */
  .container{ max-width:100%; padding:0 8px; }
  .section{ padding:12px 0; }
  .card, .cart-item, .cart-summary-card{ box-shadow:none !important; border:1px solid #999 !important; break-inside:avoid; }
  .hero, .page-header{ background:#fff !important; color:#000 !important; padding:16px 0; }
}

/* ==========================================================================
   Dark mode - OPT-IN ONLY via the sun/moon toggle button in the topbar (never
   automatic, never based on the visitor's OS/browser preference). The site's
   default, primary view is always this normal light design - :root above is
   untouched and stays exactly as designed. This block only applies once JS
   (assets/js/main.js, initThemeToggle()) adds data-theme="dark" to <html>,
   which only happens after a visitor deliberately clicks the toggle; their
   choice is then remembered in localStorage (read back, before first paint,
   by the small inline script at the top of includes/header.php) so it's
   consistent across pages without ever overriding a first-time visitor's
   default light view.

   Only the tokens below are redefined; every component already references
   them via var(...), so this list is the entire dark theme.

   Deliberately UNCHANGED: --navy-* and --gold-* stay exactly as in light mode.
   They're the brand's own dark-navy-and-gold chrome (header, footer, buttons,
   badges) which already reads correctly on a dark page with no adjustment -
   only the light "page and card" side of the palette (page background, card
   surfaces, borders, body text) needs to flip. --text-heading exists as its
   own token specifically because --navy-900/800/700 are also used as REAL
   backgrounds elsewhere (header bar, buttons, chips) that must not change -
   see its definition in :root above.
   ========================================================================== */
:root[data-theme="dark"]{
  color-scheme: dark;
  --cream-50:#0B1626;
  --cream-100:#101d34;
  --white:#132540;
  --line:rgba(255,255,255,.14);
  --ink-900:#F2EDE1;
  --ink-600:#AEB8C9;
  --ink-400:#7E8AA0;
  --text-heading:#F7F2E4;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}