/* ═══════════════════════════════════════════════════════════
   checkout-v2.css — one-page checkout (behind the checkout_v2 switch)
   Design: docs/checkout-redesign/ (mockups approved Nov 2026)
   ═══════════════════════════════════════════════════════════ */
#ck-root {
  --ck-red: #b4021e; --ck-red-d: #8b011a; --ck-ink: #2a1200; --ck-muted: #7a6a58;
  --ck-line: #efe5d5; --ck-cream: #fdfaf5; --ck-bg: #f6f1e9; --ck-yellow: #ffd23f;
  --ck-green: #2e7d32;
  font-family: 'DM Sans', system-ui, sans-serif; color: var(--ck-ink);
  -webkit-font-smoothing: antialiased;
}
#ck-root *, #ck-root *::before, #ck-root *::after { box-sizing: border-box }
#ck-root button { font-family: inherit; cursor: pointer }
#ck-root button:disabled { cursor: default }

/* Full-screen page */
.ck-page {
  position: fixed; inset: 0; z-index: 4000; background: var(--ck-bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none; opacity: 0; transition: opacity .2s ease;
}
.ck-page.ck-open { display: block }
.ck-page.ck-visible { opacity: 1 }
.ck-inner { max-width: 430px; margin: 0 auto; padding-bottom: 170px }

/* Header */
.ck-hdr { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--ck-line) }
.ck-hdr-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; max-width: 1120px; margin: 0 auto }
.ck-back { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--ck-cream); font-size: 20px; color: var(--ck-ink); flex-shrink: 0; line-height: 1 }
.ck-logo { display: none; height: 40px; width: auto }
.ck-title { font-size: 18px; font-weight: 800; line-height: 1.1; margin: 0 }
.ck-sub { display: block; font-size: 12px; color: var(--ck-muted); font-weight: 500; margin-top: 2px }
.ck-rating { margin-left: auto; text-align: right; font-size: 12px; font-weight: 800; white-space: nowrap }
.ck-rating span { display: block; font-size: 10px; color: var(--ck-muted); font-weight: 500 }
.ck-save { background: var(--ck-yellow); text-align: center; font-weight: 800; font-size: 14px; padding: 9px 12px }
.ck-save b { color: var(--ck-red) }

/* Layout */
.ck-grid { padding: 12px }
.ck-card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 0 rgba(42,18,0,.04) }
.ck-st { font-size: 15px; font-weight: 800; margin: 4px 2px 10px }

/* Free-delivery progress */
.ck-fd { font-size: 13.5px; font-weight: 700 }
.ck-fd b { color: var(--ck-red) }
.ck-fd.ck-done { color: var(--ck-green) }
.ck-bar { height: 6px; border-radius: 6px; background: #f1e6d6; margin-top: 9px; overflow: hidden }
.ck-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ck-red), #e2364f); border-radius: 6px; transition: width .3s ease }

/* Cart items */
.ck-item { display: flex; gap: 12px; align-items: center; padding: 6px 0 }
.ck-item + .ck-item { border-top: 1px dashed var(--ck-line); padding-top: 12px; margin-top: 6px }
.ck-thumb { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--ck-cream); flex-shrink: 0 }
.ck-iinfo { min-width: 0; flex: 1 }
.ck-iname { font-weight: 700; font-size: 14px; line-height: 1.25 }
.ck-imeta { font-size: 12px; color: var(--ck-muted); margin-top: 2px }
.ck-step { display: flex; align-items: center; background: var(--ck-red); border-radius: 9px; color: #fff; font-weight: 800; height: 32px; flex-shrink: 0 }
.ck-step button { background: none; border: none; color: #fff; font-size: 17px; width: 30px; height: 32px; padding: 0 }
.ck-step span { min-width: 18px; text-align: center; font-size: 14px }
.ck-iprice { width: 62px; text-align: right; font-weight: 800; font-size: 14px; flex-shrink: 0 }

/* Rows (offers, points, address) */
.ck-row { display: flex; align-items: center; gap: 12px }
.ck-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--ck-cream); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0 }
.ck-rtxt { min-width: 0; flex: 1 }
.ck-rt { font-weight: 800; font-size: 14px }
.ck-rs { font-size: 12px; color: var(--ck-muted); margin-top: 2px; line-height: 1.35 }
.ck-rs.ck-ok { color: var(--ck-green) }
.ck-link { margin-left: auto; color: var(--ck-red); font-weight: 800; font-size: 13px; background: none; border: none; white-space: nowrap; padding: 6px 0 }
.ck-divider { border-top: 1px dashed var(--ck-line); margin: 12px 0 }

