/* ==========================================================================
 * cart_ux.css — Tata letak & kontrol keranjang storefront (v1)
 *
 * Dimuat HANYA pada halaman keranjang (?view=cart) lewat render_head().
 * Bersifat penyempurnaan: bila berkas ini gagal dimuat (CDN/rewrite bermasalah)
 * keranjang tetap tampil memakai gaya dasar di index.php — tidak ada yang rusak.
 *
 * Prinsip:
 *   1. Semua pemilih diikat ke #cartPageContainer / .tk-* agar menang atas
 *      utilitas Tailwind CDN yang disuntikkan belakangan ke <head>, tanpa
 *      menghambur !important.
 *   2. Satu titik putus utama: < 1024px = satu kolom (ponsel & tablet),
 *      >= 1024px = dua kolom dengan ringkasan menempel. Tablet TIDAK lagi
 *      dipaksa memakai kolom sempit 1/3 yang membuat peta & dropdown gepeng.
 *   3. Sasaran sentuh minimal 44x44px (pedoman Apple HIG & Material) di semua
 *      tombol yang sering dipakai: − / + / hapus.
 *   4. Aman untuk peramban lama: setiap properti modern (grid, clamp, dvh,
 *      env(), :focus-visible) punya nilai cadangan yang ditulis lebih dulu.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. KERANGKA HALAMAN
 * ----------------------------------------------------------------------- */

#cartPageContainer .tk-cart-grid {
    display: block;                       /* cadangan bila grid tak didukung */
}

@supports (display: grid) {
    #cartPageContainer .tk-cart-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    /* Dua kolom HANYA pada layar lebar NYATA (laptop/desktop).
     *
     * Titik putusnya 1200px, bukan 1024px, dan itu disengaja: iPad lanskap =
     * 1024px, iPad Air = 1180px, iPad Pro 11" = 1194px. Pada 1024px kolom
     * ringkasan hanya ~371px sehingga petanya menyusut jadi ~297px — terlalu
     * sempit untuk menandai titik rumah dengan tepat. Semua tablet, potret
     * maupun lanskap, kini mendapat satu kolom selebar layar. */
    @media (min-width: 1200px) {
        #cartPageContainer .tk-cart-grid {
            grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
            gap: 20px;
        }
    }
    @media (min-width: 1440px) {
        #cartPageContainer .tk-cart-grid {
            grid-template-columns: minmax(0, 1.8fr) minmax(400px, 420px);
        }
    }
}

#cartPageContainer .tk-cart-main { min-width: 0; }
#cartPageContainer .tk-cart-side { min-width: 0; }

/* PANEL RINGKASAN — TIDAK PERNAH BERGULIR SENDIRI.
 *
 * Percobaan sebelumnya memberi panel ini `max-height` + `overflow-y: auto`
 * supaya "muat di layar". Hasilnya justru buruk: bagian checkout punya batang
 * gulir sendiri di dalam halaman yang juga bergulir — dua gulir bersarang,
 * membingungkan, dan sama sekali tidak terasa seperti aplikasi.
 *
 * Sekarang: panel mengalir wajar mengikuti halaman, seperti sebelum pembaruan.
 * Di layar lebar ia hanya MENEMPEL (sticky) tanpa batas tinggi; kalau isinya
 * lebih tinggi dari layar, ia ikut bergulir bersama halaman apa adanya —
 * perilaku bawaan peramban, dan itu memang yang benar.
 *
 * JANGAN kembalikan max-height / overflow di sini. */
#cartPageContainer .tk-cart-side .tk-summary { position: static; }
@media (min-width: 1200px) {
    #cartPageContainer .tk-cart-side .tk-summary {
        position: -webkit-sticky;
        position: sticky;
        top: 16px;
    }
    /* align-self: start membuat sticky bekerja benar di dalam grid — tanpa ini
       item grid teregang setinggi baris sehingga sticky-nya tidak pernah aktif. */
    #cartPageContainer .tk-cart-side { align-self: start; }
}

