:root {
  /* Navigation weights (header-local).
     The mockups are set in Manrope; Montserrat reads heavier at the same weight,
     so each step sits one notch below the mockup value to match it optically. */
  --nav-font-weight: 500;
  --nav-font-weight-strong: 600;
  --nav-font-weight-label: 700;

  /* Navigation palette (header-local) */
  --nav-text-color: var(--ink-color);
  --nav-text-muted-color: var(--text-secondary-color);
  --nav-label-color: var(--text-muted-color);
  --nav-border-color: var(--border-color);
  --nav-border-subtle-color: var(--border-color);
  --nav-hover-background-color: var(--accent-subtle-color);
  --nav-badge-background-color: var(--promo-color);
  --nav-dropdown-shadow: 0 28px 60px -20px rgba(12, 27, 46, 0.4);
}

@media (max-width: 1023px) {
  .mobile-header {
    display: block;
  }

  .desktop-header {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mobile-header {
    display: none;
  }

  .desktop-header {
    display: block;
  }
}

/* ===== Desktop header ===== */

.desktop-header {
  top: 0;
  z-index: 100;
  position: sticky;
  height: var(--desktop-header-height);
  background-color: var(--white-color);
  border-bottom: 1px solid var(--nav-border-subtle-color);
}

.desktop-header__wrapper {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .desktop-header__wrapper {
    max-width: 48rem;
  }
}

@media (min-width: 1024px) {
  .desktop-header__wrapper {
    max-width: 64rem;
  }
}

@media (min-width: 1280px) {
  .desktop-header__wrapper {
    max-width: 72rem;
  }
}

@media (min-width: 1921px) {
  .desktop-header__wrapper {
    max-width: 80rem;
  }
}

.desktop-header__primary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  min-width: 0;
}

.desktop-header__secondary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.desktop-header__logo {
  height: auto;
  flex-shrink: 0;
}

.autopay-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.autopay-logo > svg {
  display: block;
}

.autopay-logo__mobility {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  color: var(--ink-color);
  text-align: end;
  text-align-last: end;
  margin-right: -0.4em;
}

/* ===== Nav tabs ===== */

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tabs__item {
  position: relative;
  margin: 0;
}

.nav-tabs__button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--market-content-fonts);
  font-size: 15px;
  font-weight: var(--nav-font-weight);
  line-height: 1.5;
  color: var(--nav-text-color);
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

@media (max-width: 1279px) {
  .nav-tabs__button {
    padding: 0.5rem 0.625rem;
    font-size: 14px;
  }
}

.nav-tabs__button:hover,
.nav-tabs__button--open {
  background-color: var(--nav-hover-background-color);
  color: var(--accent-strong-color);
}

.nav-tabs__button:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: 2px;
}

.nav-tabs__chevron {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease-out;
}

.nav-tabs__button--open .nav-tabs__chevron {
  transform: translateY(1px) rotate(-135deg);
}

/* ===== Dropdown ===== */

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -0.5rem;
  z-index: 90;
  width: 19rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: 0.875rem;
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: var(--nav-dropdown-shadow);
}

.nav-dropdown[hidden] {
  display: none;
}

.nav-dropdown__group-label {
  margin: 0;
  padding: 0.25rem 0.625rem 0.5rem;
  font-family: var(--market-content-fonts);
  font-size: 11px;
  font-weight: var(--nav-font-weight-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-label-color);
}

.nav-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-dropdown__list + .nav-dropdown__group-label {
  padding-top: 0.875rem;
}

.nav-dropdown__list li {
  margin: 0;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.5625rem;
  text-decoration: none;
  font-family: var(--market-content-fonts);
  font-size: 14px;
  font-weight: var(--nav-font-weight);
  line-height: 1.4;
  color: var(--nav-text-color);
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.nav-dropdown__link:hover {
  background-color: var(--nav-hover-background-color);
  color: var(--accent-strong-color);
}

.nav-dropdown__link:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: -2px;
}

.nav-dropdown__name {
  flex: 1;
}

.nav-dropdown__flag {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(12, 27, 46, 0.08);
}

