/* ========================================================================== * 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 , 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; }