/* --------------------------------------------------------------------------
 * 2. KARTU ITEM KERANJANG
 *    Ponsel  : gambar + info di baris 1, kendali jumlah di baris 2 (lebar penuh)
 *    >=560px : tiga kolom sejajar
 * ----------------------------------------------------------------------- */

#cartPageContainer .cart-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef2f7;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
    margin-bottom: 12px;
}

@supports (display: grid) {
    #cartPageContainer .cart-item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "img info"
            "act act";
        gap: 10px 12px;
        align-items: start;
    }
    #cartPageContainer .cart-item .ci-img     { grid-area: img; }
    #cartPageContainer .cart-item .ci-info    { grid-area: info; }
    #cartPageContainer .cart-item .ci-actions { grid-area: act; }

    @media (min-width: 560px) {
        #cartPageContainer .cart-item {
            grid-template-columns: 88px minmax(0, 1fr) auto;
            grid-template-areas: "img info act";
            gap: 14px;
            padding: 14px;
        }
    }
}

#cartPageContainer .cart-item .ci-img {
    width: 72px; min-width: 72px; height: 72px;
    border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #f8fafc;
}
#cartPageContainer .cart-item .ci-img img {
    width: 100%; height: 100%; max-height: none;
    object-fit: cover;
}
@media (min-width: 560px) {
    #cartPageContainer .cart-item .ci-img { width: 88px; min-width: 88px; height: 88px; }
}

#cartPageContainer .cart-item .ci-info { font-size: 13px; min-width: 0; }
#cartPageContainer .cart-item .ci-info .name {
    font-weight: 700; font-size: 14.5px; line-height: 1.35;
    /* Nama panjang dipotong rapi 2 baris, tidak lagi mendorong kolom lain. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
}
#cartPageContainer .cart-item .ci-info .price { color: #047857; font-weight: 800; margin-top: 3px; }
#cartPageContainer .cart-item .ci-info .meta  { color: #64748b; font-size: 11.5px; margin-top: 5px; }

/* Kolom aksi.
 *
 * Ponsel: SATU baris padat — [− jumlah +] [stok] ......... [Hapus].
 * Versi sebelumnya memberi baris ini garis putus-putus + padding besar dan
 * menaruh keterangan stok di baris tersendiri, sehingga satu kartu produk bisa
 * setinggi ±460px — tiga produk saja sudah memaksa menggulir jauh. Sekarang
 * tingginya kira-kira separuh, sepadat baris keranjang aplikasi belanja. */
#cartPageContainer .cart-item .ci-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    width: 100%;
    padding-top: 2px;
    border-top: 0;
}
/* Pembungkus [kendali jumlah + keterangan stok]: berdampingan di ponsel supaya
   tidak memakan baris tambahan. */
#cartPageContainer .cart-item .ci-actions > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
@media (min-width: 560px) {
    #cartPageContainer .cart-item .ci-actions {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        width: auto;
        min-width: 132px;
        padding-top: 0;
    }
    /* Di layar lebih lebar ruangnya cukup, jadi keterangan stok kembali ke
       bawah kendali jumlah agar sejajar rapi. */
    #cartPageContainer .cart-item .ci-actions > div:first-child {
        display: block;
    }
}

/* --------------------------------------------------------------------------
 * 3. KENDALI JUMLAH — ANGKA BISA DIKETIK
 * ----------------------------------------------------------------------- */

#cartPageContainer .qty-control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    /* Cegah pembesaran ganda-ketuk iOS pada tombol yang ditekan berulang. */
    touch-action: manipulation;
}
#cartPageContainer .qty-control.is-busy { opacity: .72; }

#cartPageContainer .qty-control button {
    -webkit-appearance: none; appearance: none;
    background: #fff;
    border: 0;
    color: #0f172a;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    width: 38px; height: 38px;
    min-width: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
}
#cartPageContainer .qty-control button:active { transform: scale(.9); background: #e2e8f0; }
#cartPageContainer .qty-control button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
#cartPageContainer .qty-control button:focus-visible {
    outline: 2px solid #10b981; outline-offset: 2px;
}

