/**
 * Checkout — Custom Styling
 *
 * Layout dua kolom: form (kiri) + ringkasan (kanan, bg abu).
 * SaaS modern, clean, konsisten dengan design system Lisanul Arab.
 *
 * @package Lisanularab
 * @since 1.0.0
 */

/* =====================================================
   LAYOUT
   ===================================================== */

.la-checkout {
    padding: var(--space-xl) 0 var(--space-3xl);
}

.la-checkout__heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

.la-checkout__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-xl);
    align-items: start;
}

/* Sembunyikan page title bawaan WP */
.woocommerce-checkout .la-page__title {
    display: none;
}

/* =====================================================
   KIRI — FORM
   ===================================================== */

.la-checkout__card {
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.la-checkout__section {
    margin-bottom: var(--space-lg);
}

.la-checkout__section:last-child {
    margin-bottom: 0;
}

.la-checkout__section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-md);
	margin-top: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-2);
}

/* Fields */
.la-checkout__field {
    margin-bottom: var(--space-md);
}

.la-checkout__field:last-child {
    margin-bottom: 0;
}

.la-checkout__label {
    display: block;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.la-checkout__label abbr {
    color: var(--color-danger);
    text-decoration: none;
}

.la-checkout__input {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-eyebrow);
    font-family: var(--font-regular);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.la-checkout__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}

.la-checkout__input::placeholder {
    color: var(--color-text-tertiary);
}

/* =====================================================
   METODE PEMBAYARAN — Custom Radio Cards
   ===================================================== */

.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.wc_payment_method {
    border: none;
    margin-bottom: var(--space-sm);
    transition: border-color var(--transition-fast);
    overflow: hidden;
}

.wc_payment_method:has(> input[name="payment_method"]:checked) {
    border-color: none;
}

.la-checkout__payment-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    cursor: pointer;
}

.la-checkout__payment-label img {
    height: 20px;
    width: auto;
}

/* #payment tidak lagi berupa kotak. Ia kini sekadar pembungkus dua kartu di
   dalamnya — kartu pilihan metode dan kartu modal — yang masing-masing punya
   bingkai sendiri. Membiarkan latar dan bingkai di sini menghasilkan kotak di
   dalam kotak. */
.woocommerce-checkout #payment {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Kartu pilihan metode: daftar radionya rapat ke tepi kartu, jadi padding
   bawaan .la-checkout__card dikurangi agar tiap baris pilihan tidak berjarak
   ganda dengan padding <label> di dalamnya. */
.woocommerce-checkout .la-checkout__card--metode {
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}
.woocommerce-checkout .la-checkout__card--metode .wc_payment_methods {
	margin-bottom: 0;
}

/* Kartu modal hanya muncul bila metode terpilih memang punya modal. QRIS tidak
   punya, dan tanpa aturan ini kartunya tetap tampil sebagai kotak kosong. */
.woocommerce-checkout .la-checkout__card--modal {
	display: none;
	margin-bottom: var(--space-md);
}
.woocommerce-checkout #payment:has(#payment_method_la_pakasir_qris:checked) .la-checkout__card--modal,
.woocommerce-checkout #payment:has(#payment_method_la_pakasir_va:checked) .la-checkout__card--modal,
.woocommerce-checkout #payment:has(#payment_method_la_transfer_manual:checked) .la-checkout__card--modal {
	display: block;
}

/* Judul di luar kartu — tanpa garis bawah, karena pemisah visualnya kini
   bingkai kartu di bawahnya, bukan garis. */
.woocommerce-checkout .la-checkout__judul {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: var(--space-sm);
}
.woocommerce-checkout .la-checkout__left > .la-checkout__judul:first-of-type {
	margin-top: 0;
}

/* Seluruh baris pilihan bisa diklik, bukan hanya lingkaran radionya. */
.woocommerce-checkout .wc_payment_method,
.woocommerce-checkout .wc_payment_method label,
.woocommerce-checkout .wc_payment_method input.input-radio {
	cursor: pointer;
}

#payment ul.payment_methods li {
	font-size: 14px !important;
	font-weight: 450 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: none !important;
}

/* =====================================================
   PAYMENT EXTRA INFO (injected by JS)
   ===================================================== */

#la-payment-extra-info {
    margin-top: var(--space-md);
}

#la-payment-extra-info:empty {
    margin-top: 0;
}

