/* Checkout (S5–S7). Not frozen: there is no prototype for these screens, so they are built in the port from the brief and the
   S1/S2/S3/S4 language (Atelier, tokens only: no colour, font or size the design system does not already carry). One narrow
   column; the design system's own steps, fields, alert and dialog do the rest. */
.ck { outline: 0; padding-block: var(--ui-space-8) var(--ui-space-16); }
.ck-wrap { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: grid; gap: var(--ui-space-6); }
.ck-steps { margin: 0; padding: 0; }
.ck-title { margin: 0; font-family: var(--ui-font-display); font-weight: var(--ui-weight-display); letter-spacing: var(--ui-tracking-display); font-size: var(--ui-text-2xl); color: var(--ui-text); }
.ck-welcome { margin: 0; font-size: var(--ui-text-md); color: var(--ui-text-muted); }
.ck-form { display: grid; gap: var(--ui-space-5); }
.ck-skel { display: grid; gap: var(--ui-space-4); }
.ck-wait { margin: 0; color: var(--ui-text-muted); font-size: var(--ui-text-md); }
.ck-primary { width: 100%; min-height: 48px; justify-content: center; }
.ck-linkbtn { min-height: 44px; justify-content: flex-start; padding-inline: 0; }
.ck-opt { color: var(--ui-text-subtle); font-weight: normal; }

/* The phone with its +91 in front. */
.ck-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ui-space-3); }
.ck-phone__code { font-size: var(--ui-text-md); color: var(--ui-text-muted); }
.ck-wa { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; }
.ck-number { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; color: var(--ui-text); }
.ck-resend { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); min-height: 44px; display: flex; align-items: center; }

/* The six boxes. */
.ck-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.ck-otp__box { height: 56px; padding-inline: 0; text-align: center; font-size: var(--ui-text-2xl); font-family: var(--ui-font-mono); }
@media (min-width: 360px) { .ck-otp { gap: var(--ui-space-1); } }
@media (min-width: 400px) { .ck-otp { gap: var(--ui-space-2); } }
@media (min-width: 480px) { .ck-otp { gap: var(--ui-space-3); } }

/* The hold, sliding in once. */
.ck-hold { animation: ck-in var(--ui-dur-slow) var(--ui-ease) both; }
@keyframes ck-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ck-hold { animation: none; } }

