/* ==========================================================================
   Checkout — shared styles for details.html, payment.html, confirmation.html
   Loaded after base.css
   ========================================================================== */

/* --- Checkout header variant (not sticky, shorter) ----------------------- */
.site-nav--checkout {
  position: static;
  background: rgba(13, 23, 18, 0.94);
  backdrop-filter: none;
}
.site-nav--checkout .site-nav__inner { height: 68px; }

/* --- Step progress ------------------------------------------------------- */
.steps {
  border-bottom: 1px solid var(--color-divider);
  background: #101c16;
}

.steps__inner {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.step {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.step__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #5c665f;
}

.step__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.step.is-done .step__num { color: var(--color-text-dim); }
.step.is-current .step__num { color: var(--color-accent); }
.step.is-current .step__label { color: var(--color-text); }

/* --- Page frame ---------------------------------------------------------- */
.checkout {
  padding-top: 44px;
  padding-bottom: var(--space-8);
}

.checkout__back {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.checkout__title {
  font-size: 46px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 14px 0 0;
}

.checkout__columns {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}

.checkout__main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --- Panels -------------------------------------------------------------- */
.panel {
  border-color: rgba(244, 241, 228, 0.18);
  padding: 24px;
}

.panel__kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.panel__title {
  font-size: 24px;
  letter-spacing: 0.02em;
  margin: 10px 0 22px;
}

/* --- Fields -------------------------------------------------------------- */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field--wide { grid-column: 1 / -1; }

.field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-2);
}

.input,
.select,
.textarea {
  width: 100%;
  box-sizing: border-box;
  background: #101c16;
  border: 1px solid rgba(244, 241, 228, 0.18);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
}
.textarea { resize: vertical; }
.input::placeholder,
.textarea::placeholder { color: #5c665f; }

.input.is-invalid,
.select.is-invalid { border-color: var(--color-accent); }

.field__hint {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.field__error {
  font-size: 12px;
  color: var(--color-accent);
  margin-top: 7px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: 22px;
  cursor: pointer;
}
.checkbox-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
}
.checkbox-row span {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* --- Notice banner ------------------------------------------------------- */
.notice {
  margin: 22px 0 0;
  border: 1px solid var(--color-accent);
  background: rgba(240, 196, 25, 0.09);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.notice svg { flex: none; margin-top: 1px; }

.notice__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.notice__body {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 6px 0 0;
  line-height: 1.55;
}

/* --- Configured spec chips (cart + payment) ----------------------------- */
.spec-chip {
  border: 1px solid rgba(244, 241, 228, 0.18);
  padding: 11px 14px;
  min-width: 0;
}

.spec-chip__label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 6px;
}

.spec-chip__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.spec-chip.is-invalid {
  border-color: var(--color-accent);
  background: rgba(240, 196, 25, 0.08);
}
.spec-chip.is-invalid .spec-chip__value { color: var(--color-accent); }

/* --- Order summary ------------------------------------------------------- */
.summary {
  border-color: rgba(244, 241, 228, 0.18);
  background: var(--color-surface);
  padding: 24px;
}

.summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.summary__edit {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.summary__list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.summary__block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 228, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.summary__row-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

.summary__row-value {
  font-size: 15px;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}
.summary__row-value--soft {
  font-size: 13px;
  color: var(--color-text-dim);
}

.summary__total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 228, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.summary__total-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary__total-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}

.summary__note {
  font-size: 12.5px;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin: 14px 0 0;
}

.summary__submit {
  margin-top: 22px;
  width: 100%;
  min-height: 52px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.summary__submit:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}

/* Not in the export, which never drew a checkout that could not be continued.
   The values are base.css's own `.btn[aria-disabled="true"]`, so a control that
   cannot be used looks the same here as it does everywhere else on the site.

   Two spellings of the same state, because two elements are wearing this class.
   An anchor with nowhere to go says so with `aria-disabled`; a real submit button
   that is not yet allowed to submit — the payment step's, until the terms are
   accepted — says so with the attribute browsers actually enforce. */
.summary__submit[aria-disabled="true"],
.summary__submit:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Not in the export either, which had no payment to decline. A card refusal is
   rendered here in Stripe's own words, immediately under the button that was
   pressed, and nothing else on the page moves — the cart, the address and the
   configuration are all exactly where they were.

   It is on the page from the start and empty, rather than created when there is
   something to say: it is an `aria-live` region, and a region has to be in the
   accessibility tree before text lands in it to be read out. Only the margin is
   taken away while it is empty, so a button nobody has pressed has no gap under
   it. */
.summary__error {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-accent);
}

.summary__error:empty {
  margin: 0;
}

/* --- Checkout footer ----------------------------------------------------- */
.site-footer--checkout {
  background: #101c16;
  padding: 0;
}
.site-footer--checkout .site-footer__inner {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 880px) {
  .checkout__columns {
    display: flex;
    flex-direction: column;
    margin-top: 26px;
    gap: 22px;
  }
}

@media (max-width: 620px) {
  .checkout {
    padding-top: 26px;
    padding-bottom: 56px;
  }
  .checkout__title { font-size: 34px; }
  .steps__inner { gap: 20px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}