/* assets/css/checkout.css — checkout multi-layanan & halaman pesanan berhasil.
   Warna layanan mengikuti konsep: pasang = merah, kirim = hijau, ambil = biru. */

.co-body .sticky-keranjang { display: none !important; }
body.co-body.has-cart { padding-bottom: 0; }
.co-page { padding: 8px 0 48px; }
.co-title { font-size: 26px; font-weight: 800; margin: 10px 0 16px; color: var(--ink); }

.co-svc { --c: var(--wine); --bg: #fef2f2; --bd: #fecaca; }
.svc-pasang { --c: var(--wine); --bg: #fef2f2; --bd: #fecaca; }
.svc-kirim { --c: #15803d; --bg: #f0fdf4; --bd: #bbf7d0; }
.svc-ambil { --c: #1d4ed8; --bg: #eff6ff; --bd: #bfdbfe; }

/* Langkah */
.co-progress { list-style: none; display: flex; gap: 6px; margin: 0 0 16px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.co-progress::-webkit-scrollbar { display: none; }
.co-progress li { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #f3f4f6; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.co-progress li.now { background: var(--wine); color: #fff; }
.co-progress li.done { background: #fef2f2; color: var(--wine); }
.co-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 70%); color: inherit; font-size: 11px; font-weight: 800; }
.co-progress li.now .co-dot { background: #fff; color: var(--wine); }

.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.co-card { background: #fff; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.co-state { color: var(--muted); }
.co-state .co-btn { margin-top: 12px; }
.co-summary { position: sticky; top: 84px; }
.co-summary h3 { font-size: 15px; margin: 0 0 12px; }
.co-sum-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.co-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line, #e5e7eb); font-size: 13px; }
.co-sum-total strong { font-size: 20px; color: var(--wine); white-space: nowrap; }
.co-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--c); background: var(--bg); border: 1px solid var(--bd); }

.co-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.co-card-head h2 { font-size: 18px; margin: 0; color: var(--ink); }
.co-card-head p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.co-stepno { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: #f3f4f6; font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.co-ico { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border-radius: 10px; fill: none; stroke: var(--c, var(--wine)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--bg, #fef2f2); }
.co-card h3 { font-size: 14px; margin: 18px 0 10px; color: var(--ink); }
.co-muted { font-size: 12px; color: var(--muted); margin: 8px 0; }
.co-note { font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }
.co-ok { font-size: 12px; color: #15803d; }
.co-bad { font-size: 12px; color: #b91c1c; }
.co-center { text-align: center; }

.co-multi { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; margin-bottom: 12px; }
.co-multi b { font-size: 14px; }
.co-multi p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.co-multi .co-ico { --c: #334155; --bg: #e2e8f0; }

.co-group { border: 1px solid var(--bd); background: var(--bg); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
section.co-group { padding: 16px; }
.co-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.co-group-head b { color: var(--c); font-size: 14px; }
.co-group-head > span, .co-group-head .co-link, .co-group-head .co-status { margin-left: auto; font-size: 12px; color: var(--muted); }
.co-group-head .co-ico { width: 32px; height: 32px; padding: 7px; background: #fff; }
.co-status { font-weight: 700; color: var(--c) !important; }

.co-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.co-items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px; }
.co-items img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #f9fafb; }
.co-items b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink); }
.co-items small { font-size: 11px; color: var(--muted); }
.co-price { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.co-options { display: grid; gap: 8px; }
.co-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; cursor: pointer; background: #fff; }
.co-opt input { margin: 3px 0 0; accent-color: var(--wine); }
.co-opt b { display: block; font-size: 13px; color: var(--ink); }
.co-opt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.co-opt small.co-ok { color: #15803d; } .co-opt small.co-bad { color: #b91c1c; }
.co-opt:has(input:checked) { border-color: var(--wine); background: #fef2f2; box-shadow: 0 0 0 1px var(--wine) inset; }
.co-opt.is-off { opacity: .6; cursor: not-allowed; }
.co-opt .co-price { color: var(--wine); font-size: 12px; }

.co-field { display: grid; gap: 6px; margin-top: 12px; min-width: 0; }
.co-field label, .co-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.co-label { display: block; margin: 14px 0 8px; }
.co-field small { font-size: 11px; color: var(--muted); }
.co-field input, .co-field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; }
.co-field input:focus, .co-field textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgb(124 18 30 / 12%); }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-loc { margin-top: 10px; padding: 12px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; }

.co-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.co-slot { padding: 10px 8px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; text-align: center; color: var(--ink); }
.co-slot b { display: block; font-size: 13px; }
.co-slot small { font-size: 10.5px; color: var(--muted); }
.co-slot.on { border-color: var(--wine); background: var(--wine); color: #fff; }
.co-slot.on small { color: #fde2e4; }
.co-slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.co-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; font-size: 12.5px; }
.co-dl dt { color: var(--muted); }
.co-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.co-dl-center { justify-content: center; margin: 14px auto 0; }

.co-pay { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.co-pay legend { width: 100%; font-size: 12px; font-weight: 700; margin-bottom: 8px; padding: 0; color: var(--ink); }
.co-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; font-size: 12px; cursor: pointer; }
.co-chip input { accent-color: var(--wine); margin: 0; }
.co-chip:has(input:checked) { border-color: var(--wine); color: var(--wine); font-weight: 700; }

.co-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: #f9fafb; font-size: 13px; }
.co-who span { color: var(--muted); }
.co-who .co-link { margin-left: auto; }

.co-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.co-actions-center { justify-content: center; }
.co-btn, .co-btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.co-btn { background: var(--wine); color: #fff; border: 1px solid var(--wine); }
.co-btn:hover { background: var(--wine-dark, #5b0d16); }
.co-btn:disabled { opacity: .6; cursor: wait; }
.co-btn-line { background: #fff; color: var(--wine); border: 1px solid var(--wine); }
.co-btn-big { flex: 1 1 260px; }
.co-link { background: none; border: 0; padding: 0; color: var(--wine); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.co-error { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; }

/* Pesanan berhasil */
.co-done { max-width: 760px; padding-top: 24px; }
.co-success { text-align: center; padding: 28px 20px; }
.co-success h1 { font-size: 22px; margin: 12px 0 6px; color: #15803d; }
.co-success p { margin: 0 auto; max-width: 520px; font-size: 13px; color: var(--muted); }
.co-check { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; border: 3px solid #16a34a; display: grid; place-items: center; }
.co-check svg { width: 32px; height: 32px; fill: none; stroke: #16a34a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.co-h2 { font-size: 16px; margin: 20px 0 10px; }

@media (max-width: 900px) {
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .co-progress li .co-ptext { display: none; }
  .co-progress li.now .co-ptext { display: inline; }
}
@media (max-width: 560px) {
  .co-page .container { padding-left: 16px; padding-right: 16px; }
  .co-card { padding: 16px; border-radius: 12px; }
  .co-title { font-size: 22px; }
  .co-row { grid-template-columns: 1fr; }
  .co-card-head { flex-wrap: wrap; }
  .co-actions .co-btn, .co-actions .co-btn-line { flex: 1 1 auto; }
  .co-dl { grid-template-columns: 1fr; gap: 0; }
  .co-dl dt { margin-top: 6px; }
}

/* Jasa pasang, potongan, catatan */
.co-jobs { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.co-jobs legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.co-good { color: #15803d !important; }
.co-who small { display: block; width: 100%; margin-top: 4px; }

/* Keranjang (tabel) & Pesanan Saya */
.kr-table-wrap { overflow-x: auto; }
.kr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kr-table th { text-align: left; font-size: 12px; color: #6b7280; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.kr-table td { padding: 12px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.kr-name a { color: var(--ink, #111827); font-weight: 600; text-decoration: none; }
.kr-name small { display: block; color: #9ca3af; font-size: 11.5px; }
.kr-svc { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }
.kr-table .qty-selector { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 8px; }
.kr-table .qty-btn { width: 32px; height: 32px; border: 0; background: none; font-size: 16px; cursor: pointer; }
.kr-qty { min-width: 28px; text-align: center; font-weight: 700; }
.kr-sub { font-weight: 700; }
.kr-go { display: flex; width: 100%; margin-top: 10px; }
.co-summary .co-link { display: block; margin-top: 12px; text-align: center; }
.po-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.po-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; }
.po-main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; color: inherit; text-decoration: none; }
.po-main small { grid-column: 2; color: #6b7280; }
.po-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.po-links .rs-more-card { display: block; padding: 14px; border: 1px solid #fde2e4; border-radius: 12px; background: #fff5f5; color: inherit; text-decoration: none; }
.po-links small { display: block; color: #6b7280; margin-top: 2px; }
@media (max-width: 720px) {
  .kr-table thead { display: none; }
  .kr-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
  .kr-table td { border: 0; padding: 0; }
  .kr-table td.kr-name { grid-column: 1 / -1; }
  .po-links { grid-template-columns: 1fr; }
}