/*
 * The checkout (mockup screen 4): blocks on one page (Wanneer, Bezorgadres, Contactgegevens, Betalen) and the way on in a foot
 * that sticks to the bottom: "Betalen · € 31,00" and the line about Mollie. A phone has no tab bar here. From 600px the page is
 * one centred column; from 1024px the order is next to the form and the way on is in it.
 */

@layer components {
  /* No tab bar on the checkout (the phone's way back is the title bar): what the foot sticks above is only the home indicator. */
  html:has(.checkout) {
    --tabbar-h: 0px;
    --bottom-bars: env(safe-area-inset-bottom);
  }

  .checkout-view {
    display: flex;
    flex-direction: column;
  }

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

  .checkout__main {
    flex: 1 0 auto;
    padding-bottom: var(--s-4);
  }

  /* On a phone and a tablet in portrait the foot belongs to the page: the side is only a place to write it. */
  .checkout__side,
  .checkout__pay {
    display: contents;
  }

  /* The lines and the totals are for the box next to the form; the button already says the total. */
  .checkout-summary,
  .checkout__totals {
    display: none;
  }

  /* A reason to look again at the form, at the top, where the focus goes: the list of what is wrong, each a link to its field. */
  .checkout-problems,
  .checkout-notice {
    margin: var(--s-3) var(--s-4) 0;
    scroll-margin-top: calc(var(--chrome-h) + var(--s-3));
  }

  .checkout-problems:focus,
  .checkout-notice:focus {
    outline: 0;
  }

  .checkout-problems:focus-visible,
  .checkout-notice:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .checkout-problems__body {
    flex: 1;
    min-width: 0;
  }

  .checkout-problems__title {
    font-weight: 700;
  }

  .checkout-problems__list {
    margin: var(--s-1) 0 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  /* Each is a target of 44px: a line of text under the one before it is a link as high as a finger. */
  .checkout-problems__link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: inherit;
    text-decoration: underline;
  }

  .checkout-problems__link:active {
    opacity: 0.6;
  }

  .checkout-problems .btn {
    margin-top: var(--s-3);
  }

  .checkout__notice {
    margin: var(--s-3) var(--s-4) 0;
  }

  .login-hint {
    margin: var(--s-3) var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 0.875rem;
  }

  /* The link of the hint is bold, as the design has it (screen 4). */
  .login-hint .text-link {
    font-weight: 700;
  }

  /* A block of the form: a small heading in capitals, and the fields or the choices under it. */
  .form-sec {
    margin: var(--s-4) var(--s-4) 0;
  }

  .form-sec__title {
    margin: 0 0 var(--s-2);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  /* A choice: a row with a real radio button over it (so the whole row is the target), the ring that is seen drawn next to it. */
  .choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 56px;
    margin-bottom: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
  }

  /* The chosen row has a border of 2px: one pixel less padding takes the pixel the border adds, so nothing moves. */
  .choice:has(.choice__input:checked) {
    padding: 7px 15px;
    border: 2px solid var(--primary);
  }

  .choice:active {
    background: var(--surface-2);
  }

  .choice__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
  }

  .choice__mark {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
  }

  .choice__input:checked + .choice__mark {
    border-color: var(--primary);
    background: radial-gradient(circle, var(--primary) 0 5px, transparent 5.5px);
  }

  .choice__input:focus-visible + .choice__mark {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .choice__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .choice__title {
    font-size: 1rem;
    font-weight: 700;
  }

  .choice__sub {
    color: var(--muted);
    font-size: 0.875rem;
  }

  /*
   * The choice of the points (doc 14 §4.2, screens L2 and L3): the same row, with a gold circle and the star in front and a switch at the end
   * where a radio button has its ring in front. The checkbox over the row has role="switch": the whole row is the target, the keyboard and a
   * screen reader work as with the switch of a phone. Chosen is the 2px border of every chosen choice and the knob on the other end.
   */
  .choice__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-text);
  }

  .choice__ico .icon {
    width: 1rem;
    height: 1rem;
  }

  .choice__switch {
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    border-radius: var(--r-pill);
    background: var(--border-strong);
  }

  .choice__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 25%, transparent);
  }

  .choice__input:checked ~ .choice__switch {
    background: var(--primary);
  }

  .choice__input:checked ~ .choice__switch::after {
    left: 23px;
    background: var(--on-primary);
  }

  .choice__input:focus-visible ~ .choice__switch {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .choice__switch,
    .choice__switch::after {
      transition:
        background-color 0.15s ease,
        left 0.15s ease;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .choice--points:hover {
      background: var(--surface-2);
      cursor: pointer;
    }
  }

  /*
   * A choice that is a link, not a radio button (the language, which switches at once and works without JavaScript): the same
   * row, chosen by aria-current. The row is the target, as it is with the radio button over it.
   */
  .choice--link {
    color: var(--text);
    text-decoration: none;
  }

  .choice--link[aria-current='true'] {
    padding: 7px 15px;
    border: 2px solid var(--primary);
  }

  .choice--link[aria-current='true'] .choice__mark {
    border-color: var(--primary);
    background: radial-gradient(circle, var(--primary) 0 5px, transparent 5.5px);
  }

  @media (hover: hover) and (pointer: fine) {
    .choice--link:hover {
      background: var(--surface-2);
      cursor: pointer;
    }
  }

  /* The time to choose, under the choices: a select, there without JavaScript, shown when "Kies een tijd" is chosen. */
  .checkout-time {
    margin-top: calc(var(--s-1) * -1);
  }

  /* The fields of the form: 12px apart, as the design has them. */
  .checkout .field {
    margin-bottom: var(--s-3);
  }

  /* Postal code and house number next to each other, 1.3 to 1; one under the other when there is not room (large text). */
  .checkout-pair {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s-3);
  }

  .checkout-pair > .field {
    flex: 1 1 7rem;
    min-width: 0;
  }

  .checkout-pair > .field:first-child {
    flex: 1.3 1 9rem;
  }

  .field__hint[hidden] {
    display: none;
  }

  /* The fields of "Ander adres": out of the way while a saved address is chosen (the script puts hidden on them). */
  .checkout-address-fields[hidden] {
    display: none;
  }

  .checkout-lookup {
    margin: calc(var(--s-3) * -1) 0 var(--s-3);
  }

  .checkout-lookup:empty {
    display: none;
  }

  .checkout-lookup__pickup {
    margin-bottom: var(--s-3);
  }

  .checkout-lookup__pickup[hidden] {
    display: none;
  }

  /* The way on, as the foot of the cart page: sticks above the bottom while the form scrolls. The button, and under it a line. */
  .checkout-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .checkout-foot__note {
    color: var(--muted);
    font-size: 0.875rem;
    text-align: center;
  }

  .checkout-summary__title {
    margin-bottom: var(--s-3);
    font-size: 1.25rem;
  }

  .checkout-summary__lines {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .checkout-summary__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
  }

  /* The line under the lines is the border of the totals and the way on (.checkout__pay), which stays when the lines scroll under it. */
  .checkout-summary__line:last-child {
    border-bottom: 0;
  }

  .checkout-summary__what {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .checkout-summary__name {
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .checkout-summary__options {
    color: var(--muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }

  .checkout-summary__total {
    flex: none;
    font-variant-numeric: tabular-nums;
  }

  /* ---- A tablet in portrait, a phone on its side, a browser: one centred column. ---- */
  @media (min-width: 600px) {
    .checkout-view {
      width: 100%;
      max-width: var(--narrow);
      margin-inline: auto;
    }
  }

  /* ---- Expanded: the order next to the form, with the way on in it. ---- */
  @media (min-width: 1024px) {
    .checkout-view {
      max-width: 64rem;
    }

    .checkout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 22rem;
      align-items: start;
      column-gap: var(--s-6);
      padding-inline: var(--s-4);
    }

    .checkout__main .form-sec,
    .checkout__main .login-hint,
    .checkout__main .checkout-problems,
    .checkout__main .checkout-notice,
    .checkout__main .checkout__notice {
      margin-inline: 0;
    }

    /*
     * The order and the way on: a box that keeps its place while the form scrolls. It is never higher than the screen below
     * the bars. When the order is longer than that (a long order, large text) the box scrolls, and it is the only thing that
     * scrolls: the totals and the button are pinned at the bottom of it (the same as the cart panel, where the lines scroll
     * above them), so that the button and the line about Mollie are always in view.
     */
    .checkout__side {
      display: block;
      position: sticky;
      top: calc(var(--chrome-h) + var(--s-4));
      max-height: calc(100vh - var(--chrome-h) - var(--s-4) * 2);
      max-height: calc(100dvh - var(--chrome-h) - var(--s-4) * 2);
      margin-top: var(--s-4);
      padding: var(--s-5) var(--s-5) 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-1);
    }

    .checkout-summary {
      display: block;
      padding-bottom: var(--s-3);
    }

    .checkout__pay {
      display: block;
      position: sticky;
      bottom: 0;
      padding: var(--s-3) 0 var(--s-5);
      border-top: 1px solid var(--border);
      background: var(--surface);
    }

    .checkout__totals {
      display: block;
    }

    .checkout__pay .card {
      margin: 0;
      padding: 0;
      background: none;
      box-shadow: none;
    }

    .checkout__side .cart-foot {
      position: static;
      margin-top: var(--s-4);
      padding: 0;
      border-top: 0;
      background: none;
    }

    /* The foot is in the box: the keyboard focus has nothing at the bottom of the page to clear. */
    html:has(.checkout-foot) {
      scroll-padding-bottom: calc(var(--s-4) + var(--toast-band));
    }
  }
}