/* Transfer Bank — notice info (BIRU) */
.la-checkout__payment-notice {
    font-size: var(--font-size-eyebrow);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    line-height: 1.6;
	border: 1.4px dashed var(--color-primary);
}

.la-checkout__payment-notice strong {
    font-weight: var(--font-weight-semibold);
}

/* Transfer title */
.la-checkout__payment-transfer-title {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

/* Bank list */
.la-checkout__bank-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.la-checkout__bank-item {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-size-eyebrow);
    color: var(--color-text);
    padding: var(--space-md);
    background: var(--color-bg-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-2);
}

.la-checkout__bank-number {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.la-checkout__bank-detail {
    flex: 1;
    line-height: 1.6;
}

.la-checkout__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    margin-top: var(--space-xs);
    transition: background var(--transition-fast), color var(--transition-fast);
    font-family: var(--font-regular);
}

.la-checkout__copy-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.la-checkout__copy-btn.is-copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* Pak Kasir / QRIS info */
.la-checkout__payment-recommend {
    font-size: var(--font-size-eyebrow);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    line-height: 1.6;
	border: 1.4px dashed var(--color-primary);
}

.la-checkout__payment-steps-title {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.la-checkout__payment-steps ol {
    padding-left: var(--space-lg);
    margin: 0;
}

.la-checkout__payment-steps li {
    font-size: var(--font-size-eyebrow);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xs);
}

/* =====================================================
   UPLOAD BUKTI TRANSFER
   ===================================================== */

.la-checkout__upload {
    margin-top: var(--space-md);
}

.la-checkout__upload-area {
    position: relative;
    border: 2px dashed var(--color-border-2);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    background: var(--color-bg);
}

.la-checkout__upload-area:hover,
.la-checkout__upload-area.is-dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.la-checkout__upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.la-checkout__upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xl) var(--space-lg);
    color: var(--color-text-tertiary);
    text-align: center;
}

.la-checkout__upload-placeholder span {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.la-checkout__upload-placeholder small {
    font-size: var(--font-size-xs);
}

.la-checkout__upload-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    font-size: var(--font-size-eyebrow);
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    background: var(--color-success-light);
    border-radius: var(--radius-md);
}

.la-checkout__upload-remove {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-fast);
}

.la-checkout__upload-remove:hover {
    color: var(--color-danger);
}

/* =====================================================
   SUBMIT BUTTON
   ===================================================== */

/* Tombol bayar di checkout. .la-checkout__submit hanya dipakai tombol ini dan
   tidak muncul di halaman lain, jadi aman diubah tanpa menyentuh .la-btn--lg
   yang dipakai bersama tombol lain di seluruh situs — ukuran fontnya berasal
   dari sana dan ditimpa di sini. */
.la-checkout__submit {
    margin-top: var(--space-lg);
	border-radius: 6px;
	font-size: 14px;
}

.la-checkout__upload-warning {
    text-align: left;
	font-size: var(--font-size-eyebrow) !important;
	font-weight: 450;
}

/* =====================================================
   KANAN — RINGKASAN
   ===================================================== */

