/* ==========================================================================
   Fase 7 — Cart, Checkout, My account (body.tf-woo)
   HANYA tampilan. Template & fungsi tetap milik WooCommerce, supaya
   pembayaran dan plugin ongkir (KiriminAja) tetap bekerja normal.
   Mendukung dua versi WooCommerce: blok (baru) dan shortcode (klasik).
   ========================================================================== */

.tf-woo .site-main {
    color: var(--ink);
    font-family: "Inter", var(--utility);
}
.tf-woo .site-main a {
    color: var(--ink);
}


/* ---------- 1. Tombol utama: hitam, bentuk pil (sama dengan "Add to cart" di reel) ---------- */
.tf-woo .wc-block-cart__submit-button,
.tf-woo .wc-block-components-checkout-place-order-button,
.tf-woo .wc-block-components-button:not(.is-link),
.tf-woo .woocommerce .button,
.tf-woo .woocommerce button.button,
.tf-woo .woocommerce a.button,
.tf-woo .woocommerce input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-family: "Inter", var(--utility);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.tf-woo .wc-block-cart__submit-button:hover,
.tf-woo .wc-block-components-button:not(.is-link):hover,
.tf-woo .woocommerce .button:hover {
    background: #333;
    color: #fff;
}
.tf-woo .wc-block-cart__submit-button:focus-visible,
.tf-woo .wc-block-components-button:not(.is-link):focus-visible,
.tf-woo .woocommerce .button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.tf-woo .wc-block-components-button:disabled,
.tf-woo .woocommerce .button:disabled {
    opacity: 0.6;
    cursor: default;
}
/* "Proceed to Checkout" & "Place Order" selebar kolomnya */
.tf-woo .wc-block-cart__submit-button,
.tf-woo .wc-block-components-checkout-place-order-button {
    width: 100%;
}


/* ---------- 2. Kolom isian (versi klasik; versi blok sudah rapi bawaan) ----------
   Ukuran teks 16px: di bawah itu iPhone otomatis memperbesar layar saat kolom diketuk. */
.tf-woo .woocommerce form .input-text,
.tf-woo .woocommerce form select {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background-color: #fff;
    font: inherit;
    font-size: 16px;
}
.tf-woo .woocommerce form textarea.input-text {
    min-height: 80px;
}
/* Panah dropdown sendiri (mis. District), sama di semua browser */
.tf-woo .woocommerce form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}
.tf-woo .woocommerce form .input-text:focus,
.tf-woo .woocommerce form select:focus {
    outline: 0;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.08);
}
/* Label: kecil & tebal; tanda * merah bata (sama dengan label 404) */
.tf-woo .woocommerce form .form-row {
    margin-bottom: 14px;
}
.tf-woo .woocommerce form .form-row label {
    margin-bottom: 6px;
    color: #3f3f46;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.tf-woo .woocommerce form .form-row label.checkbox {
    color: #71717a;
    font-size: 14px;
    font-weight: 400;
}
.tf-woo .woocommerce form .form-row .required {
    color: #c2412d;
    text-decoration: none;
}
.tf-woo .woocommerce input[type="checkbox"],
.tf-woo .woocommerce input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #000;
    vertical-align: -3px;
}


/* ---------- 3. Menu My account (saat login) ---------- */
.tf-woo .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.tf-woo .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 8px 14px;
    border: 1px solid rgba(16, 16, 20, 0.15);
    border-radius: 999px;
    text-decoration: none;
}
.tf-woo .woocommerce-MyAccount-navigation .is-active a {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}


/* ---------- 4. Logo metode pembayaran (mis. DOKU) ----------
   WooCommerce tidak membatasi ukuran logo pembayaran (dulu dibatasi oleh
   theme Storefront), sehingga logo bisa tampil sebesar file aslinya. */
.tf-woo #payment .payment_methods li img,
.tf-woo #payment .payment_methods label img,
.tf-woo .wc-block-components-radio-control__label img,
.tf-woo .wc-block-components-payment-method-icons img {
    display: inline-block;
    width: auto;
    max-width: 120px;
    height: auto;
    max-height: 28px;
    margin: 0 0 0 8px;
    vertical-align: middle;
    object-fit: contain;
}
/* Gambar di dalam keterangan metode pembayaran juga tidak boleh melebar */
.tf-woo #payment .payment_box img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}

/* ---------- 5. Checkout gaya "struk" (Opsi C) ----------
   HANYA tampilan: HTML, nama kolom, ongkir KiriminAja & pembayaran DOKU tidak berubah.
   Semua aturan dibatasi ke bagian checkout, jadi tabel di Cart & My account tidak terpengaruh. */

