/* Billing / shipping address: 4-column grid so 縣市＋鄉鎮 sit on
 * one row (2/4 + 2/4) and 地址樓層＋郵遞區號 sit 3/4 + 1/4.
 * Other rows stay full width. Stacks on a narrow column.
 */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
}

/*
 * display:grid above beats the UA [hidden] { display:none }, so a
 * selected address card could not collapse the form. Force it shut.
 */
.woocommerce-billing-fields__field-wrapper[hidden],
.woocommerce-shipping-fields__field-wrapper[hidden],
.woocommerce-address-fields__field-wrapper[hidden],
.woocommerce-billing-fields__address[hidden] {
    display: none !important;
}

.pcta-picker:not(.is-open) ~ .woocommerce-shipping-fields__field-wrapper,
.pcta-picker:not(.is-open) ~ .woocommerce-billing-fields__address {
    display: none !important;
}

.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row,
.woocommerce-address-fields__field-wrapper .form-row {
    grid-column: 1 / -1;
    width: 100%;
    float: none;
}

.woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-first,
.woocommerce-address-fields__field-wrapper .form-row.form-row-first {
    grid-column: 1 / 3;
}

.woocommerce-billing-fields__field-wrapper .form-row.form-row-last,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-last,
.woocommerce-address-fields__field-wrapper .form-row.form-row-last {
    grid-column: 3 / 5;
}

.woocommerce-billing-fields__field-wrapper .form-row.pcta-form-row--three-quarter,
.woocommerce-shipping-fields__field-wrapper .form-row.pcta-form-row--three-quarter,
.woocommerce-address-fields__field-wrapper .form-row.pcta-form-row--three-quarter {
    grid-column: 1 / 4;
}

.woocommerce-billing-fields__field-wrapper .form-row.pcta-form-row--quarter,
.woocommerce-shipping-fields__field-wrapper .form-row.pcta-form-row--quarter,
.woocommerce-address-fields__field-wrapper .form-row.pcta-form-row--quarter {
    grid-column: 4 / 5;
}

@media (max-width: 768px) {
    .woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
    .woocommerce-billing-fields__field-wrapper .form-row.form-row-last,
    .woocommerce-billing-fields__field-wrapper .form-row.pcta-form-row--three-quarter,
    .woocommerce-billing-fields__field-wrapper .form-row.pcta-form-row--quarter,
    .woocommerce-shipping-fields__field-wrapper .form-row.form-row-first,
    .woocommerce-shipping-fields__field-wrapper .form-row.form-row-last,
    .woocommerce-shipping-fields__field-wrapper .form-row.pcta-form-row--three-quarter,
    .woocommerce-shipping-fields__field-wrapper .form-row.pcta-form-row--quarter,
    .woocommerce-address-fields__field-wrapper .form-row.form-row-first,
    .woocommerce-address-fields__field-wrapper .form-row.form-row-last,
    .woocommerce-address-fields__field-wrapper .form-row.pcta-form-row--three-quarter,
    .woocommerce-address-fields__field-wrapper .form-row.pcta-form-row--quarter {
        grid-column: 1 / -1;
    }
}

/* pilot-checkout-tw-address — belt-and-suspenders CSS to ensure
 * the Select2 wrapper stays hidden even if our JS hasn't run yet
 * (e.g. during the brief window before DOMContentLoaded). Covers
 * both country and state fields.
 */
#billing_country,
#shipping_country,
#calc_shipping_country,
#billing_state,
#shipping_state,
#calc_shipping_state {
    display: block !important;
    width: 100% !important;
}

#billing_country + .select2-container,
#shipping_country + .select2-container,
#calc_shipping_country + .select2-container,
#billing_state + .select2-container,
#shipping_state + .select2-container,
#calc_shipping_state + .select2-container {
    display: none !important;
}