.la-checkout__summary {
    background: var(--color-bg-2);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* Kolom kanan tetap terlihat saat halaman digulir (16 Sep 2026).
   .la-checkout__layout memakai align-items:start, syarat wajib agar sticky
   punya ruang gerak — tanpa itu kolom setinggi baris grid dan tidak pernah
   bergeser. max-height + overflow menjaga kolom yang isinya lebih tinggi
   daripada layar tetap bisa dibaca seluruhnya. */
@media (min-width: 901px) {
    .la-checkout__right {
        position: sticky;
        top: calc(var(--navbar-height) + var(--space-lg));
        max-height: calc(100vh - var(--navbar-height) - var(--space-lg) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* .la-checkout__summary-title tidak dipakai lagi — judul ringkasan kini memakai
   .la-checkout__section-title .la-checkout__judul, sama seperti judul lain di
   halaman ini, agar ukuran font dan jaraknya tidak bisa menyimpang sendiri. */

/* Items */
.la-checkout__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border-2);
}

.la-checkout__item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.la-checkout__item-thumb {
    width: 64px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.la-checkout__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.la-checkout__item-title {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    line-height: 1.3;
}

.la-checkout__item-price {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Totals */
.la-checkout__totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.la-checkout__totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-eyebrow);
    color: var(--color-text-secondary);
}

.la-checkout__totals-row--discount {
    color: var(--color-success);
}

.la-checkout__totals-row--total {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-2);
    margin-top: var(--space-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* =====================================================
   KUPON
   ===================================================== */

.la-checkout__coupon {
    padding: var(--space-sm) 0;
}

.la-checkout__coupon-toggle {
    background: none;
    border: none;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    font-family: var(--font-regular);
}

.la-checkout__coupon-toggle:hover {
    text-decoration: underline;
}

.la-checkout__coupon-form {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.la-checkout__coupon-input {
    flex: 1;
    padding: 8px 12px;
    font-size: var(--font-size-eyebrow);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-regular);
}

.la-checkout__coupon-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.la-checkout__coupon-btn {
    padding: 8px 14px;
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-regular);
    transition: background var(--transition-fast);
}

.la-checkout__coupon-btn:hover {
    background: var(--color-primary-hover);
}

/* =====================================================
   HIDE WOOCOMMERCE DEFAULTS
   ===================================================== */

/* JANGAN tambahkan .woocommerce-checkout-review-order-table ke daftar ini.
   Dulu kelas itu ikut disembunyikan karena tidak dipakai — ringkasan pesanan
   ditulis tangan dengan kelas sendiri. Sejak ringkasan dipindah ke
   woocommerce/checkout/review-order.php, kelas itu justru WAJIB dipakai:
   itulah penanda yang dicari WooCommerce untuk menyegarkan ringkasan. Aturan
   lama membuat seluruh kartu Ringkasan Pendaftaran lenyap dari layar. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading {
    display: none;
}

/* Semua modal tersembunyi secara bawaan. Selektornya kini berpangkal pada
   #payment, bukan pada .wc_payment_method: sejak modal dipindah ke bawah daftar
   radio (lihat woocommerce/checkout/payment.php), ia bukan lagi anak dari <li>
   metodenya. */
.woocommerce-checkout #payment .payment_box {
    display: none !important;
}

/* Modal yang tampil ditentukan RADIO yang tercentang, dicocokkan lewat id-nya.
   Dua hal yang sengaja dihindari di sini:

   - `:has(input:checked)` — sempat dipakai dan keliru: blok Transfer Manual
     memuat checkbox persetujuan 1x24 jam, sehingga sekali peserta mencentangnya
     modal itu ikut terbuka meski yang dipilih QRIS.
   - hubungan induk-anak — tidak berlaku lagi karena modal tidak bersarang. */
.woocommerce-checkout #payment:has(#payment_method_la_pakasir_qris:checked) .payment_box.payment_method_la_pakasir_qris,
.woocommerce-checkout #payment:has(#payment_method_la_pakasir_va:checked) .payment_box.payment_method_la_pakasir_va,
.woocommerce-checkout #payment:has(#payment_method_la_transfer_manual:checked) .payment_box.payment_method_la_transfer_manual {
    display: block !important;
}

/* Gaya modal disamakan untuk Virtual Account dan Transfer Manual: latar putih,
   tanpa bingkai, tanpa segitiga penunjuk bawaan WooCommerce — yang dulu
   menunjuk ke radio di atasnya dan kehilangan maknanya setelah modal dipindah
   ke bawah daftar. */
.woocommerce-checkout #payment .payment_box.payment_method_la_pakasir_qris,
.woocommerce-checkout #payment .payment_box.payment_method_la_pakasir_va,
.woocommerce-checkout #payment .payment_box.payment_method_la_transfer_manual {
    background: #fff !important;
    border: none !important;
}
.woocommerce-checkout #payment .payment_box.payment_method_la_pakasir_qris::before,
.woocommerce-checkout #payment .payment_box.payment_method_la_pakasir_va::before,
.woocommerce-checkout #payment .payment_box.payment_method_la_transfer_manual::before {
    display: none !important;
}

/* Sembunyikan tombol place-order bawaan WooCommerce (kita punya sendiri) */
.woocommerce-checkout #payment .place-order {
    display: none !important;
}

/* Notices */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
    font-size: var(--font-size-eyebrow);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    list-style: none;
}

.woocommerce-checkout .woocommerce-message {
    background: var(--color-success-light);
    border: none !important;
    color: var(--color-success);
}

.woocommerce-checkout .woocommerce-error {
    background: var(--color-danger-light);
    border: none !important;
    color: var(--color-danger);
}