/* 5a. "Have a coupon?": garis biru & ikon bawaan diganti bingkai putus-putus + ikon label harga */
.tf-woo .woocommerce-form-coupon-toggle .woocommerce-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 13px 16px;
    border: 1.5px dashed #d6d3d1;
    border-radius: 14px;
    background: #fff;
    color: #71717a;
    font-size: 14px;
}
.tf-woo .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: "";
    position: static;
    flex: none;
    width: 18px;
    height: 18px;
    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tf-woo .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

/* 5b. Judul bagian */
.tf-woo .woocommerce-checkout h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
}
.tf-woo #ship-to-different-address {
    font-size: 15px;
    font-weight: 600;
}
.tf-woo #order_review_heading {
    margin-top: 26px;
}

/* 5c. Kolom wajib (mis. District) tidak langsung merah di panel checkout.
   Merah baru muncul setelah pembeli menekan "Place order" (class tf-tried dari embed.js).
   Urutan penting: aturan merah dulu, lalu aturan netral untuk panel yang belum dicoba. */
.tf-woo form.checkout .form-row.woocommerce-invalid label {
    color: #c2412d;
}
.tf-woo form.checkout .form-row.woocommerce-invalid .input-text,
.tf-woo form.checkout .form-row.woocommerce-invalid select {
    border-color: #c2412d;
}
.tf-embed form.checkout:not(.tf-tried) .form-row.woocommerce-invalid label {
    color: #3f3f46;
}
.tf-embed form.checkout:not(.tf-tried) .form-row.woocommerce-invalid .input-text,
.tf-embed form.checkout:not(.tf-tried) .form-row.woocommerce-invalid select {
    border-color: #e4e4e7;
}
.tf-woo form.checkout .form-row.woocommerce-invalid .input-text:focus,
.tf-woo form.checkout .form-row.woocommerce-invalid select:focus {
    border-color: var(--ink);
}

/* 5d. Ringkasan pesanan seperti struk: tepi bergerigi, garis putus-putus, tanpa garis tabel.
   Tabel dijadikan baris fleksibel (nama kiri, harga kanan) agar nama produk tidak terpotong. */
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table {
    display: block;
    width: 100%;
    margin: 0 0 22px;
    padding: 22px 18px 18px;
    border: 0;
    border-radius: 0;
    background: #f7f6f4;
    -webkit-mask:
        radial-gradient(circle 6px at 50% 0, transparent 98%, #000) -2px 0 / 16px 51% repeat-x,
        radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) -2px 100% / 16px 51% repeat-x;
            mask:
        radial-gradient(circle 6px at 50% 0, transparent 98%, #000) -2px 0 / 16px 51% repeat-x,
        radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) -2px 100% / 16px 51% repeat-x;
}
.tf-woo .woocommerce-checkout-review-order-table thead {
    display: none;                     /* "Product / Subtotal" tidak perlu di struk */
}
.tf-woo .woocommerce-checkout-review-order-table tbody,
.tf-woo .woocommerce-checkout-review-order-table tfoot {
    display: block;
}
.tf-woo .woocommerce-checkout-review-order-table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table th,
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table td {
    padding: 8px 0;
    border: 0;
    background: none;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table td.product-total,
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    white-space: nowrap;
}
.tf-woo .woocommerce-checkout-review-order-table .product-quantity {
    color: #71717a;
    font-weight: 500;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
    color: #71717a;
    font-weight: 500;
}
.tf-woo .woocommerce-checkout-review-order-table tfoot,
.tf-woo .woocommerce-checkout-review-order-table tr.order-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1.5px dashed #d6d3d1;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table .order-total th,
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table .order-total td {
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
}

