/* Shared Qualoo app-store badge and stable navigation/footer chrome. */
/* Shared layer 2 */
header a[href*="apps.apple.com"],
  header a[href*="play.google.com"],
  nav a[href*="apps.apple.com"],
  nav a[href*="play.google.com"],
  .nav-drawer-badges a {
    display: inline-flex !important;
    align-items: center !important;
    height: 28px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

  header a[href*="apps.apple.com"] img,
  header a[href*="play.google.com"] img,
  nav a[href*="apps.apple.com"] img,
  nav a[href*="play.google.com"] img,
  .nav-drawer-badges img {
    display: block !important;
    height: 28px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 4px !important;
  }
  footer a[href*="apps.apple.com"],
  footer a[href*="play.google.com"],
  .q-footer-badges a {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    width: auto !important;
  }
  footer a[href*="apps.apple.com"] img,
  footer a[href*="play.google.com"] img,
  .q-footer-badges img {
    display: block !important;
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 4px !important;
  }


/* Shared layer 3 */
#themeToggle,
  .theme-toggle,
  .theme-toggle-btn,
  .tt {
    display: none !important;
  }

/* Keep the stays preference control available in the product navigation.
   The broad rule above suppresses legacy duplicate toggles elsewhere. */
#stays-app .nav-global #themeToggle,
#stays-app .nav-global .theme-toggle,
#stays-app .nav-global .theme-toggle-btn {
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
}

#stays-app .nav-global #themeToggle:hover,
#stays-app .nav-global .theme-toggle:hover,
#stays-app .nav-global .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

