/* ================================================================
   GovindRajbhar — UI STABILIZATION v2.0
   Brand:  PRIMARY  #138808 | SECONDARY #1f2937 | ACCENT #f59e0b
   Author: Antigravity
   Scope:  ALL stabilization rules — loaded LAST so they win
   Rules:
     - No purple, no neon, no gaming colors
     - No z-index above 1200
     - Exactly 3 floating buttons (WhatsApp, Call, AI)
     - PWA popup: once per session, 20s delay, session-only
     - Clean Ayurveda professional theme
   ================================================================ */

/* ── §1  BRAND DESIGN SYSTEM ──────────────────────────────────── */
:root {
    --brand-primary:    #138808;    /* Ayurvedic Green (PRIMARY) */
    --brand-secondary:  #1f2937;    /* Professional Charcoal (SECONDARY) */
    --brand-accent:     #f59e0b;    /* Warm Amber/Gold (ACCENT) */
    --brand-light:      #f0fdf4;    /* Light green tint */
    --brand-white:      #ffffff;
    --brand-bg:         #f8fafc;

    /* Legacy aliases — keep for backward compat */
    --primary-green:    #138808;
    --dark-green:       #1f2937;
    --orange-cta:       #f59e0b;
    --orange-hover:     #d97706;

    /* Text */
    --text-primary:     #1f2937;
    --text-muted:       #6b7280;
    --text-light-muted: #9ca3af;

    /* Borders */
    --border-light:     #e5e7eb;
    --border-medium:    #d1d5db;
}

/* ── §2  GLOBAL BOX MODEL ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: 'Poppins', 'Inter', sans-serif;
}

img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* ── §3  STRICT Z-INDEX HIERARCHY ─────────────────────────────── */
/*
  Level 0    : Regular content
  Level 900  : Floating Buttons (FABs, AI launcher, install pill)
  Level 999  : Legacy navbar stub
  Level 1000 : Header Navbar (sticky)
  Level 1050 : Overlay backdrops
  Level 1100 : Sidebars / Mobile drawer
  Level 1200 : Popups, modals, AI chat window
  ── NOTHING above 1200 ──
*/

/* 1. Floating Buttons */
.floating-actions,
.gw-wrap,
#footer-install-pill {
    z-index: 900 !important;
}

/* 2. Header */
.hdr-navbar,
#hdrNavbar,
.navbar {
    z-index: 1000 !important;
}

/* 3. Overlay Backdrops */
.hdr-overlay,
.admin-sidebar-overlay,
.user-sidebar-overlay {
    z-index: 1050 !important;
}

/* 4. Sidebars / Drawer */
.hdr-drawer,
.admin-sidebar,
.user-sidebar {
    z-index: 1100 !important;
}

/* 5. Popups / Modals / AI Window */
#pwa-popup,
#smartKitPopup,
.gw-window,
.modal,
.modal-backdrop {
    z-index: 1200 !important;
}

/* ── Strip ALL inline z-index abuse (99999, 9999, 9998, 9000…) ── */
[style*="z-index: 9999999"], [style*="z-index:9999999"],
[style*="z-index: 999999"],  [style*="z-index:999999"],
[style*="z-index: 99999"],   [style*="z-index:99999"],
[style*="z-index: 9999"],    [style*="z-index:9999"],
[style*="z-index: 9998"],    [style*="z-index:9998"],
[style*="z-index: 9997"],    [style*="z-index:9997"] {
    z-index: 1200 !important;
}
[style*="z-index: 9985"], [style*="z-index:9985"],
[style*="z-index: 9000"], [style*="z-index:9000"],
[style*="z-index: 999"],  [style*="z-index:999"] {
    z-index: 900 !important;
}

/* ── §4  BRAND COLOUR ENFORCEMENT ─────────────────────────────── */
/* Remove ALL purple/neon instances */
.badge-shipped {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    border-color: #bae6fd !important;
}

/* Primary action buttons → brand green */
.btn-cta,
.btn-primary,
.hdr-btn-cta,
.hdr-drawer-cta {
    background: var(--brand-primary) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(19,136,8,0.3);
}
.btn-cta:hover,
.btn-primary:hover,
.hdr-btn-cta:hover,
.hdr-drawer-cta:hover {
    background: #0f6c06 !important;
    color: #fff !important;
}

/* Accent/gold CTA */
.btn-cta-accent {
    background: var(--brand-accent) !important;
    color: var(--brand-secondary) !important;
    font-weight: 700;
}
.btn-cta-accent:hover {
    background: var(--orange-hover) !important;
}

