: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: #0c1b2e;
  --nav-text-muted-color: #3a4a61;
  --nav-label-color: #8a99ae;
  --nav-border-color: #e1e8f2;
  --nav-border-subtle-color: #eef2f8;
  --nav-hover-background-color: #f5f9fd;
  --nav-badge-background-color: #cdee4f;
  --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: #282828;
  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(--dark-blue-color);
}

.nav-tabs__button:focus-visible {
  outline: 2px solid var(--dark-blue-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 #e6ecf5;
  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(--dark-blue-color);
}

.nav-dropdown__link:focus-visible {
  outline: 2px solid var(--dark-blue-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(--dark-blue-color);
  outline-offset: 2px;
}

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

.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(--dark-blue-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 #f3f6fb;
}

.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);
}

.mobile-navbar__button:focus-visible {
  outline: 2px solid var(--dark-blue-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(--dark-blue-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-dark-gray-color);
}

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

.locale-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-black-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(--text-black-color);
  font-family: var(--market-content-fonts);
}

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

.locale-modal__item--active {
  font-weight: 600;
  background-color: var(--background-light-gray-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-dark-gray-color);
}

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

@media (max-width: 1023px) {
  .min-h-screen-minus-header {
    min-height: calc(100vh - var(--mobile-header-height));
  }
}

@media (min-width: 1024px) {
  .min-h-screen-minus-header {
    min-height: calc(100vh - var(--desktop-header-height));
  }
}

/* SPA layout (application_spa): sticky-footer flex column so every mounted React app fills
   at least the viewport height below the top-notification + header, and — for apps that
   render a footer — keeps the footer pinned to the bottom without a gap, 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;
}

.spa-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* 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;
}