/**
 * Modal "Choose your region".
 *
 * Referensi struktur: arusthebrand.com (WooCommerce + WCML). Tipografi &
 * warna TETAP aturan Takkan (14px, monokrom) — bukan meniru gaya visual
 * mereka, cuma pola "judul + daftar tombol region + deskripsi mata uang".
 *
 * SELALU overlay gelap (--tk-overlay-*), tidak ikut kanvas halaman
 * terang/gelap — sama seperti overlay menu HP Home (lihat home.css) —
 * karena modal ini bisa muncul di halaman terang (Shop) maupun gelap (Home).
 * Beda dengan cart drawer yang SELALU terang (dia panel isi belanja, bukan
 * overlay pilihan) — dua keputusan warna yang berbeda, sengaja, bukan
 * inkonsistensi.
 */

.tk-region-picker-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tk-duration) var(--tk-ease);
	z-index: 1100; /* Di atas cart drawer (1000/1001) — kalau kebetulan dua-duanya kebuka, region picker menang. */
}

.tk-region-picker-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ⚠️ DIUBAH 8 Sep 2026 — dulu modal MUNCUL DI TENGAH layar (fade lewat
   opacity, dibatasi max-width 420px, ada border sekeliling). Permintaan
   user: "kalo di klik keluar pilihannya slide in dari panel kanan".
   Sekarang polanya SAMA PERSIS dengan cart drawer (lihat cart-drawer.css)
   — geser dari kanan lewat `transform`, lebar tetap 420px di desktop,
   penuh layar di HP. Dipakai ulang pola yang sudah ada & terbukti, bukan
   pola baru — konsisten dengan overlay menu (geser kiri) & cart drawer
   (geser kanan) yang sudah lebih dulu dirombak jadi drawer. */
.tk-region-picker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100vw;
	z-index: 1101;
	background: var(--tk-overlay);
	color: var(--tk-overlay-fg);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	pointer-events: none;
	transition: transform var(--tk-duration) var(--tk-ease);
}

.tk-region-picker.is-open {
	transform: translateX(0);
	pointer-events: auto;
	/* Bayangan hanya saat terbuka (lihat catatan di cart-drawer.css). */
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.24);
}

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

/* Dulu "kartu" terpisah (max-width 420px, border sendiri) yang duduk DI
   TENGAH `.tk-region-picker`. Sekarang `.tk-region-picker` ITU SENDIRI
   sudah jadi drawer-nya (lihat di atas), jadi panel ini cukup mengalir
   penuh mengisi drawer — tidak perlu kotak/batas sendiri lagi. */
.tk-region-picker__panel {
	width: 100%;
}

.tk-region-picker__header {
	position: sticky;
	top: 0;
	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 di balik drawer (revisi user
	   9 Okt 2026; dulu 69px). Drawer ini `position: fixed; top: 0`. */
	box-sizing: border-box;
	height: 61px;
	padding: 0 20px;
	background: var(--tk-overlay); /* Sama seperti panel — supaya daftar region yang scroll di baliknya tidak tembus pas header nempel di atas. */
	border-bottom: 1px solid var(--tk-overlay-line);
}

.tk-region-picker__title {
	margin: 0;
}

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

.tk-region-picker__close:hover {
	background: none; /* Menimpa button:hover generik GeneratePress — kuirk yang sama seperti tombol tutup cart drawer/menu Home. */
	opacity: 0.7;
}

.tk-region-picker__list {
	display: flex;
	flex-direction: column;
}

.tk-region-picker__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--tk-overlay-line);
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.tk-region-picker__item:last-child {
	border-bottom: none;
}

.tk-region-picker__item:hover,
.tk-region-picker__item.is-active {
	background: rgba(255, 255, 255, 0.08);
}

.tk-region-picker__desc {
	color: var(--tk-overlay-fg-muted);
}

/* ---------- Trigger di Home page (topbar & overlay menu HP) ----------
   Elemen sendiri di page-home.php, dengan token overlay yang sama seperti
   tombol Cart/Menu di sebelahnya. */
.tk-home-topbar__region,
.tk-home-menu__region {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.tk-home-topbar__region:hover,
.tk-home-menu__region:hover {
	background: none;
	opacity: 0.7;
}

/* ⚠️ DIPISAH dari rule `:hover` di atas 8 Sep 2026 — revisi user: "ilangin
   focus state di navbar deh". Sama persis kuirk yang sudah berkali-kali
   ditemukan di proyek ini (trigger Collections 4 Sep, trigger Shoes 8 Sep
   pagi, tombol Menu/Search/Wishlist/Cart 8 Sep sore): `:focus` MENEMPEL
   di perangkat sentuh sampai pengunjung menyentuh elemen lain, jadi kalau
   `opacity: 0.7` ikut kepicu oleh `:focus`, trigger mata uang jadi redup
   TERUS-MENERUS begitu disentuh — bukan cuma sekilas seperti umpan balik
   hover mouse. `background: none` TETAP dipertahankan (masih perlu untuk
   kuirk kotak abu-abu GeneratePress) — HANYA `opacity`-nya yang dicabut. */
.tk-home-topbar__region:focus,
.tk-home-menu__region:focus {
	background: none;
}

/* Baris "USD" di overlay menu HP: label kiri, chevron kanan — layout
   baris yang SAMA dengan trigger "Shoes" (`.tk-home-menu__collections`),
   permintaan user 8 Sep 2026. `width: 100%` wajib: tombol ini anak
   LANGSUNG `.tk-home-menu__footer`, yang punya `align-items: flex-start`
   (flex column) — tanpa width eksplisit dia cuma selebar tulisan "USD",
   chevron akan nempel di sebelahnya, bukan di ujung kanan panel. */
.tk-home-menu__region {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Ikon chevron KANAN di tombol "USD" — beda dari chevron BAWAH accordion
   "Shoes" (menandakan "buka panel baru", bukan "mengembang di tempat").
   Ukurannya disamakan (16px) supaya kedua jenis chevron terlihat satu
   keluarga, bukan dua ukuran ikon berbeda dalam satu daftar. */
.tk-home-menu__region .tk-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-left: 8px;
}