/* td-header.css - mega menu / mobile panel styles
   Two-column dropdown on desktop; stacked two-step on mobile.
*/

/* Reset for consistent layout */
*, *::before, *::after { box-sizing: border-box; }

/* Panel overlay container - full width like Daytours */
.td-tours-panel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--td-header-height, 64px)) !important;
  max-height: calc(100vh - var(--td-header-height, 64px)) !important;
  overflow: auto !important;
  background: #fff !important;
  z-index: 250000 !important;
  display: none;
}
.td-tours-panel.visible { display: block !important; }

/* backdrop */
.td-tours-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 109999;
}

/* inner card */
.td-tours-panel-inner {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 120px);
}

/* header row inside panel */
.td-tours-panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid #eee;
}
.td-tours-panel-title { margin:0; font-weight:700; font-size:1.05rem; }

/* main body two-column */
.td-tours-panel-body { display:flex; gap:18px; padding:16px; overflow:auto; }

/* left column (continents) */
.td-tours-left { flex:0 0 28%; min-width:200px; max-width:320px; }
.td-continents-list { list-style:none; margin:0; padding:0; }
.td-continents-list li { margin:6px 0; }
.td-continent-btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  font-size:1rem;
}
.td-continent-item.active .td-continent-btn {
  background:#f5fbff;
  border-color:#cfeefc;
  font-weight:700;
  color:#0b6fb2;
}

/* right column (countries) */
.td-tours-right { flex:1 1 auto; min-width:300px; }
.td-countries-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.td-countries-list li { width: calc(33.333% - 12px); margin-bottom:8px; }
.td-country-item a { display:block; padding:6px 4px; text-decoration:none; color:#111; }

/* mobile behavior: panel fills viewport and stacks */
@media (max-width:900px) {
  .td-tours-panel { top: 0; left: 0; transform: none; width:100%; max-width:100%; }
  .td-tours-panel-inner { height: 100vh; border-radius: 0; }
  .td-tours-panel-body { flex-direction: column; padding: 0; }
  .td-tours-left { order: 1; width:100%; max-width:100%; padding: 8px 12px; }
  .td-tours-right { order: 2; width:100%; padding: 8px 12px; }
  .td-countries-list { display:block; }
  .td-countries-list li { width: 100%; margin-bottom:6px; }
}

/* ensure header and mobile menu controls look clickable */
.td-tours-panel .td-tours-back,
.td-tours-panel .td-tours-close { background:transparent; border:0; font-size:18px; cursor:pointer; }

/* accessibility focus states */
.td-continent-btn:focus, .td-country-item a:focus { outline: 3px solid rgba(11,111,178,0.12); outline-offset: 2px; }

/* small helper for wishlist */
.afro-wishlist { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* td-header.css - updated for vertical lists and header z-index fixes */

/* Ensure header sits above hero overlays */
.afro-header {
  position: sticky;
  top: 0;
  z-index: 200000; /* high value to prevent hero overlap */
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* Panel overlay container - full width like Daytours */
.td-tours-panel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--td-header-height, 64px)) !important;
  max-height: calc(100vh - var(--td-header-height, 64px)) !important;
  overflow: auto !important;
  background: #fff !important;
  z-index: 250000 !important;
  display: none;
}
.td-tours-panel.visible { display: block !important; }

/* backdrop */
.td-tours-panel-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 249999 !important;
  display: none;
}

/* inner panel styles */
.td-tours-panel-inner {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}

/* header */
.td-tours-panel-header {
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #eee;
}
.td-tours-panel-title { margin:0; font-weight:700; }

/* body two-column */
.td-tours-panel-body { display:flex; gap:18px; padding:14px; overflow:auto; }

