/**
 * Dropdown Takkan (pengganti popup native <select>) — lihat assets/js/dropdown.js.
 * Dimuat di Checkout dan Contact Us. Kotak = ukuran field lain (52px, sudut tajam,
 * label mengambang di dalam kotak dikelola CSS halaman masing-masing); daftar =
 * panel putih bergaris tipis tanpa bayangan/sudut membulat.
 *
 * ⚠️ `button:hover/focus` GeneratePress menimpa color + background semua <button>
 * → keduanya ditulis eksplisit di tiap state. Opsi memakai <div role="option">,
 * bukan <button>, supaya tidak kena aturan itu.
 */
.tk-dd {
	position: relative;
	display: block;
}

/* <select> asli: tetap ada (submit, validasi required) tapi tak terlihat/terklik. */
.tk-dd .tk-dd__native {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.tk-dd .tk-dd__trigger,
.tk-dd .tk-dd__trigger:hover,
.tk-dd .tk-dd__trigger:focus,
.tk-dd .tk-dd__trigger:active {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 22px 36px 6px 12px;
	border: 1px solid var(--tk-co-field, var(--cf-field, #d9d9d9));
	border-radius: 0;
	background: #ffffff;
	color: var(--tk-co-ink, var(--cf-ink, #1a1a1a));
	font: inherit;
	line-height: 22px;
	text-align: left;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.tk-dd .tk-dd__text {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Belum dipilih (placeholder tampil sebagai teks pucat). */
.tk-dd.tk-dd--empty .tk-dd__text {
	color: var(--tk-co-muted, var(--cf-muted, #707070));
}

/* Panah ▾ (sama dengan panah select lama); berputar saat terbuka. */
.tk-dd .tk-dd__trigger::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.15s;
}

.tk-dd.tk-dd--open .tk-dd__trigger::after {
	transform: rotate(180deg);
}

.tk-dd .tk-dd__trigger:focus,
.tk-dd.tk-dd--open .tk-dd__trigger {
	outline: none;
	border-color: var(--tk-co-ink, var(--cf-ink, #1a1a1a));
	box-shadow: 0 0 0 1px var(--tk-co-ink, var(--cf-ink, #1a1a1a));
}

.tk-dd .tk-dd__trigger:disabled,
.tk-dd .tk-dd__trigger:disabled:hover {
	background: var(--tk-co-soft, #f5f5f5);
	color: var(--tk-co-muted, #707070);
	cursor: not-allowed;
}

/* Mode "plain" (tanpa label mengambang): teks di tengah kotak, mis. Day / Month / Year. */
.tk-dd.tk-dd--plain .tk-dd__trigger,
.tk-dd.tk-dd--plain .tk-dd__trigger:hover,
.tk-dd.tk-dd--plain .tk-dd__trigger:focus,
.tk-dd.tk-dd--plain .tk-dd__trigger:active {
	padding: 0 32px 0 12px;
	line-height: 50px;
}

/* Daftar pilihan. */
.tk-dd .tk-dd__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 264px;
	overflow-y: auto;
	border: 1px solid var(--tk-co-line, #dedede);
	border-radius: 0;
	background: #ffffff;
}

.tk-dd .tk-dd__panel[hidden] {
	display: none;
}

.tk-dd.tk-dd--up .tk-dd__panel {
	top: auto;
	bottom: calc(100% + 4px);
}

.tk-dd .tk-dd__option {
	padding: 0 12px;
	color: var(--tk-co-ink, #1a1a1a);
	font-size: 14px;
	line-height: 44px;
	cursor: pointer;
}

.tk-dd .tk-dd__option + .tk-dd__option {
	border-top: 1px solid var(--tk-co-line, #dedede);
}

.tk-dd .tk-dd__option.is-active {
	background: var(--tk-co-soft, #f5f5f5);
}

.tk-dd .tk-dd__option[aria-selected="true"] {
	font-weight: 600;
}

@media (hover: hover) {
	.tk-dd .tk-dd__option:hover {
		background: var(--tk-co-soft, #f5f5f5);
	}
}

/* Label mengambang di form kontak: kotak select sekarang tombol, bukan <select>. */
.tk-info-page .tk-contact-form .tk-cf-row--select:focus-within > label,
.tk-info-page .tk-contact-form .tk-cf-row--select.tk-filled > label {
	top: 7px;
	transform: none;
	font-size: 12px;
}

.tk-info-page .tk-contact-form .tk-cf-row.has-error .tk-dd__trigger {
	border-color: var(--cf-error);
}

/* ==========================================================================
   select2 (Country/Region, Province di Cart/Checkout/Akun) — daftar pilihan
   disamakan dengan panel dropdown Takkan di atas (revisi user 12 Okt 2026:
   semua dropdown tidak native, ikut gaya Takkan). Selector diawali `body` +
   rantai penuh supaya menang atas selectWoo (`.select2-container--default
   .select2-results__option--highlighted[aria-selected]` = biru #5897fb).
   Skin ini MENGGANTIKAN blok lama khusus Cart/Akun di cart-checkout.css &
   account.css (dihapus; jangan dibuat lagi per-halaman).
   ========================================================================== */
body .select2-dropdown {
	border: 1px solid var(--tk-co-line, #dedede);
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	color: var(--tk-co-ink, #1a1a1a);
	font-size: 14px;
}

body .select2-container--open .select2-dropdown--below {
	margin-top: 4px;
}

body .select2-container--open .select2-dropdown--above {
	margin-bottom: 4px;
}

body .select2-search--dropdown {
	padding: 8px;
}

body .select2-search--dropdown .select2-search__field {
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--tk-co-field, #d9d9d9);
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	color: var(--tk-co-ink, #1a1a1a);
	font: inherit;
}

body .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: var(--tk-co-ink, #1a1a1a);
	box-shadow: 0 0 0 1px var(--tk-co-ink, #1a1a1a);
}

body .select2-container--default .select2-results > .select2-results__options {
	max-height: 264px;
}

body .select2-container--default .select2-results__option {
	padding: 0 12px;
	border-top: 1px solid var(--tk-co-line, #dedede);
	color: var(--tk-co-ink, #1a1a1a);
	line-height: 44px;
}

body .select2-container--default .select2-results__option:first-child {
	border-top: 0;
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--tk-co-soft, #f5f5f5);
	color: var(--tk-co-ink, #1a1a1a);
}

body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option[data-selected="true"] {
	background: #ffffff;
	font-weight: 600;
}

body .select2-container--default .select2-results__option--highlighted[aria-selected="true"],
body .select2-container--default .select2-results__option--highlighted[data-selected="true"] {
	background: var(--tk-co-soft, #f5f5f5);
}

/* Teks placeholder select2 ("Select a country / region…") disembunyikan: label di dalam
   kotak sudah berfungsi sebagai placeholder, dua-duanya tampil = bertabrakan
   (revisi user 13 Okt 2026). */
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: transparent;
}

/* Placeholder transparan tetap menyisakan "…" bila teksnya terpotong (ellipsis memakai warna induk). */
body .select2-container--default .select2-selection--single .select2-selection__rendered:has(.select2-selection__placeholder) {
	text-overflow: clip;
}