/* ==============================================================================
   Sticky CTA Bar — WhatsApp + Call Now  (mobile + desktop responsive)
   ------------------------------------------------------------------------------
   Markup ...... Views/Shared/_StickyCta.cshtml
   Settings .... Configuration/StickyCtaSettings.cs   (appsettings.json → "StickyCta")
   Loaded by ... Views/Shared/_ThemeLayout.cshtml
   Preview ..... /HtmlPage/sticky-cta-preview.html  (static — DB ke bina test karo)

   Desktop pill centering: left/right 0 + width: fit-content + margin: 0 auto
   (`left: 50%` + `width: auto` use nahi kiya — us case me fit-content sirf 50%
   viewport tak allow hota hai, pill 640px me atak jaata hai aur offer text
   patli column me 4 lines tak toot jaata hai.)

   Theme ke z-index landmarks — inhe hamesha dhyan me rakho:
     #validthemes-loader (preloader) ................ 20000
     .wds-sticky-cta (ye bar) ....................... 19900
     mobile drawer / #navbar-menu.collapse.show .....  9999
     .sticked (sticky navbar) .......................  9999

   Isliye default z-index 19900 hai: navbar ke UPAR, par preloader ke NEECHE.
   Bump karna pade to sirf --wds-cta-z badlo.

   ⚠️ MOBILE MENU — sabse zaroori hissa:
   Theme ka mobile menu (~1023px tak) ek fixed drawer hai (`height: 100%`,
   z-index 9999) jo viewport ke ~85% area cover karta hai. Bar ka z-index usse
   zyada hai, isliye drawer khulne par bar drawer ke UPAR aa jaata — user ko
   lagta hai "bar everything ke upar hai, kuch kaam nahi kar raha".

   Solution (2 layers, ek doosre ke backup):
     1. CSS-only  → `body:has(.navbar-collapse.collapse-mobile.show)` /
        `:has(.overlay-screen.opened)` se bar turant neeche slide + fade ho kar
        hide ho jaata hai. JS fail ho ya late load ho, tab bhi kaam karta hai.
     2. JS        → sticky-cta.js wahi state `.wds-sticky-cta--hidden` class se
        lagata hai (+ aria-hidden/inert), taaki purane browsers (`:has()` ke bina)
        bhi cover ho jaayein aur hidden bar ke buttons focusable na rahein.

   Pehle yahan `--wds-cta-lift` (bar ko drawer ki height jitna UPAR khiskana)
   use hota tha — usse bar screen se bahar jaata tha par "hide" nahi hota tha
   (aadha-aadha dikhta / footer spacing bhi jump karti thi). Ab bar seedha hide
   hota hai aur menu band hote hi wapas aa jaata hai.
   ============================================================================== */
:root {
    --wds-cta-z: 19900;
    /* Bar ka bottom offset (kahan baithta hai) */
    --wds-cta-fit: 0px;
    /* Bar ki height — sticky-cta.js isko bar ki ASLI height se update karta hai
       (html element par, taaki --wds-cta-space ka calc() yahan :root par bhi
       nayi value pakde). Ye value sirf JS-off / first paint ka fallback hai. */
    --wds-cta-height: 116px;
    /* Footer ko milne wali jagah. Mobile menu khulne par bar HIDE hota hai
       (upar shift nahi), isliye ye value menu state se badalti nahi — footer
       layout stable rehta hai. */
    --wds-cta-space: calc(var(--wds-cta-height) + var(--wds-cta-fit));
    --wds-cta-brand: #6C63FF;
    --wds-cta-brand-dark: #4B43D6;
    --wds-cta-wa: #25D366;
    --wds-cta-wa-dark: #128C7E;
    --wds-cta-ink: #1A1A2E;
}

/* ==============================================================================
   1. Bar (mobile-first: full width, bottom pe chipka hua)
   ============================================================================== */
