/*
 * LK Dryfruits — Cart & Checkout  v4.0
 * ─────────────────────────────────────────────────────────────────
 * Page-level overrides for the cart + checkout pages.
 * (Core component CSS is inline 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 from the 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 the default WC place-order button (we use our own sticky button) ── */
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: #fafafa !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: #252525 !important;
    background: linear-gradient(135deg, rgba(240,240,240,.7), rgba(243,243,243,.9)) !important;
    font-weight: 700 !important;
    color: #252525 !important;
    box-shadow: 0 2px 8px rgba(37,37,37,.08) !important;
}
body.ss-checkout-page .wc_payment_method input[type=radio] {
    accent-color: #252525 !important;
}
body.ss-checkout-page .payment_box {
    background: #f6f6f6 !important;
    border-radius: 10px !important;
    border: 1.5px solid #e8e8e8 !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 stay visible
   Overrides 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%)}}

/* ═══════════════════════════════════════════════════════════
   v5.0 — PREMIUM BLACK THEME LAYER
   ───────────────────────────────────────────────────────────
   Matches Cart + Checkout to the site's black theme.
   No green anywhere — just ink black + warm neutral surfaces.
   ═══════════════════════════════════════════════════════════ */
body.ss-cart-page,
body.ss-checkout-page{
    --sscc-ink:      #0a0a0a;
    --sscc-ink-2:    #232323;
    --sscc-muted:    #6b6b6b;
    --sscc-line:     rgba(10,10,10,.10);
    --sscc-surface:  #ffffff;
    --sscc-bg:       #f5f4f1;
    --sscc-radius:   16px;
    --sscc-shadow:   0 18px 50px -22px rgba(10,10,10,.35);
    background: var(--sscc-bg) !important;
}

/* Give panels / cards a premium look */
body.ss-cart-page .ss-cart-card,
body.ss-cart-page .ss-cart-panel,
body.ss-cart-page .ss-cart-summary,
body.ss-checkout-page .ss-co-card,
body.ss-checkout-page .ss-co-panel,
body.ss-checkout-page .ss-co-summary{
    background: var(--sscc-surface) !important;
    border: 1px solid var(--sscc-line) !important;
    border-radius: var(--sscc-radius) !important;
    box-shadow: var(--sscc-shadow) !important;
}

/* All primary CTAs — pure black pill */
body.ss-cart-page .ss-cart-checkout-btn,
body.ss-cart-page .checkout-button,
body.ss-cart-page button.button,
body.ss-checkout-page .ss-place-order-btn,
body.ss-checkout-page .ss-sticky-place-order,
body.ss-checkout-page #ss-place-order,
body.ss-checkout-page button.button.alt{
    background: var(--sscc-ink) !important;
    color: #fff !important;
    border: 1px solid var(--sscc-ink) !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 10px 24px -12px rgba(10,10,10,.6) !important;
    transition: background .2s ease, transform .15s ease !important;
}
body.ss-cart-page .ss-cart-checkout-btn:hover,
body.ss-cart-page .checkout-button:hover,
body.ss-checkout-page .ss-place-order-btn:hover,
body.ss-checkout-page .ss-sticky-place-order:hover,
body.ss-checkout-page #ss-place-order:hover{
    background: var(--sscc-ink-2) !important;
    transform: translateY(-1px);
}

/* Secondary / ghost buttons */
body.ss-cart-page .ss-btn-ghost,
body.ss-checkout-page .ss-btn-ghost,
body.ss-cart-page a.button:not(.checkout-button),
body.ss-checkout-page a.button:not(.alt){
    background: #fff !important;
    color: var(--sscc-ink) !important;
    border: 1.5px solid var(--sscc-line) !important;
    border-radius: 9999px !important;
}
body.ss-cart-page a.button:not(.checkout-button):hover,
body.ss-checkout-page a.button:not(.alt):hover{
    border-color: var(--sscc-ink) !important;
}

/* Inputs — clean neutral, black ring on focus */
body.ss-checkout-page input[type="text"],
body.ss-checkout-page input[type="email"],
body.ss-checkout-page input[type="tel"],
body.ss-checkout-page input[type="number"],
body.ss-checkout-page textarea,
body.ss-checkout-page select,
body.ss-cart-page input[type="text"]{
    border: 1.5px solid var(--sscc-line) !important;
    border-radius: 12px !important;
    background: #fbfbfa !important;
    color: var(--sscc-ink) !important;
}
body.ss-checkout-page input:focus,
body.ss-checkout-page textarea:focus,
body.ss-checkout-page select:focus,
body.ss-cart-page input:focus{
    outline: none !important;
    border-color: var(--sscc-ink) !important;
    box-shadow: 0 0 0 3px rgba(10,10,10,.10) !important;
    background: #fff !important;
}

/* Payment method — selected state black */
body.ss-checkout-page .wc_payment_method input:checked + label,
body.ss-checkout-page .wc_payment_method > label:hover{
    border-color: var(--sscc-ink) !important;
    background: #fff !important;
    color: var(--sscc-ink) !important;
}

/* Coupon / offer banner — ink strip, no green */
body.ss-cart-page .ss-coupon-banner,
body.ss-checkout-page .ss-coupon-banner,
body.ss-cart-page .ss-save-banner,
body.ss-checkout-page .ss-save-banner{
    background: #0a0a0a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
}

/* Badges / success pills */
body.ss-cart-page .ss-pill-success,
body.ss-checkout-page .ss-pill-success{
    background: #f1f0ed !important;
    color: #0a0a0a !important;
    border: 1px solid var(--sscc-line) !important;
}