.nav-dropdown__icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 20px;
}

/* ===== Cart ===== */

.nav-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--nav-border-color);
  border-radius: 0.6875rem;
  transition: background-color 0.15s ease-out;
}

.nav-cart:hover {
  background-color: var(--nav-hover-background-color);
}

.nav-cart:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: 2px;
}

.nav-cart svg {
  width: 22px;
  height: 22px;
}

/* Standalone page link next to the locale selector (travel insurance). */
.desktop-header__link {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 0.875rem;
  border-radius: 0.6875rem;
  white-space: nowrap;
  font-family: var(--market-content-fonts);
  font-size: 15px;
  font-weight: var(--nav-font-weight);
  line-height: 1.5;
  color: var(--nav-text-color);
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.desktop-header__link:hover {
  background-color: var(--nav-hover-background-color);
  color: var(--accent-strong-color);
}

.desktop-header__link:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: 2px;
}

.cart_icon__count__parent {
  position: relative;
  display: flex;
}

.cart_icon__count__parent__child {
  display: flex;
}

.cart_icon__count__parent__child:after {
  content: attr(data-cart-length);
  position: absolute;
  top: -15px;
  right: -20px;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid var(--white-color);
  background-color: var(--nav-badge-background-color);
  color: var(--nav-text-color);
  font-family: var(--market-content-fonts);
  font-size: 11.5px;
  font-weight: var(--nav-font-weight-label);
  line-height: 1;
}

/* Do not display cart length element in Safari */
.cart_icon__count__parent__child:not([data-cart-length]):after,
.cart_icon__count__parent__child[data-cart-length=""]:after {
  display: none;
}

/* ===== Mobile header ===== */

.mobile-header {
  top: 0;
  z-index: 100;
  position: sticky;
  width: 100%;
  background-color: var(--white-color);
  border-bottom: 1px solid var(--nav-border-subtle-color);
}

.mobile-header__bar {
  height: var(--mobile-header-height);
  padding: 0 0.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mobile-header__logo {
  height: auto;
  flex-shrink: 0;
}

.mobile-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.mobile-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border: 1px solid var(--nav-border-color);
  border-radius: 0.6875rem;
}

.mobile-header__toggle:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: 2px;
}

.mobile-header__toggle-line {
  width: 18px;
  height: 2px;
  display: block;
  position: relative;
  border-radius: 2px;
  background: var(--nav-text-color);
  transition: background 0.2s ease-out;
}

.mobile-header__toggle-line::before,
.mobile-header__toggle-line::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border-radius: 2px;
  background: var(--nav-text-color);
  transition: transform 0.2s ease-out, top 0.2s ease-out;
}

.mobile-header__toggle-line::before {
  top: 6px;
}

.mobile-header__toggle-line::after {
  top: -6px;
}

.mobile-header--open .mobile-header__toggle-line {
  background: transparent;
}

.mobile-header--open .mobile-header__toggle-line::before {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-header--open .mobile-header__toggle-line::after {
  top: 0;
  transform: rotate(45deg);
}

/* ===== Mobile menu ===== */

.mobile-header__backdrop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.mobile-header__backdrop[hidden] {
  display: none;
}

.mobile-navbar {
  max-height: calc(100vh - var(--mobile-header-height));
  overflow-y: auto;
  padding: 0.5rem 0.75rem 0.875rem;
  border-top: 1px solid var(--nav-border-subtle-color);
  background-color: var(--white-color);
}

.mobile-navbar[hidden] {
  display: none;
}

.mobile-navbar__section + .mobile-navbar__section {
  border-top: 1px solid var(--border-color);
}

.mobile-navbar__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8125rem 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--market-content-fonts);
  font-size: 16px;
  font-weight: var(--nav-font-weight);
  line-height: 1.4;
  color: var(--nav-text-color);
}

a.mobile-navbar__button {
  text-decoration: none;
}

.mobile-navbar__button:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: -2px;
}

.mobile-navbar__panel {
  padding-bottom: 0.5rem;
}

.mobile-navbar__panel[hidden] {
  display: none;
}

