/* Upgrade offer: an add-on beside a ticket's line in the order summary, in
   the layout its organizer chose, quiet like the shop's own ticket options:
   calm surfaces, the dearer ticket's own colour for its small ticket, and the
   extra price rather than the new one. What is chosen is ringed in the text
   colour, never the accent: a shop's accent may be red, and a red ring above
   the checkout form reads as an error. The accent fills only the switch, like
   the checkout's other switches, and stays the pay button's.
   Never on until the buyer takes it.
   data-layout  card       one row like a checkout's shipping protection: the
                           ticket, its name and gain, the price over a switch;
                           the whole row is the switch
                compact    a single link "+ Fastlane … +5 €" that turns into
                           a line of its own once added
                spotlight  a product card: a band in the ticket's colour, its
                           perks, the price and one wide button
                compare    the two tickets as options side by side, the one in
                           the cart ringed, the other one tap away
   data-state   off        offered
                on         taken: under the dearer ticket's line
   --ticket-color  the dearer ticket's colour, for its small ticket */
.upgrade-offer {
  --ticket-color: var(--color-accent);
  --upgrade-ring: var(--color-text);

  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  position: relative;
}

.upgrade-offer__row {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
}

.upgrade-offer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.125em;
  min-inline-size: 0;
}

.upgrade-offer__title {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.upgrade-offer__text {
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.upgrade-offer__end {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-3xs);
}

.upgrade-offer__price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: end;
  white-space: nowrap;
}

.upgrade-offer__unit {
  color: var(--color-muted);
  display: block;
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
}

.upgrade-offer__kicker {
  color: var(--color-muted);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}

.upgrade-offer__form {
  display: contents;
}

/* A small ticket in the dearer ticket's colour, its sides notched */
.upgrade-offer__stub {
  --notch: 0.3rem;

  background: linear-gradient(135deg, var(--ticket-color), oklch(from var(--ticket-color) calc(l - 0.12) c h));
  block-size: 2.25rem;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  inline-size: 2.25rem;
  mask:
    radial-gradient(circle at 0 50%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}

.upgrade-offer__perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);

  li {
    align-items: baseline;
    display: flex;
    font-size: var(--step--1);
    gap: var(--space-2xs);
    line-height: var(--leading-snug);
  }

  .icon {
    --icon-color: var(--color-text);
    --icon-size: 1em;

    flex-shrink: 0;
    translate: 0 0.125em;
  }
}

/* What is true, in small type under the offer, and the way to switch just one */
.upgrade-offer__notes {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
}

.upgrade-offer__note {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-size: var(--step--1);
  gap: var(--space-3xs);

  &[data-tone="warning"] {
    color: var(--color-text);
    font-weight: var(--weight-medium);

    &::before {
      background: var(--color-amber);
      block-size: 0.45em;
      border-radius: 50%;
      content: "";
      inline-size: 0.45em;
    }
  }
}

/* A text button: remove, give back, just one */
.upgrade-offer__link {
  appearance: none;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  padding: var(--space-3xs) 0;
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--color-subtle);
  text-underline-offset: 0.2em;
  z-index: 1;

  &:hover {
    text-decoration-color: currentColor;
  }
}

.upgrade-offer__just-one {
  margin-inline-start: auto;
}

/* One wide button that names the price: the page's text colour as its fill,
   which reads on any theme and stays apart from the pay button's accent */
.upgrade-offer__cta {
  appearance: none;
  background: var(--color-text);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-surface-1);
  cursor: pointer;
  font: inherit;
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);

  &:hover {
    opacity: 0.88;
  }

  &:active {
    scale: 0.985;
  }
}

/* Switch: a row on the surface the shop's ticket options use */
.upgrade-offer[data-layout="card"] {
  background: var(--color-surface-2);
  border-radius: var(--radius-l);
  padding: var(--space-xs) var(--space-s);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);

  &:has(.upgrade-offer__switch:hover) {
    background: var(--color-surface-3);
  }

  &:has(.upgrade-offer__switch:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  &[data-state="on"] {
    background: var(--color-surface-1);
    box-shadow: inset 0 0 0 calc(var(--border-width) * 2) var(--upgrade-ring);
  }
}

.upgrade-offer__switch {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;

  &::after {
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
  }

  &:focus-visible {
    outline: none;
  }
}

/* Drawn like the checkout's other switches (field.css .switch) */
.upgrade-offer__track {
  background: var(--color-surface-3);
  block-size: 1.375rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-subtle);
  display: block;
  inline-size: 2.5rem;
  position: relative;
  transition: background-color var(--duration-base) var(--ease-out);
}

.upgrade-offer__thumb {
  background: var(--color-muted);
  block-size: 1rem;
  border-radius: 50%;
  inline-size: 1rem;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  position: absolute;
  transition:
    translate var(--duration-base) var(--ease-spring),
    background-color var(--duration-base) var(--ease-out);
}

.upgrade-offer[data-state="on"] .upgrade-offer__track {
  background: var(--color-accent-fill);
  box-shadow: none;
}

.upgrade-offer[data-state="on"] .upgrade-offer__thumb {
  background: var(--color-on-accent);
  translate: 1.125rem 0;
}

/* Compact: a link with a round plus, and once added a line with a tick */
.upgrade-offer[data-layout="compact"] {
  gap: var(--space-3xs);
}

