/* ============================================================
   checkout.css — Flex Europa · finaldesign
   ONE stylesheet for all five checkout steps (§3.5). The steps differ
   in content, not in chrome, so a file each would be four copies of the
   same rules.

   REUSE: .field / .fieldset / .choice / .consent / .form-status from
   components.css, .cart-line and .spec-row from cart.css, .btn
   everywhere. This file adds the step indicator, the two-column
   step layout and the order summary rail.

   The reduced checkout header and slim footer are shared blocks — see
   header.css .site-header--checkout.
   ============================================================ */

.checkout { padding-block: var(--space-xl) var(--space-3xl); }

/* ---------------------------------------------------------------- Step rail
   An ordered list, so the sequence is conveyed by structure and not only
   by the numbers drawn in the dots. The current step carries
   aria-current="step"; completed steps say so in visually-hidden text. */
/* The rail used to sit flush against the header's hairline — measured 0px
   above it and 64px below — so it read as loose furniture dropped between
   two blocks rather than as the checkout's own page head. It is now the
   same band every other internal page already puts under the header
   (.page-head in components.css: surface, hairline, quiet padding), which
   invents nothing and makes the two headers read as one unit.

   The connectors flex, so the steps span the content column instead of
   clustering in the top-left corner of an otherwise empty row. The rule
   between two steps is now the thing that carries the width, which is
   what makes the row read as progress rather than as four labels. */
.steps {
  padding-block: var(--space-lg);
  border-block-end: var(--hairline);
  background: var(--color-surface);
}
.steps__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  counter-reset: step;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.steps__item::after {
  content: "";
  inline-size: var(--space-lg);
  block-size: 1px;
  background: var(--color-border);
}
.steps__item:last-child::after { display: none; }

/* From 768px up the rail is guaranteed to hold one line — measured at
   exactly 768 on both variants, the four-step rail and the five-step one
   the confirmation page carries, with 26px to spare on the tighter of the
   two. There the steps grow and the connector inside each one absorbs
   every pixel of that growth, so the dots and labels keep their intrinsic
   size and the rules between them carry the width.

   Below 768 the rail wraps, and a growing connector would draw a rule
   across the empty end of a wrapped line — so there it keeps its fixed
   24px stub and the rail stays the compact cluster it already was. */
@media (min-width: 768px) {
  .steps__item { flex: 1 1 auto; min-inline-size: 0; }
  /* Nothing follows the last step, so it must not claim a share of the
     width — otherwise the row ends in a gap the size of a connector. */
  .steps__item:last-child { flex: none; }
  .steps__item::after { flex: 1 1 var(--space-lg); }
}
[dir="rtl"] .steps__item::after { transform: scaleX(-1); }

.steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--step-dot-size);
  block-size: var(--step-dot-size);
  border-radius: 50%;
  border: var(--hairline-strong);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
  flex: none;
}
.steps__dot .icon { inline-size: 14px; block-size: 14px; }

.steps__item--done { color: var(--color-text-muted); }
.steps__item--done .steps__dot {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-text-inverse);
}
.steps__item--current { color: var(--color-text); }
.steps__item--current .steps__dot {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
}
/* A completed step is a link back; the current and future ones are not. */
/* A completed step's label is the link back to it, and "Bag" is 24px of
   text. Grown to a 44px target and pulled back out of the rail's flow. */
.steps__link {
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  min-inline-size: var(--step-size);
  min-block-size: var(--step-size);
  margin-block: calc((var(--step-size) - 1.5em) / -2);
}
.steps__link:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Layout */
.checkout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--checkout-summary-inline);
  gap: var(--space-2xl);
  align-items: start;
}
.checkout__main { display: flex; flex-direction: column; gap: var(--space-xl); }
.checkout__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.checkout__lead { font-size: var(--fs-sm); color: var(--color-text-muted); max-inline-size: var(--measure); }

.checkout__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-start: var(--space-lg);
  border-block-start: var(--hairline);
}
.checkout__back {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--step-size);
}
.checkout__back:hover { color: var(--color-text); }
.checkout__back .icon { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .checkout__back .icon { transform: scaleX(-1); }

/* ---------------------------------------------------------------- Summary rail */
.order-summary {
  position: sticky;
  inset-block-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--hairline);
}
.order-summary__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}
.order-summary__lines { display: flex; flex-direction: column; gap: var(--space-sm); max-block-size: 320px; overflow-y: auto; }
.order-line {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  font-size: var(--fs-sm);
}
.order-line__media {
  inline-size: 48px;
  block-size: 48px;
  overflow: hidden;
  background: var(--color-bg);
  border: var(--hairline);
}
.order-line__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The name and the quantity are two stacked rows, not one run of inline
   text — without this they rendered as "UV Flatbed PrinterQty 1". */