/* Kotak angka: inti permintaan penjual — jumlah besar cukup diketik. */
#cartPageContainer .qty-control .qty-input {
    -webkit-appearance: none; appearance: none;
    width: 56px;
    min-width: 44px;
    height: 38px;
    padding: 0 4px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: center;
    font-weight: 800;
    /* 16px mencegah iOS Safari memperbesar halaman saat kotak difokuskan. */
    font-size: 16px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
#cartPageContainer .qty-control .qty-input::-webkit-outer-spin-button,
#cartPageContainer .qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
#cartPageContainer .qty-control .qty-input:focus {
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px #10b981;
}
#cartPageContainer .qty-control .qty-input.is-invalid {
    box-shadow: inset 0 0 0 2px #f43f5e;
}
@media (min-width: 560px) {
    #cartPageContainer .qty-control .qty-input { width: 62px; }
}

#cartPageContainer .qty-meta {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 700;
    text-align: left;
    margin-top: 0;
    line-height: 1.2;
    white-space: nowrap;
}
@media (min-width: 560px) {
    #cartPageContainer .qty-meta {
        text-align: center;
        margin-top: 4px;
        min-height: 13px;
    }
}
#cartPageContainer .qty-meta.is-warn { color: #d97706; }

/* Tombol hapus dibuat cukup besar untuk jari, tapi tetap sekunder. */
#cartPageContainer .ci-actions .remove {
    font-size: 12px;
    font-weight: 700;
    color: #ef4444;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    min-height: 36px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
}
#cartPageContainer .ci-actions .remove:hover { background: #fef2f2; }
#cartPageContainer .ci-actions .remove:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }

/* Catatan per produk hidup di bawah info produk pada SEMUA ukuran layar:
   satu salinan saja, jadi tidak pernah ada dua elemen ber-id kembar (sumber
   klasik bug "tombol catatan menyimpan ke kotak yang salah"). */
#cartPageContainer .note-section { width: 100%; margin-top: 6px; }
/* Pemicu catatan = chip ringkas RATA KIRI. Markup aslinya memakai
   `w-full justify-center`, sehingga tulisannya melayang di tengah kartu dan
   terlihat seperti tombol utama padahal hanya aksi sampingan. */
#cartPageContainer .note-section > button {
    width: auto;
    justify-content: flex-start;
    min-height: 32px; padding: 4px 8px 4px 0; border-radius: 8px;
    font-size: 11.5px; font-weight: 700; touch-action: manipulation;
    text-decoration: none; color: #2563eb;
}
#cartPageContainer .note-section > button:hover { text-decoration: underline; }
#cartPageContainer .note-section textarea { font-size: 16px; }
@media (min-width: 1200px) {
    #cartPageContainer .note-section textarea { font-size: 13px; }
}

/* Baris yang sedang dihapus/ditambahkan */
#cartPageContainer .cart-list-item.is-leaving {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .18s ease, transform .18s ease;
}

/* --------------------------------------------------------------------------
 * 4. PANEL RINGKASAN & PENGIRIMAN
 * ----------------------------------------------------------------------- */

#cartPageContainer .tk-summary { padding: 16px; }
@media (min-width: 560px) { #cartPageContainer .tk-summary { padding: 20px; } }

#cartPageContainer .tk-summary select,
#cartPageContainer .tk-summary input[type="text"],
#cartPageContainer .tk-summary input[type="search"],
#cartPageContainer .tk-summary input[type="number"],
#cartPageContainer .tk-summary input[type="datetime-local"],
#cartPageContainer .tk-summary textarea {
    /* 16px = tidak ada auto-zoom di iOS; tinggi 44px = nyaman disentuh. */
    font-size: 16px;
    min-height: 44px;
    max-width: 100%;
}
@media (min-width: 1200px) {
    /* Hanya di desktop (papan ketik fisik) ukurannya dikompakkan. Di tablet
       tetap 16px/44px supaya nyaman disentuh dan tidak memicu auto-zoom iOS. */
    #cartPageContainer .tk-summary select,
    #cartPageContainer .tk-summary input[type="text"] { font-size: 14px; min-height: 40px; }
}

