/* My Account, checkout, the Final Step and the order confirmation
   (rows 6.3, 6.4, 6.5). Colours, type and spacing come from fmb.css's tokens
   (row 7.7); the public shell's own look is
   public/assets/storefront-look.css (row 7.5). Every control is at least
   44 px tall. */

.site-account { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; }
.site-account a { display: inline-flex; align-items: center; min-height: var(--control-h); font-weight: var(--weight-label); text-decoration: none; }
.site-account a:hover, .site-account a:focus-visible { text-decoration: underline; }

.my-account table, .order-details table { width: 100%; border-collapse: collapse; }
.my-account th, .my-account td, .order-details th, .order-details td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.order-details tfoot th { text-align: right; font-weight: var(--weight-label); }
.order-details tfoot td { white-space: nowrap; }
.order-details td:last-child, .order-details th:last-child { text-align: right; }
.order-details h3 { margin: var(--space-5) 0 var(--space-2); }

.cash-instructions, .pickup-details, .delivery-details, .final-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.order-updates { padding-left: var(--space-5); }
.inline { display: inline; }
.return-home { margin: 0 0 var(--space-3); }
.return-home a { display: inline-flex; align-items: center; min-height: var(--control-h); }

.checkout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.checkout fieldset { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--surface); }
.checkout legend { font-weight: var(--weight-strong); }
.checkout .field { margin: 0 0 var(--space-3); }
.checkout .field label { display: block; margin-bottom: var(--space-1); }
.checkout .field-error { margin: var(--space-1) 0 0; }
.checkout [aria-invalid="true"] { border-color: var(--error-ink); }

.choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.choice:first-of-type { border-top: 0; }
.choice input[type="radio"], .choice input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: none; } /* token-exempt: a 2px nudge to line a 22px box up with its words */
.choice label { font-weight: var(--weight-label); }
.choice-more { margin: var(--space-1) 0 0; font-weight: 400; color: var(--muted); }
.choice-more a { display: inline-flex; align-items: center; min-height: var(--control-h); margin-right: var(--space-3); }

.order-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); position: sticky; top: var(--space-3); }
.order-summary table { width: 100%; border-collapse: collapse; }
.order-summary th, .order-summary td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); text-align: left; }
.order-summary td:last-child { text-align: right; white-space: nowrap; }
.order-summary .total th, .order-summary .total td { font-weight: var(--weight-strong); font-size: var(--text-m); border-bottom: 0; }

.coupon-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.coupon-row .field { flex: 1 1 160px; margin: 0; }
.applied-coupons { list-style: none; padding: 0; margin: var(--space-2) 0; }
.applied-coupons li { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.checkout-actions button { min-width: 160px; }
.final-step h2 { margin-top: 0; }
.final-step-question { font-size: var(--text-l); font-weight: var(--weight-strong); margin-top: var(--space-4); }
.button-yes { background: #2e7d32; color: #fff; } /* dark-ok: WordPress's green Yes, on its own background */
.button-no { background: #c62828; color: #fff; } /* dark-ok: WordPress's red No, on its own background */
.thank-you-words { font-size: var(--text-m); }

@media (max-width: 760px) {
  .checkout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .my-orders thead { display: none; }
  .my-orders tr { display: block; border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
  .my-orders td { display: block; border: 0; padding: var(--space-1) 0; }
  .my-orders td::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--text-xs); }
}

/* Row 6.3: the card is typed on the Final Step, in Stripe's Payment Element (public/assets/js/card.js). */
.card-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.card-box h2 { margin: 0 0 var(--space-2); }
.card-element { min-height: var(--control-h); margin: var(--space-2) 0; }
.card-error { color: var(--error-ink); font-weight: var(--weight-label); margin: var(--space-2) 0 0; }
.card-status { margin: var(--space-2) 0 0; min-height: 1.4em; }
.card-unfinished .button { display: inline-flex; align-items: center; min-height: var(--control-h); margin-right: var(--space-3); }