/*
 * ═══════════════════════════════════════════════════════════════════════════
 * SWAGSAY — Premium CTA + Mobile Sticky Footer Bar — v3 FINAL
 *
 *   File location:
 *     /wp-content/themes/woodmart-child/assets/css/ss-cta.css
 *
 *   ⚠️ IMPORTANT — REPLACE, DON'T APPEND ⚠️
 *   This file is the SINGLE SOURCE OF TRUTH for the two CTA buttons +
 *   the mobile sticky bar. Before pasting this:
 *     1. Open your single-product.css
 *     2. DELETE the entire "11. CTAs - QUANTITY + ADD TO BAG + BUY NOW"
 *        section (you'll find it labeled "ss CTA BUTTONS v2" or similar)
 *     3. DELETE any earlier ss-cta.css content already pasted
 *     4. Put THIS file as a NEW separate file: ss-cta.css
 *
 *   What this file does (UI ONLY — no business logic touched):
 *
 *   ALL VIEWPORTS:
 *     - Hide quantity selector visually (input preserved for WC submit)
 *
 *   DESKTOP (≥1025px):
 *     - Buy Now (LEFT, white, green border) + Add To Bag (RIGHT, green solid)
 *     - Both visible in-summary, full premium styling
 *
 *   MOBILE / TABLET (≤1024px):
 *     - HIDES the in-summary Buy Now + Add To Bag (kept in DOM for WC)
 *     - HIDES WoodMart bottom mobile nav (Menu/Bag/Wishlist) ONLY on product pages
 *     - Shows full-width sticky CTA footer with premium mirror buttons
 *
 *   CHECK BAG STATE (mobile only):
 *     - After WC AJAX add-to-cart success, "Add To Bag" mirror morphs
 *       into gold "Check Bag" → tap navigates to /cart/
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════
   0. TOKENS
   ════════════════════════════════════════════════════════════════════════ */
