/*
 * Magnify Manual Payment - Checkout PAGE theme
 *
 * Restyles the whole Elementor Essential Addons checkout widget (billing
 * fields, order summary, coupon box, payment method list, submit button) to
 * match the dark-card design comp. Targets the widget's real rendered
 * markup/classes directly (confirmed via live DOM inspection) rather than
 * replacing WooCommerce/Essential Addons templates — keeps all existing
 * checkout functionality (validation, AJAX, Select2 dropdowns, coupon logic)
 * untouched. Site header/footer are outside `.ea-woo-checkout` and are never
 * targeted here.
 */

.ea-woo-checkout {
    --mpt-gold: #C9A227;
    --mpt-card-bg: #111111;
    --mpt-card-border: rgba(255, 255, 255, 0.06);
    --mpt-text: #ededed;
    --mpt-text-muted: #8b8b8b;
    font-family: inherit;
}

/* ── Section headings ──────────────────────────────────────────────────── */
.ea-woo-checkout .woo-checkout-section-title,
.ea-woo-checkout .woocommerce-billing-fields > h3:first-child,
.ea-woo-checkout .woocommerce-additional-fields > h3:first-child {
    color: var(--mpt-gold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 0 18px !important;
}

/* ── Billing Details + Additional Information cards ──────────────────── */
.ea-woo-checkout .woocommerce-billing-fields,
.ea-woo-checkout .woocommerce-additional-fields {
    background: var(--mpt-card-bg);
    border: 1px solid var(--mpt-card-border);
    border-radius: 18px;
    padding: 26px 28px;
}

.ea-woo-checkout #customer_details.col2-set {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    float: none !important;
}

.ea-woo-checkout .col-1,
.ea-woo-checkout .col-2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.ea-woo-checkout .woocommerce-additional-fields label {
    color: var(--mpt-text-muted);
    font-size: 12px;
}

/* ── Page-level 2-column layout: Billing/Additional/Your-Order on the
   left, Payment Methods on the right — matches the comp exactly.
   All of these are real siblings under `.woocommerce` in the DOM (the
   review-order heading/table/coupon live outside `form.checkout`, while
   the billing block and payment block are the form's own two direct
   children) — `form.checkout` gets `display:contents` so its children
   become direct grid items too, without changing how the form itself
   submits. `order` controls each left-column item's row sequence since
   they're explicitly forced into column 1 regardless of DOM position. ── */
.ea-woo-checkout .woocommerce {
    display: grid !important;
    grid-template-columns: 0.85fr 1.25fr;
    gap: 24px;
    align-items: start;
}

.ea-woo-checkout .woocommerce > form.checkout {
    display: contents !important;
}

/* Excludes .woo-checkout-payment via :not() instead of relying on a later,
   higher-specificity rule to "win" — sidesteps the cascade fights this page's
   ~180 other stylesheets keep causing (see changelog for the saga). */
.ea-woo-checkout .woocommerce > *:not(form):not(.woo-checkout-payment),
.ea-woo-checkout .woocommerce > form.checkout > *:not(.woo-checkout-payment) {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.ea-woo-checkout .woocommerce #customer_details.col2-set {
    order: -1 !important;
}

.ea-woo-checkout .woocommerce #order_review_heading {
    order: 1 !important;
}

.ea-woo-checkout .woocommerce .ea-woo-checkout-order-review {
    order: 2 !important;
}

.ea-woo-checkout .woocommerce .woo-checkout-coupon {
    order: 3 !important;
}

.ea-woo-checkout .woocommerce .woo-checkout-payment {
    grid-column: 2 !important;
    grid-row: 1 / -1;
    align-self: start;
    margin-top: 0;
}

@media (max-width: 900px) {
    .ea-woo-checkout .woocommerce {
        grid-template-columns: 1fr;
    }

    .ea-woo-checkout .woocommerce .woo-checkout-payment {
        grid-column: 1 !important;
        grid-row: auto;
        margin-top: 24px;
    }
}