/* Bill */
.ck-bl { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: #4a3a2a }
.ck-bl.ck-g { color: var(--ck-green) }
.ck-bl.ck-t { font-weight: 800; font-size: 15px; color: var(--ck-ink); border-top: 1px dashed var(--ck-line); margin-top: 6px; padding-top: 9px }
.ck-reassure { font-size: 12px; color: var(--ck-muted); text-align: center; line-height: 1.7; padding: 4px 0 12px }
.ck-side-pay { display: none }

/* Sticky pay bar */
.ck-paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4001; display: none; justify-content: center }
.ck-page.ck-open + .ck-paybar { display: flex }
.ck-bp { width: 100%; max-width: 430px; background: #fff; border-top: 1px solid var(--ck-line); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(42,18,0,.06) }
.ck-bp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px }
.ck-bp-top b { font-size: 17px; font-weight: 800 }
.ck-bp-top small { font-size: 12px; color: var(--ck-muted) }
.ck-viewbill { font-size: 12.5px; color: var(--ck-red); font-weight: 700; text-decoration: underline; background: none; border: none; padding: 0 }
.ck-trust { font-size: 10.5px; color: var(--ck-muted); text-align: center; margin-bottom: 8px }
.ck-cta { width: 100%; border: none; border-radius: 12px; background: var(--ck-red); color: #fff; font-weight: 800; font-size: 16px; padding: 15px; transition: background .2s }
.ck-cta:hover:not(:disabled) { background: var(--ck-red-d) }
.ck-cta:disabled { opacity: .7 }
.ck-err { display: none; background: #fdecea; color: #b71c1c; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px }
.ck-err.ck-show { display: block }
.ck-empty { text-align: center; padding: 40px 12px; color: var(--ck-muted) }

/* Desktop: two columns, bill + pay on the right */
@media (min-width: 1000px) {
  .ck-page { background: #f3ece1 }
  .ck-inner { max-width: none; padding-bottom: 40px }
  .ck-logo { display: block }
  .ck-title { font-size: 20px }
  .ck-save { font-size: 15px }
  .ck-grid { max-width: 1120px; margin: 0 auto; padding: 22px 20px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start }
  .ck-col-r { position: sticky; top: 96px }
  .ck-page.ck-open + .ck-paybar { display: none }
  .ck-side-pay { display: block; margin-top: 14px }
  .ck-card { padding: 18px; border-radius: 16px }
}

/* ── Part 2: delivery / pickup, sheets, forms ── */
.ck-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--ck-cream); border-radius: 11px; padding: 4px; margin-bottom: 12px }
.ck-seg button { border: none; background: none; padding: 9px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--ck-muted) }
.ck-seg button.ck-on { background: #fff; color: var(--ck-red); box-shadow: 0 1px 4px rgba(42,18,0,.1) }
.ck-eta { font-size: 12px; color: var(--ck-muted); margin-top: 10px; padding-left: 48px; line-height: 1.4 }
.ck-eta b { color: var(--ck-ink) }
.ck-pay2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px }
.ck-pay2 button { border: 1.5px solid var(--ck-line); border-radius: 10px; padding: 10px; font-size: 12px; color: var(--ck-muted); background: #fff; text-align: left; line-height: 1.35 }
.ck-pay2 button b { display: block; color: var(--ck-ink); font-size: 13px; margin-bottom: 2px }
.ck-pay2 button.ck-on { border-color: var(--ck-red); background: #fef0f2 }
.ck-pay2 button.ck-on b { color: var(--ck-red) }
.ck-pay2 button.ck-locked { opacity: .75 }
.ck-note { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: #fffaf2; border: 1px solid #eadfce; font-size: 12px; color: #5a4632; line-height: 1.45 }

.ck-dim { position: fixed; inset: 0; z-index: 4010; background: rgba(20,8,0,.45); display: none }
.ck-dim.ck-show { display: block }
.ck-sheetwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4011; display: none; justify-content: center }
.ck-sheetwrap.ck-show { display: flex }
.ck-sheet { width: 100%; max-width: 430px; background: #fff; border-radius: 20px 20px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch }
.ck-grab { width: 40px; height: 4px; border-radius: 4px; background: #e2d6c4; margin: 4px auto 12px }
.ck-sheet h3 { font-size: 18px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px }
.ck-x { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--ck-cream); font-size: 14px; color: var(--ck-ink) }
.ck-lbl { display: block; font-size: 11.5px; font-weight: 700; color: var(--ck-muted); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 5px }
.ck-inp { width: 100%; border: 1.5px solid var(--ck-line); border-radius: 10px; padding: 12px; font-family: inherit; font-size: 16px; background: var(--ck-cream); color: var(--ck-ink); outline: none }
.ck-inp:focus { border-color: var(--ck-red) }
.ck-inp.ck-bad { border-color: #d32f2f }
.ck-ferr { font-size: 12px; color: #c62828; margin-top: 4px; display: none }
.ck-ferr.ck-show { display: block }
.ck-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ck-two .ck-lbl { margin-top: 0 }
.ck-ph { display: flex; border: 1.5px solid var(--ck-line); border-radius: 10px; overflow: hidden; background: var(--ck-cream) }
.ck-ph span { padding: 12px; border-right: 1.5px solid var(--ck-line); font-weight: 700; white-space: nowrap }
.ck-ph input { border: none; background: none; padding: 12px; font-family: inherit; font-size: 16px; flex: 1; min-width: 0; outline: none; color: var(--ck-ink) }
.ck-or { text-align: center; color: var(--ck-muted); font-size: 12px; margin: 12px 0 0 }
.ck-ghost { width: 100%; border: 1.5px solid var(--ck-line); border-radius: 12px; background: #fff; font-weight: 800; font-size: 15px; padding: 13px; color: var(--ck-ink); margin-top: 10px }
.ck-ghost small { font-weight: 500; color: var(--ck-muted); font-size: 12px }
.ck-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.ck-chips button { font-size: 12px; border: 1px solid var(--ck-line); border-radius: 14px; padding: 6px 10px; background: #fff; color: var(--ck-ink) }
.ck-chips button.ck-on { border-color: var(--ck-red); color: var(--ck-red); background: #fef0f2; font-weight: 700 }
.ck-msg { font-size: 12.5px; margin-top: 6px }
.ck-msg.ck-ok { color: var(--ck-green) } .ck-msg.ck-bad { color: #c62828 } .ck-msg.ck-wait { color: var(--ck-muted) }
.ck-sheet .ck-cta { margin-top: 16px }
.ck-smallnote { font-size: 11.5px; color: var(--ck-muted); text-align: center; margin-top: 8px; line-height: 1.4 }
.ck-otp { width: 100%; text-align: center; letter-spacing: 10px; font-size: 24px; font-weight: 800 }
.ck-textbtn { background: none; border: none; color: var(--ck-red); font-weight: 700; font-size: 13px; padding: 0 }
.ck-outlet { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1.5px solid var(--ck-line); border-radius: 12px; padding: 12px; background: #fff; margin-bottom: 8px }
.ck-outlet.ck-on { border-color: var(--ck-red); background: #fef0f2 }
.ck-outlet b { display: block; font-size: 14px }
.ck-outlet span { font-size: 12px; color: var(--ck-muted) }

@media (min-width: 1000px) {
  .ck-sheetwrap { top: 0; align-items: center }
  .ck-sheet { border-radius: 18px; max-width: 460px; max-height: 86vh }
  .ck-grab { display: none }
}

/* ── Part 3: payment confirmation overlay ── */
.ck-verify { position: fixed; inset: 0; z-index: 4020; background: rgba(255,255,255,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px }
.ck-verify b { font-size: 18px }
.ck-verify span { font-size: 13px; color: var(--ck-muted) }
.ck-spin { width: 46px; height: 46px; border: 4px solid #f0e8d8; border-top-color: var(--ck-red); border-radius: 50%; animation: ck-spin .7s linear infinite }
@keyframes ck-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .ck-spin { animation-duration: 2s } }

/* ── Part 4: offers sheet, loyalty switch ── */
.ck-toggle { margin-left: auto; width: 44px; height: 26px; border-radius: 13px; border: none; background: #d9cdbb; position: relative; flex-shrink: 0; padding: 0 }
.ck-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s }
.ck-toggle.ck-on { background: var(--ck-green) }
.ck-toggle.ck-on i { left: 21px }
.ck-off { border: 1.5px dashed #e6cfa4; border-radius: 12px; padding: 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; background: #fffdf7 }
.ck-off.ck-applied { border-style: solid; border-color: var(--ck-green); background: #f3faf3 }
.ck-off.ck-locked { opacity: .7 }
.ck-code { font-weight: 800; font-size: 14px; letter-spacing: .4px }
.ck-od { font-size: 12.5px; color: #4a3a2a; margin-top: 2px }
.ck-os { font-size: 11.5px; color: var(--ck-green); font-weight: 700; margin-top: 4px }
.ck-lk { font-size: 11.5px; color: var(--ck-red); font-weight: 700; margin-top: 4px }
.ck-ob { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--ck-red); background: none; border: none; padding: 4px 0; white-space: nowrap }
.ck-off.ck-applied .ck-ob { color: #8a6a42 }
.ck-codeRow { display: flex; gap: 8px }
.ck-codeRow .ck-cta { width: auto; margin-top: 0; padding: 0 20px; font-size: 14px }
#ck-f-code::placeholder { text-transform: none }

/* ── Part 5: Goes well with this ── */
.ck-sugg { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: none; scroll-snap-type: x proximity }
.ck-sugg::-webkit-scrollbar { display: none }
.ck-sc { flex: 0 0 132px; background: #fff; border-radius: 12px; overflow: hidden; position: relative; scroll-snap-align: start }
.ck-sc img, .ck-sc-noimg { width: 100%; height: 112px; object-fit: cover; background: var(--ck-cream); display: block }
.ck-add { position: absolute; top: 84px; right: 8px; width: 32px; height: 32px; border-radius: 9px; background: var(--ck-red); color: #fff; border: 2px solid #fff; font-size: 19px; font-weight: 700; line-height: 1; padding: 0 }
.ck-add:hover { background: var(--ck-red-d) }
.ck-tag { position: absolute; top: 6px; left: 6px; background: var(--ck-green); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 6px }
.ck-sc-t { padding: 8px 9px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.25 }
.ck-sc-m { font-size: 11px; color: var(--ck-muted); font-weight: 500; margin-top: 2px }
.ck-sc-p { font-size: 13px; font-weight: 800; margin-top: 4px }
@media (min-width: 1000px) { .ck-sc { flex-basis: 150px } }