/* btn-orange → use amber/gold accent (not random red/neon) */
.btn-orange { background: #f97316; color: #fff; }
.btn-orange:hover { background: #ea580c; }

/* ── §5  HEADER RECOVERY ──────────────────────────────────────── */
/* Sticky navbar */
.hdr-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Logo constrained */
.hdr-logo img,
.hdr-logo svg {
    height: 44px;
    width: auto;
    max-width: 44px;
    object-fit: contain;
}

/* Logo name — responsive, no overflow */
.hdr-logo-name {
    font-size: clamp(0.85rem, 2.5vw, 1.05rem);
    line-height: 1.2;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #138808;
    font-weight: 800;
}

/* Navbar inner container */
.hdr-navbar .container {
    align-items: center;
    min-height: 62px;
}

/* Topbar wrap */
.hdr-topbar .container {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Mobile: compact logo */
@media (max-width: 480px) {
    .hdr-logo img,
    .hdr-logo svg { height: 38px; }
    .hdr-logo-tagline { display: none; }
}

/* ── §6  HERO SECTION RECOVERY ────────────────────────────────── */
.hero-new,
.hero-section,
[class*="hero-"] {
    position: relative;
    overflow: hidden;
}

/* Responsive heading */
.hero-title {
    font-size: clamp(1.6rem, 4.5vw, 3rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    color: var(--brand-secondary);
    font-weight: 800;
}

/* CTA row — never overlaps floating buttons */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-bottom: 0.5rem;
}

/* Hero images */
.hero-image-block img,
.hero-image-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── §7  PRODUCT CARD SYSTEM ──────────────────────────────────── */
.kit-card,
.product-card,
.clean-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Fixed 4:3 image ratio */
.kit-card .kit-image-wrap,
.product-card .card-image,
.product-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: var(--brand-bg);
    flex-shrink: 0;
}

.kit-card .kit-image-wrap img,
.product-card .card-image img,
.product-card-img-wrap img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

/* CTA button always at bottom */
.kit-cta,
.product-card .card-cta {
    margin-top: auto;
}

/* Standard card buttons */
.kit-cta .btn,
.product-card .btn {
    width: 100%;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    font-weight: 700;
}
.kit-cta .btn:hover,
.product-card .btn:hover {
    background: #0f6c06;
}

/* Product grid */
.kit-grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .kit-grid,
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ── §8  FLOATING BUTTONS — EXACTLY 3, NO DUPLICATES ─────────── */
/* WhatsApp + Call FABs — left side */
.floating-actions {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 900;
}

/* AI widget — right side, already correct in footer.php */
.gw-wrap {
    position: fixed;
    bottom: 88px;
    right: 20px;
    z-index: 900;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .floating-actions {
        bottom: 16px;
        left: 14px;
        gap: 8px;
    }
    .gw-wrap {
        bottom: 84px;
        right: 14px;
    }
}

/* When drawer is open — hide ALL floating widgets (pointer-events only) */
body.drawer-is-open .floating-actions,
body.drawer-is-open .gw-wrap,
body.drawer-is-open #smartKitPopup,
body.drawer-is-open #pwa-popup,
body.drawer-is-open #footer-install-pill {
    pointer-events: none !important;
    visibility: hidden;
}

/* ── §9  FOOTER SAFE ZONE ─────────────────────────────────────── */
.footer {
    position: relative;
    z-index: 0;
    /* Never block footer with fixed overlays */
}

/* Keep floating buttons off the footer on desktop */
@media (min-width: 769px) {
    .floating-actions { bottom: 24px; }
    .gw-wrap { bottom: 100px; }
}

/* Body safe padding when sticky bars are visible */
body.has-sticky-cta { padding-bottom: 70px; }
body.has-sticky-bottom-bar { padding-bottom: 75px; }

/* ── §10  PWA POPUP — once per session, 20s, no overlap ─────── */
#pwa-popup {
    /* bottom/right positioning — away from footer CTAs */
    bottom: 90px !important;
    right: 20px !important;
    /* Max width: mobile safe */
    max-width: min(320px, calc(100vw - 40px));
}

/* On very small screens — position above FAB buttons */
@media (max-width: 480px) {
    #pwa-popup {
        bottom: 160px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: calc(100vw - 20px);
    }
}

/* Install pill — right side pill button */
#footer-install-pill {
    position: fixed;
    bottom: 170px;
    right: 20px;
    z-index: 900;
    background: #138808;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.6rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(19,136,8,0.35);
    display: none;        /* hidden by default — JS shows it */
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.2s;
    max-width: calc(100vw - 40px);
}
#footer-install-pill:hover { transform: translateY(-2px); background: #0f6c06; }