.wds-sticky-cta {
    display: block;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: var(--wds-cta-fit) !important;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    /* !important isliye zaroori hai kyunki theme/GSAP is box par apne transforms
       laga dete hain. Default state = koi shift nahi (translate3d(0,0,0)), aur
       hide state neeche .wds-sticky-cta--hidden me apna transform override karta
       hai (zyada specific selector + baad me aata hai => wahi jeet-ta hai). */
    transform: translate3d(0, 0, 0) !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
    text-align: center;
    box-sizing: border-box;
    z-index: var(--wds-cta-z) !important;
    /* Shine animation ka repaint sirf isi box tak seemit rahe.
       (paint containment jaan-boojh ke nahi lagaya — warna button ka
        glow / box-shadow cut ho jaata hai) */
    contain: layout style;
    /* Fixed bar ko apni compositor layer do: scroll ke dauran (pricing jaisi
       heavy sections par) repaint/flicker kam ho. */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    animation: wds-cta-fade .35s ease-out both;
    /* transform + opacity => mobile menu khulte/band hote waqt bar smoothly
       neeche slide karke hide hota hai aur wapas upar aata hai (jerk nahi).
       `visibility .3s` ka trick: visible→hidden par value transition ke END par
       flip hoti hai (tab tak bar dikhta rehta hai), hidden→visible par turant
       visible — isliye alag se transition-delay likhne ki zaroorat nahi. */
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, visibility .3s;
}

    .wds-sticky-cta,
    .wds-sticky-cta *,
    .wds-sticky-cta *::before,
    .wds-sticky-cta *::after {
        box-sizing: border-box;
    }

        /* ---------- MOBILE MENU / SIDE PANEL khula ho => bar HIDE ----------
   Hide triggers:
     • .wds-sticky-cta--hidden ......... sticky-cta.js lagata hai (class toggle)
     • body.on-side .................... desktop ka off-canvas "side" panel
     • :has(.collapse-mobile.show) ..... validnavs drawer khula (CSS-only fallback)
     • :has(.overlay-screen.opened) .... drawer ka dark overlay (CSS-only fallback)

   IMPORTANT: JS class / body.on-side rule ko :has() selectors se alag rakha hai.
   CSS me comma-separated selector list unforgiving hoti hai: jis browser ko
   :has() samajh nahi aata, woh poori mixed list drop kar sakta hai — tab JS class
   fallback bhi bekaar ho jaata. Is split se old browsers me JS fallback bachta hai.

   Bar ko apni height + bottom offset jitna NEECHE khiskate hain => poori tarah
   viewport se bahar, box-shadow ke liye 12px extra. `visibility: hidden` +
   `pointer-events: none` se hidden bar par tap/focus nahi jaata. */
        .wds-sticky-cta.wds-sticky-cta--hidden,
        body.on-side .wds-sticky-cta {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(0, calc(100% + var(--wds-cta-fit) + env(safe-area-inset-bottom, 0px) + 12px), 0) !important;
        }

/* Modern-browser CSS fallback: JS unavailable/late ho tab bhi drawer par hide.
   Ye :has() selectors jaan-boojh kar apne alag rule me hain, upar wale JS
   compatibility fallback ko older browsers me valid rakhne ke liye. */
body:has(.navbar-collapse.collapse-mobile.show) .wds-sticky-cta,
body:has(.overlay-screen.opened) .wds-sticky-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + var(--wds-cta-fit) + env(safe-area-inset-bottom, 0px) + 12px), 0) !important;
}

.wds-sticky-cta__inner {
    max-width: 560px;
    margin: 0 auto;
}

/* ---------- Offer line (buttons ke upar) ---------- */
.wds-sticky-cta__offer {
    margin: 0 0 8px;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .1px;
    color: var(--wds-cta-ink);
}

    .wds-sticky-cta__offer a {
        color: inherit;
        text-decoration: none;
    }

        .wds-sticky-cta__offer a:hover,
        .wds-sticky-cta__offer a:focus-visible {
            color: var(--wds-cta-brand-dark);
            text-decoration: underline;
        }

/* ---------- Buttons row ----------
   grid-auto-columns: 1fr => 2 buttons ho ya 1 (config se WhatsApp off),
   dono case me available width barabar baant lete hain. */
.wds-sticky-cta__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

/* ==============================================================================
   2. Buttons
   ============================================================================== */
