/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — /checkout.html
   Its own route, its own chrome: no site nav, no scroll choreography. A person
   who has decided to book should see the form and the price, and nothing that
   invites them to wander off.
   Inherits every token from core.css.
   ═════════════════════════════════════════════════════════════════════════ */

.co-body { background: var(--page-bg); }

/* ── Slim header ───────────────────────────────────────────────────────── */
.co-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 13px clamp(16px, 3vw, 32px);
  background: rgba(255,255,255,.88); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgba(4,45,43,.16);
}
.co-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--body);
  padding: 8px 14px 8px 10px; border-radius: 100px;
  transition: background .22s, color .22s;
}
.co-back:hover { background: var(--accent-wash); color: var(--accent-deep); }
.co-back .ic { width: 16px; height: 16px; }
.co-logo { height: 22px; width: auto; margin-inline: auto; }
.co-secure {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.co-secure .ic { width: 14px; height: 14px; color: var(--accent); }
@media (max-width: 620px) {
  .co-secure { display: none; }
  .co-logo { margin-right: auto; margin-left: 4px; }
}

/* ── Page ──────────────────────────────────────────────────────────────── */
.co-main { position: relative; padding: clamp(14px, 2.2vw, 24px) 0 clamp(20px, 3vw, 32px); overflow: hidden; }
.co-shell { position: relative; z-index: 1; }

.co-intro { text-align: center; margin-bottom: clamp(12px, 1.8vw, 18px); }
.co-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(21px, 2.6vw, 32px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--ink); margin-top: 8px;
}
.co-sub { font-size: clamp(13px, 1.1vw, 15px); color: var(--muted); margin: 7px auto 0; max-width: 46ch; line-height: 1.5; }

/* ── Grid: two panels of detail, one sticky summary ────────────────────── */
.co-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 32%, 390px);
  gap: clamp(10px, 1.4vw, 16px); align-items: stretch;
}
.co-panel {
  grid-column: 1;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(14px, 1.8vw, 20px); box-shadow: var(--shadow-sm);
  margin-bottom: clamp(10px, 1.4vw, 14px);
  transition: box-shadow .22s;
}
.co-panel:focus-within { box-shadow: var(--shadow-md); }
.co-panel:last-of-type { margin-bottom: 0; }
.co-legend {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
}
.co-step {
  width: 23px; height: 23px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: #4a3406;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 6px 14px -4px rgba(231,168,30,.5);
}
.co-panel .field { margin-bottom: 3px; }
.co-panel .field:last-child { margin-bottom: 0; }
.co-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 3px; }
/* Marks where "preferred slot" picks up inside the single combined panel —
   a quiet divider instead of a second numbered heading, now that both
   groups share one box. */
.co-panel .field[data-slot-start] { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line-2); }
@media (max-width: 520px) { .co-two { grid-template-columns: 1fr; } }


/* ── Fields ────────────────────────────────────────────────────────────────
   These moved here with the form when it became its own route. */
.field { display: grid; gap: 3px; }
.field > span {
  font-family: var(--f-display); font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.field > span i { color: #DC2626; font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--page-bg); color: var(--ink);
  font-size: 14.5px; font-family: var(--f-sans);
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.field textarea { resize: vertical; min-height: 62px; line-height: 1.55; }
.field select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371847B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--accent-light);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: #DC2626; background: rgba(220,38,38,.05);
}
/* Height reserved always, not just when invalid: an .err that appears out of
   nothing pushes every field below it down by a line, which visibly shifts
   the whole form (and everything below it) out of line with the sticky
   summary card beside it. Reserving the line keeps the layout still. */