/* Pemilih wilayah & kartu mode: 1 kolom di ponsel kecil, 2 kolom setelahnya.
 *
 * `:not(.hidden)` WAJIB ada. Pemilih di sini lebih spesifik daripada utilitas
 * `.hidden` milik Tailwind; tanpa penjaga ini, blok yang seharusnya
 * disembunyikan lewat classList.add('hidden') justru tetap tampil — jebakan
 * yang sama pernah membuat panel tersembunyi "bocor" di modul lain. */
#cartPageContainer .tk-loc-grid:not(.hidden),
#cartPageContainer .tk-mode-grid:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
@media (min-width: 420px) {
    #cartPageContainer .tk-loc-grid:not(.hidden),
    #cartPageContainer .tk-mode-grid:not(.hidden) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
 * 5. PETA DRIVER TOKO
 *    Tinggi mengikuti layar (bukan 224px mati), dan sentuhan tidak lagi
 *    "menculik" gulir halaman di ponsel.
 * ----------------------------------------------------------------------- */

#cartPageContainer .tk-map-shell {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #eef2f7;
    /* Cadangan untuk peramban tanpa clamp(). */
    height: 260px;
    height: clamp(220px, 42vh, 380px);
    /* isolation: peta punya konteks tumpuk sendiri sehingga panel hasil
       pencarian & dropdown kurir tidak pernah tertimbun ubin peta. */
    isolation: isolate;
    z-index: 0;
}
@media (min-width: 1200px) {
    /* Di kolom samping desktop tingginya dipatok agar panel tidak memanjang. */
    #cartPageContainer .tk-map-shell { height: 300px; }
}
#cartPageContainer .tk-map-shell > .tk-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* inset: 0 belum dikenal peramban lama — tulis eksplisit sebagai cadangan. */
#cartPageContainer .tk-map-shell > .tk-map { top: 0; right: 0; bottom: 0; left: 0; }

/* Gerbang sentuh: di perangkat sentuh peta baru bisa digeser setelah diketuk,
   supaya menggulir halaman melewati peta tidak tersangkut. */
#cartPageContainer .tk-map-gate {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .28);
    color: #fff; font-size: 12px; font-weight: 800; text-align: center;
    padding: 12px; cursor: pointer;
    z-index: 500;                      /* di atas ubin, di bawah popup Leaflet */
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
#cartPageContainer .tk-map-gate span {
    background: rgba(15, 23, 42, .78);
    padding: 8px 14px; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}
#cartPageContainer .tk-map-gate.is-hidden { display: none; }

#cartPageContainer .tk-map-fallback {
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 14px;
    background: #f8fafc;
    font-size: 12px;
    color: #475569;
    line-height: 1.55;
}

/* Marker buatan sendiri (SVG sebaris) — nol permintaan gambar ke luar. */
#cartPageContainer .tk-pin { background: transparent; border: 0; }

/* Panel hasil pencarian alamat harus selalu di atas peta. */
#cartPageContainer #map_search_results { z-index: 1000; }

/* --------------------------------------------------------------------------
 * 6. RASA APLIKASI NATIVE — TANPA ELEMEN MENGAPUNG
 *
 * TIDAK ADA batang aksi fixed di halaman ini. Versi sebelumnya menempelkan
 * batang "Total + Checkout" tepat di atas bilah navigasi toko; hasilnya
 * menutupi menu lain di ponsel & tablet dan memaksa padding bawah membengkak.
 *
 * Rasa "native" dikejar dari hal yang benar: hierarki yang jelas, baris
 * setinggi jempol, pemisah setipis rambut, dan umpan balik tekan — semuanya
 * MENGALIR di dalam halaman, tidak menutupi apa pun.
 *
 * ATURAN: jangan tambahkan position:fixed di halaman keranjang. Bilah navigasi
 * bawah (z-index 40) dan lembar geser (z-index 100) sudah memakai ruang itu.
 * ----------------------------------------------------------------------- */

/* Kartu bergaya daftar terkelompok iOS: pemisah setipis rambut, bukan kotak
   bertumpuk yang masing-masing berbayang. */
