/* ==========================================================
   ANAJI PADMAJI & BROTHERS — RESPONSIVE / MOBILE TOUCH CSS
   Single clean source. No duplicate rules. No z-index wars.
   Z-INDEX SCALE: header/nav=100 | mobile dropdown=150 |
   nav overlay=160 | floating widgets=200-210 | cart=300
   ========================================================== */

a, button, .btn, .pro-card, .product-card, .apple-card, .cart-item {
    touch-action: manipulation !important;
}

header, .navbar, nav {
    position: relative;
    z-index: 100 !important;
}

@media (max-width: 768px) {
    #nav-links {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #111111 !important;
        padding: 24px 0 !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9) !important;
        z-index: 150 !important;
        pointer-events: auto !important;
    }
    #nav-links.active { display: flex !important; }
    #nav-links a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 1.1rem !important;
        padding: 14px 20px !important;
        text-align: center !important;
        color: #f5f5f5 !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
        pointer-events: auto !important;
    }
    #nav-links a:hover {
        background: rgba(212, 175, 55, 0.1) !important;
        color: #D4AF37 !important;
    }
}

#nav-overlay { z-index: 160 !important; }
#nav-overlay:not(.active) { pointer-events: none !important; }

.wa-widget-container {
    position: fixed !important;
    right: 24px !important;
    bottom: 28px !important;
    z-index: 200 !important;
}
.wa-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
}
.wa-actions .wa-float-btn {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
}
.wa-widget-box { z-index: 210 !important; }

@media (max-width: 768px) {
    .wa-widget-container {
        right: 14px !important;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .wa-actions { gap: 10px !important; }
    .wa-actions .wa-float-btn {
        width: 48px !important; height: 48px !important;
        min-width: 48px !important; min-height: 48px !important;
    }
    .wa-actions .wa-float-btn svg { width: 24px !important; height: 24px !important; }
    .wa-widget-box {
        right: 0 !important; bottom: 0 !important;
        width: min(290px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
    }
}

@media (max-width: 390px) {
    .wa-widget-container {
        right: 12px !important;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .wa-actions { gap: 8px !important; }
    .wa-actions .wa-float-btn {
        width: 46px !important; height: 46px !important;
        min-width: 46px !important; min-height: 46px !important;
    }
}

/* Legacy floating-button classes kept for backward-compat (harmless if unused) */
.floating-action-buttons, .wa-float-container, .support-float {
    position: fixed !important;
    right: 35px !important;
    bottom: 35px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    z-index: 200 !important;
}
.phone-float-btn, .wa-btn-toggle {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    text-decoration: none !important;
}
@media (max-width: 768px) {
    .floating-action-buttons, .wa-float-container, .support-float {
        right: 18px !important; bottom: 85px !important; gap: 12px !important;
    }
    .phone-float-btn, .wa-btn-toggle { width: 46px !important; height: 46px !important; }
}

#cart-sidebar, .cart-sidebar, .side-cart { z-index: 300 !important; }

html, body { max-width: 100vw; overflow-x: hidden; }

/* =========================================================
   MOBILE PERFORMANCE / TOUCH STABILITY — 2026-08-23
   ========================================================= */

@media (max-width: 768px) {

    /* Never allow inactive overlays to steal taps */
    #nav-overlay:not(.active),
    #side-cart-overlay:not(.active),
    .side-cart-overlay:not(.active),
    .modal-overlay:not(.active),
    .search-overlay:not(.active) {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Keep active overlays interactive */
    #nav-overlay.active,
    #side-cart-overlay.active,
    .side-cart-overlay.active,
    .modal-overlay.active,
    .search-overlay.active {
        pointer-events: auto !important;
    }

    /* Prevent invisible fixed layers from blocking the page */
    [aria-hidden="true"] {
        pointer-events: none !important;
    }

    /* Stable mobile tap behavior */
    button,
    a,
    input,
    select,
    textarea,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

    /* Reduce expensive animations on phones */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Don't let backdrop blur kill low-end phones */
    .side-cart-overlay,
    .nav-overlay,
    #nav-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Safe cart layering */
    .side-cart-overlay {
        z-index: 9000 !important;
    }

    .side-cart-drawer {
        z-index: 9001 !important;
    }

    .side-cart-drawer button,
    .side-cart-drawer a {
        position: relative !important;
        z-index: 9002 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Reduce accidental parent-card click interception */
    .pro-card button,
    .pro-card a,
    .product-card button,
    .product-card a {
        position: relative;
        z-index: 5;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Don't render huge decorative fixed layers above content */
    canvas,
    .particles,
    .particle-canvas,
    .background-canvas {
        pointer-events: none !important;
    }

    /* Better mobile scrolling */
    html,
    body {
        overscroll-behavior-x: none;
    }
}

/* =========================================================
   MOBILE PERFORMANCE / TOUCH STABILITY — 2026-08-23
   ========================================================= */

@media (max-width: 768px) {

    /* Never allow inactive overlays to steal taps */
    #nav-overlay:not(.active),
    #side-cart-overlay:not(.active),
    .side-cart-overlay:not(.active),
    .modal-overlay:not(.active),
    .search-overlay:not(.active) {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Keep active overlays interactive */
    #nav-overlay.active,
    #side-cart-overlay.active,
    .side-cart-overlay.active,
    .modal-overlay.active,
    .search-overlay.active {
        pointer-events: auto !important;
    }

    /* Prevent invisible fixed layers from blocking the page */
    [aria-hidden="true"] {
        pointer-events: none !important;
    }

    /* Stable mobile tap behavior */
    button,
    a,
    input,
    select,
    textarea,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

    /* Reduce expensive animations on phones */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    /* Don't let backdrop blur kill low-end phones */
    .side-cart-overlay,
    .nav-overlay,
    #nav-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Safe cart layering */
    .side-cart-overlay {
        z-index: 9000 !important;
    }

    .side-cart-drawer {
        z-index: 9001 !important;
    }

    .side-cart-drawer button,
    .side-cart-drawer a {
        position: relative !important;
        z-index: 9002 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Reduce accidental parent-card click interception */
    .pro-card button,
    .pro-card a,
    .product-card button,
    .product-card a {
        position: relative;
        z-index: 5;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Don't render huge decorative fixed layers above content */
    canvas,
    .particles,
    .particle-canvas,
    .background-canvas {
        pointer-events: none !important;
    }

    /* Better mobile scrolling */
    html,
    body {
        overscroll-behavior-x: none;
    }
}

/* =========================================================
   RIGHT-SIDE TAP FIX — WhatsApp chat popup was missing the
   same "inactive = no pointer-events" guard other overlays
   (#nav-overlay, .search-overlay, .side-cart-overlay) already
   have. Covers whichever toggle class the JS actually uses.
   ========================================================= */
.wa-widget-box {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.wa-widget-box.active,
.wa-widget-box.open,
.wa-widget-box.show {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}