/* ==========================================================================
   Kedn Hub — Checkout: step wizard (Info → Delivery → Method → Payment →
   Review → Confirmation), guest checkout only, simulated order placement.
   ========================================================================== */

.checkout-intro {
  padding-block: var(--space-4) var(--space-6);
}

.checkout-intro h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
}

.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}

.checkout-steps li {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.checkout-steps li.is-active {
  color: var(--color-text);
  font-weight: 600;
}

.checkout-steps li.is-complete {
  color: var(--color-accent-strong);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-9);
  align-items: start;
}

/* margin-inline:auto so the panel doesn't hug the left edge with a
   large empty gutter on a tablet narrower than the 768px breakpoint
   below, where .checkout-layout is still a single full-width column. */
.checkout-panel {
  max-width: 34rem;
  margin-inline: auto;
}

.checkout-panel h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin-bottom: var(--space-6);
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-field[hidden] {
  display: none;
}

.form-field label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  border: 1px solid var(--color-hairline);
  padding: var(--space-3);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent-strong);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-hairline);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.option-card:has(input:checked) {
  border-color: var(--color-accent-strong);
  background: var(--color-warm-neutral-soft);
}

.option-card input {
  accent-color: var(--color-accent-strong);
  width: 16px;
  height: 16px;
}

.option-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.option-card__text strong {
  display: block;
  font-size: var(--text-small);
}

.option-card__text span {
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.option-card__price {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  white-space: nowrap;
}

.payment-detail {
  margin: calc(var(--space-3) * -1) 0 var(--space-4) var(--space-7);
  padding: var(--space-4);
  background: var(--color-warm-neutral-soft);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.payment-detail[hidden] {
  display: none;
}

.payment-detail .form-field {
  margin-bottom: var(--space-3);
}

/* ---- Redeem panel (gift card + loyalty points, Payment step) ---- */
.redeem-panel {
  border: 1px solid var(--color-hairline);
  background: var(--color-warm-neutral-soft);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.redeem-panel h3 {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.redeem-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.redeem-row[hidden] {
  display: none;
}

.redeem-row + .redeem-row {
  margin-top: var(--space-3);
}

.redeem-row input[type="text"] {
  flex: 1;
  border: 1px solid var(--color-hairline);
  padding: var(--space-3);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.redeem-points-available {
  flex: 1;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.redeem-message {
  font-size: var(--text-label);
  color: var(--color-accent-strong);
  margin-top: var(--space-2);
  min-height: 1em;
}

.checkout-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.checkout-nav .btn--outline {
  flex: 0 0 auto;
}

.checkout-nav .btn--primary {
  flex: 1;
}

.review-block {
  border: 1px solid var(--color-hairline);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.review-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.review-block__head h3 {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.review-block__head a {
  font-size: var(--text-label);
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.review-block p {
  font-size: var(--text-small);
  line-height: var(--leading-normal);
}

.review-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
}

.review-item span:first-child {
  color: var(--color-text-muted);
}

/* ---- Confirmation ---- */
.confirmation {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  padding-block: var(--space-6);
}

.confirmation__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-inline: auto var(--space-5);
  color: #4a7a4e;
}

.confirmation h2 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-bottom: var(--space-3);
}

.confirmation__order-number {
  font-size: var(--text-body-lg);
  color: var(--color-accent-strong);
  margin-bottom: var(--space-6);
}

.confirmation p {
  color: var(--color-text-muted);
}

.order-timeline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-7) 0;
}

.order-timeline li {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-border);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-hairline);
}

.order-timeline li.is-current {
  color: var(--color-off-white);
  background: var(--color-black);
  border-color: var(--color-black);
}

.confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* ---- Sidebar summary (reused visual language from cart) ---- */
.checkout-summary {
  border: 1px solid var(--color-hairline);
  padding: var(--space-6);
}

.checkout-summary h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin-bottom: var(--space-5);
}

.checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}

.checkout-summary__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.checkout-summary__item span:first-child {
  color: var(--color-text-muted);
}

/* 768px, not 1024px - a portrait tablet already has room for the
   sidebar summary and paired form fields side by side, and was
   otherwise stuck with the single-column mobile layout for the whole
   640-1023 range despite the extra width. */
@media (min-width: 768px) {
  .checkout-layout {
    grid-template-columns: 1fr 20rem;
  }

  .checkout-summary {
    position: sticky;
    top: calc(var(--sticky-top-height, var(--header-height)) + var(--space-5));
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}