/* 5e. Pilihan kurir (muncul setelah District dipilih): kartu yang bisa diklik */
.tf-woo .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
    padding-top: 0;
    text-align: left;
    white-space: normal;
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid #e7e5e4;
    border-radius: 12px;
    background: #fff;
    text-indent: 0;
    font-size: 14px;
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method li:has(input:checked) {
    border-color: var(--ink);          /* kurir terpilih */
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method li input {
    flex: none;
    margin: 0;
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method li label {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}
.tf-woo .woocommerce-checkout-review-order-table ul#shipping_method li label::after {
    content: "";
    position: absolute;
    inset: 0;                          /* seluruh kartu bisa diklik */
}

/* 5f. Pembayaran (DOKU): kotak abu-ungu & segitiga bawaan diganti kartu sederhana */
.tf-woo #payment {
    border-radius: 0;
    background: none;
}
.tf-woo #payment ul.payment_methods {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.tf-woo #payment ul.payment_methods li {
    padding: 14px 16px;
    border: 1.5px solid var(--ink);
    border-radius: 14px;
    background: #fff;
}
.tf-woo #payment ul.payment_methods li > label {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: calc(100% - 30px);          /* sisakan tempat untuk tombol pilihan jika metode > 1 */
    margin: 0;
    font-weight: 600;
}
.tf-woo #payment ul.payment_methods li:only-child > label {
    width: 100%;                       /* hanya DOKU: tombol pilihan disembunyikan WooCommerce */
}
.tf-woo #payment div.payment_box {
    margin: 6px 0 0;
    padding: 0;
    background: none;
    color: #71717a;
    font-size: 14px;
}
.tf-woo #payment div.payment_box::before {
    display: none;
}
.tf-woo #payment div.form-row {
    padding: 0;
}
.tf-woo .woocommerce-privacy-policy-text p {
    color: #71717a;
    font-size: 12px;
    line-height: 1.5;
}
.tf-woo #place_order {
    float: none;
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    font-size: 16px;
}

/* 5g. Pilihan kurir KiriminAja (dropdown <select>)
   Tanpa JavaScript: dropdown asli tampil selebar penuh (gaya kolom bagian 2).
   Di panel checkout, embed.js membuat kotak + daftar kurir, dan dropdown asli disembunyikan. */
.tf-woo .woocommerce-shipping-totals td select,
.tf-woo .woocommerce-shipping-totals td .select2-container {
    width: 100% !important;            /* select2 KiriminAja menulis lebar sendiri */
    max-width: none;
}
.tf-woo .woocommerce-shipping-totals td.tf-ship-ready select,
.tf-woo .woocommerce-shipping-totals td.tf-ship-ready .select2-container {
    display: none !important;          /* tetap dipakai WooCommerce, hanya tidak terlihat */
}
.tf-ship {
    position: relative;
}
.tf-ship__current,
.tf-ship__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    border: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}
.tf-ship__current .tf-ship__name {
    font-weight: 600;
}
.tf-ship__current {
    min-height: 52px;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: 12px;
}
.tf-ship__current .tf-ship__check {
    display: none;                     /* tanda ✓ hanya di daftar */
}
.tf-ship__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-ship__price {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}
.tf-ship__tag {
    flex: none;
    padding: 2px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 600;
}
.tf-ship__chev {
    flex: none;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}
.tf-ship.is-open .tf-ship__chev {
    transform: rotate(180deg);
}
.tf-ship__list {
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    background: #fff;
}
.tf-ship__list[hidden] {
    display: none;
}
.tf-ship__item {
    min-height: 46px;
    padding: 0 14px;
    border-top: 1px solid #f1f1f1;
    border-radius: 0;
}
.tf-ship__item:first-child {
    border-top: 0;
}
.tf-ship__item:hover,
.tf-ship__item:focus-visible {
    background: #fafaf9;
    outline: 0;
}
.tf-ship__item[aria-selected="true"] {
    background: #f5f5f4;
    font-weight: 600;
}
.tf-ship__check {
    flex: none;
    width: 16px;
    height: 16px;
}
.tf-ship__item[aria-selected="true"] .tf-ship__check {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101014' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tf-ship__current:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Total sedang dihitung ulang (embed.js menambah class ini setelah kurir dipilih) */
.tf-woo .order-total td.tf-total-loading .amount {
    opacity: 0.35;
}
.tf-woo .order-total td.tf-total-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #d4d4d8;
    border-top-color: var(--ink);
    border-radius: 50%;
    vertical-align: -2px;
    animation: tf-ship-spin 0.7s linear infinite;
}
@keyframes tf-ship-spin {
    to { transform: rotate(360deg); }
}

/* 5h. Ringkasan pesanan: foto produk gaya Sellfy
   Isi nama dibuat functions.php bagian 18 (teesful_checkout_item_name):
   [foto] Nama ×jumlah / ukuran. Jumlah & ukuran bawaan WooCommerce disembunyikan. */