/* ── Inputs, selects, textareas ────────────────────────────────────────── */
.ea-woo-checkout input.input-text,
.ea-woo-checkout textarea,
.ea-woo-checkout .select2-container--default .select2-selection--single {
    background: #EDF0FB !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 14px 15px !important;
    height: auto !important;
    font: 500 14px inherit !important;
    color: #1b1b1f !important;
    box-shadow: none !important;
}

.ea-woo-checkout textarea {
    padding: 13px 15px !important;
}

.ea-woo-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1b1b1f !important;
    line-height: 1.9 !important;
    padding-left: 0 !important;
}

.ea-woo-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

.ea-woo-checkout .select2-container {
    width: 100% !important;
}

.ea-woo-checkout ::placeholder {
    color: #8b8fa3 !important;
    opacity: 1 !important;
}

/* ── Billing fields: 2-column grid (matches the comp) ──────────────────── */
.ea-woo-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ea-woo-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

.ea-woo-checkout .woocommerce-billing-fields__field-wrapper .form-row label:not(.checkbox) {
    display: none;
}

@media (max-width: 480px) {
    .ea-woo-checkout .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ── "Your Order" heading + review table ───────────────────────────────── */
.ea-woo-checkout .ea-woo-checkout-order-review {
    margin-bottom: 20px;
}

/* ── Coupon box ─────────────────────────────────────────────────────────── */
.ea-woo-checkout .woocommerce-form-coupon-toggle {
    border: 1px solid rgba(201, 162, 39, 0.25) !important;
    border-radius: 11px !important;
    background: rgba(201, 162, 39, 0.05) !important;
    padding: 4px 6px !important;
    margin-bottom: 20px;
}

.ea-woo-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    color: #c9c9c9 !important;
    background: none !important;
    border: none !important;
}

.ea-woo-checkout .woocommerce-form-coupon-toggle a.showcoupon {
    color: var(--mpt-gold) !important;
    font-weight: 700 !important;
}

.ea-woo-checkout .checkout_coupon input.input-text {
    background: #fff !important;
}

/* ── Payment Methods card + list ────────────────────────────────────────── */
.ea-woo-checkout .woo-checkout-payment {
    background: var(--mpt-card-bg);
    border: 1px solid rgba(201, 162, 39, 0.22);
    border-radius: 18px;
    padding: 26px 28px;
    margin-top: 24px;
}

.ea-woo-checkout ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ea-woo-checkout li.wc_payment_method {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-radius: 11px !important;
    padding: 2px 4px !important;
    transition: all 0.15s;
    list-style: none !important;
}

.ea-woo-checkout li.wc_payment_method:has(input:checked) {
    border-color: var(--mpt-gold) !important;
    background: rgba(201, 162, 39, 0.09) !important;
    background-color: rgba(201, 162, 39, 0.09) !important;
}

.ea-woo-checkout li.wc_payment_method > label {
    color: #f3f3f3 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: none !important;
}

.ea-woo-checkout li.wc_payment_method input[type="radio"] {
    accent-color: var(--mpt-gold) !important;
    width: 16px !important;
    height: 16px !important;
    flex: none;
    margin: 0 !important;
}

.ea-woo-checkout .payment_box {
    background: transparent !important;
    border: none !important;
    color: var(--mpt-text);
    padding: 6px 14px 14px !important;
}

.ea-woo-checkout .payment_box p {
    color: #9a9a9a;
}

/* ── Privacy text + submit button ──────────────────────────────────────── */
.ea-woo-checkout .woocommerce-privacy-policy-text {
    color: #6f6f6f !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    margin: 20px 0 16px !important;
}

.ea-woo-checkout .woocommerce-privacy-policy-text a {
    color: var(--mpt-gold) !important;
}

.ea-woo-checkout #place_order {
    width: 100% !important;
    background: var(--mpt-gold) !important;
    color: #141414 !important;
    border: none !important;
    border-radius: 11px !important;
    padding: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

.ea-woo-checkout #place_order:hover {
    background: #e0b830 !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
    .ea-woo-checkout .woocommerce-billing-fields,
    .ea-woo-checkout .woocommerce-additional-fields,
    .ea-woo-checkout .woo-checkout-payment {
        padding: 20px;
        border-radius: 14px;
    }
}