/* 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); }

/* Row 8.2 (card #64): gift cards. Buying one, paying for it, its confirmation and the page its link opens, the cart's
   panel and checkout's box. The QR code sits on its own white square (the SVG draws it), so a phone reads it in dark mode. */
.gift-card-page { max-width: var(--sf-content); }
/* The gift card form wears checkout's boxes, one under another: it has no order summary to sit beside. */
.checkout.gift-card-form { display: block; }
.gift-card-form .checkout-actions { margin-top: var(--space-4); }
.gift-card-amounts .choice { padding: var(--space-2) 0; }
.gift-card-summary, .gift-card-show, .cart-gift-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-block: var(--space-4); }
.gift-card-summary h2, .gift-card-show h2, .cart-gift-card h2 { margin: 0 0 var(--space-2); }
.gift-card-summary table { width: 100%; border-collapse: collapse; }
.gift-card-summary th, .gift-card-summary td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); text-align: left; }
.gift-card-summary td:last-child { text-align: right; }
.gift-card-summary .total th, .gift-card-summary .total td { font-weight: var(--weight-strong); border-bottom: 0; }
.gift-card-qr { margin: var(--space-3) 0; }
.gift-card-qr svg { display: block; max-width: 100%; height: auto; }
.gift-card-link a { overflow-wrap: anywhere; }
.gift-card-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-l); letter-spacing: .08em; margin: var(--space-2) 0 var(--space-4); }
.gift-card-message { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--line); white-space: pre-line; }
.gift-card-applied { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; margin: var(--space-2) 0; }
.cart-gift-card form { margin: var(--space-2) 0 0; }