.tf-woo .woocommerce-checkout-review-order-table tr.cart_item {
    align-items: center;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table td.product-name {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    font-size: 0;                     /* spasi bawaan template tidak mengambil tempat */
    line-height: 0;
}
.tf-woo .woocommerce-checkout-review-order-table td.product-name > .product-quantity,
.tf-woo .woocommerce-checkout-review-order-table td.product-name > dl.variation {
    display: none;
}
.tf-co-thumb {
    grid-row: 1 / span 2;
    width: 40px;
    height: 54px;
    overflow: hidden;
    border-radius: 6px;
    background: #ebe9e4;
}
.tf-co-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tf-co-title {
    align-self: end;
    color: #3f3f46;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.tf-co-qty {
    color: #a1a1aa;
    font-size: 13px;
    font-weight: 400;
}
.tf-co-variant {
    align-self: start;
    color: #a1a1aa;
    font-size: 14px;
    line-height: 1.35;
}
/* Produk tanpa ukuran: nama di tengah foto */
.tf-woo .woocommerce-checkout-review-order-table td.product-name:not(:has(.tf-co-variant)) .tf-co-title {
    grid-row: 1 / span 2;
    align-self: center;
}

/* 5i. Estimasi pengiriman di kotak kurir (data: functions.php bagian 19) */
.tf-woo .woocommerce-checkout-review-order-table tr.tf-ship-eta-data {
    display: none !important;         /* hanya wadah data untuk embed.js */
}
.tf-ship__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.tf-ship__line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.tf-ship__eta {
    margin-top: 1px;
    color: #a1a1aa;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
}
.tf-ship__item {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ---------- 6. Checkout gaya Threadless (functions.php bagian 24) ----------
   Contact → Delivery → Additional information → Order summary → Discount code →
   kotak Subtotal/Shipment/Total → Payment. Label di DALAM kotak kolom. */

/* 6a. Judul bagian */
.tf-woo .woocommerce-billing-fields > h3 {
    display: none;                     /* "Billing details" diganti Contact & Delivery */
}
.tf-woo .woocommerce-checkout .tf-co-heading,
.tf-woo .woocommerce-checkout #order_review_heading,
.tf-woo .woocommerce-checkout .woocommerce-additional-fields > h3:not(.kiriof-classic-insurance-field) {
    clear: both;
    margin: 26px 0 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tf-woo .woocommerce-checkout .tf-co-heading--first {
    margin-top: 4px;
}

/* 6b. Disembunyikan: negara (selalu Indonesia, tetap terkirim), "Ship to a different address?" */
.tf-woo #billing_country_field:has(.country_to_state--single),
.tf-woo #shipping_country_field:has(.country_to_state--single),
.tf-woo #billing_country_field:has(input[type="hidden"].country_to_state),
.tf-woo #shipping_country_field:has(input[type="hidden"].country_to_state),
.tf-woo .woocommerce-shipping-fields {
    display: none;
}

/* 6c. Label di dalam kotak. Kosong: label tampil seperti placeholder.
       Diisi / sedang diketik: label mengecil di bagian atas kotak. */
.tf-woo form.checkout .form-row {
    position: relative;
    margin-bottom: 10px;
}
.tf-woo form.checkout .form-row .required {
    display: none;                     /* tanpa tanda * */
}
.tf-woo form.checkout .form-row > label:not(.checkbox):not(.screen-reader-text) {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 15px;
    right: 15px;
    margin: 0;
    overflow: hidden;
    color: #8a8a93;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, transform 0.15s ease;
}
.tf-woo form.checkout .form-row .input-text {
    min-height: 54px;
    padding: 24px 14px 7px;
    border-color: #d9d9de;
    font-size: 16px;
}
.tf-woo form.checkout .form-row textarea.input-text {
    min-height: 92px;
    padding-top: 26px;
}
.tf-woo form.checkout .form-row .input-text::placeholder {
    color: transparent;                /* label di dalam kotak yang berfungsi sebagai placeholder */
}
.tf-woo form.checkout .form-row:has(.input-text:placeholder-shown:not(:focus)) > label:not(.checkbox):not(.screen-reader-text) {
    top: 27px;
    font-size: 16px;
    transform: translateY(-50%);
}
.tf-woo form.checkout .form-row:has(textarea.input-text:placeholder-shown:not(:focus)) > label:not(.checkbox):not(.screen-reader-text) {
    top: 16px;
    transform: none;
}
.tf-woo form.checkout .form-row .optional {
    color: inherit;
}

/* Dropdown (District select2 & select biasa): label kecil di atas, isi di bawahnya */
.tf-woo form.checkout .form-row select,
.tf-woo form.checkout .form-row .select2-container .select2-selection--single {
    height: 54px;
    min-height: 54px;
    border: 1px solid #d9d9de;
    border-radius: 12px;
    background-color: #fff;
}
.tf-woo form.checkout .form-row select {
    padding-top: 20px;
}
.tf-woo form.checkout .form-row .select2-container .select2-selection--single {
    display: flex;
    align-items: flex-end;
    padding-bottom: 7px;
}
.tf-woo form.checkout .form-row .select2-container .select2-selection__rendered {
    flex: 1;
    padding: 0 40px 0 14px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
}
.tf-woo form.checkout .form-row .select2-container .select2-selection__arrow {
    top: 0;
    right: 12px;
    width: 18px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.tf-woo form.checkout .form-row .select2-container .select2-selection__arrow b {
    display: none;
}
/* District belum dipilih: label tampil besar seperti placeholder, teks "Select Option" disembunyikan */
.tf-woo form.checkout .form-row:has(.select2-selection__placeholder) > label:not(.checkbox) {
    top: 27px;
    font-size: 16px;
    transform: translateY(-50%);
}
.tf-woo form.checkout .form-row .select2-selection__placeholder {
    visibility: hidden;
}
/* Fokus */
.tf-woo form.checkout .form-row .select2-container--focus .select2-selection,
.tf-woo form.checkout .form-row .select2-container--open .select2-selection {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.08);
}
/* Kolom kosong belum diisi saat Place order ditekan → garis merah (lihat juga 5c) */
.tf-embed form.checkout:not(.tf-tried) .form-row.woocommerce-invalid .select2-container .select2-selection {
    border-color: #d9d9de;
}
.tf-woo form.checkout.tf-tried .form-row.woocommerce-invalid .select2-container .select2-selection,
.tf-woo:not(.tf-embed) form.checkout .form-row.woocommerce-invalid .select2-container .select2-selection {
    border-color: #c2412d;
}

/* 6d. Kotak centang: newsletter & asuransi pengiriman (KiriminAja) seragam */
.tf-woo form.checkout label.checkbox,
.tf-woo form.checkout #kiriof-classic-insurance-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
    color: #3f3f46;
    font-size: 14px;
    font-weight: 400;
}
.tf-woo form.checkout #kiriof-classic-insurance-field label.checkbox {
    margin: 0;
}

/* 6e. Order summary: daftar produk polos (tanpa struk), lalu kolom kupon, lalu kotak total */
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table {
    padding: 0;
    background: none;
    -webkit-mask: none;
            mask: none;
}
.tf-woo .woocommerce-checkout-review-order-table tr.tf-co-coupon {
    display: block;
    padding: 12px 0 2px;
}
.tf-woo .woocommerce table.woocommerce-checkout-review-order-table tr.tf-co-coupon td {
    display: block;
    width: 100%;
    padding: 0;
}
.tf-co-coupon__row {
    display: flex;
    gap: 8px;
}
.tf-woo form.checkout .tf-co-coupon__field {
    flex: 1;
    margin: 0;
}
.tf-co-coupon__apply {
    flex: none;
    height: 54px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #f1f1f1;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.tf-co-coupon__apply:disabled {
    opacity: 0.5;
}
.tf-co-coupon__msg:empty {
    display: none;
}
.tf-co-coupon__msg {
    margin-top: 8px;
    font-size: 13px;
}
.tf-co-coupon__msg ul,
.tf-co-coupon__msg .woocommerce-error,
.tf-co-coupon__msg .woocommerce-message,
.tf-co-coupon__msg .woocommerce-info {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
    font-size: 13px;
}
.tf-co-coupon__msg .woocommerce-error,
.tf-co-coupon__msg .woocommerce-error li {
    color: #c2412d;
}
.tf-co-coupon__msg .woocommerce-message {
    color: #15803d;
}
.tf-co-coupon__msg .woocommerce-error::before,
.tf-co-coupon__msg .woocommerce-message::before {
    display: none;
}

/* Kotak tersendiri: Subtotal → (kupon) → Shipment → Total */
.tf-woo .woocommerce-checkout-review-order-table tfoot {
    margin-top: 14px;
    padding: 6px 16px 8px;
    border-top: 0;
    border-radius: 14px;
    background: #f7f6f4;
}
.tf-woo .woocommerce-checkout-review-order-table tr.order-total {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #e7e5e4;
}
.tf-woo .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    border-top: 1px solid #e7e5e4;
    padding-top: 4px;
}
.tf-woo .woocommerce-checkout-review-order-table tr.cart-discount td a {
    margin-left: 6px;
    color: #71717a;
    font-size: 12px;
}
/* Petunjuk di baris Shipment sebelum District dipilih (embed.js bagian 4b) */
.tf-ship-hint {
    display: block;
    padding: 12px;
    border: 1px solid #ecebe8;
    border-radius: 10px;
    background: #fff;
    color: #8a8a93;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.tf-woo form.checkout .tf-co-coupon__field .input-text {
    height: 54px;
}