/* left column: continents vertical list */
.td-tours-left { flex:0 0 26%; min-width:180px; max-width:300px; overflow:auto; }
.td-continents-list { list-style:none; margin:0; padding:0; }
.td-continents-list li { margin:6px 0; }
.td-continent-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 12px; background:transparent; border:0; cursor:pointer; border-radius:6px;
  text-align:left; font-size:1rem;
}
.td-continent-item.active .td-continent-btn { background:#f5fbff; border:1px solid #cfeefc; font-weight:700; color:#0b6fb2; }

/* right column: countries vertical list (full width vertical) */
.td-tours-right { flex:1 1 auto; min-width:240px; overflow:auto; }
.td-countries-list-wrap { padding-left:6px; }
.td-countries-list { list-style:none; margin:0; padding:0; display:block; }
.td-countries-list li { margin:6px 0; }
.td-country-item a { display:block; padding:8px 10px; text-decoration:none; color:#111; border-radius:6px; }
.td-country-item a:hover { background:#f7f7f7; }

/* mobile: panel fills viewport and stacks */
@media (max-width:900px) {
  .td-tours-panel { left:0; transform:none; width:100%; max-width:100%; top:0; }
  .td-tours-panel-inner { height: 100vh; border-radius: 0; }
  .td-tours-panel-body { flex-direction:column; padding:0; }
  .td-tours-left, .td-tours-right { min-width:100%; max-width:100%; padding:10px 14px; }
  .td-continents-list li, .td-countries-list li { margin:0; }
  .td-country-item a { padding:12px 10px; border-bottom:1px solid #f0f0f0; }
  /* panel header mobile: show bold continent in Back area */
  .td-tours-panel-header .td-tours-back { display:inline-block; margin-right:10px; }
  .td-tours-panel-header .td-tours-back + .td-panel-current { font-weight:700; }
}

/* Back / Close buttons */
.td-tours-panel .td-tours-back,
.td-tours-panel .td-tours-close { background:transparent; border:0; font-size:18px; cursor:pointer; }

/* Footer copy helpers (if you use #td-footer-tours) */
.td-footer-tours { display:flex; gap:18px; flex-wrap:wrap; }
.td-footer-continent { min-width:180px; margin-bottom:12px; }
.td-footer-continent strong { display:block; margin-bottom:8px; font-weight:700; }


/* td-header visibility & click-fix tweaks */

/* make sure panel and backdrop sit above other content */
#td-tours-panel { z-index: 220000 !important; pointer-events: auto !important; }
#td-tours-panel-backdrop, #td-tours-panel .td-tours-panel-backdrop, .td-tours-panel-overlay { z-index: 219999 !important; pointer-events: auto !important; }

/* Close & Back buttons: high contrast & visible */
.td-tours-close, .td-tours-back { color:#222 !important; background: rgba(255,255,255,0.95); border: 1px solid #eee; padding:6px 8px; border-radius:6px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.06); font-size:16px; }

/* Ensure continent buttons are visible and focusable */
.td-continent-btn { color:#111 !important; background: transparent !important; border: 0 !important; padding:10px 12px; cursor:pointer; text-align:left; }

/* Countries (right column) as vertical list with clear links */
.td-countries-list { list-style:none; margin:0; padding:0; }
.td-countries-list li { margin-bottom:6px; }
.td-countries-list a { color:#0b6fb2; display:block; padding:8px 10px; text-decoration:none; border-radius:6px; background: transparent; pointer-events: auto; }
.td-countries-list a:hover, .td-countries-list a:focus { background:#f5fbff; color:#084a72; }

/* If any overlay is covering the right column, ensure pointer-events on right column */
.td-tours-right, .td-countries-list-wrap { pointer-events: auto !important; z-index: 220001; }

/* ensure the "visible" panel class shows */
.td-tours-panel.visible { display:block !important; }

/* mobile back continent name styling */
.td-panel-current { font-weight:700; margin-left:8px; }

/* ensure buttons inside panel show above background */
.td-tours-panel-inner button { z-index: 220002; position: relative; }

/* Visibility & clickability fixes for td-tours-panel */
#td-tours-panel { z-index: 250000 !important; pointer-events: auto !important; }
#td-tours-panel .td-tours-panel-inner { z-index: 250001; position: relative; }
#td-tours-panel-backdrop, #td-tours-panel .td-tours-panel-backdrop, .td-tours-panel-overlay { z-index: 249999 !important; pointer-events: auto !important; }

/* Back & Close buttons: high contrast and visible */
.td-tours-close, .td-tours-back {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

/* Right column countries vertical, clickable */
.td-countries-list { list-style: none; margin: 0; padding: 0; }
.td-countries-list li { margin-bottom: 6px; }
.td-countries-list a { display:block; padding:8px 10px; color:#0b6fb2; text-decoration:none; border-radius:6px; background:transparent; pointer-events:auto; }
.td-countries-list a:hover, .td-countries-list a:focus { background:#f5fbff; color:#084a72; }

/* Ensure the left column is visible and not overlapped */
.td-tours-left { z-index: 250002; }

/* Make sure controls are above panel content */
.td-tours-panel-header .td-tours-close, .td-tours-panel-header .td-tours-back { position: relative; z-index: 250003; }

/* Mobile: show only continent list initially */
@media (max-width:900px) {
  .td-tours-right { display: none; }
  .td-tours-left { display: block; }
  .td-panel-current { font-weight: 700; margin-left: 8px; }
}

/* Mobile two-step and clipping robustness */
@media (max-width:900px) {
  .td-tours-panel { left: 0 !important; transform: none !important; top: 0 !important; width: 100% !important; }
  .td-tours-panel-inner { height: 100vh; display:flex; flex-direction:column; padding-top: env(safe-area-inset-top, 12px); }
  .td-tours-panel-header { position: sticky; top: 0; z-index: 300005; background:#fff; }
  .td-tours-panel-body { padding:0; overflow:auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 56px); }
  .td-tours-left { display:block; max-height: calc(100vh - 56px); overflow:auto; }
  .td-tours-right { display:none; max-height: calc(100vh - 56px); overflow:auto; }
  .td-step-2 .td-tours-left { display:none !important; }
  .td-step-2 .td-tours-right { display:block !important; }
  .td-tours-panel-inner { -webkit-transform: none; transform: none; } /* prevent subpixel clipping */
}


/* Mobile: show full vertical list of continents (no inner scroll) */
@media (max-width:900px) {
  /* Make the panel body allow the left list to expand */
  .td-tours-panel-body {
    overflow: visible !important;
  }

  /* Left column: allow full height, no inner scrolling */
  .td-tours-left {
    max-height: none !important;
    overflow: visible !important;
    display: block;
    padding: 12px 16px !important;
  }

  /* Ensure the continents list stacks cleanly and is easy to tap */
  .td-continents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  .td-continents-list li { margin: 0; }

  /* Slightly larger tappable buttons */
  .td-continent-btn {
    padding: 14px 12px !important;
    font-size: 1.05rem !important;
    line-height: 1.2;
  }

  /* Ensure the right column remains hidden until a continent is chosen */
  .td-tours-right { display: none !important; }

  /* When in step-2 (user tapped a continent), show countries */
  .td-step-2 .td-tours-right { display: block !important; }
  .td-step-2 .td-tours-left { display: none !important; }
}

/* Hero & card slider sizing */
.td-tour-hero { width:100%; max-height:520px; overflow:hidden; }
.td-tour-hero .swiper-slide img { width:100%; height:auto; object-fit:cover; display:block; }
@media (min-width:1100px) {
  .td-tour-hero { max-height:420px; }
}
.td-card-slider .swiper-slide img { width:100%; height:200px; object-fit:cover; }
.td-tour-card { background:#fff; border-radius:8px; overflow:hidden; }

/* hide price and heart when inside hero single view - we'll only show overlay CTA + country */
.single .td-tour-hero-wrap .td-price-badge,
.single .td-tour-hero-wrap .td-wishlist-heart { display:none !important; }

/* ensure ask now and country overlay visible */
.td-tour-hero .td-hero-country { font-size:1.05rem; padding:6px 10px; }
.td-tour-hero .td-ask-now { font-weight:700; }

/* card slider fallback: enable swipe-like scroll if swiper missing */
.td-card-slider { overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
.td-card-slider .swiper-slide { display:inline-block; width:100%; }


/* Header wishlist dropdown and modal tweaks */
.afro-wishlist { cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#333; }
#td-wishlist-modal { display:none; align-items:center; justify-content:center; }
#td-wishlist-modal [id^="td-wishlist-"] .td-wishlist-item { padding:8px 0; border-bottom:1px solid #eee; }


/* Day Tours single-column dropdown (desktop) */
.td-dropdown-daytours { position: relative; display:inline-block; }
.td-dropdown-daytours .td-dropdown-toggle { background:transparent; border:0; padding:6px 8px; cursor:pointer; font-weight:600; }
.td-dropdown-daytours .td-dropdown-menu-daytours {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  padding: 12px;
  border-radius: 8px;
  z-index: 240000;
  width: 420px; /* adjust width as needed */
  max-height: 420px;
  overflow: auto;
}
.td-dropdown-daytours .td-dropdown-scroll { padding-right:6px; }

/* Continent header */
.td-dropdown-block { margin-bottom: 12px; }
.td-dropdown-block-title { font-weight:700; margin-bottom:6px; color:#111; }

/* Country block & tours list */
.td-dropdown-country { margin-bottom:8px; }
.td-dropdown-country-label { font-weight:600; color:#333; margin-bottom:4px; font-size:0.95rem; }
.td-dropdown-tourlist { list-style:none; margin:0; padding:0; }
.td-dropdown-touritem { margin:4px 0; }
.td-dropdown-touritem a { color:#0b6fb2; text-decoration:none; padding:4px 6px; display:block; border-radius:4px; }
.td-dropdown-touritem a:hover { background:#f5fbff; color:#084a72; }

/* Show on hover for desktop only */
@media (min-width: 993px) {
  .td-dropdown-daytours:hover > .td-dropdown-menu-daytours { display:block; }
}

/* Hide on mobile (use hamburger menu instead) */
@media (max-width: 992px) {
  .td-dropdown-daytours .td-dropdown-menu-daytours { display:none !important; }
}


/* ---------------------------
   Day Tours: auto two-column when many items
   Header hover, and mobile icon contrast tweaks
   --------------------------- */

/* When JS marks theDayTours container as two-column, layout becomes two-grid */
.td-dropdown-menu-daytours.td-daytours-two-col .td-dropdown-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* fallback: single column */
.td-dropdown-menu-daytours .td-dropdown-block { margin-bottom:12px; }

/* Header hover: red background + white text for nav links and dropdown toggles */
.afro-nav a:hover,
.afro-nav a:focus,
.td-dropdown-toggle:hover,
.td-dropdown-toggle:focus,
.td-wishlist-btn:hover,
.td-wishlist-btn:focus {
  background: #e22300; /* strong red */
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none;
  padding: 6px 8px;
  transition: background .18s ease;
}

/* Ensure caret remains visible on hover */
.td-dropdown-toggle .caret { margin-left:6px; color:inherit; }

/* Make mobile icons visible (contrast) */
@media (max-width: 992px) {
  .td-search-icon, #td-mobile-search-btn, #td-wishlist-btn-mobile, .afro-hamburger {
    color: #222 !important;
    background: rgba(255,255,255,0.95) !important;
    border-radius: 6px;
    padding: 6px;
    border: 1px solid rgba(0,0,0,0.06);
  }

  /* Small "Menu" badge above hamburger with contrast */
  .afro-hamburger-label {
    display:block;
    font-size:11px;
    color:#fff;
    background:#e22300;
    padding:3px 6px;
    border-radius:6px;
    margin-bottom:4px;
    font-weight:700;
    text-transform:uppercase;
  }

  /* Make sure these icons are visually distinct even on white header */
  .afro-hamburger { background: transparent !important; box-shadow:none; }
}

/* Mobile menu overlay styles (cloned menu) */
.td-mobile-menu-inner { background:#fff; padding:12px; max-height: calc(100vh - 56px); overflow:auto; }
.td-mobile-menu-list { list-style:none; margin:0; padding:0; }
.td-mobile-menu-list li { border-bottom:1px solid #f1f1f1; }
.td-mobile-menu-list a { display:block; padding:12px 16px; color:#111; text-decoration:none; }
.td-mobile-menu-list .sub-menu { display:none; padding-left:12px; background:#fafafa; }
.td-mobile-menu-list .has-children > .expander { float:right; background:transparent;border:0; font-size:14px; cursor:pointer; }

/* Small helper to ensure wishlist overlay does not expand header */
#td-wishlist-dropdown-mobile { position: fixed; left: 8px; right: 8px; top: 64px; z-index:300000; background:#fff; border-radius:8px; box-shadow:0 12px 36px rgba(0,0,0,0.12); padding:12px; max-height: calc(100vh - 84px); overflow:auto; display:none; }

/* ---- Day Tours small label + hover + header icon visibility fixes ---- */

/* Make Day Tours toggle text same size/weight as other nav links */
.td-dropdown-daytours .td-dropdown-toggle,
.td-dropdown-toggle {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;            /* visible black by default */
  text-transform: none;   /* small letters, keep capitalization as typed */
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  border: 0;
}

/* Hover state: red background, white text (desktop) */
@media (min-width: 993px) {
  .td-dropdown-toggle:hover,
  .afro-nav a:hover,
  #td-wishlist-btn:hover {
    background: #e22300 !important;
    color: #fff !important;
    text-decoration: none;
  }
}

/* Ensure Day Tours is visible (black) when not hovered */
.td-dropdown-daytours .td-dropdown-toggle { color: #111 !important; }

/* Ensure wishlist dropdown hidden by default (not expanding header) */
#td-wishlist-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 250000; }

/* Mobile: ensure header controls are visible and consistently ordered */
/* Force mobile header controls order: logo/title left, then search, wishlist, hamburger on right */
@media (max-width: 992px) {
  .afro-header-inner { display:flex !important; align-items:center !important; gap:8px !important; justify-content:space-between; }
  .afro-left { order: 1; display:flex; align-items:center; gap:8px; }
  .mobile-controls { order: 2; display:flex; align-items:center; gap:8px; }

  /* specific ordering inside mobile-controls */
  #td-mobile-search-btn, .td-search-icon { order: 1; display:inline-flex !important; background:transparent !important; border:0 !important; padding:6px; color:#222; }
  #td-wishlist-btn-mobile, .td-wishlist-icon-mobile { order: 2; display:inline-flex !important; padding:6px; color:#222; background:transparent; }
  .afro-hamburger-wrap { order: 3; display:flex; flex-direction:column; align-items:center; }

  /* make icons visible (contrast) */
  .td-search-icon, .td-wishlist-icon-mobile, .afro-hamburger { color:#222 !important; }

  /* Make "Menu" badge more subtle (white text on red background per your earlier preference) */
  .afro-hamburger-label { background:#e22300; color:#fff; padding:3px 6px; border-radius:6px; font-size:11px; font-weight:700; }
}

/* Mobile overlay: ensure the Day Tours submenu list is readable and flattened */
.td-mobile-menu-list .td-mobile-daytour-link { padding-left: 20px; color:#0b6fb2; display:block; text-decoration:none; }
.td-mobile-menu-list .td-mobile-daytour-link:hover { background:#f5fbff; color:#084a72; }

/* Day Tours label visible black by default, red background + white text on hover */
.td-dropdown-daytours .td-dropdown-toggle,
.td-open-daytours,
#dayToursTrigger {
  color: #111 !important;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
}

/* Hover state: red background, white text - desktop only */
@media (min-width: 993px) {
  .td-dropdown-daytours .td-dropdown-toggle:hover,
  .td-open-daytours:hover,
  #dayToursTrigger:hover { background: #e22300 !important; color: #fff !important; }
}

/* Panel styling (simple overlay) */
.td-daytours-panel { display:none; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; background: rgba(0,0,0,0.4); z-index: 300000; }
.td-daytours-panel .td-daytours-panel-inner { max-width: 960px; margin: 12px auto; background: #fff; border-radius:8px; overflow:auto; max-height: calc(100vh - 120px); }
.td-daytours-panel.hidden { display:none; }
.td-daytours-panel[aria-hidden="false"] { display:block; }


/* Mobile order & visibility fixes and Day Tours hover styling */

/* Ensure Day Tours trigger looks like other nav links and is visible (black) */
.td-dropdown-toggle, .td-open-daytours, #dayToursTrigger {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111 !important;
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
}

/* Hover (desktop): red background, white text */
@media (min-width: 993px) {
  .td-dropdown-toggle:hover,
  .td-open-daytours:hover,
  #dayToursTrigger:hover,
  .afro-nav a:hover,
  #td-wishlist-btn:hover {
    background: #e22300 !important;
    color: #fff !important;
    text-decoration: none;
  }
}

/* Hide desktop-only mobile-controls on desktop; show only on mobile */
@media (min-width: 993px) {
  .mobile-controls { display: none !important; }
  .afro-nav { display: flex !important; }
}

/* Mobile: show compact controls and enforce order: logo/title left, controls right */
@media (max-width: 992px) {
  .afro-header-inner { display:flex !important; align-items:center !important; gap:8px !important; padding:8px 12px; }
  .afro-left { order: 1; display:flex; align-items:center; gap:8px; }
  .mobile-controls { order: 2; margin-left:auto; display:flex; align-items:center; gap:8px; }

  /* specific ordering inside mobile-controls (left-to-right): search, wishlist, hamburger */
  #td-mobile-search-btn, .td-search-icon { order: 1; display:inline-flex !important; padding:6px; background:transparent; border:0; color:#222; }
  #td-wishlist-btn-mobile, .td-wishlist-icon-mobile { order: 2; display:inline-flex !important; padding:6px; color:#222; background:transparent; border:0; }
  .afro-hamburger-wrap { order: 3; display:flex; flex-direction:column; align-items:center; }
  .afro-hamburger-label { display:block; background:#e22300; color:#fff; font-size:11px; padding:3px 6px; border-radius:6px; margin-bottom:4px; font-weight:700; text-transform:uppercase; }

  /* ensure desktop nav hidden on mobile (we use mobile overlay) */
  .afro-nav { display: none !important; }
}

/* Make sure wishlist dropdown isn't visible by default (prevents header expand) */
#td-wishlist-dropdown { display: none; }

/* Mobile overlay base styles (toggles shown by JS) */
#td-mobile-search-popover,
#td-wishlist-dropdown-mobile,
#td-mobile-menu-overlay {
  position: fixed;
  left: 8px;
  right: 8px;
  top: 64px;
  z-index: 300000;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  max-height: calc(100vh - 84px);
  overflow: auto;
  display: none;
}

/* full-screen mobile menu overlay */
#td-mobile-menu-overlay { left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6); padding: 0; border-radius: 0; }
#td-mobile-menu-overlay .td-mobile-menu-inner { background:#fff; margin-top:56px; border-radius:6px 6px 0 0; max-height:calc(100vh - 56px); overflow:auto; padding:12px; }

/* small fixes for button appearance */
.td-dropdown-toggle:focus, .td-open-daytours:focus, #dayToursTrigger:focus { outline: 3px solid rgba(11,111,178,0.12); outline-offset: 2px; }


/* === td-header mobile/desktop layout fixes ===
   - Prevent header wrapping / large logo
   - Mobile header order: logo, title, search icon, heart, hamburger
   - Hide desktop search on mobile (only icon shown)
   - Style Day Tours trigger visible (black) and hover red/white
   - Ensure wishlist dropdown hidden until opened
   - Keep Tours panel logic intact
*/
.afro-header {
  position: sticky;
  top: 0;
  z-index: 120000;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* Constrain logo so it won't push header height */
.afro-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}

/* Header inner: single row on desktop; avoid wrapping */
.afro-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px 16px;
  flex-wrap: nowrap; /* prevent wrapping */
}

/* Primary nav: keep inline on desktop */
.afro-nav {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Make Day Tours trigger visible (black by default) and hover state red/white */
.td-dropdown-toggle, .td-open-daytours, #dayToursTrigger {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111 !important;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 6px;
}

/* Desktop hover red background and white text */
@media (min-width: 993px) {
  .afro-nav a:hover,
  .td-dropdown-toggle:hover,
  .td-open-daytours:hover,
  #dayToursTrigger:hover,
  #td-wishlist-btn:hover {
    background: #e22300 !important;
    color: #fff !important;
    text-decoration: none;
  }
}

/* Ensure wishlist dropdown hidden by default (prevents header expansion) */
#td-wishlist-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 125000; }

/* ---------------- Mobile-specific ---------------- */
@media (max-width: 992px) {
  /* Hide the full desktop nav; we'll use the hamburger overlay */
  .afro-nav { display: none !important; }

  /* Mobile controls container (shown on right) */
  .mobile-controls, .afro-hamburger-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  /* Hide desktop inline search; show only compact icon */
  #td-desktop-search-slot { display: none !important; }
  .td-search-icon, #td-mobile-search-btn {
    display: inline-flex !important;
    background: transparent !important;
    border: 0 !important;
    padding: 6px !important;
    font-size: 18px !important;
    color: #222 !important;
  }

  /* Wishlist compact icon (visible) */
  #td-wishlist-btn-mobile, .td-wishlist-icon-mobile {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #222;
  }

  /* Hamburger wrapper and small label above */
  .afro-hamburger-wrap { display: flex; flex-direction: column; align-items: center; }
  .afro-hamburger-label { display:block; font-size:11px; color:#fff; background:#e22300; padding:3px 6px; border-radius:6px; margin-bottom:4px; font-weight:700; text-transform:uppercase; }

  .afro-hamburger {
    font-size: 20px;
    border: 0;
    background: transparent;
    color: #222;
    padding: 6px;
  }

  /* Mobile overlay panels (search, wishlist, menu) */
  #td-mobile-search-popover,
  #td-wishlist-dropdown-mobile,
  #td-mobile-menu-overlay {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 64px;
    z-index: 300000;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    max-height: calc(100vh - 84px);
    overflow: auto;
    display: none;
  }

  /* full-screen mobile menu overlay */
  #td-mobile-menu-overlay { left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6); padding: 0; border-radius: 0; }
  #td-mobile-menu-overlay .td-mobile-menu-inner { background:#fff; margin-top:56px; border-radius:6px 6px 0 0; max-height: calc(100vh - 56px); overflow:auto; padding:12px; }

  /* Mobile menu list items */
  .td-mobile-menu-list { list-style:none; margin:0; padding:0; }
  .td-mobile-menu-list li { border-bottom:1px solid #f1f1f1; }
  .td-mobile-menu-list a { display:block; padding:12px 16px; color:#111; text-decoration:none; }
  .td-mobile-menu-list .sub-menu { display:none; padding-left:12px; background:#fafafa; }
}

/* Ensure the page content sits below the header (prevent header overlap) */
/* JS will update --td-header-offset to equal header height */
:root { --td-header-offset: 64px; }
body { padding-top: var(--td-header-offset); }