/**
 * Cart drawer — panel geser dari kanan (overlay), tampil di semua halaman.
 *
 * Referensi: tonybianco.com. Desktop: panel lebar tetap di sisi kanan.
 * HP: jadi layar penuh (komponen yang sama, cuma lebarnya diubah) — hasil
 * pemeriksaan langsung situs itu di kedua ukuran layar, 2 Sep 2026.
 *
 * Tipografi & warna TETAP aturan Takkan (14px, monokrom) — bukan meniru
 * gaya visual mereka, cuma pola & perilakunya (sama seperti bagian lain).
 */

.tk-cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tk-duration) var(--tk-ease);
	z-index: 1000;
}

.tk-cart-drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.tk-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100vw;
	background: #ffffff; /* Drawer SELALU terang, apapun tema kanvas halaman tempat ia dibuka (termasuk nanti di homepage gelap) — konsisten dengan warna overlay kontrol lain di situs. */
	color: #000000;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--tk-duration) var(--tk-ease);
	z-index: 1001;
}

.tk-cart-drawer.is-open {
	transform: translateX(0);
	/* Bayangan HANYA saat terbuka — kalau selalu ada, panel yang diparkir di luar layar bocor jadi bayangan abu di tepi kanan. */
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}

/* HP: layar penuh, bukan panel sempit — sama seperti referensi. */
@media (max-width: 480px) {
	.tk-cart-drawer {
		width: 100vw;
	}
}

.tk-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Tinggi header = tinggi navbar (61px, termasuk garis bawah 1px) supaya
	   garis bawahnya SEJAJAR dengan garis navbar (revisi user 9 Okt 2026;
	   dulu 69px). */
	box-sizing: border-box;
	height: 61px;
	padding: 0 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
}

.tk-cart-drawer__title {
	margin: 0;
}

.tk-cart-drawer__close {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.tk-cart-drawer__close:hover {
	background: none; /* Menimpa button:hover generik GeneratePress — kuirk yang sama seperti header accordion PDP. */
	color: inherit;
	opacity: 0.6;
}

.tk-cart-drawer__body {
	flex: 1 1 auto;
	/* ⚠️ Percobaan pertama (2 Sep 2026) taruh `overflow-y: auto` di sini dan
	   bikin footer `position: sticky; bottom: 0`. TERNYATA MASIH SALAH,
	   ketahuan lewat pengukuran DOM: `position: sticky` cuma "nempel" waktu
	   area ini BENAR-BENAR bisa di-scroll (scrollHeight > clientHeight).
	   Kalau isi keranjang sedikit (mis. 1 barang) dan belum memenuhi tinggi
	   drawer, tidak ada scroll sama sekali — jadi sticky tidak pernah
	   "aktif", dan footer balik ke posisi normalnya tepat setelah daftar
	   item, menyisakan ruang kosong besar di bawahnya sampai dasar drawer.
	   Itu persis bug yang dilaporkan user, cuma keliatan sudah "agak mepet"
	   karena baru dites dengan keranjang penuh.
	   PERBAIKAN BENAR: area ini sendiri dijadikan flex column. Daftar item
	   (.tk-cart-drawer__items) yang tumbuh mengisi ruang & scroll sendiri
	   kalau isinya panjang; footer dikembalikan ke flex biasa (bukan
	   sticky) supaya SELALU terdorong ke dasar drawer, isi sedikit atau
	   banyak sama saja — karena sekarang footer beneran sibling flex dari
	   daftar item, bukan pengaturan yang bergantung pada scroll terjadi. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 20px 20px 0;
}

.tk-cart-drawer__empty {
	text-align: center;
	padding: 40px 0;
	color: rgba(0, 0, 0, 0.55);
}

.tk-cart-drawer__shop-link {
	display: inline-block;
	margin-top: 12px;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	color: #000000;
}

/* ---------- Daftar item ---------- */

.tk-cart-drawer__items {
	flex: 1 1 auto;
	min-height: 0; /* Tanpa ini, flex item defaultnya tidak mau menyusut di bawah tinggi kontennya sendiri — overflow-y:auto di bawah tidak akan pernah kepakai kalau daftarnya panjang. */
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tk-cart-drawer__item {
	display: grid;
	grid-template-columns: 60px 1fr 24px;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tk-cart-drawer__item:first-child {
	padding-top: 0;
}

.tk-cart-drawer__item-image {
	width: 60px;
	height: 84px; /* Rasio 5:7, sama seperti foto produk di tempat lain. */
	object-fit: cover;
}

.tk-cart-drawer__item-name {
	margin: 0 0 6px;
}

.tk-cart-drawer__item-price {
	margin: 0 0 10px;
	color: rgba(0, 0, 0, 0.55);
}

.tk-cart-drawer__qty {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	padding: 4px 10px;
	width: fit-content;
}

.tk-cart-drawer__qty-btn {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.tk-cart-drawer__qty-btn:hover:not(:disabled) {
	background: none;
	opacity: 0.6;
}

.tk-cart-drawer__qty-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.tk-cart-drawer__qty-value {
	min-width: 1em;
	text-align: center;
}

.tk-cart-drawer__remove {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: rgba(0, 0, 0, 0.55);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.tk-cart-drawer__remove:hover {
	background: none;
	color: #000000;
}

/* Sedang memproses (AJAX jalan) — cegah klik dobel + kasih isyarat visual. */
.tk-cart-drawer__body.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Footer: subtotal + checkout ----------
   .tk-cart-drawer__items dan .tk-cart-drawer__footer adalah DUA elemen
   sibling di dalam HTML yang sama dari render_drawer_contents() — sama-
   sama anak langsung dari .tk-cart-drawer__body. Sekarang body itu flex
   column (lihat komentar di sana): daftar item flex:1 1 auto (mengisi &
   scroll sendiri), footer flex:0 0 auto — jadi footer SELALU terdorong
   mepet ke dasar drawer, baik isi keranjang 1 barang maupun banyak. */
.tk-cart-drawer__footer {
	flex: 0 0 auto;
	background: #ffffff;
	padding: 16px 20px 20px;
	margin-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.tk-cart-drawer__note {
	margin: 0 0 12px;
	color: rgba(0, 0, 0, 0.55);
}

/* Notice preorder (22 Sep 2026) — SENGAJA lebih menonjol dari
   `.tk-cart-drawer__note` di atas (yang cuma abu-abu redup): ini informasi
   yang mempengaruhi kapan pesanan sampai, bukan catatan kaki. Dibedakan
   lewat kotak berlatar + garis kiri, bukan warna teks merah/oranye —
   ini bukan error, cuma pemberitahuan. */
.tk-cart-drawer__preorder-notice {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #f5f5f5;
	border-left: 2px solid #000000;
	color: #000000;
	line-height: 1.5;
}

.tk-cart-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-weight: 600;
}

.tk-cart-drawer__checkout {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	background: #000000;
	border: 1px solid #000000;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.tk-cart-drawer__checkout:hover {
	opacity: 0.82;
	color: #ffffff;
}

.tk-cart-drawer__view-cart {
	display: block;
	text-align: center;
	margin-top: 12px;
	color: rgba(0, 0, 0, 0.55);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Body halaman dikunci scroll-nya saat drawer terbuka — class ditambahkan
   lewat JS ke <html>, bukan <body>, supaya scrollbar gutter tetap
   konsisten di semua browser. */
html.tk-cart-drawer-open {
	overflow: hidden;
}

/* Label "Preorder" di item keranjang (drawer, halaman Cart, ringkasan Checkout) — 25 Sep 2026. */
.tk-preorder-label {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
}