/**
 * Checkout restyle.
 *
 * Loaded after the parent theme's checkout.min.css (see the enqueue in
 * functions.php, which declares 'saasland-checkout' as a dependency), so these
 * rules win on load order and no !important is needed.
 *
 * The parent theme strips the background and padding off #payment and
 * .payment_box but never styles the radio inputs, which is what leaves the
 * payment section looking unfinished. Everything below rebuilds that block as
 * selectable cards, then tidies the surrounding form, order table and coupon.
 *
 * Tokens follow the Saasland design language:
 *   brand #5e2ced   accent #7444fd   heading #2c2c51 / #282835
 *   body  #677294   line   #e8ebf3   radius 4px
 */

/* ========================================================== payment methods */

.woocommerce-checkout #payment ul.payment_methods {
    display: grid;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid #e8ebf3;
    border-radius: 4px;
    background: #fff;
    list-style: none;
    transition: border-color .2s linear, box-shadow .2s linear;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
    border-color: #ccc5fa;
}

/* :has() draws the selected state without any JS. Browsers without support
   simply keep the default border, which still reads fine. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input.input-radio:checked) {
    border-color: #5e2ced;
    box-shadow: 0 0 0 1px #5e2ced;
}

/* Hide the native radio but keep it focusable and screen-reader visible. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 18px 20px;
    font: 500 15px/24px "Poppins", sans-serif;
    color: #282835;
    cursor: pointer;
}

/* Custom radio: purple ring, white gap, purple centre. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid #d5d9e6;
    border-radius: 50%;
    background: transparent;
    transition: all .2s linear;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input.input-radio:checked) label::before {
    border-color: #5e2ced;
    background: #5e2ced;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Keyboard focus has to remain visible now that the real radio is hidden. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio:focus-visible + label::before {
    outline: 2px solid #5e2ced;
    outline-offset: 2px;
}

/* Gateway icons (PayPal mark, card logos) sit next to the title. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
    display: inline-block;
    max-height: 24px;
    width: auto;
    margin: 0;
    vertical-align: middle;
}

/* "What is PayPal?" — push to the far right, de-emphasise. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label a.about_paypal {
    margin-left: auto;
    font: 400 13px/20px "Poppins", sans-serif;
    color: #677294;
    text-decoration: underline;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label a.about_paypal:hover {
    color: #5e2ced;
}

/* Description panel, indented to line up with the label text.
   WooCommerce core sets width:100% on .payment_box, which is 100% of the li's
   content box and does not account for these margins, so the panel overflows
   the card by the sum of the horizontal margins. Reset it to auto and let the
   margins size the box. */
.woocommerce-checkout #payment li.wc_payment_method div.payment_box {
    width: auto;
    margin: 0 20px 18px 52px;
    padding: 14px 16px;
    border: 1px solid #eeeafd;
    border-radius: 4px;
    background: #f9f9ff;
}

.woocommerce-checkout #payment li.wc_payment_method div.payment_box::before {
    display: none;
}

.woocommerce-checkout #payment li.wc_payment_method div.payment_box p {
    margin: 0;
    padding-left: 0;
    font: 300 14px/24px "Poppins", sans-serif;
    color: #677294;
}

.woocommerce-checkout #payment li.wc_payment_method:last-child div.payment_box p {
    margin-bottom: 0;
}

/* Gateways that render real inputs (Stripe card fields, etc.). */
.woocommerce-checkout #payment li.wc_payment_method div.payment_box input[type="text"],
.woocommerce-checkout #payment li.wc_payment_method div.payment_box input[type="tel"],
.woocommerce-checkout #payment li.wc_payment_method div.payment_box input[type="email"],
.woocommerce-checkout #payment li.wc_payment_method div.payment_box select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e8ebf3;
    border-radius: 4px;
    background: #fff;
    font: 300 15px "Poppins", sans-serif;
    color: #282835;
}

/* ============================================================== place order */