.err:empty { min-height: 0; margin: 0; }
.err { display: block; min-height: 14px; font-size: 11.5px; color: #DC2626; font-style: normal; line-height: 14px; }
/* Date/time inputs size themselves oddly (and inconsistently with each
   other) in WebKit without this — the Date/Time row would render with the
   two controls at visibly different heights. */
.field input[type="date"], .field select { min-height: 44px; }

/* ── Phone: dial code beside the number ────────────────────────────────── */
.tel-row { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr); gap: 8px; }
.tel-row select {
  width: 100%; padding: 11px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--page-bg); color: var(--ink);
  font-size: 14px; font-family: var(--f-sans); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371847B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
  transition: border-color .22s, background-color .22s, box-shadow .22s;
}
.tel-row select:hover { border-color: var(--accent-light); }
.tel-row select:focus { outline: none; border-color: var(--accent); background-color: var(--card); box-shadow: 0 0 0 3px var(--accent-wash); }

/* ── WhatsApp toggle ───────────────────────────────────────────────────── */
.co-check-tight { margin-bottom: 0; font-size: 12.5px; }
.co-check-tight input { accent-color: var(--accent); }
#coWaRow { margin-top: 8px; }
#coWaRow[hidden] { display: none; }

/* ── Time slot chips ───────────────────────────────────────────────────── */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot-empty {
  grid-column: 1 / -1; margin: 2px 0; padding: 14px 10px; text-align: center;
  font-size: 12.5px; color: var(--muted); background: var(--page-bg);
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.slot-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 8px 5px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 2px 0 0 var(--line), var(--shadow-sm);
  font-family: var(--f-sans); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.slot-chip:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--accent); box-shadow: 0 4px 0 0 var(--accent-wash), var(--shadow-md);
}
.slot-chip:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 0 0 var(--line); }
.slot-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-wash), 0 2px 0 0 var(--line); }
.slot-time { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.slot-local { font-size: 9.5px; color: var(--muted); line-height: 1.25; }
.slot-chip.is-selected {
  border-color: var(--accent); background: var(--accent-wash);
  box-shadow: 0 4px 0 0 var(--accent-deep), var(--shadow-md); transform: translateY(-1px);
}
.slot-chip.is-selected .slot-time { color: var(--accent-deep); }
.slot-chip.is-selected .slot-local { color: var(--accent-deep); }
.slot-chip.is-booked, .slot-chip:disabled {
  cursor: not-allowed; background: var(--page-bg); border-color: var(--line);
  box-shadow: none; opacity: .62;
}
.slot-chip.is-booked:hover { transform: none; }
.slot-chip.is-booked .slot-time { color: var(--faint); text-decoration: line-through; }
.slot-chip.is-booked .slot-local { display: none; }
.slot-lock {
  display: flex; align-items: center; gap: 3px; margin-top: 1px;
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
}
.slot-lock .ic { width: 10px; height: 10px; }

/* ── Timezone note ─────────────────────────────────────────────────────── */
.co-tznote {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 2px 0 9px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--accent-wash); border: 1px solid rgba(1,102,99,.14);
  font-size: 12.5px; color: var(--accent-deep); line-height: 1.45;
}
.co-tznote .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ── Summary ───────────────────────────────────────────────────────────── */
/* Stretched by .co-grid's align-items to the full height of the two
   stacked left panels (it's the only item spanning both their rows) —
   sticky, but no longer a mismatched short box beside a taller column.
   Two flex children (co-sum-top / co-sum-action, below) + space-between:
   with exactly two items ALL extra height collects into the one gap
   between them, instead of scattering thin empty slivers between every
   line — trust content sits flush under the product, the price/checkout
   action sits flush toward the bottom, and the `gap` is a floor so they
   never crowd together if content ever runs tall. */
.co-summary {
  grid-column: 2; grid-row: 1 / span 2;
  position: sticky; top: 76px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(14px, 1.8vw, 18px); box-shadow: var(--shadow-lg);
}
.co-sum-title { font-size: 14px; margin-bottom: 10px; }

.co-sum-action { border-top: 1px solid var(--line-2); padding-top: 16px; }