#cartPageContainer .tk-summary > .tk-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    font-size: 13.5px;
}
#cartPageContainer .tk-summary > .tk-row strong { font-variant-numeric: tabular-nums; }

/* WAJIB — JANGAN DIHAPUS.
 *
 * Pemilih di atas ber-ID, jadi kekhususannya MENGALAHKAN `.hidden` milik
 * Tailwind (`display:none`). Tanpa aturan ini baris "Service Charge" dan
 * "Pajak FnB" tetap tampil "Rp 0" pada toko non-FnB, dan
 * toggleRow()/classList.toggle('hidden') dari JS tidak berpengaruh apa pun.
 *
 * Pola yang sama berlaku untuk SETIAP kelas .tk-* baru yang memakai
 * display: flex/grid dan bisa disembunyikan JS. */
#cartPageContainer .tk-summary > .tk-row.hidden,
#cartPageContainer .tk-summary > .tk-row[hidden] { display: none; }
/* Tailwind `space-y-3` menambah margin-atas antar anak; untuk baris daftar kita
   ingin rapat seperti daftar native, jadi marginnya dinolkan di sini.
   Pemilih ber-ID sudah cukup kuat untuk menang tanpa !important. */
#cartPageContainer .tk-summary > .tk-row { margin-top: 0; }

/* Judul panel: tebal, ringkas, ala judul bagian aplikasi. */
#cartPageContainer .tk-summary .tk-title {
    font-size: 16px; font-weight: 800; color: #0f172a;
    letter-spacing: -.01em;
    margin-bottom: 2px;
}

/* Baris pilihan (mode kirim, metode bayar) setinggi jempol dengan umpan balik
   tekan seperti daftar native. */
#cartPageContainer label[id^="modeCard_"],
#cartPageContainer #paymentMethodList > label {
    min-height: 56px;
    transition: transform .12s ease, background-color .12s ease;
    touch-action: manipulation;
}
#cartPageContainer label[id^="modeCard_"]:active,
#cartPageContainer #paymentMethodList > label:active {
    transform: scale(.985);
    background-color: #f8fafc;
}
/* Radio/checkbox cukup besar untuk disentuh tanpa perlu membidik. */
#cartPageContainer #paymentMethodList input[type="radio"],
#cartPageContainer label[id^="modeCard_"] input[type="radio"] {
    min-width: 20px; min-height: 20px;
}

/* Tombol utama: tinggi 52px, lebar penuh — ukuran tombol aksi utama aplikasi.
   Tetap berada di dalam alur kartu, TIDAK mengapung. */
#cartPageContainer #checkoutBtn {
    min-height: 52px;
    font-size: 15.5px;
    letter-spacing: -.01em;
    border-radius: 16px;
    touch-action: manipulation;
}
#cartPageContainer #checkoutBtn:focus-visible { outline: 2px solid #065f46; outline-offset: 2px; }

/* Sasaran sentuh tombol sekunder di dalam panel (Gunakan/Batalkan voucher,
   Cari alamat, Gunakan GPS) tidak pernah lebih kecil dari 40px.
   Ditulis sebagai pemilih sederhana — `:not()` dengan pemilih majemuk masih
   Selectors Level 4 dan membuat seluruh aturan diabaikan peramban lama. */
#cartPageContainer .tk-summary button { min-height: 40px; }

/* Saat halaman digulir ke pesan galat, jangan sampai tersembunyi di balik
   apa pun yang menempel. */
#cartPageContainer #checkoutAlert,
#cartPageContainer #checkoutBtn { scroll-margin-top: 24px; scroll-margin-bottom: 120px; }

/* Angka total: tabular supaya tidak bergeser-geser saat nilainya berubah. */
#cartPageContainer #summaryGrandTotal,
#cartPageContainer #summarySubtotal,
#cartPageContainer #summaryOngkir { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
 * 7. UMPAN BALIK & AKSESIBILITAS
 * ----------------------------------------------------------------------- */