.woocommerce-checkout-payment .form-row.place-order,
.woocommerce-checkout #payment .form-row.place-order {
    float: none;
    margin: 0;
    padding: 0;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    width: 100%;
    height: 54px;
    margin-top: 22px;
    padding: 0;
    border: 1px solid #5e2ced;
    border-radius: 4px;
    background: #5e2ced;
    box-shadow: 0 20px 24px 0 rgba(0, 11, 40, .1);
    font: 500 16px/1 "Poppins", sans-serif;
    color: #fff;
    cursor: pointer;
    float: none;
    transition: all .2s linear;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    background: transparent;
    color: #5e2ced;
}

.woocommerce #payment #place_order:focus-visible {
    outline: 2px solid #5e2ced;
    outline-offset: 3px;
}

/* Terms + privacy copy sitting above the button. */
.woocommerce-checkout-review-order .condition p,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    margin-bottom: 0;
    font: 300 13px/22px "Poppins", sans-serif;
    color: #8a90a2;
}

/* ============================================================== form fields */

.woocommerce-checkout .checkout_content input[type="text"],
.woocommerce-checkout .checkout_content input[type="tel"],
.woocommerce-checkout .checkout_content input[type="email"],
.woocommerce-checkout .checkout_content input[type="password"],
.woocommerce-checkout .checkout_content textarea {
    border: 1px solid #e8ebf3;
    border-radius: 4px;
    background: #fff;
    transition: border-color .2s linear, box-shadow .2s linear;
}

.woocommerce-checkout .checkout_content input:focus,
.woocommerce-checkout .checkout_content textarea:focus {
    border-color: #5e2ced;
    box-shadow: 0 0 0 3px rgba(94, 44, 237, .1);
    outline: none;
}

.woocommerce-checkout .checkout_content label .required {
    color: #f0426d;
    text-decoration: none;
}

/* WooCommerce marks invalid fields on blur. */
.woocommerce-checkout .woocommerce-invalid input.input-text {
    border-color: #f0426d;
}

.woocommerce-checkout .woocommerce-validated input.input-text {
    border-color: #3ecf8e;
}

/* Country / state dropdowns. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    border: 1px solid #e8ebf3;
    border-radius: 4px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: #5e2ced;
}

/* ============================================================ order summary */

.woocommerce .woocommerce-checkout-review-order table.shop_table {
    margin-bottom: 24px;
    border: 0;
}

.woocommerce-checkout-review-order .shop_table tbody tr td,
.woocommerce-checkout-review-order .shop_table tfoot tr td,
.woocommerce-checkout-review-order .shop_table tfoot tr th {
    border-top: 1px solid #e8ebf3;
}

.woocommerce-checkout-review-order .shop_table tfoot tr.order-total td,
.woocommerce-checkout-review-order .shop_table tfoot tr.order-total th {
    border-top: 2px solid #e8ebf3;
    padding-top: 16px;
}

.woocommerce-checkout-review-order .shop_table tfoot tr td.total,
.woocommerce-checkout-review-order .shop_table tfoot tr td.total .woocommerce-Price-amount {
    color: #5e2ced;
    font-size: 20px;
    font-weight: 600;
}

/* ================================================================== coupon */

.woocommerce-checkout .checkout_content .tab_content .coupon_form input {
    border: 1px solid #e8ebf3;
    border-radius: 4px;
}

.woocommerce-checkout .checkout_content .tab_content .coupon_form input:focus {
    border-color: #5e2ced;
    box-shadow: 0 0 0 3px rgba(94, 44, 237, .1);
}

/* ================================================================= notices */

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
    border-top: 0;
    border-left: 3px solid #5e2ced;
    border-radius: 4px;
    background: #f9f9ff;
    font: 300 15px/26px "Poppins", sans-serif;
    color: #677294;
}

.woocommerce-checkout .woocommerce-error {
    border-left-color: #f0426d;
    background: #fff5f7;
}

/* ============================================================= breakpoints */

@media (max-width: 575px) {
    .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
        flex-wrap: wrap;
        padding: 16px;
    }

    /* The "What is PayPal?" link drops onto its own line rather than
       squeezing the gateway title. */
    .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label a.about_paypal {
        flex-basis: 100%;
        margin-left: 32px;
    }

    .woocommerce-checkout #payment li.wc_payment_method div.payment_box {
        margin: 0 16px 16px;
    }
}