body.single-product {
    --ss-cta-green:        var(--ss-green, #1B6B3A);
    --ss-cta-green-dark:   var(--ss-green-dark, #134f2b);
    --ss-cta-green-deep:   #0F4F2A;
    --ss-cta-gold:         var(--ss-gold, #C9963A);
    --ss-cta-gold-deep:    #B8852D;
    --ss-cta-ink:          var(--ss-ink, #0F0F0F);
    --ss-cta-text:         var(--ss-text, #2A2A2A);
    --ss-cta-line:         var(--ss-line, #E8E2DA);
    --ss-cta-white:        #FFFFFF;

    --ss-cta-shadow-soft:  0 4px 14px rgba(15, 79, 42, 0.10);
    --ss-cta-shadow-md:    0 8px 24px rgba(15, 79, 42, 0.18);
    --ss-cta-shadow-bar:   0 -8px 28px rgba(15, 15, 15, 0.10);
    --ss-cta-shadow-gold:  0 6px 22px rgba(201, 150, 58, 0.30);

    --ss-cta-ease:         220ms cubic-bezier(.4,0,.2,1);
    --ss-cta-radius:       12px;
    --ss-cta-radius-btn:   14px;

    --ss-cta-h-desktop:    58px;
    --ss-cta-h-mobile:     56px;
}


/* ════════════════════════════════════════════════════════════════════════
   1. HIDE QUANTITY (all viewports — input kept off-screen for WC qty=1)
   ════════════════════════════════════════════════════════════════════════ */
body.single-product form.cart .quantity,
body.woocommerce div.product form.cart .quantity,
body.single-product .summary form.cart .quantity {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.single-product form.cart .quantity input.qty {
    display: block !important;
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   2. CART FORM LAYOUT (all viewports — flex row, gap, alignment)
   ════════════════════════════════════════════════════════════════════════ */
body.single-product form.cart,
body.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 18px !important;
    font-family: 'Figtree', sans-serif !important;
}

body.single-product .woocommerce-variation-add-to-cart,
body.single-product .variations_button {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   3. BUY NOW BUTTON — LEFT, WHITE BG, GREEN BORDER
   ════════════════════════════════════════════════════════════════════════ */
body.single-product form.cart #ss-ext-buy-now-btn,
body.single-product #ss-ext-buy-now-btn,
body button#ss-ext-buy-now-btn {
    order: 1 !important;
    flex: 1 1 0% !important;
    flex-grow: 1 !important;
    min-width: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    height: var(--ss-cta-h-desktop) !important;
    min-height: var(--ss-cta-h-desktop) !important;
    padding: 0 22px !important;
    margin: 0 !important;
    line-height: 1 !important;

    background-color: var(--ss-cta-white) !important;
    background-image: none !important;
    color: var(--ss-cta-green-deep) !important;
    border: 1.5px solid var(--ss-cta-green-deep) !important;
    border-radius: var(--ss-cta-radius) !important;
    box-shadow: 0 2px 8px rgba(15, 79, 42, 0.06) !important;

    font-family: 'Figtree', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition: background-color var(--ss-cta-ease),
                color var(--ss-cta-ease),
                border-color var(--ss-cta-ease),
                box-shadow var(--ss-cta-ease),
                transform var(--ss-cta-ease) !important;
}

body button#ss-ext-buy-now-btn:hover {
    background-color: var(--ss-cta-green-deep) !important;
    color: var(--ss-cta-white) !important;
    border-color: var(--ss-cta-green-deep) !important;
    box-shadow: var(--ss-cta-shadow-md) !important;
    transform: translateY(-1px) !important;
}

body button#ss-ext-buy-now-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(15, 79, 42, 0.18) !important;
}

body button#ss-ext-buy-now-btn:disabled,
body button#ss-ext-buy-now-btn[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background-color: var(--ss-cta-white) !important;
    color: var(--ss-cta-green-deep) !important;
    box-shadow: none !important;
}

body button#ss-ext-buy-now-btn .ss-cta-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   4. ADD TO BAG BUTTON — RIGHT, GREEN SOLID
   ════════════════════════════════════════════════════════════════════════ */
body.single-product form.cart .single_add_to_cart_button,
body.woocommerce div.product form.cart .single_add_to_cart_button {
    order: 2 !important;
    flex: 1 1 0% !important;
    flex-grow: 1.25 !important;
    min-width: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    height: var(--ss-cta-h-desktop) !important;
    min-height: var(--ss-cta-h-desktop) !important;
    padding: 0 26px !important;
    margin: 0 !important;
    line-height: 1 !important;

    background-color: var(--ss-cta-green-deep) !important;
    background-image: none !important;
    color: var(--ss-cta-white) !important;
    border: 1.5px solid var(--ss-cta-green-deep) !important;
    border-radius: var(--ss-cta-radius) !important;
    box-shadow: var(--ss-cta-shadow-soft) !important;

    font-family: 'Figtree', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition: background-color var(--ss-cta-ease),
                color var(--ss-cta-ease),
                border-color var(--ss-cta-ease),
                box-shadow var(--ss-cta-ease),
                transform var(--ss-cta-ease) !important;
}

body.single-product form.cart .single_add_to_cart_button:hover,
body.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: #0a3d20 !important;
    border-color: #0a3d20 !important;
    color: var(--ss-cta-white) !important;
    box-shadow: var(--ss-cta-shadow-md) !important;
    transform: translateY(-1px) !important;
}

body.single-product form.cart .single_add_to_cart_button:active {
    transform: translateY(0) !important;
    box-shadow: var(--ss-cta-shadow-soft) !important;
}

body.single-product form.cart .single_add_to_cart_button.disabled,
body.single-product form.cart .single_add_to_cart_button:disabled,
body.single-product form.cart .single_add_to_cart_button[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background-color: var(--ss-cta-green-deep) !important;
    border-color: var(--ss-cta-green-deep) !important;
    box-shadow: none !important;
}

body.single-product form.cart .single_add_to_cart_button.loading {
    color: transparent !important;
    pointer-events: none !important;
}

body.single-product form.cart .single_add_to_cart_button .ss-cta-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   5. STICKY MOBILE FOOTER (default hidden)
   ════════════════════════════════════════════════════════════════════════ */
.ss-cta-sticky-bar {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   6. MOBILE / TABLET (≤1024px)
       Breakpoint chosen at 1024px so both phones AND tablets get sticky.
       Desktop kicks in at ≥1025px.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── 6a. Hide in-summary buttons (DOM kept alive for WC) ─────── */
    body.single-product form.cart .single_add_to_cart_button,
    body.woocommerce div.product form.cart .single_add_to_cart_button,
    body.single-product form.cart #ss-ext-buy-now-btn,
    body button#ss-ext-buy-now-btn {
        position: absolute !important;
        left: -9999px !important;
        top: auto !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        box-shadow: none !important;
        transform: none !important;
        flex: 0 0 auto !important;
    }

    /* Collapse cart form gap on mobile so there's no empty space */
    body.single-product form.cart,
    body.woocommerce div.product form.cart {
        gap: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }


    /* ── 6b. Hide WoodMart bottom mobile nav ONLY on product pages ── */
    body.single-product .wd-prefooter,
    body.single-product .wd-mobile-nav,
    body.single-product .whb-mobile-nav-wrapper,
    body.single-product .whb-mobile-nav,
    body.single-product .wd-mob-nav,
    body.single-product .wd-bottom-bar,
    body.single-product .wd-sticky-nav-mobile,
    body.single-product .wd-mobile-bottom-nav,
    body.single-product #wd-mobile-nav,
    body.single-product nav.wd-nav-mobile,
    body.single-product .wd-tools-element.wd-mobile-nav,
    body.single-product .whb-mobile,
    body.single-product .whb-row-mobile-bottom {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* WoodMart's own sticky add-to-cart — disable to avoid double-bar */
    body.single-product .wd-sticky-atc,
    body.single-product.wd-stick-atc-on .wd-sticky-atc {
        display: none !important;
    }


    /* ── 6c. STICKY CTA FOOTER ─────────────────────────────────── */
    body.single-product .ss-cta-sticky-bar {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9990 !important;

        gap: 12px !important;
        padding: 12px 14px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;

        background: var(--ss-cta-white) !important;
        border-top: 1px solid var(--ss-cta-line) !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        box-shadow: var(--ss-cta-shadow-bar) !important;

        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: transform 300ms cubic-bezier(.4,0,.2,1),
                    opacity 220ms ease !important;

        backdrop-filter: saturate(120%) !important;
        -webkit-backdrop-filter: saturate(120%) !important;
    }

    body.single-product .ss-cta-sticky-bar.ss-cta-hidden {
        transform: translateY(120%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* ── 6d. Mirror buttons (base) ─────────────────────────────── */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn {
        flex: 1 1 0% !important;
        height: var(--ss-cta-h-mobile) !important;
        min-height: var(--ss-cta-h-mobile) !important;
        padding: 0 16px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;

        font-family: 'Figtree', sans-serif !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
        text-transform: none !important;
        border-radius: var(--ss-cta-radius-btn) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        position: relative !important;

        transition: background-color var(--ss-cta-ease),
                    color var(--ss-cta-ease),
                    border-color var(--ss-cta-ease),
                    box-shadow var(--ss-cta-ease),
                    transform 120ms ease !important;
    }

    /* Buy Now (LEFT, white, bordered) */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn--buynow {
        order: 1 !important;
        flex-grow: 1 !important;
        background-color: var(--ss-cta-white) !important;
        color: var(--ss-cta-green-deep) !important;
        border: 1.5px solid var(--ss-cta-green-deep) !important;
    }

    /* Add To Bag (RIGHT, green solid) */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag {
        order: 2 !important;
        flex-grow: 1.15 !important;
        background-color: var(--ss-cta-green-deep) !important;
        color: var(--ss-cta-white) !important;
        border: 1.5px solid var(--ss-cta-green-deep) !important;
        box-shadow: var(--ss-cta-shadow-soft) !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn:active {
        transform: scale(0.98) !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--buynow:active {
        background-color: #f7fbf8 !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag:active {
        background-color: #0a3d20 !important;
    }


    /* ── 6e. CHECK BAG state (gold/beige luxury) ────────────────── */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-added {
        background-color: var(--ss-cta-gold) !important;
        color: var(--ss-cta-ink) !important;
        border-color: var(--ss-cta-gold) !important;
        box-shadow: var(--ss-cta-shadow-gold) !important;
        letter-spacing: 0.06em !important;
        font-weight: 800 !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-added:active {
        background-color: var(--ss-cta-gold-deep) !important;
        color: var(--ss-cta-ink) !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-added.ss-cta-just-changed {
        animation: ssCtaPulse 700ms ease-out 1;
    }


    /* ── 6f. Disabled state ─────────────────────────────────────── */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn[disabled],
    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-disabled {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
        transform: none !important;
        pointer-events: none !important;
    }


    /* ── 6g. Loading state (synced from .single_add_to_cart_button.loading) ── */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-loading {
        color: transparent !important;
        pointer-events: none !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-loading::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 20px !important;
        height: 20px !important;
        margin: -10px 0 0 -10px !important;
        border: 2px solid currentColor !important;
        border-top-color: transparent !important;
        border-radius: 50% !important;
        animation: ssCtaSpin 0.7s linear infinite !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--buynow.ss-cta-loading::after {
        border-color: var(--ss-cta-green-deep) !important;
        border-top-color: transparent !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-loading::after {
        border-color: var(--ss-cta-white) !important;
        border-top-color: transparent !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-added.ss-cta-loading::after {
        border-color: var(--ss-cta-ink) !important;
        border-top-color: transparent !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-loading .ss-cta-icon,
    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-loading .ss-cta-btn-label {
        visibility: hidden !important;
    }


    /* ── 6h. Icons ──────────────────────────────────────────────── */
    body.single-product .ss-cta-sticky-bar .ss-cta-btn .ss-cta-icon {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        pointer-events: none !important;
        stroke-width: 1.85 !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn-label {
        display: inline-block !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }


    /* ── 6i. Body padding so content isn't covered ──────────────── */
    body.single-product {
        padding-bottom: calc(var(--ss-cta-h-mobile) + 36px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Push WoodMart's back-to-top above the sticky bar */
    body.single-product .wd-back-to-top {
        bottom: calc(var(--ss-cta-h-mobile) + 24px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9991 !important;
    }

    /* WC notices kept above the sticky bar */
    body.single-product .woocommerce-notices-wrapper,
    body.single-product .wc-block-components-notice-banner {
        margin-bottom: calc(var(--ss-cta-h-mobile) + 30px) !important;
    }

    /* Hide sticky bar on cart/checkout pages (extra safety) */
    body.woocommerce-cart .ss-cta-sticky-bar,
    body.woocommerce-checkout .ss-cta-sticky-bar {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   7. DESKTOP-ONLY GUARD (≥1025px)
       Never render the sticky bar above 1024px, even if JS injected it.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    body .ss-cta-sticky-bar {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   8. KEYFRAMES
   ════════════════════════════════════════════════════════════════════════ */
@keyframes ssCtaSpin {
    to { transform: rotate(360deg); }
}

@keyframes ssCtaPulse {
    0%   { transform: scale(1);   box-shadow: 0 0 0 0    rgba(201, 150, 58, 0.55); }
    60%  { transform: scale(1.02);box-shadow: 0 0 0 14px rgba(201, 150, 58, 0);    }
    100% { transform: scale(1);   box-shadow: 0 0 0 0    rgba(201, 150, 58, 0);    }
}


/* ════════════════════════════════════════════════════════════════════════
   9. ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════════ */
body.single-product #ss-ext-buy-now-btn:focus-visible,
body.single-product form.cart .single_add_to_cart_button:focus-visible,
body.single-product .ss-cta-sticky-bar .ss-cta-btn:focus-visible {
    outline: 2px solid var(--ss-cta-green-deep) !important;
    outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
    body.single-product #ss-ext-buy-now-btn,
    body.single-product form.cart .single_add_to_cart_button,
    body.single-product .ss-cta-sticky-bar,
    body.single-product .ss-cta-sticky-bar .ss-cta-btn {
        transition: none !important;
    }

    body.single-product .ss-cta-sticky-bar .ss-cta-btn.ss-cta-loading::after,
    body.single-product .ss-cta-sticky-bar .ss-cta-btn--addbag.ss-cta-added.ss-cta-just-changed {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * END — ss-cta.css v3
 * ═══════════════════════════════════════════════════════════════════════════ */