.co-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.co-item-ic {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--gold-wash); color: var(--gold-deep);
}
.co-item div { display: grid; gap: 2px; }
.co-item b { font-family: var(--f-display); font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.co-item small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* One row, not two: a separate "special discount" line and "total payable"
   line both showing ₹1,999 was the same number said twice. */
.co-lines { padding: 0; }
.co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-total dt { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.co-total dd { font-family: var(--f-display); font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.co-lines-note { margin: 3px 0 0; text-align: right; font-size: 11px; color: var(--faint); }
#coCurrencyNote:empty { display: none; }

.co-check {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px;
  font-size: 12.1px; color: var(--body); line-height: 1.42; cursor: pointer;
}
.co-check input {
  width: 16px; height: 16px; flex: none; margin-top: 1px; cursor: pointer;
  accent-color: var(--accent);
}
.co-check a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.co-check a:hover { color: var(--ink); }

.co-pay { margin-top: 10px; position: relative; }
.co-pay[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.co-pay.busy { cursor: progress; }
.cp-spin {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(59,42,4,.35); border-top-color: #3B2A04;
  animation: coSpin .7s linear infinite;
}
@keyframes coSpin { to { transform: rotate(360deg); } }
.co-pay.busy .cp-arrow { display: none; }
.co-pay.busy .cp-spin { display: block; }

/* A real card, not a trailing footnote list — this is the "why trust this
   purchase" panel, so it gets the same visual weight as the product line
   above it rather than reading as fine print. */
.co-trust {
  padding: 14px; border-radius: var(--r-sm);
  background: var(--accent-wash); border: 1px solid rgba(1,102,99,.12);
}
.co-trust-head {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: 11px;
}
.co-reassure { display: grid; gap: 11px; }
.co-reassure li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--body); line-height: 1.4; }
.ra-ic {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); color: var(--accent-deep); box-shadow: var(--shadow-sm);
}
.ra-ic .ic { width: 13px; height: 13px; }

/* Fills the card's natural remaining room with real credibility (the same
   figures the hero already states) instead of leaving it blank once the
   card is stretched to match the left column's height. */
.co-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.co-stats div { display: grid; gap: 2px; text-align: center; }
.co-stats div + div { border-left: 1px solid var(--line-2); }
.co-stats b { font-family: var(--f-display); font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.co-stats span { font-size: 10.5px; color: var(--muted); line-height: 1.3; }

.co-status { margin-top: 10px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.5; }
.co-status:empty { display: none; }
.co-status { padding: 10px 12px; display: flex; align-items: flex-start; gap: 8px; }
.co-status.ok  { background: var(--accent-wash); color: var(--accent-deep); border: 1px solid rgba(1,102,99,.16); }
.co-status.bad { background: rgba(220,38,38,.06); color: #B91C1C; border: 1px solid rgba(220,38,38,.2); }
.co-status .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.co-status b { display: block; font-family: var(--f-display); font-weight: 700; }
.co-status a { text-decoration: underline; }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-panel, .co-summary { grid-column: 1; grid-row: auto; }
  .co-summary { position: static; }
}

/* ── Success ───────────────────────────────────────────────────────────── */
.co-done { text-align: center; max-width: 34rem; margin: 0 auto; padding: clamp(24px, 4vw, 44px) 0; }
.co-done-tick {
  width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent-deep);
}
.co-done-tick .ic { width: 30px; height: 30px; stroke-width: 2.6; }
.co-done h1 { font-size: clamp(22px, 2.8vw, 32px); margin-bottom: 11px; }
.co-done p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.co-done .co-ref {
  display: inline-block; margin-top: 18px; padding: 9px 17px; border-radius: 100px;
  background: var(--glass-hi); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12.5px; color: var(--ink);
}
.co-done .btn { margin-top: 22px; }

/* Footer is the shared .foot layout (see core.css) — same on checkout as on
   the landing page, not a separate one-line strip. */