/* Daftar Kupon Publik halaman Cart -- 2026-08-01, layout diadaptasi 2026-08-23. Lihat
   penjelasan lengkap di komentar atas assets/kupon-publik-cart.js.
   REVISI 2026-08-23 (cart-renderer.php): SELURUH mekanisme layout-2-kolom-lewat-JS di file
   ini (wrapper flex `.kj-block-components-sidebar-layout-cart`, `position:static !important`
   buat ngelawan blockUI, `.zsd-kupon-area` position:absolute+lebar manual, animasi
   sembunyikan-lalu-tampilkan `.coupon` biar nggak "kelihatan melompat") DIHAPUS TOTAL --
   semua itu cuma perlu karena dulu `.coupon` "dipindah" secara visual (bukan di DOM) supaya
   kelihatan sejajar `.cart_totals` tanpa keluar dari <form>. Sekarang `.zsd-kupon-area` sudah
   anak langsung <form> DI POSISI AKHIRNYA sejak render pertama (cart-renderer.php), dan
   layout 2 kolomnya CSS Grid biasa (assets/cart-restyle.css BAGIAN 1/2) -- tidak ada lagi
   yang perlu "dipindah"/"disembunyikan-sampai-benar posisinya". File ini sekarang HANYA
   berisi styling fitur "Lihat kupon tersedia" (tombol+panel+kartu kupon) yang genuinely
   independen dari perubahan layout ini, ditambah 1 pelunakan overlay blockUI bawaan
   WooCommerce yang masih relevan. */

/**
 * Overlay "processing" bawaan WooCommerce (plugin jQuery blockUI, otomatis dipasang
 * WooCommerce CORE ke `form.woocommerce-cart-form` & `.cart_totals` tiap ada proses AJAX
 * cart) defaultnya opacity ~0.6 + latar putih, kesannya "seluruh halaman mati/disable".
 * Dibikin jauh lebih transparan di sini (bukan dihilangkan 100% -- tetap kasih sinyal halus
 * kalau proses lagi berjalan). Di-scope ke `.zsd-cart-layout` (wrapper terluar milik
 * cart-renderer.php sendiri) supaya cuma berlaku di halaman Cart.
 */
.zsd-cart-layout .blockUI.blockOverlay {
	opacity: 0.05 !important;
}

/* --- Tombol "Lihat kupon tersedia" + panel daftar kupon ---
   Panel-nya sengaja jadi dropdown yang OVERLAY (position:absolute), BUKAN yang mendorong
   konten di bawahnya turun -- soalnya di bawahnya itu Cart totals (elemen asli WooCommerce
   yang nggak kita gerakkan), jadi kalau panelnya "mendorong" malah bisa keliatan aneh
   (Cart totals ikut kegeser tiap panel dibuka/tutup). Gaya dropdown-overlay ini juga
   paling mirip referensi Tokopedia yang diminta Ferdian.

   KOREKSI VISUAL 2026-08-23 (correction prompt Ferdian): SEBELUMNYA tombol boks penuh
   (full-width, outline hijau #0F6E56) -- reference eksplisit minta ini jadi LINK TEKS
   biasa warna coklat hangat, BUKAN tombol, BUKAN hijau, BUKAN full-width. Anchor posisinya
   (`.zsd-kupon-box-kanan { position: relative }`, lihat assets/cart-restyle.css BAGIAN 2)
   juga sudah dipindah supaya link+panel ini nempel pas di bawah kolom input/Terapkan,
   bukan lagi di bawah seluruh kotak kupon. */
/* KOREKSI 2026-08-23 (2): warna diganti ke #6B552E -- nilai eksplisit "suggested color"
   dari reference terbaru (sebelumnya var(--zsd-jr-coklat), #6b5744 -- beda tipis, tapi
   dituliskan literal di sini sesuai permintaan, bukan lewat token bersama). */
.zsd-kupon-tombol-buka {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: auto;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: #6B552E;
	border-radius: 0;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
}

.zsd-kupon-tombol-buka:hover {
	background: none;
	text-decoration: underline;
}

.zsd-kupon-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	z-index: 20;
	text-align: left; /* reset -- parent `.zsd-kupon-box-kanan` sekarang text-align:right (lihat cart-restyle.css, buat nge-align tombol "Lihat kupon tersedia"), tapi ISI panel ini (kode/deskripsi kupon) tetap harus rata kiri seperti biasa */
	/* Ferdian minta: kalau kuponnya banyak, JANGAN pagination -- cukup scroll, tapi kartu
	   berikutnya keliatan "kepotong sedikit" di tepi bawah biar customer sadar ada lebih
	   banyak lagi (mirip Tokopedia). Caranya: batasi tingginya kira-kira muat 3 kartu penuh
	   (kartu tanpa alasan ~64px), sisanya scroll -- kalau kuponnya cuma 1-3, tinggi panel
	   otomatis menyesuaikan isi (max-height cuma jadi batas ATAS, bukan tinggi tetap), jadi
	   nggak ada ruang kosong yang kebuang. */
	max-height: 232px;
	overflow-y: auto;
	/* Bayangan halus di tepi atas/bawah, cuma muncul kalau memang masih ada konten yang
	   ketutup di arah itu -- trik CSS murni (background-attachment: local vs scroll),
	   nggak butuh JS buat ngukur ulang tiap kali daftar kuponnya berubah. */
	background-image:
		linear-gradient(#fff 30%, rgba(255, 255, 255, 0)),
		linear-gradient(rgba(255, 255, 255, 0), #fff 70%),
		linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
		linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
	background-position: top, bottom, top, bottom;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
	background-attachment: local, local, scroll, scroll;
}

.zsd-kupon-loading,
.zsd-kupon-kosong {
	padding: 12px;
	font-size: 13px;
	color: #777;
	text-align: center;
}

.zsd-kupon-kartu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: #fafafa;
	border: 1px dashed var(--zsd-jr-coklat-muda, #a9927a); /* koreksi 2026-08-23: sebelumnya hijau #0F6E56, "No green colors anywhere in Cart" */
	border-radius: 6px;
}

.zsd-kupon-kartu:last-child {
	margin-bottom: 0;
}

.zsd-kupon-kartu-nonaktif {
	border-style: solid;
	border-color: #e0e0e0;
	opacity: 0.6;
}

.zsd-kupon-info {
	min-width: 0;
}

.zsd-kupon-kode {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.3px;
}

.zsd-kupon-deskripsi {
	font-size: 12.5px;
	color: #555;
	margin-top: 2px;
}

.zsd-kupon-alasan {
	font-size: 12px;
	color: #b45309;
	margin-top: 3px;
}

.zsd-kupon-tombol-pakai {
	flex-shrink: 0;
	padding: 6px 12px;
	background: var(--zsd-jr-coklat, #6b5744); /* koreksi 2026-08-23: sebelumnya hijau #0F6E56 -- ini aksi SEKUNDER (bukan Terapkan/Checkout), jadi coklat, bukan charcoal gelap */
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.zsd-kupon-tombol-pakai:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* Di layar sempit, panel dropdown-overlay bisa nutupin bagian atas Order Summary yang
   ditumpuk tepat di bawahnya (lihat cart-restyle.css BAGIAN 1, kolom sidebar stacking di
   bawah kolom utama pada breakpoint yang sama) -- di mode ini panel didorong jadi bagian
   alur normal (position:static) alih-alih mengambang, konsisten dengan breakpoint stacking
   layout 2 kolom di cart-restyle.css. */
@media (max-width: 900px) {
	.zsd-kupon-panel {
		position: static !important;
		box-shadow: none !important;
		margin-top: 8px;
	}
}