.woocommerce-checkout .woocommerce-info {
    background: var(--color-primary-light);
    border: none !important;
    color: var(--color-primary);
}

.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before {
    display: none;
}

/* =====================================================
   DISABLED STATE — BACS TANPA BUKTI
   ===================================================== */

#place_order:disabled,
.woocommerce-checkout #place_order.button.alt:disabled,
.woocommerce-checkout #place_order:disabled {
    background-color: #9CA3AF !important;
    border-color: #9CA3AF !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Via parent class — tahan WooCommerce AJAX re-render */
.la-bacs-no-proof #place_order,
.la-bacs-no-proof button[name="woocommerce_checkout_place_order"] {
    background-color: #9CA3AF !important;
    border-color: #9CA3AF !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* =====================================================
   ANTI-FLASH: Cegah unstyled content saat WC AJAX
   ===================================================== */

/* Sembunyikan checkout-payment bawaan sampai JS inject konten */
.woocommerce-checkout-payment {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.woocommerce-checkout-payment.la-ready {
    opacity: 1;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {
    .la-checkout__layout {
        grid-template-columns: 1fr;
    }

    /* G — di layar sempit, Ringkasan Pesanan naik ke urutan pertama. Peserta
       perlu melihat apa yang dibeli dan berapa totalnya sebelum mengisi data,
       sedangkan di layar lebar ringkasan sudah terlihat berdampingan sehingga
       urutannya tidak perlu diubah. */
    .la-checkout__right { order: 1; }
    .la-checkout__left  { order: 2; }

    /* Di satu kolom tidak ada yang perlu dilengketkan. */
    .la-checkout__right {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .la-checkout__card {
        padding: var(--space-md);
    }

    .la-checkout__summary {
        padding: var(--space-md);
    }

    .la-checkout__bank-item {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

.la-checkout__payment-steps ol {
    list-style: decimal !important;
}

/* =====================================================
   INTL-TEL-INPUT — Phone Field
   ===================================================== */
.la-phone-wrapper .iti {
    width: 100%;
}
.la-phone-wrapper .iti__selected-dial-code {
    font-size: var(--font-size-eyebrow);
}
.la-phone-wrapper input.iti__tel-input {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-eyebrow);
    font-family: var(--font-regular);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border-2);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.la-phone-wrapper input.iti__tel-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}
.la-phone-error {
    margin-top: 6px;
    font-size: var(--font-size-eyebrow);
    color: var(--color-danger, #dc2626);
}

/* Tombol bayar berdiri di luar kartu, jadi jaraknya diatur sendiri. */
.woocommerce-checkout .la-checkout__submit {
	margin-top: var(--space-md);
}

/* Panduan QRIS */
.woocommerce-checkout .la-qris-panduan__judul {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 8px;
}
.woocommerce-checkout .la-qris-panduan__langkah {
	/* list-style ditulis eksplisit: reset global tema mematikan penomoran <ol>,
	   sehingga langkahnya tampil sebagai paragraf tanpa angka. */
	list-style: decimal outside;
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}
.woocommerce-checkout .la-qris-panduan__langkah li { display: list-item; }
.woocommerce-checkout .la-qris-panduan__langkah li + li { margin-top: 4px; }

/* C — kalimat bawaan gateway QRIS disembunyikan; panduan di bawahnya sudah
   menjelaskan hal yang sama dengan lebih lengkap. Dilingkupi ke kotak QRIS saja
   supaya kalimat pengantar Virtual Account ("Pilih bank untuk...") tetap tampil. */
.woocommerce-checkout .payment_box.payment_method_la_pakasir_qris .la-pakasir-desc {
	display: none;
}

/* E + F — kartu pilihan metode berlatar abu muda, dan tiap barisnya dibuat
   flex agar lingkaran radio sejajar tengah dengan tulisannya. Sebelumnya radio
   dan label mengalir sebagai elemen sebaris, sehingga posisinya bergantung pada
   garis dasar teks dan terlihat naik-turun. */
.woocommerce-checkout .la-checkout__card--metode {
	background: #F9FAFB;
}
.woocommerce-checkout .wc_payment_method {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
	padding: 10px 4px;
    padding-bottom: 0px;
}
.woocommerce-checkout .wc_payment_method input.input-radio {
	flex: 0 0 auto;
	margin: 0;
}
.woocommerce-checkout .wc_payment_method label {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
}

/* I — umpan balik saat kursor melewati pilihan bank Virtual Account. */
.woocommerce-checkout .la-va-bank-item {
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.woocommerce-checkout .la-va-bank-item:hover {
	border-color: var(--color-primary, #0055ff);
	background: #f5f8ff;
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 0px;
    padding-bottom: 10px;
}

.woocommerce-checkout #payment div.payment_box {
    padding: 0px;
    margin: 0px;
}

/* Tombol hapus item di ringkasan pesanan. Hanya dirender bila item lebih dari
   satu — lihat form-checkout.php. */
.woocommerce-checkout .la-checkout__item {
	position: relative;
}
.woocommerce-checkout .la-checkout__item-hapus {
	flex: 0 0 auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin-left: auto;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--color-danger);
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.woocommerce-checkout .la-checkout__item-hapus svg { width: 14px; height: 14px; }
.woocommerce-checkout .la-checkout__item-hapus:hover {
	color: #d92d20;
	border-color: #fecaca;
	background: #fef2f2;
}
.woocommerce-checkout .la-checkout__item-hapus:disabled {
	opacity: .45;
	cursor: default;
}
.woocommerce-checkout .la-checkout__item-hapus.is-proses {
	opacity: .45;
}

/* Jarak atas ringkasan hanya di desktop. Batasnya 901px — pasangan dari
   @media (max-width: 900px) di atas, tempat tata letak berubah jadi satu kolom
   dan ringkasan naik ke urutan pertama. Di sana margin ini justru menambah
   celah di puncak halaman. */
@media (min-width: 901px) {
	/* Judul ringkasan kini di luar kartu, jadi jarak atasnya dipasang pada
	   judulnya — bukan pada kartunya — supaya sejajar dengan "Data Diri" di
	   kolom kiri yang juga berjudul di luar kartu. Nilai 25px dipertahankan. */
	.woocommerce-checkout .la-checkout__right > .la-checkout__judul {
		margin-top: 0px;
	}
}

.woocommerce-checkout .wc_payment_method .payment_method_la_transfer_manual {
    padding-bottom: 10px;
}

/* =====================================================
   GALAT — teks merah polos, tanpa latar atau bingkai
   ===================================================== */

/* Pesan di bawah field yang bermasalah. */
.woocommerce-checkout .la-checkout__field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #d92d20;
}
.woocommerce-checkout .la-checkout__input.is-galat {
	border-color: #d92d20;
}

/* Galat nomor WhatsApp memakai elemennya sendiri — disamakan tampilannya agar
   tidak ada dua gaya pesan galat di satu halaman. */
.woocommerce-checkout .la-phone-error {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #d92d20;
	background: none;
	border: none;
	padding: 0;
}

/* Notice yang tetap datang dari server (bukan galat field) ditampilkan polos:
   tanpa latar, bingkai, ikon, maupun padding bawaan WooCommerce. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	background: none !important;
	border: none !important;
	font-size: 13px;
	line-height: 1.6;
	color: #d92d20;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error::before {
	display: none !important;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-info {
	color: var(--color-text-secondary);
}

/* =====================================================
   HALAMAN BAYAR TAGIHAN — /checkout/order-pay/
   =====================================================
   Endpoint bawaan WooCommerce, dirender templates/page-order-pay.php lewat
   template_include (lihat inc/halaman-bayar.php). Sebelum 18 Sep 2026 halaman
   ini memakai navbar penuh, footer besar, dan tabel bawaan tanpa gaya sama
   sekali.

   SELURUH selektor di blok ini berawalan .la-bayar, kelas yang hanya ada di
   template itu. Tanpa awalan, .shop_table dan #place_order akan ikut mengubah
   halaman WooCommerce lain. */

.la-bayar {
	background: #f5f5f6;
	padding: var(--space-xl) 0 var(--space-3xl);
}

/* Lebar isinya disamakan dengan kolom kiri checkout kelas: container 1200
   dikurangi padding 48, kolom kanan 380, dan jarak antar-kolom 32 = 740px.
   Diminta pemilik 18 Sep 2026. */
.la-bayar__wrap {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 40px;
}

@media (max-width: 767px) {
	.la-bayar__wrap {
		padding-inline: var(--space-md);
	}
}

.la-bayar__kartu {
	background: #fff;
	border: none;
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}

/* --- Tabel rincian pesanan bawaan WooCommerce --- */

.la-bayar .shop_table {
	width: 100%;
	margin: 0 0 var(--space-lg);
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

.la-bayar .shop_table thead th {
	padding: 0 0 10px;
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	text-align: start;
}

.la-bayar .shop_table thead th:last-child,
.la-bayar .shop_table td:last-child,
.la-bayar .shop_table tfoot td {
	text-align: end;
}

.la-bayar .shop_table tbody td {
	padding: 12px 0;
	color: var(--color-text);
}

.la-bayar .shop_table tfoot th {
	padding: 12px 0;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	text-align: start;
}

.la-bayar .shop_table tfoot td {
	padding: 12px 0;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

/* Baris terakhir tfoot adalah TOTAL — ditebalkan dan diberi garis atas. */
.la-bayar .shop_table tfoot tr:last-child th,
.la-bayar .shop_table tfoot tr:last-child td {
	padding-top: 14px;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
}

/* --- Daftar metode pembayaran --- */

.la-bayar .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.la-bayar #payment {
	background: transparent;
	border: none;
	padding: 0;
}

.la-bayar .form-row {
	margin: var(--space-lg) 0 0;
	padding: 0;
}

/* WooCommerce mencetak pembungkus notice-nya sendiri di dalam .woocommerce,
   dan di halaman ini ia SELALU kosong — yang benar-benar mengisi galat adalah
   panggilan woocommerce_output_all_notices() di templates/page-order-pay.php
   (dibuktikan dengan memicu galat "Metode pembayaran tidak valid", 18 Sep
   2026). Pembungkus kosongnya disembunyikan di sini, bukan dilepas lewat
   remove_action, karena melepasnya berisiko mematikan notice di halaman
   WooCommerce lain. */
.la-bayar .woocommerce-notices-wrapper:empty {
	display: none;
}

/* =====================================================
   BAR ATAS DAN KAKI RINGKAS (17 Sep 2026)
   =====================================================
   Halaman pemesanan memakai header-checkout.php dan footer-checkout.php:
   tanpa navigasi, keranjang, maupun tombol masuk. Karena navbar tema yang
   ber-position:fixed tidak ada lagi di halaman ini, kelas .la-main tidak lagi
   dipakai — ruang atasnya diatur di sini. */

.la-jtf-bar {
	background: #fff;
	border-bottom: 1px solid var(--color-border-2);
}

.la-jtf-bar__isi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
	max-width: 1344px;
	margin-inline: auto;
	padding: 12px 32px;
}

.la-jtf-bar__aman {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-eyebrow);
	color: var(--color-text-secondary);
}

.la-jtf-bar__aman svg {
	width: 16px;
	height: 16px;
}

.la-jtf-kaki {
	background: #fff;
	border-top: 1px solid var(--color-border-2);
}

.la-jtf-kaki__isi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	width: 100%;
	max-width: 1344px;
	margin-inline: auto;
	padding: 16px 32px;
	font-size: var(--font-size-eyebrow);
	color: var(--color-text-secondary);
}

.la-jtf-kaki__tautan {
	display: flex;
	gap: var(--space-md);
}

.la-jtf-kaki__tautan a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.la-jtf-kaki__tautan a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.la-jtf-bar__isi,
	.la-jtf-kaki__isi {
		padding-inline: var(--space-md);
	}
}

/* --- Metode pembayaran --- */
/* Bentuknya mengikuti checkout kelas: daftar radio di satu kartu, lalu SELURUH
   panel di kartu terpisah di bawahnya. Letak itu ditentukan markup, jadi
   woocommerce/checkout/form-pay.php ikut ditimpa — panel bawaan bersarang di
   dalam <li> radionya dan memunculkan daftar bank di sebelah kanan radio.
   Dikoreksi 18 Sep 2026 setelah membandingkan markup kedua halaman; percobaan
   pertama hanya menata gaya tanpa membandingkan struktur, dan hasilnya mirip di
   permukaan tetapi berbeda bentuk. */

.la-bayar #payment {
	background: transparent;
	border: none;
	padding: 0;
}

.la-bayar .la-checkout__card--metode,
.la-bayar .la-checkout__card--modal {
	padding: var(--space-md);
	background: #fff;
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-lg);
}