/* ── §11  CONTAINER & GRID ────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.grid-2, .grid-3 { display: grid; gap: 1.5rem; }

/* Tables always scrollable */
.table-responsive, .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ── §12  MOBILE RESPONSIVE ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Section headings */
    .section-heading h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }

    /* Buttons */
    .btn { min-height: 44px; font-size: 0.95rem; padding: 0.7rem 1.25rem; }

    /* iOS zoom prevention */
    input, select, textarea { font-size: 16px !important; }

    /* Hero section */
    .hero-new { padding: 3rem 0 2.5rem; min-height: auto; }
    .hero-subtitle { font-size: 1rem !important; margin-bottom: 1.5rem !important; }
    .hero-content-wrapper { gap: 2rem !important; }
    .hero-image-block { display: none; }

    /* Grid collapse */
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

    /* Contact & form cards */
    .contact-card { padding: 2rem 1.5rem; border-radius: 1rem; }
    .seva-form-card { padding: 1.5rem; border-radius: 1rem; }

    /* Footer single column */
    .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

    /* User layout */
    .user-layout { grid-template-columns: 1fr !important; }
    .mobile-sidebar-btn { display: flex !important; }

    /* Product page */
    .product-title { font-size: 1.75rem; }
    .price-large { font-size: 2rem; }
    .product-grid { grid-template-columns: 1fr !important; }

    /* Payment */
    .payment-wrapper { padding: 0.5rem; }
    .payment-card { padding: 1.5rem 1rem; }

    /* Checkout */
    .checkout-container { max-width: 100%; }
}

@media (max-width: 480px) {
    .container { padding-left: 12px; padding-right: 12px; }

    h2, .section-heading h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    .hero-title {
        font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
    }

    .btn { font-size: 0.88rem; padding: 0.65rem 1.1rem; }

    .product-title { font-size: 1.5rem; }

    /* Floating buttons stay left — never overlap AI on right */
    .floating-actions {
        bottom: 20px;
        left: 14px;
        right: auto;
    }
}

/* ── §13  TOUCH & TAP SAFETY ──────────────────────────────────── */
a, button, [role="button"],
input[type="submit"], input[type="button"] {
    touch-action: manipulation;
}

button, .btn, a.btn {
    max-width: 100%;
    word-break: break-word;
    touch-action: manipulation;
}

/* Safe tap targets on mobile */
@media (max-width: 768px) {
    a, button, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exceptions: inline text links */
    p a, li a, .footer-link, .footer-bottom-links a,
    .hdr-topbar-link, .hdr-nav-menu li a {
        min-height: unset;
        min-width: unset;
    }
}

/* Ensure important buttons are never blocked */
.hero-new .btn,
.hero-section .btn,
.product-card .btn,
.kit-cta .btn {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
}

/* ── §14  SIDEBAR SCROLL & ANIMATION ──────────────────────────── */
.hdr-drawer,
.user-sidebar,
.admin-sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-sidebar {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* User sidebar — sticky desktop, slide-in mobile */
.user-sidebar {
    position: sticky;
    top: 80px;
}

@media (max-width: 992px) {
    .user-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        height: 100vh;
        width: 280px;
        border-radius: 0;
        z-index: 1100;
        overflow-y: auto;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    .user-sidebar.open { left: 0; }
}

/* ── §15  FIXED ELEMENT WIDTH GUARD ───────────────────────────── */
/* Prevent horizontal scroll from fixed elements */
.floating-actions,
.gw-wrap,
#pwa-popup,
#footer-install-pill {
    max-width: calc(100vw - 28px);
}

/* ── §16  SCROLLBAR STYLING ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* ── §17  PERFORMANCE & ANIMATION ─────────────────────────────── */
img { height: auto; transition: opacity 0.3s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-src]) { opacity: 1; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── §18  ADMIN PANEL HELPERS ─────────────────────────────────── */
.admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.admin-sidebar-overlay.active { display: block; }

.user-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.user-sidebar-overlay.active { display: block; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.admin-content { padding: 1.5rem; }

/* ── §19  ADSENSE SAFE ZONE ───────────────────────────────────── */
.adsense-footer-anchor {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

body.has-anchor-ad .floating-actions { bottom: 80px !important; }
body.has-anchor-ad .gw-wrap { bottom: 90px !important; }

/* ── §20  PRINT SAFE ──────────────────────────────────────────── */
@media print {
    .hdr-navbar, .hdr-topbar, .footer,
    .floating-actions, .gw-wrap,
    #pwa-popup, #footer-install-pill,
    .admin-sidebar, .admin-topbar,
    .mobile-sidebar-btn { display: none !important; }

    body { overflow: visible !important; }
    .admin-main, .admin-content { margin-left: 0 !important; }
}

/* ── §21  TEXT LEGIBILITY ─────────────────────────────────────── */
p, h1, h2, h3, h4, h5, h6, span, li, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── §22  FOOTER COLUMN OVERRIDES ─────────────────────────────── */
@media (max-width: 1024px) {
    .admin-sidebar { left: calc(var(--sidebar-width, 260px) * -1); }
    .admin-sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.2); }
    .admin-main { margin-left: 0 !important; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── §23  TOPBAR MOBILE COMPACT ───────────────────────────────── */
@media (max-width: 400px) {
    .hdr-topbar-left a:last-child { display: none; }
    .hdr-topbar-offer { display: none !important; }
}