/* ===== Locale selector ===== */

.locale-flag {
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--nav-border-color);
  width: 21px;
  height: 14px;
}

.locale-dropdown {
  position: relative;
  display: inline-block;
}

.locale-selector-container {
  overflow: visible !important;
}

/* Accessibility utility class for screen reader only content */
.locale-selector-container__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.locale-dropdown-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.5rem 0.625rem;
  outline: none;
  cursor: pointer;
  color: var(--nav-text-color);
  font-family: var(--market-content-fonts);
  font-size: 13.5px;
  font-weight: var(--nav-font-weight-strong);
  line-height: 1.25rem;
  white-space: nowrap;
  background-color: var(--white-color);
  border: 1px solid var(--nav-border-color);
  border-radius: 0.625rem;
  transition: background-color 0.15s ease-out;
}

.locale-dropdown-button:hover {
  background-color: var(--nav-hover-background-color);
}

.locale-dropdown-button:focus-visible {
  outline: 2px solid var(--accent-strong-color);
  outline-offset: 2px;
}

/* Locale selector modal */
.locale-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.locale-modal[hidden] {
  display: none;
}

.locale-modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.locale-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  background-color: var(--white-color);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.locale-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-strong-color);
}

.locale-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-color);
}

.locale-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-color);
}

.locale-modal__body {
  padding: 1.25rem;
  overflow-y: auto;
}

.locale-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .locale-modal__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.locale-modal__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--ink-color);
  font-family: var(--market-content-fonts);
}

.locale-modal__item:hover {
  text-decoration: none;
  background-color: var(--surface-sunken-color);
}

.locale-modal__item--active {
  font-weight: 600;
  background-color: var(--surface-muted-color);
}

.locale-modal__item span {
  flex: 1;
  text-align: left;
  margin: 0;
}

.locale-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-strong-color);
}

body.locale-modal-open {
  overflow: hidden;
}

/* SPA layout (application_spa): flex column so every mounted React app fills at least the
   viewport height below the top-notification + header, regardless of how tall the app's
   current state is. The mount div grows to fill the remaining space and its own background
   extends to the bottom, so short states no longer leave a white gap.

   Flexbox (not calc) on purpose: the remaining height is derived automatically, so the
   variable-height top-notification bar is accounted for without hard-coding its height. */
.spa-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* Same as the React .App background (react/components/theme.css): the space below a short
     app state and the footer area continue the app surface instead of showing white. */
  background: var(--surface-muted-color);
}

.spa-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  /* Release the reservation below only after the app has settled: its first commit is one
     frame short of its real height, so an instant release flashes the footer up and down.
     Explicit 0, not the default auto: auto is not transitionable, so the delay would be skipped. */
  min-height: 0;
  transition: min-height 0s 0.5s;
}

/* While the loader shows, reserve a full viewport below the header so the footer starts below
   the fold — otherwise it sits mid-screen and jumps down when the app mounts (CLS ~0.3 on
   mobile). Only until mount: a permanent reservation would push the footer off screen and
   leave an empty gap under short app states. svh = the viewport at load, browser bars shown. */
.spa-main:has(.spa-view__placeholder, .checkout-view__placeholder) {
  min-height: 100vh;
  min-height: 100svh;
}

/* Only the mount div grows. Scoped to `> div` on purpose: the view also renders <link> and
   <script> tags as direct children, and they must keep their default display:none — a
   universal `> *` selector would turn them into visible flex items that steal height from
   the mount div. The mount div is itself a flex column so its single child — the loader
   placeholder before mount, the app root after — can fill the reserved height (the
   placeholder centres its loader; app roots keep their natural content height and let the
   mount div's own background extend to the bottom). */
.spa-main > div {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Loader shown before an SPA mounts. The mount div already fills the viewport via the
   .spa-main flex column above, so the placeholder just fills it and centres the loader —
   no viewport calc (which would ignore the top-notification bar and overshoot).

   Plain CSS on purpose: the SPA layout (application_spa) does not load the Tailwind
   build, so utility classes like `flex justify-center items-center` are inert here. */
.spa-view__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}