/* Hyper Era Tours — Theme V9
   Compact unified header and viewport-safe responsive navigation. */
:root{
  --v9-shell:#063844;
  --v9-shell-deep:#042d36;
  --v9-shell-soft:#0b4a57;
  --v9-gold:#f6bd55;
  --v9-white:#fff;
  --v9-muted:#c7dadd;
  --v9-line:rgba(255,255,255,.16);
  --v9-header-h:68px;
}

html,body{max-width:100%;overflow-x:clip}
body.menu-open{overflow:hidden!important;overscroll-behavior:none}

/* Compact announcement + header shell */
.luxury-announcement{
  height:30px!important;
  min-height:30px!important;
  background:var(--v9-shell-deep)!important;
}
.luxury-announcement-inner{height:30px!important;min-height:30px!important}
.luxury-announcement p,.luxury-announcement a{font-size:.62rem!important;line-height:1!important}

.luxury-header,
.is-inner .luxury-header,
.luxury-header.is-scrolled{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  height:var(--v9-header-h)!important;
  min-height:var(--v9-header-h)!important;
  background:var(--v9-shell)!important;
  border-bottom:1px solid var(--v9-line)!important;
  box-shadow:0 10px 26px rgba(2,27,33,.16)!important;
  z-index:900!important;
}
.luxury-nav-wrap{height:100%!important;min-height:0!important;gap:18px!important}
.luxury-brand{gap:9px!important}
.luxury-brand-mark{width:42px!important;height:36px!important;flex:0 0 42px!important}
.luxury-brand-mark svg{width:39px!important}
.luxury-brand>span:last-child strong{font-size:.96rem!important;line-height:1!important;letter-spacing:.085em!important}
.luxury-brand>span:last-child small{font-size:.47rem!important;line-height:1!important;margin-top:4px!important;letter-spacing:.31em!important}

/* Desktop navigation: compact, balanced and icon-led */
@media(min-width:901px){
  .luxury-main-nav{margin-left:auto!important;gap:4px!important;height:100%!important}
  .luxury-main-nav>a:not(.btn):not(.luxury-login-link):not(.luxury-account-link){
    min-width:auto!important;
    height:42px!important;
    padding:6px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border:1px solid transparent!important;
    border-radius:7px!important;
  }
  .luxury-main-nav>a:not(.btn):not(.luxury-login-link):not(.luxury-account-link):before{bottom:2px!important}
  .luxury-main-nav>a:not(.btn):hover,
  .luxury-main-nav>a.active{
    background:rgba(255,255,255,.09)!important;
    border-color:rgba(255,255,255,.11)!important;
  }
  .luxury-main-nav>a .mobile-nav-icon{
    display:grid!important;
    place-items:center!important;
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:6px!important;
    color:var(--v9-gold)!important;
  }
  .luxury-main-nav>a .mobile-nav-icon svg{width:14px!important;height:14px!important}
  .nav-link-copy{display:block!important}
  .nav-link-copy strong{font-size:.64rem!important;line-height:1!important;letter-spacing:.06em!important}
  .nav-link-copy small{display:none!important}
  .luxury-nav-actions{margin-left:6px!important;gap:7px!important}
  .luxury-login-link,.luxury-account-link{
    min-height:38px!important;
    padding:8px 11px!important;
    border-radius:7px!important;
    font-size:.64rem!important;
  }
  .luxury-plan-btn{
    min-height:40px!important;
    padding:9px 14px!important;
    border-radius:7px!important;
    font-size:.64rem!important;
  }
  .luxury-nav-actions .action-icon{width:17px!important;height:17px!important}
}