/* The address. */
.ck-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-5); }
@media (min-width: 480px) { .ck-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); } }
.ck-save { min-height: 44px; }
.ck-saved { display: grid; gap: var(--ui-space-3); }
.ck-addr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; padding: var(--ui-space-4); background: var(--ui-surface); border: 1px solid var(--ui-border); cursor: pointer; }
.ck-addr.is-on { border-color: var(--ui-accent); background: var(--ui-surface-2); }
.ck-addr input { margin-top: 3px; min-width: 20px; min-height: 20px; accent-color: var(--ui-accent); }
.ck-addr__text { display: grid; gap: 2px; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.ck-addr__text b { color: var(--ui-text); font-weight: var(--ui-weight-strong); font-size: var(--ui-text-md); }

/* The review. */
.ck-block { display: grid; gap: var(--ui-space-3); padding-top: var(--ui-space-5); border-top: 1px solid var(--ui-border); }
.ck-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
.ck-h2 { margin: 0; font-size: var(--ui-text-md); font-weight: var(--ui-weight-strong); color: var(--ui-text); }
.ck-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-4); }
.ck-piece { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--ui-space-4); align-items: center; }
.ck-piece__media { display: block; aspect-ratio: 4 / 5; background: var(--ui-surface-3); overflow: hidden; }
.ck-piece__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ck-piece__blank { display: block; width: 100%; height: 100%; }
.ck-piece__body { display: grid; gap: 2px; min-width: 0; }
.ck-piece__title { color: var(--ui-text); font-size: var(--ui-text-md); overflow-wrap: anywhere; }
.ck-piece__meta { font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.ck-piece__code { font-family: var(--ui-font-mono); letter-spacing: var(--ui-tracking-label); white-space: nowrap; }
.ck-address { display: grid; gap: 2px; font-style: normal; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.ck-address b { color: var(--ui-text); font-size: var(--ui-text-md); font-weight: var(--ui-weight-strong); }
.ck-summary { padding: var(--ui-space-6); background: var(--ui-surface-2); border: 1px solid var(--ui-border); }
.ck-sum { display: grid; gap: var(--ui-space-3); margin: 0; }
.ck-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-4); }
.ck-sum__row dt { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.ck-sum__row dd { margin: 0; text-align: end; font-size: var(--ui-text-sm); color: var(--ui-text); }
.ck-sum__row--total { padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.ck-sum__row--total dt { font-size: var(--ui-text-md); color: var(--ui-text); font-weight: var(--ui-weight-strong); }
.ck-method { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

/* ── S8, paying online ──────────────────────────────────────────────────────────────────────────
   Approved 28 Oct 2026 (design/saree-commerce/baselines/pay-approved.2026-10-28/). The prototype's
   own rules, less the stand-in drawn in place of Razorpay's window, which is Razorpay's UI and was
   never part of the design. .or-card and .or-head already live in orders.css and are not restated. */

/* The whole total on the button, so the amount leaving the customer's account is on the thing they tap. */
.pay-btn { width: 100%; min-height: 52px; justify-content: center; gap: var(--ui-space-3); font-size: var(--ui-text-md); }
.pay-btn[disabled] { cursor: not-allowed; }

/* The one line under the button: whose window opens, and that the card is never ours. */
.pay-secure { margin: 0; display: flex; align-items: flex-start; gap: var(--ui-space-3); font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.pay-secure .sc-icon { flex: none; margin-top: 2px; }

/* The hold, after Pay extends it once (ADR-0016 Q2): the time jumps forward, so the change is said
   rather than left to be noticed. The row is the design system's alert; only this mark is new. */
.pay-extended { display: inline-flex; align-items: center; gap: var(--ui-space-2); margin-top: var(--ui-space-2); font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.pay-extended__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); flex: none; }

/* Confirming: the order is with the gateway's webhook, not with the browser. A calm panel, not a spinner alone. */
.pay-wait { display: grid; justify-items: center; gap: var(--ui-space-5); padding: var(--ui-space-10) var(--ui-space-6); background: var(--ui-surface-2); border: 1px solid var(--ui-border); text-align: center; }
.pay-wait__ring { width: 44px; height: 44px; border: 2px solid var(--ui-border); border-top-color: var(--ui-accent); border-radius: 50%; animation: pay-spin 900ms linear infinite; }
@keyframes pay-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .pay-wait__ring { animation-duration: 2400ms; } }
.pay-wait__title { margin: 0; font-family: var(--ui-font-display); font-size: var(--ui-text-lg); color: var(--ui-text); }
.pay-wait__text { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); max-width: 34ch; }

/* The refusals share one shape: what happened, what is still true, what to do. */
.pay-stop { display: grid; gap: var(--ui-space-5); padding: var(--ui-space-6); background: var(--ui-surface-2); border: 1px solid var(--ui-border); }
.pay-stop__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); }
.pay-stop__actions .ui-btn { min-height: 48px; flex: 1 1 auto; justify-content: center; }
@media (min-width: 480px) { .pay-stop__actions .ui-btn { flex: 0 1 auto; } }
.pay-note { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
/* The WhatsApp button carries the shared "number to confirm" note, which must not stretch the row. */
.pay-wa { display: grid; gap: var(--ui-space-2); }

/* The order page carries the same Pay block inside its own card. */
.pay-on-order { display: grid; gap: var(--ui-space-5); }
/* Inside that card the panel drops its box: a panel inside a panel reads as a mistake, and at 320
   the two paddings together pushed the card 11px past the viewport (measured: min-content 331). */
.pay-on-order .pay-stop,
.pay-on-order .pay-wait { padding: 0; background: none; border: 0; }

/* Below 360px the refusal panel sits inside the summary's padding AND its own, and the design
   system holds every .ui-btn on one line (white-space: nowrap), so a long label such as "Enquire on
   WhatsApp" cannot shrink: measured at 320, the summary ran to 343 against a 320 viewport. The
   panel keeps its approved shape — this only lets the label wrap and trims the padding, and nothing
   here applies at 390, where the approved screens were frozen. */
@media (max-width: 360px) {
  .pay-stop { padding: var(--ui-space-4); }
  .pay-stop__actions .ui-btn {
    white-space: normal;
    height: auto;
    min-height: 48px;
    padding-block: var(--ui-space-3);
    padding-inline: var(--ui-space-4);
  }
}