.la-bayar .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.la-bayar .wc_payment_method {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

.la-bayar .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	padding: 10px var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	cursor: pointer;
}

.la-bayar .wc_payment_method > input[type="radio"] {
	margin: 0;
	cursor: pointer;
}

/* Kartu panel hanya muncul untuk metode yang PUNYA panel. QRIS tidak punya —
   panduannya sengaja tidak dipakai di sini karena kalimatnya versi kelas —
   sehingga tanpa aturan ini kartunya tampil kosong. */
.la-bayar .la-checkout__card--modal {
	display: none;
	margin-top: var(--space-md);
}

.la-bayar #payment:has( #payment_method_la_pakasir_va:checked ) .la-checkout__card--modal,
.la-bayar #payment:has( #payment_method_la_transfer_manual:checked ) .la-checkout__card--modal {
	display: block;
}

/* Panel yang tampil ditentukan radio yang tercentang, dicocokkan lewat id-nya —
   bukan :has(input:checked) pada panelnya, karena blok Transfer Manual memuat
   centang persetujuan sendiri yang akan ikut membuka panel lain. Pelajaran itu
   sudah tercatat di bagian checkout kelas. */
.la-bayar .payment_box {
	display: none;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: none !important;
}

.la-bayar .payment_box::before {
	display: none !important;
}

