/* TOUR SCOPE V8.3.12 — R15 final programming closure.
   Scope is intentionally narrow: mobile header balance, footer logo centering,
   and the international WhatsApp country-code field. No route/content/CMS/
   pricing/popup/storage behavior is restyled here. */

:root{
  --ts15-teal:#0796a4;
  --ts15-aqua:#1dc8cf;
  --ts15-coral:#ff6a49;
  --ts15-ink:#0a334a;
  --ts15-line:#d8eaed;
}

/* --------------------------------------------------------------------------
   International phone field — shared by Homepage planner + internal booking
   modal. Native select intentionally keeps OS-level country list ergonomics.
   -------------------------------------------------------------------------- */
.ts-phone-combo{
  display:grid !important;
  grid-template-columns:minmax(170px,.95fr) minmax(150px,1.25fr) !important;
  align-items:end !important;
  gap:10px !important;
  width:100% !important;
}
.ts-phone-combo .ts-country-code,
.ts-phone-combo input[name="phoneNational"]{
  min-width:0 !important;
  width:100% !important;
}
.ts-country-code{
  cursor:pointer !important;
  text-overflow:ellipsis !important;
}
.ts-phone-hint{
  display:block !important;
  margin-top:7px !important;
  color:#70858e !important;
  font-size:10px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
.booking-panel .ts-phone-combo{
  padding:0 !important;
}
.booking-panel .ts-country-code,
.booking-panel .ts-phone-combo input[name="phoneNational"]{
  height:52px !important;
  border-bottom:1px solid rgba(6,29,43,.25) !important;
  color:var(--navy,#0d274e) !important;
  background:transparent !important;
  padding:0 5px !important;
  font-size:13px !important;
  font-weight:700 !important;
  outline:0 !important;
}
.booking-panel .ts-country-code:focus,
.booking-panel .ts-phone-combo input[name="phoneNational"]:focus{
  border-color:var(--ts15-coral) !important;
}
.ts-booking-modal .ts-phone-combo{
  grid-column:1/-1 !important;
}
.ts-booking-modal .ts-country-code,
.ts-booking-modal .ts-phone-combo input[name="phoneNational"]{
  width:100% !important;
  min-height:48px !important;
  border:1px solid #dbe8eb !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#123c52 !important;
  padding:0 12px !important;
  font-size:13px !important;
  font-weight:750 !important;
}
.ts-booking-modal .ts-phone-hint{
  grid-column:1/-1 !important;
  margin:6px 0 0 !important;
}

/* --------------------------------------------------------------------------
   Footer brand lockup: exact visual centering on tablet/mobile on every public
   template. This only affects alignment; approved brand asset stays unchanged.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .footer-brand-signature,
  .signature-footer>a:first-child,
  .xp-footer>a:first-child{
    grid-column:1 / -1 !important;
    justify-self:center !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile floating header. Keep Book Now compact and visually anchored to the
   right edge instead of floating in unused header space.
   -------------------------------------------------------------------------- */
@media(max-width:720px){
  .site-header,
  .signature-header,
  .xp-header{
    min-height:64px !important;
    height:64px !important;
    padding:6px 7px 6px 12px !important;
    gap:7px !important;
    align-items:center !important;
  }

  /* Homepage header has logo + CTA + menu toggle. */
  .site-header{
    grid-template-columns:minmax(0,1fr) auto 44px !important;
  }
  .site-header .brand{
    min-width:0 !important;
    justify-self:start !important;
  }
  .site-header .brand-logo-horizontal{
    width:min(42vw,154px) !important;
    height:48px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .site-header .header-cta{
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    min-width:118px !important;
    max-width:132px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:5px 5px 5px 13px !important;
    gap:8px !important;
    font-size:11.5px !important;
    line-height:1 !important;
  }
  .site-header .header-cta>span{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
    margin:0 !important;
  }

  /* Speedboat + generic headers both have a real navigation menu control. */
  .signature-header,
  .xp-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto 42px !important;
  }
  .signature-header>a:first-child,
  .xp-header .brand{
    min-width:0 !important;
    width:min(40vw,150px) !important;
    justify-self:start !important;
  }
  .signature-header>a:first-child img,
  .xp-header .brand img{
    width:100% !important;
    max-width:150px !important;
    max-height:48px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .signature-header-cta,
  .xp-header-cta{
    justify-self:end !important;
    align-self:center !important;
    min-width:116px !important;
    max-width:128px !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:5px 5px 5px 12px !important;
    gap:7px !important;
    font-size:11.5px !important;
  }
  .signature-header-cta>span,
  .xp-header-cta .xp-arrow{
    flex:0 0 37px !important;
    width:37px !important;
    height:37px !important;
    margin-left:3px !important;
  }
  .xp-header-cta:after{content:none !important;display:none !important}
  .menu-toggle,
  .ts-signature-mobile-menu>summary,
  .xp-mobile-menu>summary{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 !important;
    border:1px solid #d7ecef !important;
    border-radius:12px !important;
    background:linear-gradient(145deg,#f5ffff,#e6f8f9) !important;
    color:var(--ts15-ink) !important;
    box-shadow:0 6px 15px rgba(8,127,144,.08) !important;
  }
  .xp-mobile-menu>summary span{
    width:20px !important;height:2px !important;border-radius:99px !important;
    background:linear-gradient(90deg,#0b4861,var(--ts15-teal)) !important;
  }

  .ts-phone-combo{
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
  }
  .ts-country-code{
    min-height:48px !important;
  }
}

@media(max-width:390px){
  .site-header,
  .signature-header,
  .xp-header{padding-left:9px !important;padding-right:5px !important;gap:5px !important}
  .site-header .brand-logo-horizontal{width:min(39vw,142px) !important}
  .signature-header>a:first-child,.xp-header .brand{width:min(37vw,138px) !important}
  .site-header .header-cta,.signature-header-cta,.xp-header-cta{
    min-width:106px !important;
    max-width:116px !important;
    padding-left:10px !important;
    font-size:10.5px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header .header-cta,
  .signature-header-cta,
  .xp-header-cta{transition:none !important;transform:none !important}
}