/* Viewport-safe mobile navigation */
@media(max-width:900px){
  :root{--v9-header-h:60px}
  .luxury-announcement{display:none!important}
  .luxury-header,
  .is-inner .luxury-header,
  .luxury-header.is-scrolled{
    height:var(--v9-header-h)!important;
    min-height:var(--v9-header-h)!important;
  }
  html{scroll-padding-top:var(--v9-header-h)!important}
  .luxury-nav-wrap{width:min(100% - 24px,1220px)!important;gap:10px!important}
  .luxury-brand-mark{width:37px!important;height:31px!important;flex-basis:37px!important}
  .luxury-brand-mark svg{width:34px!important}
  .luxury-brand>span:last-child strong{font-size:.82rem!important}
  .luxury-brand>span:last-child small{font-size:.41rem!important;letter-spacing:.25em!important}

  .luxury-menu-toggle,
  .is-inner .luxury-menu-toggle,
  .luxury-header.is-scrolled .luxury-menu-toggle{
    display:inline-flex!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:8px!important;
    margin:0!important;
    border-radius:7px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .luxury-menu-toggle span{width:21px!important;height:2px!important;margin:3px 0!important}

  .luxury-main-nav{
    position:fixed!important;
    inset:0 0 0 auto!important;
    right:0!important;
    left:auto!important;
    top:0!important;
    bottom:0!important;
    width:min(360px,calc(100vw - 18px))!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100svh!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0 13px calc(16px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:3px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    transform:translate3d(105%,0,0)!important;
    transition:transform .32s cubic-bezier(.22,.8,.24,1)!important;
    border:0!important;
    border-left:3px solid var(--v9-gold)!important;
    border-radius:0!important;
    box-shadow:-20px 0 55px rgba(1,22,27,.34)!important;
    background:var(--v9-shell)!important;
    z-index:1100!important;
    visibility:visible!important;
  }
  .luxury-main-nav.open{transform:translate3d(0,0,0)!important}

  .menu-backdrop{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    background:rgba(1,20,25,.62)!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
    z-index:1050!important;
  }

  .mobile-menu-head{
    display:flex!important;
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    min-height:63px!important;
    margin:0 -13px 10px!important;
    padding:10px 13px!important;
    background:var(--v9-shell)!important;
    border-bottom:1px solid var(--v9-line)!important;
  }
  .mobile-luxury-brand .luxury-brand-mark{width:35px!important;flex-basis:35px!important}
  .mobile-menu-close{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:7px!important;
    font-size:1.18rem!important;
    line-height:1!important;
  }

  .mobile-menu-intro{
    display:block!important;
    margin:0 0 8px!important;
    padding:13px!important;
    border-radius:7px!important;
    background:var(--v9-shell-soft)!important;
  }
  .mobile-menu-intro>span{font-size:.55rem!important;margin-bottom:4px!important}
  .mobile-menu-intro>strong{font-size:.82rem!important;line-height:1.42!important;max-width:none!important}
  .mobile-menu-intro>a{font-size:.61rem!important;margin-top:8px!important}

  .luxury-main-nav>a:not(.btn):not(.luxury-login-link):not(.luxury-account-link){
    width:100%!important;
    min-height:47px!important;
    margin:0!important;
    padding:6px 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    border-radius:7px!important;
    border:1px solid transparent!important;
    flex:0 0 auto!important;
  }
  .mobile-nav-icon{
    display:grid!important;
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    border-radius:6px!important;
  }
  .mobile-nav-icon svg{width:16px!important;height:16px!important}
  .nav-link-copy{min-width:0!important;display:block!important}
  .nav-link-copy strong{font-size:.68rem!important;line-height:1.1!important}
  .nav-link-copy small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.51rem!important;
    line-height:1.2!important;
    margin-top:3px!important;
  }

  .luxury-nav-actions{
    width:100%!important;
    margin:8px 0 0!important;
    padding-top:9px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    border-top:1px solid var(--v9-line)!important;
    flex:0 0 auto!important;
  }
  .luxury-login-link,.luxury-account-link,.luxury-plan-btn{
    width:100%!important;
    min-height:43px!important;
    margin:0!important;
    padding:9px 11px!important;
    border-radius:7px!important;
    justify-content:center!important;
    font-size:.63rem!important;
  }

  .mobile-menu-support{
    display:block!important;
    margin:9px 0 0!important;
    padding:11px!important;
    border-radius:7px!important;
    flex:0 0 auto!important;
  }
  .mobile-menu-support span{font-size:.54rem!important}
  .mobile-menu-support a{font-size:.72rem!important;margin:3px 0!important}
  .mobile-menu-support small{font-size:.5rem!important;line-height:1.4!important}

  .menu-toggle.is-open{opacity:0!important;pointer-events:none!important}
}

@media(max-width:420px){
  :root{--v9-header-h:56px}
  .luxury-nav-wrap{width:calc(100% - 18px)!important}
  .luxury-brand-mark{width:34px!important;height:29px!important;flex-basis:34px!important}
  .luxury-brand-mark svg{width:31px!important}
  .luxury-brand>span:last-child strong{font-size:.75rem!important}
  .luxury-brand>span:last-child small{font-size:.37rem!important;letter-spacing:.22em!important}
  .luxury-menu-toggle{width:37px!important;height:37px!important;min-width:37px!important}
  .luxury-main-nav{width:calc(100vw - 12px)!important;padding-inline:11px!important}
  .mobile-menu-head{margin-inline:-11px!important;padding-inline:11px!important}
  .mobile-menu-intro{padding:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .luxury-main-nav{transition:none!important}
}