.la-bayar #payment:has( #payment_method_la_pakasir_va:checked ) .payment_box.payment_method_la_pakasir_va,
.la-bayar #payment:has( #payment_method_la_transfer_manual:checked ) .payment_box.payment_method_la_transfer_manual {
	display: block;
}

/* Kalimat ketentuan bawaan WooCommerce. */
.la-bayar .woocommerce-terms-and-conditions-wrapper {
	margin: var(--space-lg) 0 0;
	font-size: var(--font-size-eyebrow);
	line-height: 1.55;
	color: var(--color-text-secondary);
}

/* --- Formulir verifikasi email --- */
/* WooCommerce meminta verifikasi bila tagihan tanpa akun dibuka peramban yang
   sesinya tidak mengenali pesanan itu, setelah masa tenggang 10 menit sejak
   tagihan dibuat (woocommerce_order_email_verification_grace_period). Markupnya
   bawaan — .input-text dan .woocommerce-button — jadi perlu ditata sendiri agar
   seragam dengan sisa halaman. */
.la-bayar .woocommerce-verify-email p {
	margin: 0 0 var(--space-md);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-text);
}

.la-bayar .woocommerce-verify-email .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--space-md);
}

.la-bayar .woocommerce-verify-email label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

.la-bayar .woocommerce-verify-email .input-text {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border-2);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.la-bayar .woocommerce-verify-email .input-text:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08);
}