.order-line__info { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.order-line__name { color: var(--color-text); }
.order-line__qty { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--color-text-muted); }
.order-line__total { font-family: var(--font-mono); color: var(--color-text); white-space: nowrap; }
.order-summary__note { font-size: var(--fs-tiny); color: var(--color-text-muted); }
.order-summary__reassurance {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block: var(--hairline);
}
.order-summary__reassurance-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-block-size: 24px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.order-summary__reassurance-item .icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  color: var(--color-accent-strong);
}
.order-summary__payments {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block-start: var(--space-xs);
}
.order-summary__payments-label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.order-summary__payments-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.payment-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 28px;
  overflow: hidden;
  border: var(--hairline);
  background: var(--color-bg);
}
.payment-mark svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.order-summary__edit {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--step-size);
}

/* ---------------------------------------------------------------- Coupon */
.coupon {
  border-block: var(--hairline);
}
.coupon__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-block-size: var(--step-size);
  padding-block: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.coupon__toggle::-webkit-details-marker { display: none; }
.coupon__toggle::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: auto;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-fast);
}
.coupon[open] .coupon__toggle::after { transform: rotate(225deg) translate(-2px, -1px); }
.coupon__toggle:hover { color: var(--color-text); }
.coupon__toggle:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
}
.coupon__toggle .ph { color: var(--color-accent-strong); font-size: 16px; }
.coupon__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  padding-block: 0 var(--space-md);
}
.coupon .form-control {
  inline-size: 100%;
  min-block-size: var(--step-size);
  padding-block: var(--space-sm);
  padding-inline: var(--space-sm);
  border: var(--hairline-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.coupon .form-control::placeholder { color: var(--color-text-faint); }
.coupon .form-control:focus-visible {
  outline: none;
  border-color: var(--color-accent-strong);
  box-shadow: var(--focus-ring);
}
.coupon .btn-outline {
  min-block-size: var(--step-size);
  padding-inline: var(--space-md);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.coupon .btn-outline:hover { border-color: var(--color-accent-strong); background: var(--color-accent-strong); color: var(--color-text-inverse); }
.coupon .btn-outline:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 3px; }
.coupon .form-error {
  display: block;
  padding-block-end: var(--space-sm);
  color: var(--color-danger-deep);
  font-size: var(--fs-tiny);
}

@media (max-width: 575px) {
  .coupon__form { grid-template-columns: minmax(0, 1fr); }
  .coupon .btn-outline { inline-size: 100%; }
}

/* With no summary rail, the confirmation step is a single centred column. */
.checkout__layout:not(:has(.order-summary)) { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- Review blocks */
.review-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--hairline);
}
.review-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.review-block__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}
.review-block__body { font-size: var(--fs-sm); color: var(--color-text-muted); }
.review-block__body p + p { margin-block-start: var(--space-xs); }

/* ---------------------------------------------------------------- Confirmation */
.confirmation { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.confirmation__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent-deep);
}
.confirmation__mark .icon { inline-size: 32px; block-size: 32px; }
.confirmation__number {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}
.confirmation__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.confirmation__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.confirmation__panel { inline-size: 100%; max-inline-size: 560px; text-align: start; }

/* ---------------------------------------------------------------- PCI note */
.pci-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border-inline-start: 3px solid var(--color-accent-strong);
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}
.pci-note .icon { flex: none; inline-size: 16px; block-size: 16px; color: var(--color-accent-strong); margin-block-start: 1px; }

/* ---------------------------------------------------------------- Guard state
   Shown when a step is reached out of order or with an empty bag. */
.checkout__guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  padding-block: var(--space-3xl);
}

/* ---------------------------------------------------------------- Breakpoints */
@media (max-width: 991px) {
  .checkout__layout { grid-template-columns: minmax(0, 1fr); }
  /* Summary first on a small screen would bury the form, so it stays
     after the step content and simply stops sticking. */
  .order-summary { position: static; }
}

@media (max-width: 767px) {
  .steps__item span:not(.steps__dot) { display: none; }
  .steps__item--current span:not(.steps__dot) { display: inline; }
  .checkout__nav { flex-direction: column-reverse; align-items: stretch; }
  .checkout__nav .btn { inline-size: 100%; }
}