#cartPageContainer .tk-flash {
    display: inline-block;
    animation: tkFlashPulse .45s ease;
}
@keyframes tkFlashPulse {
    0%   { transform: scale(1);    color: inherit; }
    35%  { transform: scale(1.08); color: #047857; }
    100% { transform: scale(1);    color: inherit; }
}

#cartPageContainer .tk-syncing { opacity: .55; }

.tk-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tk-undo-toast {
    position: fixed;
    left: 50%;
    /* Sejajar dengan .app-toast bawaan storefront, tepat di atas bilah
       navigasi bawah. Muncul hanya sesaat setelah item dihapus. */
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(12px);
    z-index: 60;
    display: flex; align-items: center; gap: 12px;
    background: #0f172a; color: #fff;
    padding: 10px 12px 10px 16px;
    border-radius: 14px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .8);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    max-width: calc(100vw - 24px);
}
.tk-undo-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tk-undo-toast button {
    background: #10b981; color: #fff; border: 0;
    padding: 8px 14px; border-radius: 10px;
    font-weight: 800; font-size: 12px; cursor: pointer;
    min-height: 36px; touch-action: manipulation;
}
@media (min-width: 1200px) {
    .tk-undo-toast { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    #cartPageContainer .tk-flash,
    .tk-undo-toast,
    #cartPageContainer .cart-list-item.is-leaving { animation: none !important; transition: none !important; }
}

/* Mode kontras tinggi (Windows) — pastikan batas tetap terlihat. */
@media (forced-colors: active) {
    #cartPageContainer .qty-control,
    #cartPageContainer .qty-control button,
    #cartPageContainer .qty-control .qty-input { border: 1px solid ButtonText; }
    #cartPageContainer #checkoutBtn { border: 1px solid ButtonText; }
}

/* --------------------------------------------------------------------------
 * PENJAGA UMUM `.hidden` / `[hidden]`
 *
 * Seluruh berkas ini memakai pemilih ber-ID (#cartPageContainer ...) supaya
 * menang atas utilitas Tailwind CDN. Efek sampingnya: `.hidden` Tailwind juga
 * ikut kalah. Aturan di bawah mengembalikan kuasa itu untuk SEMUA elemen di
 * dalam keranjang, sehingga JS yang memakai classList.toggle('hidden') selalu
 * bekerja. Ditulis paling akhir agar menang atas semua aturan di atasnya.
 * ----------------------------------------------------------------------- */
#cartPageContainer .hidden,
#cartPageContainer [hidden],
#cartPageContainer .tk-map-gate.is-hidden { display: none !important; }

/* ==========================================================================
   METODE PEMBAYARAN — lencana ikon & penanda pembayaran online
   --------------------------------------------------------------------------
   Metode tanpa logo gambar (saldo toko, gateway online) dulu jatuh ke potongan
   teks abu-abu yang terlihat seperti markup rusak. Sekarang keduanya memakai
   ikon garis lokal di dalam lencana yang ukurannya sama dengan logo bank,
   sehingga tiap baris metode punya tinggi dan ritme yang sama.
   ========================================================================== */
.tk-pm-badge {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--nsh-surface-3, #f1f5f9);
  color: var(--nsh-text-2, #475569);
}
.tk-pm-online {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--nsh-ok-soft, #eafaf0);
  color: var(--nsh-ok, #15803d);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
.tk-pm-online svg { flex: none; }

/* Ilustrasi keranjang kosong.
   Dulu sebuah PNG berwarna dari CDN pihak ketiga: satu permintaan ke server
   luar hanya untuk hiasan, hilang saat perangkat offline, dan warnanya tidak
   pernah cocok dengan warna merek toko mana pun. Sekarang ikon garis lokal di
   dalam lingkaran lembut — mewarisi warna aksen toko dan selalu ada. */
.cart-empty-ico {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nsh-accent-soft, #f1f5f9);
  color: var(--nsh-accent, #64748b);
}
.cart-empty-ico svg { width: 46px; height: 46px; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   LOGO METODE PEMBAYARAN — ukurannya tidak boleh bergantung pada Tailwind
   --------------------------------------------------------------------------
   Baris metode bayar dirender JavaScript dengan `class="h-8 object-contain"`,
   yaitu kelas utilitas Tailwind. Itu bekerja di etalase ponsel, tetapi kelas
   utilitas adalah kekhususan (0,1,0) — paling rendah — sehingga aturan
   setel-ulang milik kerangka mana pun yang menyentuh `img` bisa
   mengalahkannya. Di Mode Desktop hal itu benar-benar terjadi dan logo bank
   tampil sebesar berkas aslinya (ratusan piksel), merusak seluruh kotak
   metode pembayaran.

   Aturan di bawah mengikat ukurannya ke KOMPONEN, bukan ke utilitas: selama
   berkas ini ikut dimuat — dan ia dimuat di etalase ponsel maupun di dalam
   kerangka Mode Desktop — logo pembayaran selalu berukuran benar, apa pun
   kerangka yang membungkusnya dan ada atau tidaknya Tailwind.

   Dipakai :is() pada dua wadah supaya berlaku baik saat keranjang dirender
   sebagai halaman penuh maupun saat dipasang ulang oleh kerangka aplikasi.
   -------------------------------------------------------------------------- */
/* Hanya LOGO yang dibatasi. Kode QRIS sengaja TIDAK termasuk: ia hidup di
   dalam tombol pratinjau .sux-qr-thumb yang ukurannya sudah ditetapkan
   sendiri, dan mengecilkannya ke ukuran logo membuatnya mustahil dipindai
   kamera — kegagalan yang sudah pernah terjadi di modul ini sebelumnya. */
:is(#cartPageContainer, .main-content-wrapper) label img[class*="h-8"] {
  max-height: 34px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
}
/* Gambar di dalam tombol QRIS mengisi tombolnya, apa pun ukuran berkasnya. */
:is(#cartPageContainer, .main-content-wrapper) .sux-qr-thumb img {
  max-height: none;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   ALUR CHECKOUT v2 (4 Okt 2026) — "checkout melayang tidak jelas"
   --------------------------------------------------------------------------
   Tiga akar masalah, semuanya paling parah di desktop:

   1. KARTU DI DALAM KARTU. Pembungkus baris dulu berkelas `.card
      .cart-list-item` dan sengaja tak bergaya (index.php), tetapi
      `body.nsh-app .card` (kerangka aplikasi) dan `.dsk-chrome-main .card
      {padding/box-shadow !important}` (template Mode Desktop) memberinya
      latar, bayangan, dan padding 20px lagi: kartu produk berbayang
      mengambang di dalam kartu berbayang lain. Kelas `card` kini dibuang dari
      pembungkus (user_checkout.php), jadi tak ada template yang menyentuhnya.
      Aturan di bawah hanya penjaga untuk markup lama yang masih tersimpan.

   2. RINGKASAN SETINGGI 2.000px+ YANG MENEMPEL. Mode kirim, kurir, peta,
      dropship, catatan, dan metode bayar dulu ditumpuk di dalam kartu
      ringkasan. Kartu itu sticky, jadi tombol Checkout terdorong keluar
      layar dan panelnya ikut "mengambang" saat menggulir. Blok-blok itu kini
      kartu bagian sendiri di kolom utama (.tk-co-sec); kolom samping cukup
      ringkasan + tombol, cukup pendek untuk selalu terlihat utuh.

   3. RUANG KOSONG ±120px di bawah tombol Checkout pada desktop: pengganjal
      bilah navigasi bawah dicetak juga saat bilah itu tidak ada.
   ========================================================================== */
#cartPageContainer .cart-list-item {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
}
/* Jarak antarbaris diatur `space-y-3` milik kolom utama; margin bawah kartu
   produk dinolkan supaya jaraknya tidak dobel (12px + 12px). */
#cartPageContainer .cart-list-item > .cart-item { margin-bottom: 0; }
@media (min-width: 1200px) {
    /* Bayangan kartu produk dibuat setipis daftar native: garis 1px + bayangan
       kontak, bukan bayangan lebar 18px yang membuatnya tampak melayang. */
    #cartPageContainer .cart-item { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
}

/* Kartu bagian alur checkout */
#cartPageContainer .tk-co-sec { padding: 16px; }
@media (min-width: 560px) { #cartPageContainer .tk-co-sec { padding: 18px 20px; } }
#cartPageContainer .tk-co-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
}
#cartPageContainer .tk-co-ico {
    width: 32px; height: 32px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--nsh-accent-soft, #ecfdf5);
    color: var(--nsh-accent, #047857);
}
#cartPageContainer .tk-co-ico svg { width: 18px; height: 18px; }
#cartPageContainer .tk-co-title {
    margin: 0; flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 800; letter-spacing: -.01em;
    color: #0f172a; line-height: 1.3;
}
#cartPageContainer .tk-co-opt {
    flex: none; font-size: 11px; font-weight: 700; color: #64748b;
    background: #f1f5f9; border-radius: 999px; padding: 3px 9px;
}
#cartPageContainer .tk-co-sec > :last-child { margin-bottom: 0; }
#cartPageContainer .tk-co-sec > .mb-4:last-child,
#cartPageContainer .tk-co-sec > .mb-4 { margin-bottom: 0; }
#cartPageContainer .tk-co-sec #roContainerBlock { margin-bottom: 0; }

/* Kontrol isian di kartu bagian = aturan yang sama dengan panel ringkasan
   (16px = tanpa auto-zoom iOS, 44px = nyaman disentuh). */
#cartPageContainer .tk-co-sec select,
#cartPageContainer .tk-co-sec input[type="text"],
#cartPageContainer .tk-co-sec input[type="search"],
#cartPageContainer .tk-co-sec input[type="number"],
#cartPageContainer .tk-co-sec input[type="datetime-local"],
#cartPageContainer .tk-co-sec textarea {
    font-size: 16px; min-height: 44px; max-width: 100%;
}
#cartPageContainer .tk-co-sec button { min-height: 40px; }
@media (min-width: 1200px) {
    #cartPageContainer .tk-co-sec select,
    #cartPageContainer .tk-co-sec input[type="text"],
    #cartPageContainer .tk-co-sec textarea { font-size: 14px; min-height: 40px; }
    /* Metode bayar & mode kirim tampil dua kolom di kolom utama yang lebar. */
    #cartPageContainer #paymentMethodList:not(.hidden) {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    }
    #cartPageContainer #paymentMethodList > * { margin-top: 0; }
    #cartPageContainer .tk-co-sec .tk-map-shell { height: 360px; }
}

/* Ringkasan menempel di bawah kepala halaman yang lengket.
   Sticky WAJIB dipasang pada ITEM GRID (.tk-cart-side), bukan pada kartu di
   dalamnya: pembungkus ber-align-self:start tingginya persis setinggi kartu,
   sehingga kartu sticky di dalamnya tidak punya ruang bergerak sama sekali —
   inilah sebab ringkasan versi lama ikut tergulir hilang. Lembar geser
   (senderSheet/receiverSheet) berada DI LUAR kolom ini, jadi konteks tumpuk
   yang dibuat sticky tidak menjebak z-index-nya.
   --tk-cart-sticky-top diukur dari kepala Mode Desktop oleh user_checkout.php. */
@media (min-width: 1200px) {
    #cartPageContainer .tk-cart-side {
        position: -webkit-sticky;
        position: sticky;
        top: var(--tk-cart-sticky-top, calc(var(--nsh-header-h, 0px) + 16px));
        align-self: start;
    }
    #cartPageContainer .tk-cart-side .tk-summary { position: static; top: auto; }
}

/* Pengganjal bilah navigasi bawah: hanya bila bilahnya memang ada. */
#cartPageContainer .tk-nav-spacer { height: calc(var(--nsh-content-bottom, 96px) + 24px); }
@media (min-width: 1200px) { #cartPageContainer .tk-nav-spacer { height: 0; } }
.dsk-chrome-main #cartPageContainer .tk-nav-spacer { height: 0; }
/* Kerangka aplikasi (nsh) sudah memberi body padding-bottom selebar bilah
   navigasi (--nsh-content-bottom). Pengganjal tambahan hanya menyisakan
   petak putih kosong ±110px di dasar kartu ringkasan. */
body.nsh-app #cartPageContainer .tk-nav-spacer { height: 0; }