/* Tombolnya disamakan dengan tombol bayar: biru, selebar kartu. */
.la-bayar .woocommerce-verify-email .button {
	width: 100%;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--font-weight-semibold);
	color: #fff;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.la-bayar .woocommerce-verify-email .button:hover {
	background: var(--color-primary-hover);
}

/* --- Tabel tanpa garis sama sekali (permintaan pemilik, 18 Sep 2026) --- */
/* Menghapus border-bottom saja TIDAK cukup: CSS bawaan WooCommerce memberi
   border pada table.shop_table beserta border-top di setiap td dan tfoot,
   dengan selektor `.woocommerce table.shop_table` yang kekhususannya lebih
   tinggi daripada `.la-bayar .shop_table`. Karena itu elemen tabelnya disebut
   eksplisit di sini. */
.la-bayar table.shop_table,
.la-bayar table.shop_table thead th,
.la-bayar table.shop_table tbody td,
.la-bayar table.shop_table tbody th,
.la-bayar table.shop_table tfoot td,
.la-bayar table.shop_table tfoot th,
.la-bayar table.shop_table tr {
	border: none;
}

/* --- Kartu panel tidak muncul untuk QRIS --- */
/* Aturan checkout kelas menyalakan kartu modal untuk QRIS juga — benar di sana,
   karena QRIS di checkout kelas berisi panduan "cara bayar". Di halaman ini
   QRIS tidak berpanel, sehingga kartunya tampil sebagai kotak kosong di bawah
   daftar. Kekhususan aturan itu (.woocommerce-checkout #payment:has(...))
   mengalahkan .la-bayar .la-checkout__card--modal, jadi penimpanya harus
   menyebut #payment juga. Dilaporkan pemilik 18 Sep 2026. */
.la-bayar #payment:has( #payment_method_la_pakasir_qris:checked ) .la-checkout__card--modal {
	display: none;
}