.wds-cta-btn {
    position: relative;
    overflow: hidden; /* shine sweep isi box ke andar rehti hai */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* thumb-friendly tap target (WCAG 44px+) */
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    color: #fff !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

    .wds-cta-btn i {
        font-size: 17px;
        line-height: 1;
    }

.wds-cta-btn--whatsapp {
    background-image: linear-gradient(135deg, var(--wds-cta-wa), var(--wds-cta-wa-dark));
    box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
}

.wds-cta-btn--call {
    background-image: linear-gradient(135deg, var(--wds-cta-brand), var(--wds-cta-brand-dark));
    box-shadow: 0 6px 18px rgba(108, 99, 255, .32);
}

@media (hover: hover) and (pointer: fine) {
    .wds-cta-btn:hover {
        color: #fff !important;
        transform: translateY(-2px);
        filter: brightness(1.05);
    }
}

    .wds-cta-btn:active {
        transform: translateY(0) scale(.985);
    }

    .wds-cta-btn:focus-visible {
        outline: 3px solid #FFB703;
        outline-offset: 2px;
    }

    /* Phone number mobile par jagah kha jaata hai — sirf tablet/desktop par dikhao */
    .wds-cta-btn__num {
        display: none;
    }

    /* ---------- Shine sweep (::after) ---------- */
    .wds-cta-btn::after {
        content: "";
        position: absolute;
        top: -25%;
        bottom: -25%;
        left: -60%;
        width: 45%;
        background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
        transform: translateX(0) skewX(-18deg);
        pointer-events: none;
        animation: wds-cta-shine 5s ease-in-out infinite;
    }

    .wds-cta-btn--call::after {
        animation-delay: .7s; /* dono buttons ek saath chamak kar cheap na lagein */
    }

    @keyframes wds-cta-shine {
        0% {
            transform: translateX(0) skewX(-18deg);
        }

        14% {
            transform: translateX(380%) skewX(-18deg);
        }

        100% {
            transform: translateX(380%) skewX(-18deg);
        }
    }

    @keyframes wds-cta-fade {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ==============================================================================
   3. Footer ko bar ke liye jagah (warna copyright/social row bar ke neeche chhup
      jaati hai). JS "has-sticky-cta" class aur exact height set karta hai;
      ye CSS fallback hai (JS off / JS load hone se pehle).
      Chhota ">" ke bajaye descendant selector — theme ke scripts body ke andar
      wrapper div daal dete hain, tab bhi footer match hona chahiye.
   ============================================================================== */
    /* JS fallback selectors intentionally stay separate from :has(): browsers
   without :has() must still honor the body.has-sticky-cta class. */
    body.has-sticky-cta footer.footer,
    body.has-sticky-cta footer.footer-style-one {
        padding-bottom: var(--wds-cta-space) !important;
    }

    /* Modern-browser fallback if JS has not added the body class yet. */
    body:has(.wds-sticky-cta) footer.footer,
    body:has(.wds-sticky-cta) footer.footer-style-one {
        padding-bottom: var(--wds-cta-space) !important;
    }

    /* Desktop ka off-canvas "side" panel (validnavs body.on-side) aur mobile drawer
   khulne par bar hide karne ka rule section 1 me hai — ".wds-sticky-cta--hidden"
   wala block dekho (ek hi jagah saara hide logic, duplicate nahi). */

    /* ==============================================================================
   4. Responsive breakpoints
   ============================================================================== */

    /* ---------- Bahut chhote phones (≤ 360px) ---------- */
    @media (max-width: 360px) {
        .wds-sticky-cta__offer {
            font-size: 12px;
        }

        .wds-cta-btn {
            gap: 6px;
            padding: 11px 8px;
            font-size: 13.5px;
        }

            .wds-cta-btn i {
                font-size: 15px;
            }
    }

    /* ---------- Tablets (768px – 991px): full-width bar, thoda sa bada ---------- */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .wds-sticky-cta {
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        }

        .wds-sticky-cta__inner {
            max-width: 720px;
        }

        .wds-sticky-cta__offer {
            font-size: 14px;
        }

        .wds-sticky-cta__actions {
            max-width: 560px;
        }
    }

    /* ---------- Desktop / laptop (≥ 992px): centered floating pill ---------- */
    @media (min-width: 992px) {
        :root {
            --wds-cta-fit: 18px; /* pill screen ke kinare se thoda upar float kare */
            --wds-cta-height: 84px; /* pill ~70px + breathing room (JS exact karta hai) */
        }

        .wds-sticky-cta {
            /* Pill = content ki width, screen ke beech me.
           ⚠️ `left: 50%` + `width: auto` (shrink-to-fit) use NAHI kiya: us case me
           browser fit-content ko sirf 50% viewport tak hi allow karta hai, pill
           640px (1280 par) me atak jaata hai aur offer text 4 lines me toot jaata.
           left/right 0 + width: fit-content + margin auto => poori width available,
           content ke hisaab se pill, perfectly centered. */
            left: 0 !important;
            right: 0 !important;
            width: fit-content;
            max-width: calc(100% - 40px);
            margin: 0 auto !important;
            padding: 12px 16px;
            border-radius: 999px;
            box-shadow: 0 18px 44px rgba(26, 26, 46, .22), 0 3px 8px rgba(26, 26, 46, .10);
        }

        /* Ek hi line: offer text left, buttons right */
        .wds-sticky-cta__inner {
            display: flex;
            align-items: center;
            gap: 18px;
            max-width: 940px;
        }

        /* ⚠️ flex: 1 1 auto + min-width: 0 => offer line baaki jagah leti hai.
       Iske bina pill ki width content se banti hai, offer text ek patli
       column me squeeze ho ke 3-4 lines me toot jaata hai (pill 105px+ tall). */
        .wds-sticky-cta__offer {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            font-size: 15px;
            text-align: left;
        }

        .wds-sticky-cta__actions {
            display: flex;
            flex: 0 0 auto;
            gap: 10px;
            max-width: none;
            margin: 0;
        }

        .wds-cta-btn {
            flex: 0 0 auto;
            min-height: 46px;
            padding: 12px 22px;
            border-radius: 999px;
        }

        .wds-cta-btn__num {
            display: inline;
            font-weight: 600;
            opacity: .92;
        }

        /* appsettings me "ShowOnDesktop": false => bar sirf mobile/tablet par */
        .wds-sticky-cta--mobile-only {
            display: none !important;
        }
    }

    /* ---------- Accessibility: motion kam karo ---------- */
    @media (prefers-reduced-motion: reduce) {
        .wds-sticky-cta {
            animation: none;
            transition: none;
        }

        .wds-cta-btn,
        .wds-cta-btn::after {
            animation: none;
            transition: none;
        }

            .wds-cta-btn:hover,
            .wds-cta-btn:active {
                transform: none;
            }
    }

    /* ---------- Print / PDF (pricing PDF me CTA bar ka kya kaam) ---------- */
    @media print {
        .wds-sticky-cta {
            display: none !important;
        }
    }