#stays-app .nav-global #themeToggle:focus-visible,
#stays-app .nav-global .theme-toggle:focus-visible,
#stays-app .nav-global .theme-toggle-btn:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}
  .q-navbar-scope,
  .q-footer-scope {
    --bg: var(--stays-chrome) !important;
    --bg2: var(--stays-dark-panel) !important;
    --text: var(--stays-night-text) !important;
    --text2: var(--stays-night-muted) !important;
    --border: rgba(255, 255, 255, 0.08) !important;
    --nav-bg: var(--stays-chrome) !important;
  }
  .q-navbar-scope .nav-global,
  header.nav-global,
  nav.nav-global,
  .nav-global,
  .nav-drawer,
  .drawer,
  .drawer-panel,
  .topbar,
  .site-header,
  .q-footer-scope .q-footer,
  footer.q-footer,
  .q-footer,
  footer.footer-master,
  .footer-master,
  footer.footer,
  .footer,
  .site-footer {
    background: var(--stays-chrome) !important;
    color: var(--stays-surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  .q-navbar-scope .nav-global {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: none !important;
  }
  .q-navbar-scope .nav-tab,
  .q-navbar-scope .nav-tab *,
  .q-navbar-scope .nav-menu-trigger,
  .q-navbar-scope .nav-menu-trigger *,
  .q-navbar-scope .dropdown-link,
  .q-navbar-scope .dropdown-link *,
  .q-navbar-scope .mega-link,
  .q-navbar-scope .mega-link *,
  .q-navbar-scope .mega-title,
  .q-navbar-scope .mega-desc,
  .q-navbar-scope .nav-drawer-link,
  .q-navbar-scope .nav-drawer-link *,
  .q-navbar-scope .theme-toggle,
  .q-navbar-scope .theme-toggle *,
  .q-navbar-scope .theme-toggle-btn,
  .q-navbar-scope .theme-toggle-btn *,
  .q-navbar-scope .account-link,
  .q-navbar-scope .account-link *,
  .q-navbar-scope .nav-actions > a,
  .q-navbar-scope .nav-actions > a *,
  .nav-global a,
  .nav-global a *,
  .nav-global button,
  .nav-global button *,
  .nav-tab,
  .nav-tab *,
  .nav-menu-trigger,
  .nav-menu-trigger *,
  .nav-drawer-link,
  .nav-drawer-link *,
  .drawer-link,
  .drawer-link *,
  .account-link,
  .account-link *,
  .theme-toggle,
  .theme-toggle *,
  .theme-toggle-btn,
  .theme-toggle-btn *,
  .topbar a,
  .site-header a,
  .q-footer a,
  .q-footer-brand p,
  .q-footer-col a,
  .q-footer-col h3,
  .q-footer-col h4,
  .q-footer-bottom a,
  .q-footer-copyright,
  .q-footer-legal-note,
  .footer a,
  .footer p,
  .footer span,
  .footer small,
  .footer-master a,
  .footer-master p,
  .footer-master span,
  .footer-master small,
  .site-footer a,
  .site-footer p,
  .site-footer span,
  .site-footer small {
    color: rgba(255, 255, 255, 0.72) !important;
  }
  .q-navbar-scope .nav-tab.active,
  .q-navbar-scope .nav-tab.active *,
  .nav-tab.active,
  .nav-tab.active * {
    color: var(--stays-surface) !important;
  }
  .q-navbar-scope .account-link svg,
  .q-navbar-scope .account-link svg path,
  .q-navbar-scope .account-link svg circle,
  .account-link svg,
  .account-link svg path,
  .account-link svg circle {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
  }
  .q-navbar-scope .nav-tab:hover,
  .q-navbar-scope .nav-tab:hover *,
  .q-navbar-scope .nav-menu-trigger:hover,
  .q-navbar-scope .nav-menu-trigger:hover *,
  .q-navbar-scope .dropdown-link:hover,
  .q-navbar-scope .mega-link:hover,
  .q-navbar-scope .nav-drawer-link:hover,
  .q-navbar-scope .nav-drawer-link:hover *,
  .q-navbar-scope .theme-toggle:hover,
  .q-navbar-scope .theme-toggle:hover *,
  .q-navbar-scope .theme-toggle-btn:hover,
  .q-navbar-scope .theme-toggle-btn:hover *,
  .q-navbar-scope .account-link:hover,
  .q-navbar-scope .account-link:hover *,
  .nav-tab:hover,
  .nav-tab:hover *,
  .nav-menu-trigger:hover,
  .nav-menu-trigger:hover *,
  .nav-drawer-link:hover,
  .nav-drawer-link:hover *,
  .drawer-link:hover,
  .drawer-link:hover *,
  .account-link:hover,
  .account-link:hover *,
  .theme-toggle:hover,
  .theme-toggle:hover *,
  .theme-toggle-btn:hover,
  .theme-toggle-btn:hover *,
  .q-footer a:hover,
  .q-footer-col a:hover,
  .q-footer-bottom a:hover,
  .footer a:hover,
  .footer-master a:hover,
  .site-footer a:hover {
    color: var(--stays-surface) !important;
  }
  .q-navbar-scope .mega-link:hover .mega-title,
  .mega-link:hover .mega-title {
    color: var(--stays-signal) !important;
  }
  .q-navbar-scope .mega-link:hover .mega-icon-box,
  .mega-link:hover .mega-icon-box {
    background: rgba(47, 128, 237, 0.15) !important;
    color: var(--stays-signal) !important;
    border-color: rgba(47, 128, 237, 0.28) !important;
  }
  .q-navbar-scope .mega-link:hover .mega-icon-box *,
  .mega-link:hover .mega-icon-box * {
    color: var(--stays-signal) !important;
    stroke: currentColor !important;
  }
  .q-footer-col h3,
  .q-footer-col h4,
  .footer h3,
  .footer h4,
  .footer-master h3,
  .footer-master h4,
  .site-footer h3,
  .site-footer h4 {
    color: var(--stays-surface) !important;
  }
  .q-navbar-scope .nav-tabs,
  .nav-tabs,
  .topbar-pills,
  .segmented-nav {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  .q-navbar-scope .dropdown-panel,
  .q-navbar-scope .mega-menu,
  .q-navbar-scope .discover-menu,
  .dropdown-panel,
  .mega-panel,
  .mega-menu,
  .drawer-menu {
    background: #0B0D14 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36) !important;
  }
  .q-navbar-scope .dropdown-icon-box,
  .q-navbar-scope .mega-icon-box,
  .q-navbar-scope .nav-hamburger,
  .q-footer-social,
  .dropdown-icon-box,
  .mega-icon-box,
  .nav-hamburger,
  .social-link,
  .footer-social {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.82) !important;
  }
  .q-navbar-scope .nav-hamburger span,
  .nav-hamburger span {
    background: var(--stays-surface) !important;
  }
  .q-footer-scope .q-footer,
  .q-footer,
  .footer,
  .footer-master,
  .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

@media (pointer: coarse) {
  html body .nav-brand,
  html body .nav-tab,
  html body .stays-prefs-trigger,
  html body .account-link,
  html body header a.badge-link,
  .map-view-toggle-link,
  .template-strip .chip,
  .template-map-toolbar .chip,
  .btn,
  .details-btn,
  .back-link,
  #backToHotel,
  .stays-filter-modal-close,
  .hotel-filter-text,
  .hotel-price-range,
  select,
  button:not(.stays-mobile-filter-backdrop) {
    min-height: var(--stays-touch-target) !important;
  }
}

@media (max-width: 700px) {
  html body .nav-brand { order: 1 !important; }
  html body .nav-tabs { order: 2 !important; }
  html body .nav-actions { order: 3 !important; }
}

/* Shared WCAG AA colour contracts for interactive and evidence components. */
html body .site-shell .nav-global .nav-inner .nav-tabs .nav-tab.active,
.nav-tab.active,
.details-btn,
.hotel-availability-btn,
.btn-primary,
.checkout-action {
  background: #1d4ed8 !important;
  color: var(--stays-surface) !important;
}

.nav-tab.active:hover,
.details-btn:hover,
.hotel-availability-btn:hover,
.btn-primary:hover,
.checkout-action:hover {
  background-color: var(--stays-signal-hover) !important;
}

.checkout-kicker,
.tab.active {
  color: var(--stays-signal) !important;
}

.score-box,
.review-score-pill.is-good {
  background-color: var(--stays-evidence-deep) !important;
  color: var(--stays-surface) !important;
}

.review-score-pill.is-mid {
  color: var(--stays-ink) !important;
}

.summary-stay > span,
#summaryDestination,
html body .summary-reference > dt {
  color: #4b5563 !important;
}

html body .summary-reference {
  opacity: 1 !important;
}

@media (pointer: coarse) {
  #stays-app body button:not(.stays-mobile-filter-backdrop),
  #stays-app body [role="button"],
  #stays-app body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  #stays-app body select,
  #stays-app body .nav-brand,
  #stays-app body .nav-tab,
  #stays-app body .stays-prefs-trigger,
  #stays-app body .account-link,
  #stays-app body header a.badge-link,
  #stays-app body .view-toggle a,
  #stays-app body .map-view-toggle-link,
  #stays-app body .details-btn,
  #stays-app body .btn,
  #stays-app body .back-link,
  #stays-app body #backToHotel {
    min-height: 46px !important;
  }

  #stays-app body .account-link,
  #stays-app body .stays-filter-modal-close,
  #stays-app body .map-expand-control,
  #stays-app body .calendar-nav-btn {
    min-width: 46px !important;
  }
}