.upgrade-offer__add {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: var(--space-xs);
  inline-size: calc(100% + var(--space-2xs) * 2);
  margin-inline: calc(var(--space-2xs) * -1);
  padding: var(--space-2xs);
  text-align: start;
  transition: background-color var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-2);
  }
}

.upgrade-offer__mark {
  align-items: center;
  block-size: 1.5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--border-width) * 1.5) currentColor;
  color: var(--color-text);
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.5rem;
  justify-content: center;

  .icon {
    --icon-size: 0.875rem;
  }
}

.upgrade-offer[data-layout="compact"][data-state="on"] {
  .upgrade-offer__row {
    padding-block: var(--space-3xs);
  }

  .upgrade-offer__mark {
    background: var(--color-text);
    box-shadow: none;
    color: var(--color-surface-1);
  }

  .upgrade-offer__title {
    flex: 1;
  }
}

/* Spotlight: a product card on the shop's raised surface */
.upgrade-offer[data-layout="spotlight"] {
  background: var(--color-surface-1);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  gap: 0;
  overflow: hidden;

  &[data-state="on"] {
    box-shadow: var(--shadow-card), inset 0 0 0 calc(var(--border-width) * 2) var(--upgrade-ring);
  }

  .upgrade-offer__head {
    align-items: baseline;
    display: flex;
    gap: var(--space-xs);
    justify-content: space-between;
  }

  .upgrade-offer__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--font-display-weight);
    letter-spacing: var(--font-display-tracking);
    line-height: var(--leading-tight);
  }

  .upgrade-offer__price {
    font-size: var(--step-1);
  }

  .upgrade-offer__link {
    align-self: center;
  }
}

.upgrade-offer__visual {
  align-items: center;
  background:
    radial-gradient(120% 140% at 85% 0%, oklch(from var(--ticket-color) l c h / 0.55), transparent 60%),
    linear-gradient(135deg, oklch(from var(--ticket-color) l c h / 0.32), oklch(from var(--ticket-color) l c h / 0.08));
  block-size: 4.5rem;
  display: flex;
  padding-inline: var(--space-s);

  .upgrade-offer__stub {
    --notch: 0.45rem;

    block-size: 2.75rem;
    inline-size: 4.25rem;
    rotate: -8deg;
  }
}

.upgrade-offer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s);
}

/* Compare: two options as fares are chosen */
.upgrade-offer[data-layout="compare"] {
  gap: var(--space-xs);
}

.upgrade-offer__options {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.upgrade-offer__option {
  align-content: start;
  appearance: none;
  background: var(--color-surface-2);
  border: 0;
  border-radius: var(--radius-l);
  color: inherit;
  display: grid;
  font: inherit;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-xs) var(--space-s);
  position: relative;
  text-align: start;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);

  &:is(button) {
    cursor: pointer;

    &:hover {
      background: var(--color-surface-3);
    }
  }

  &[data-chosen] {
    background: var(--color-surface-1);
    box-shadow: inset 0 0 0 calc(var(--border-width) * 2) var(--upgrade-ring);
  }
}

.upgrade-offer__radio {
  block-size: 1.125rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--border-width) * 1.5) var(--color-muted);
  inline-size: 1.125rem;
  margin-block-end: var(--space-3xs);
}

.upgrade-offer__option[data-chosen] .upgrade-offer__radio {
  background: var(--color-surface-1);
  box-shadow: inset 0 0 0 0.3rem var(--upgrade-ring);
}

.upgrade-offer__option-title {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.upgrade-offer__option-price {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-3xs);
}

.upgrade-offer__features {
  display: grid;
  gap: var(--space-3xs);
}

.upgrade-offer__feature {
  align-items: baseline;
  color: var(--color-muted);
  display: flex;
  font-size: var(--step--1);
  gap: var(--space-3xs);
  line-height: var(--leading-snug);

  &[data-extra] {
    color: var(--color-text);
    font-weight: var(--weight-medium);
  }

  .icon {
    --icon-color: var(--color-text);
    --icon-size: 0.875em;

    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upgrade-offer[data-layout="card"],
  .upgrade-offer__thumb,
  .upgrade-offer__track,
  .upgrade-offer__cta,
  .upgrade-offer__add,
  .upgrade-offer__option {
    transition: none;
  }
}

/* Contrast themes (forced colors) drop the fills that draw the switch and the
   chosen option: they are drawn in the system's colours */
@media (forced-colors: active) {
  .upgrade-offer__track {
    background: Canvas;
    border: var(--border-width) solid CanvasText;
    forced-color-adjust: none;
  }

  .upgrade-offer__thumb {
    background: CanvasText;
  }

  .upgrade-offer[data-state="on"] .upgrade-offer__track {
    background: Highlight;
    border-color: Highlight;
  }

  .upgrade-offer[data-state="on"] .upgrade-offer__thumb {
    background: HighlightText;
  }

  .upgrade-offer__option,
  .upgrade-offer__cta,
  .upgrade-offer[data-layout="card"] {
    border: var(--border-width) solid CanvasText;
  }

  .upgrade-offer__option[data-chosen],
  .upgrade-offer[data-layout="card"][data-state="on"] {
    border: calc(var(--border-width) * 2) solid Highlight;
  }
}