/* Checkout (app/checkout.py). Mobile-first 360; dimuat sesudah belanja.css (+ akun.css untuk popup OTP tamu). */
.ck{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}
.ck [hidden]{display:none !important}
.ck-h1{font-size:clamp(22px,2.6vw,30px)}
.ck-h2{font-size:19px}
.ck-h3{font-size:16px}
.ck-kepala{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ck-pusat{max-width:560px}
.ck .btn{width:100%}
.ck .btn:disabled{opacity:.55;cursor:not-allowed}
.ck .btn:focus-visible,.ck .btn-teks:focus-visible,.ck a:focus-visible{outline:3px solid #0e7a68;outline-offset:2px}
.tag-hijau{background:#d4fff5;color:#05473b}

/* pita mode uji (sama warnanya dengan akun) */
.ck-uji{background:#fff3c4;color:#4d3300;border-bottom:2px solid #d9a400;font-size:14px;line-height:1.45}
.ck-uji .wrap{padding-top:8px;padding-bottom:8px}

/* langkah */
.ck-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;counter-reset:l}
.ck-langkah li{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 0 10px;border-bottom:3px solid #dbe5e2;color:#4a635c;font-size:13.5px;line-height:1.25}
.ck-langkah li.kini{border-bottom-color:#c45200;color:#05231c;font-weight:600}
.ck-langkah li.lewat{border-bottom-color:#0e7a68;color:#0b6355}
.ck-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#eef5f3;font:700 13px/1 Inter,sans-serif}
.ck-langkah li.kini .ck-no{background:#c45200;color:#fff}
.ck-langkah li.lewat .ck-no{background:#0e7a68;color:#fff}
.ck-nama{min-width:0}
@media (max-width:419px){.ck-langkah li:not(.kini) .ck-nama{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}}

/* tata letak: HP satu kolom (ringkasan di bawah), layar lebar dua kolom */
.ck-grid{display:flex;flex-direction:column;gap:16px}
.ck-utama{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:960px){
  .ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px}
  .ck-grid-satu{grid-template-columns:minmax(0,720px)}
  .ck-samping{position:sticky;top:16px}
  .ck .btn{width:auto;align-self:flex-start;min-width:260px}
  .ck .ck-admin .btn,.ck .ck-kirim .btn{align-self:stretch}
}

/* pesan */
.ck-galat{background:#fdecea;color:#8a1c12;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.ck-galat .btn{align-self:stretch}
.ck-info{background:#e7f8f1;color:#0b5e50;border-radius:10px;padding:10px 12px}
.ck-galat-isian{color:#b42318;font-size:14px;font-weight:500}

/* isian */
.ck-form{display:flex;flex-direction:column;gap:14px}
.ck-isian{display:flex;flex-direction:column;gap:6px;position:relative}
.ck-isian label,.ck-pilih legend,.ck-metode legend{font-weight:600}
.ck-isian input,.ck-isian textarea{min-height:48px;border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px #6f8b83;padding:11px 14px;font:500 16px/1.4 Inter,sans-serif;color:#05231c;background:#fff;width:100%;box-sizing:border-box}
.ck-isian textarea{resize:vertical;min-height:84px}
.ck-isian input:focus,.ck-isian textarea:focus{outline:0;box-shadow:inset 0 0 0 2.5px #0e7a68}
.ck-isian [aria-invalid="true"]{box-shadow:inset 0 0 0 2px #b42318}
.ck-jebak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ck-hp-kunci{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#f5faf9;border-radius:10px;padding:10px 12px}
.ck-lencana{display:inline-block;font:600 12px/1.2 Inter,sans-serif;color:#05473b;background:#d4fff5;border-radius:6px;padding:3px 7px}

/* kecamatan: daftar saran */
.ck-kec-wadah{position:relative}
.ck-kec-daftar{list-style:none;margin:0;padding:4px;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;background:#fff;border-radius:12px;box-shadow:0 10px 28px rgba(5,35,28,.22),0 0 0 1px #dbe5e2;max-height:300px;overflow:auto}
.ck-kec-daftar li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-height:44px;box-sizing:border-box;justify-content:center;border-radius:8px;cursor:pointer}
.ck-kec-daftar li[aria-selected="true"],.ck-kec-daftar li:hover{background:#eef5f3}
.ck-kec-daftar .kec{font-weight:600}
.ck-kec-daftar .kec-ket{font-size:13px;color:#4a635c}
.ck-kec-daftar .kosong{color:#4a635c;cursor:default}
.ck-pilih{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ck-opsi{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #c9dcd6;cursor:pointer}
.ck-opsi input{width:20px;height:20px;accent-color:#0e7a68;flex:none}

/* kotak OTP tamu */
.ck-otp{gap:10px;background:#f5faf9;box-shadow:inset 0 0 0 1.5px #c9dcd6}
.ck-otp details{border:0}
.ck-otp summary{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:#0b6355;cursor:pointer}
.ck-otp-buka[open] summary{margin-bottom:8px}
.ck-otp .ak-form input{font-size:17px}
.ck-otp-cod{display:flex;flex-direction:column;gap:8px;background:#f5faf9;border-radius:10px;padding:12px}

/* data penerima ringkas + tombol Ubah */
.ck-data{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ck-data-isi{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ck-data-simpan{background:#f5faf9;border-radius:12px;padding:12px}
.ck-ubah{margin:0;flex:none}
.ck-ubah .btn-teks{padding:0 4px;font-weight:600}

/* ongkir */
.ck-ongkir{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px;background:#eef5f3}
.ck-ongkir svg{flex:none;margin-top:1px;color:#0e7a68}
.ck-ongkir-gratis{background:#e7f8f1}
.ck-ongkir-admin{background:#fff4ec}
.ck-ongkir-admin svg{color:#8a3700}
.ck-admin{display:flex;flex-direction:column;gap:8px;border-radius:12px;padding:12px;background:#fff4ec;color:#5a2600}

/* cara bayar */
.ck-metode{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ck-metode legend{margin-bottom:8px}
.ck-opsi-bayar{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:14px 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px #c9dcd6;cursor:pointer;background:#fff}
.ck-opsi-bayar input{width:20px;height:20px;margin:1px 0 0;accent-color:#c45200}
.ck-opsi-bayar:has(input:checked){box-shadow:inset 0 0 0 2.5px #c45200;background:#fffaf6}
.ck-opsi-bayar:has(input:focus-visible){outline:3px solid #0e7a68;outline-offset:2px}
.ck-opsi-bayar.mati{cursor:not-allowed;background:#f6f8f7}
.ck-opsi-bayar.mati .ck-opsi-total{color:#6f8b83}
.ck-opsi-isi{display:flex;flex-direction:column;gap:3px;min-width:0}
.ck-opsi-judul{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ck-opsi-total{font:700 16px/1.3 Inter,sans-serif;white-space:nowrap}

/* barang & angka */
.ck-ringkas{gap:10px}
.ck-lini{display:flex;flex-direction:column;gap:4px}
.ck-lini+.ck-lini{border-top:1px solid #eef5f3;padding-top:8px}
.ck-lini-judul{font-size:14.5px}
.ck-barang{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ck-barang li{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ck-barang li>:last-child{white-space:nowrap}
.ck-angka{display:flex;flex-direction:column;gap:7px;border-top:1px solid #dbe5e2;padding-top:10px}
.ck-total{font-size:17px;border-top:1px dashed #c9dcd6;padding-top:8px}
.ck-total b{font-size:20px;color:#05231c}
.ck-blok{display:flex;flex-direction:column;gap:8px}
.ck-blok+.ck-blok{border-top:1px solid #eef5f3;padding-top:12px}
.ck-periksa{gap:14px}
.ck-kirim{gap:8px}
.ck-kirim .btn{min-height:54px;font-size:17px}

/* selesai */
.ck-selesai{max-width:620px;gap:14px}
.ck-centang{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#d4fff5;color:#0b6355}
.ck-kode{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#f5faf9;border-radius:12px;padding:12px}
.ck-kode b{font:700 20px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em;overflow-wrap:anywhere}
.ck-rek{display:flex;flex-direction:column;gap:6px;border-radius:12px;padding:14px;box-shadow:inset 0 0 0 1.5px #c9dcd6}
.ck-rek-no{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ck-rek-no b{font:700 20px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.03em}
.ck-salin{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:#05231c;color:#fff;font:600 14px Inter,sans-serif;cursor:pointer}
.ck-salin:hover{background:#0e7a68}
.ck-batas{background:#fff4ec;color:#7a3100;border-radius:10px;padding:10px 12px}
.ck-aksi{display:flex;flex-direction:column;gap:10px}
@media (min-width:720px){.ck-aksi{flex-direction:row;flex-wrap:wrap}.ck-aksi .btn{flex:1 1 220px}}

/* tombol checkout di /keranjang/ (hanya dimuat saat saklar hidup) */
.kr-segera .kr-ke-checkout,.kr-segera .kr-wa-sek{width:100%}
.lekat .tg-bilah .btn.tg-wa-ikon{min-width:44px;padding:0 10px;color:#05231c}
@media (min-width:560px){.lekat .tg-bilah .btn.tg-wa-ikon{padding:0 14px}}

/* perbaikan sesudah tangkapan layar 29 Okt */
#ck-judul:focus{outline:none}
@media (max-width:419px){
  .ck-opsi-bayar{grid-template-columns:22px minmax(0,1fr)}
  .ck-opsi-total{grid-column:2;font-size:17px}
}