/*
 * Special Sarv — Cart & Checkout  v4.0
 * ─────────────────────────────────────────────────────────────────
 * Page-level overrides for cart + checkout pages.
 * (Core component CSS is inlined in cart.php + form-checkout.php)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── GLOBAL FONT OVERRIDE on these pages ── */
body.ss-cart-page *,
body.ss-checkout-page * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── PAGE BACKGROUND ── */
body.ss-cart-page,
body.ss-checkout-page {
    background: #f4f3ef !important;
}

/* ── HIDE STOREFRONT CHROME ON THESE PAGES ── */
body.ss-cart-page .woocommerce-breadcrumb,
body.ss-checkout-page .woocommerce-breadcrumb,
body.ss-cart-page .page-title,
body.ss-checkout-page .page-title,
body.ss-cart-page .entry-title,
body.ss-checkout-page .entry-title,
body.ss-cart-page .site-header-cart,
body.ss-checkout-page .site-header-cart {
    display: none !important;
}

/* ── REMOVE PADDING ON WC WRAPPER ── */
body.ss-cart-page .woocommerce,
body.ss-cart-page .woocommerce-page,
body.ss-checkout-page .woocommerce,
body.ss-checkout-page .woocommerce-page {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ── WC NOTICES ── */
body.ss-cart-page .woocommerce-notices-wrapper .woocommerce-message,
body.ss-cart-page .woocommerce-notices-wrapper .woocommerce-error,
body.ss-cart-page .woocommerce-notices-wrapper .woocommerce-info,
body.ss-checkout-page .woocommerce-notices-wrapper .woocommerce-message,
body.ss-checkout-page .woocommerce-notices-wrapper .woocommerce-error,
body.ss-checkout-page .woocommerce-notices-wrapper .woocommerce-info {
    max-width: 460px !important;
    margin: 8px auto !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── CHECKOUT: HIDE DEFAULT WC PLACE ORDER BUTTON (use our sticky one) ── */
body.ss-checkout-page #place_order {
    display: none !important;
}

/* ── CHECKOUT: PAYMENT METHOD LIST STYLING ── */
body.ss-checkout-page .wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #e2e2dd !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3d3d3d !important;
    transition: all 0.18s !important;
    background: #fafaf9 !important;
    margin-bottom: 7px !important;
    font-family: 'Inter', sans-serif !important;
}
body.ss-checkout-page .wc_payment_method.payment_method_selected > label,
body.ss-checkout-page .wc_payment_method input[type=radio]:checked + label {
    border-color: #1a5c3a !important;
    background: linear-gradient(135deg, rgba(234,245,238,.7), rgba(237,250,242,.9)) !important;
    font-weight: 700 !important;
    color: #1a5c3a !important;
    box-shadow: 0 2px 8px rgba(26,92,58,.08) !important;
}
body.ss-checkout-page .wc_payment_method input[type=radio] {
    accent-color: #1a5c3a !important;
}
body.ss-checkout-page .payment_box {
    background: #f7f7f5 !important;
    border-radius: 10px !important;
    border: 1.5px solid #eaeae6 !important;
    padding: 10px 13px !important;
    margin: 0 0 8px !important;
    font-size: 12.5px !important;
    color: #3d3d3d !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.55 !important;
}

/* ── HIDE MEMBERSHIP SECTIONS ── */
body.ss-cart-page .woocommerce-memberships-member-discounts,
body.ss-cart-page .woocommerce-memberships-messages,
body.ss-cart-page .wc-memberships-member-discount-message,
body.ss-checkout-page .woocommerce-memberships-member-discounts,
body.ss-checkout-page .woocommerce-memberships-messages,
.woocommerce-memberships,
[class*="wcm-"] {
    display: none !important;
}

/* ── THANK YOU PAGE ── */
body.woocommerce-order-received .woocommerce {
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    font-family: 'Inter', sans-serif !important;
}
body.woocommerce-order-received .woocommerce-order {
    display: block !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE CRITICAL FIX v12 — Shipping + Payment always visible
   Overrides any Storefront / WooCommerce responsive CSS that
   collapses or hides #order_review, #payment, or the shipping
   row on screens ≤ 768px.
══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
    /* #order_review wrapper */
    html body.ss-checkout-page .woocommerce-checkout-review-order,
    html body.ss-checkout-page #order_review {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Shipping section */
    html body.ss-checkout-page .woocommerce-shipping-totals {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html body.ss-checkout-page #shipping_method {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html body.ss-checkout-page #shipping_method li {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Payment section */
    html body.ss-checkout-page #payment,
    html body.ss-checkout-page .woocommerce-checkout-payment {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html body.ss-checkout-page #payment .wc_payment_methods {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html body.ss-checkout-page #payment .wc_payment_method {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body.ss-checkout-page #payment .wc_payment_method > label {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ── Cart AJAX feedback (qty stepper / remove) ── */
.ss-item.ss-busy{position:relative}
.ss-item.ss-busy::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.4);border-radius:inherit;pointer-events:none}
.ss-qty-btn:disabled{opacity:.4;cursor:not-allowed}
.ss-toast{position:absolute;left:50%;bottom:-8px;transform:translate(-50%,100%);background:#1a1a1a;color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap;z-index:5;animation:ss-toast-in .2s ease-out;box-shadow:0 4px 14px rgba(0,0,0,.18)}
@keyframes ss-toast-in{from{opacity:0;transform:translate(-50%,calc(100% - 6px))}to{opacity:1;transform:translate(-50%,100%)}}