/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL RESET
   ========================================================================== */
:root {
    /* ── Brand Palette ──────────────────────────── */
    --color-primary: #00A859;
    --color-primary-dark: #007A41;
    --color-primary-light: #E8F7EF;
    --color-accent: #1A56DB;

    /* ── Semantic ───────────────────────────────── */
    --color-success: #16A34A;
    --color-danger: #DC2626;
    --color-warning: #D97706;

    /* ── Neutrals ───────────────────────────────── */
    --color-ink-900: #0F172A;
    --color-ink-600: #475569;
    --color-ink-300: #CBD5E1;
    --color-surface: #F8FAFC;
    --color-white: #FFFFFF;

    /* ── Typography ─────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Radius Scale ───────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* ── Shadows ────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);

    /* ── Backwards-compat aliases ───────────────── */
    --primary-green: var(--color-primary);
    --primary-color: var(--color-primary);
    --surface-gray: var(--color-surface);
    --text-dark: var(--color-ink-900);
    --android-shadow: var(--shadow-xs);
    --overlay-dark: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    --overlay-light: linear-gradient(135deg, rgba(0, 168, 89, 0.85), rgba(0, 122, 65, 0.90));

    /* ── Legacy aliases (resolve undefined var() references in older rule-sets) */
    --font-main: var(--font-sans);
    --bg-surface: var(--color-surface);
    --text-muted: var(--color-ink-600);
    --card-radius: var(--radius-md);
    --text-primary: var(--color-ink-900);
    --text-secondary: var(--color-ink-600);
    --primary-dark: var(--color-primary-dark);
}

body {
    font-family: var(--font-sans);
    color: var(--color-ink-900);
    margin: 0;
    padding: 0;
}

/* ========================================================================
   ENTERPRISE Z-INDEX ARCHITECTURE (LAYER SYSTEM)
   ========================================================================
   Centralized variables prevent z-index conflicts and make visual 
   hierarchy predictable. Higher numbers sit on top.
======================================================================== */

:root {
    /* --- LAYER 1: Navigation & Base Menus --- */
    --z-offcanvas-base: 9990;
    --z-offcanvas-menu: 9999;

    /* --- LAYER 2: Intermediate Workflows --- */
    --z-offcanvas-flow: 10001;

    /* --- LAYER 3: Product Data & Overlays --- */
    --z-offcanvas-product-base: 11112;
    --z-offcanvas-product-top: 11113;

    /* --- LAYER 4: App Utilities --- */
    --z-offcanvas-utility: 11120;

    /* --- LAYER 5: Critical Conversion (Highest Priority) --- */
    --z-offcanvas-critical: 11130;

    /* --- OVERLAY: Non-Bootstrap Sheets (must exceed --z-offcanvas-critical) --- */
    --z-overlay-variant: 11135;
    /* above all offcanvas panels including checkout */
    --z-overlay-coupon: 11140;
    /* backdrop: 11139, sheet: 11140 — highest priority */
}

/* ========================================================================
   OFFCANVAS ASSIGNMENTS
   ======================================================================== */

/* LAYER 1: Base Level Offcanvases */
.offcanvas-Search-Categories,
.offcanvas-Reorder-Section,
.offcanvas-My-account,
.offcanvas-BrandList-pages {
    z-index: var(--z-offcanvas-base) !important;
}

.offcanvas-side-categorys {
    z-index: var(--z-offcanvas-menu) !important;
}

/* LAYER 2: Workflow Layer — (offcanvas-Payment-Order promoted to Layer 5) */

/* LAYER 3: Product Displays */
.offcanvas-category-wise,
.offcanvas-Offers-wise,
.offcanvas-main-cat-browser {
    z-index: var(--z-offcanvas-product-base) !important;
}

.offcanvas-checkout-section,
.offcanvas-details-view,
.offcanvas-allprod-search-result {
    z-index: var(--z-offcanvas-product-top) !important;
}

/* LAYER 5: Critical Conversion — payment order must sit above the cart bar
   so #offcanvasPaymentOrder (offcanvas-end) is never obscured by
   #offcanvasCart (offcanvas-bottom, product-top = 11113).           */
.offcanvas-Payment-Order {
    z-index: var(--z-offcanvas-critical) !important;
    display: flex !important;
    flex-direction: column !important;
    /* No overflow:hidden — it intercepts touch events on iOS and freezes child scroll */
}

/* LAYER 4: Utility Overlays */
.offcanvas-Self-Billing {
    z-index: var(--z-offcanvas-utility) !important;
}

/* LAYER 5: Critical Conversion / Checkout */

/* ==========================================================================
   1b. PHONEPE CHECKOUT IFRAME
   The SDK injects a wrapper div + iframe into <body>.
   Architecture:
     body  →  position:fixed (iOS scroll lock, saves Y before; restores after)
     wrapper div  →  position:fixed; inset:0; padding-bottom:safe-area
     iframe  →  position:absolute; inset:0  (fills wrapper content area)
   This ensures:
     • iframe can momentum-scroll on iOS (absolute, not fixed)
     • Pay button stays above the iPhone home indicator (safe-area padding)
     • background page doesn't rubber-band-scroll during payment
     • height shrinks with keyboard via 100dvh on the wrapper
   ========================================================================== */

/* ── 1. Lock the page while PhonePe is active ── */
body.phonepe-iframe-active {
    overflow:   hidden   !important;
    position:   fixed    !important;  /* iOS: stops body rubber-band scroll     */
    width:      100%     !important;  /* prevents horizontal reflow when fixed  */
}

/* ── 2. Full-screen wrapper injected by the PhonePe SDK ── */
body.phonepe-iframe-active > div:last-of-type:not(.offcanvas-backdrop):not(.offcanvas):not(.modal):not(.modal-backdrop) {
    position:            fixed    !important;
    top:                 0        !important;
    left:                0        !important;
    right:               0        !important;
    bottom:              0        !important;
    /* Shrinks with the virtual keyboard on modern browsers */
    height:              100vh    !important;
    height:              100dvh   !important;
    /* Push content above home indicator (needs viewport-fit=cover in <meta>) */
    padding-bottom:      env(safe-area-inset-bottom, 0px) !important;
    box-sizing:          border-box !important;
    z-index:             2147483646 !important;
    background:          #fff;
    overflow:            hidden   !important;
    overscroll-behavior: none     !important;
}

/* ── 3. The payment iframe — absolute inside the wrapper so iOS can scroll it ── */
body.phonepe-iframe-active iframe[src*="phonepe.com"],
body.phonepe-iframe-active iframe[src*="mercury"],
iframe[id*="phonePe"  i],
iframe[id*="phonepe"  i],
iframe[id*="paypage"  i],
iframe[name*="phonepe" i] {
    /* Absolute within the fixed wrapper → inherits safe-area padding gap  */
    position:                  absolute !important;
    top:                       0        !important;
    left:                      0        !important;
    right:                     0        !important;
    bottom:                    0        !important;
    width:                     100%     !important;
    height:                    100%     !important;
    max-width:                 100%     !important;
    max-height:                none     !important;
    margin:                    0        !important;
    padding:                   0        !important;
    border:                    0        !important;
    border-radius:             0        !important;
    background:                #fff     !important;
    display:                   block    !important;
    /* Enable momentum scrolling inside the iframe on iOS Safari */
    overflow:                  auto     !important;
    -webkit-overflow-scrolling:touch    !important;
    z-index:                   auto     !important;
}

/* ── 4. Hide bottom navigation while PhonePe payment UI is active ── */
body.phonepe-iframe-active .bottom-nav {
    display: none !important;
}

/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */

/* --- MOBILE APP HEADER (Max Width 767px) --- */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    body {
        padding-bottom: 70px;
        /* Space for bottom nav */
    }

    /* Fixed Header Group */
    .mobile-header-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050;

        /* UPDATED: Pastel Gradient (Minty White to Peachy White) */
        background: #fff;
        /* Light Peachy White */

        /* Shape & Depth */
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        /* Updated shadow to be gray (neutral) instead of green, to match the lighter theme */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        /* UPDATED: Text color must be dark now to be visible on light background */
        color: #333333;
    }

    /* 2. Content Spacer - Keeps page content visible */
    .main-content {
        padding-top: 195px !important;
    }

    /* App Bar Layout - 3 Column Grid */
    .mobile-app-bar {
        height: 60px;
        display: grid;
        /* 1fr (left), auto (center), 1fr (right) */
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
        /* Hard barrier to prevent any overlap */
        background: linear-gradient(180deg, #F97D09 0%, rgba(255, 255, 255, 0.95) 100%);
        overflow: hidden;
        /* Prevent horizontal scroll just in case */
    }

    /* Zone Alignments */
    .app-bar-left {
        justify-self: start;
        display: flex;
        align-items: center;
    }

    .app-bar-center {
        justify-self: center;
        white-space: nowrap;
        /* Prevents the text from breaking into weird lines */
    }

    .app-bar-right {
        justify-self: end;
        display: flex;
        align-items: center;
    }


    /* Wrapper to handle screen edges and centering */
    .mobile-location-bar-wrapper {
        width: 100%;
        padding: 0 16px 10px 16px;
        /* Handles spacing from the screen edges here instead of margins */
        display: flex;
        justify-content: center;
        /* Guarantees absolute centering */
    }

    /* 4. Location Pill - Updated for Perfect Centering */
    .mobile-location-bar {
        width: 100%;
        max-width: 500px;
        /* Stops the pill from stretching too wide on 720px screens */
        padding: 6px 12px;

        background-color: #ffffff;
        /* Solid white background for best text contrast */
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 50rem;
        /* Creates a perfect pill shape automatically */

        color: #333333;
    }

    /* ==========================================================================
   ULTRA-MODERN SEARCH BAR (Compact Version)
   ========================================================================== */
    .mobile-search-container {
        /* Top: 4px, Right: 12px, Bottom: 12px, Left: 12px */
        padding: 4px 12px 12px 12px;
        background-color: transparent;
    }

    .mobile-search-box {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1.5px solid #f1f5f9;
        border-radius: 100px;
        /* Sleek pill shape */
        height: 45px;
        /* Reduced optimal touch target height */
        padding: 0 16px;
        /* Tighter inner padding */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        /* Slightly softened shadow for smaller size */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Tactile glow when the user taps the input */
    .mobile-search-box:focus-within {
        border-color: #00A859;
        /* Brand Green */
        box-shadow: 0 6px 20px rgba(0, 168, 89, 0.12);
        transform: translateY(-1px);
    }

    .search-icon {
        font-size: 1.05rem;
        /* Scaled down slightly to match slimmer height */
        color: #94a3b8;
        margin-right: 10px;
        /* Tighter gap between icon and text */
        transition: color 0.3s ease;
    }

    .mobile-search-box:focus-within .search-icon {
        color: #00A859;
    }

    .modern-search-input {
        flex-grow: 1;
        font-size: 0.9rem;
        /* Scaled down for compact fit */
        font-weight: 500;
        color: #0f172a;
        outline: none;
        box-shadow: none;
        padding: 0;
        /* Ensures no hidden input padding messes up vertical centering */
    }

    .modern-search-input::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    /* ==========================================================================
   ENTERPRISE "SEE ALL" PILL CHIP
   ========================================================================== */
    .btn-see-all {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 11px 5px 10px;
        border-radius: var(--radius-pill);

        color: #F97D09;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.65px;
        text-decoration: none !important;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s ease, border-color 0.2s ease,
            color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    }

    .btn-see-all i {
        font-size: 0.88rem;
        flex-shrink: 0;
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .btn-see-all:hover,
    .btn-see-all:focus-visible {
        background: #f97d0925;
        border-color: rgba(0, 168, 89, 0.55);
        color: #F97D09;
        box-shadow: 0 2px 10px rgba(0, 168, 89, 0.16);
        text-decoration: none !important;
    }

    .btn-see-all:hover i,
    .btn-see-all:focus-visible i {
        transform: translateX(3px);
    }

    .btn-see-all:active {
        background: rgba(0, 168, 89, 0.2);
        border-color: rgba(0, 168, 89, 0.7);
        transform: scale(0.96);
        box-shadow: none;
    }

    /* --- Bottom Nav Styling --- */
    .bottom-nav {
        background: #ffffff;
        border-top: 1px solid #f0f0f0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
        height: 65px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9990;
    }

    /* ==========================================================================
   3D BOTTOM NAVIGATION CSS
   ========================================================================== */

    /* ==========================================================================
   PROFESSIONAL 3D BOTTOM NAVIGATION
   ========================================================================== */

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #888888;
        font-size: 0.75rem;
        font-weight: 600;
        transition: color 0.3s ease, filter 0.3s ease;
        width: 100%;
        height: 100%;
        position: relative;
        background: transparent;
        border: none;
        overflow: hidden;
    }

    /* ==========================================
   1. INACTIVE STATE: 3D Premium Gold
   ========================================== */
    .bottom-nav-item i {
        font-size: 1.5rem;
        margin-bottom: 4px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        -webkit-text-stroke: 0.5px #F97D09;
        background: linear-gradient(135deg, #ecded0 0%, #F97D09 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        filter: drop-shadow(0px 3px 2px #F97D09) drop-shadow(0px -1px 1px rgba(255, 255, 255, 0.9));
    }

    /* ==========================================
   2. TACTILE "PRESS" ANIMATION
   ========================================== */
    .bottom-nav-item:active i {
        transform: scale(0.9) translateY(2px);
        filter: drop-shadow(0px 1px 1px rgba(255, 140, 0, 0.5));
    }

    /* ==========================================
   3. ACTIVE STATE: 3D Premium Emerald
   ========================================== */
    .bottom-nav-item.active {
        color: #00a85a;
        font-weight: 700;
    }

    .bottom-nav-item.active i {
        background: linear-gradient(135deg, #28c76f 0%, #00753e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        -webkit-text-stroke: 0.5px rgba(0, 117, 62, 0.6);
        filter: drop-shadow(0px 5px 4px rgba(0, 117, 62, 0.4)) drop-shadow(0px -1px 1px rgba(255, 255, 255, 0.9));
        animation: iconPop3D 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* ==========================================
   4. ACTIVE "POP" 3D KEYFRAME ANIMATION
   ========================================== */
    @keyframes iconPop3D {
        0% {
            transform: translateY(0) scale(1);
        }

        50% {
            transform: translateY(-6px) scale(1.25);
        }

        100% {
            transform: translateY(-2px) scale(1.1);
        }
    }
}

/* --- DESKTOP HEADER (Min Width 768px) --- */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .main-content {
        padding-top: 130px;
        /* Space for fixed desktop header */
    }

    .desktop-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }

}

/* The container hiding the overflow */
.modern-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    display: block;
}

/* The moving content */
.modern-marquee-content {
    display: inline-block;
    padding-left: 100%;
    /* Starts just off the right edge of the screen */
    animation: marquee-scroll 12s linear infinite;
}

/* Pause the animation when the user touches or hovers over the link */
.modern-marquee:hover .modern-marquee-content,
.modern-marquee:active .modern-marquee-content {
    animation-play-state: paused;
}

/* The scroll animation */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ==========================================================================
   3. CATEGORIES SECTION
   ========================================================================== */
.category-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.category-square-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile Categories */
@media (max-width: 767px) {

    /* Category Grid - 4 Columns */
    .category-carousel .swiper-slide {
        display: flex;
        justify-content: center;
        /* Width handled by Swiper JS slidesPerView: 4 */
    }

    .category-square-img {
        width: 90px !important;
        height: 90px !important;
        border-radius: 24% !important;
        background: #F9FAFB;
        border: 1px solid #E5E7EB;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 6px;
    }

    .category-title {
        font-size: 12px !important;
        font-weight: 700;
        color: #4b5563;
        line-height: 1.2;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.4em;
        /* Ensures alignment even if 1 line text */
    }
}

/* Desktop Categories */
@media (min-width: 768px) {
    .category-square-img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: #f9f9f9;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        margin-bottom: 12px;
    }

    .category-item:hover .category-square-img {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 168, 89, 0.15);
        border-color: var(--primary-green);
    }

    .category-title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        text-align: center;
    }
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hero-section {
    background-image: url('../ass_img/banner-1.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 0 60px 0;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
}

.hero-brand {
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -1px;
    margin-bottom: 0;
}

.hero-tagline {
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.hero-desc {
    color: #555;
    font-size: 1.1rem;
    margin-top: 15px;
    max-width: 500px;
}

.hero-stats-box {
    margin-top: 40px;
    border-left: 4px solid #ffc107;
    /* Yellow Accent */
    padding-left: 20px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #212529;
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    font-weight: 600;
}

/* Feature Cards (Glassmorphism Style) */
.feature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon-circle {
    width: 50px;
    height: 50px;
    background-color: #e3f2fd;
    /* Light Blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    margin-bottom: 15px;
}

.feature-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #222;
}

.feature-text {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Hero Mobile Adjustments */
@media (max-width: 991px) {
    .hero-section {
        padding: 40px 0;
        background-position: right center;
    }

    .hero-overlay {
        background: rgba(255, 255, 255, 0.85);
        /* Stronger overlay for mobile readability */
    }

    .hero-stats-box {
        border-left: none;
        padding-left: 0;
        margin-top: 30px;
    }
}

/* ==========================================================================
   5. BANNER AD SECTION
   ========================================================================== */
.banner-ad {
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Banner Mobile Look */
@media (max-width: 767px) {
    .banner-section {
        padding: 10px 0;
        /* Slight spacing top/bottom */
        background: #f5f5f5;
        /* App background feel */
        margin-top: 0;
    }

    .container-fluid-mobile {
        padding: 0 10px;
        /* Margins for the card look */
    }

    .banner-ad {
        height: 180px;
        /* Standard Mobile Banner Height */
        border-radius: 16px;
        /* High border radius like modern apps */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Gradient Overlay for Mobile text readability */
    .banner-ad::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        /* Darken image slightly */
        z-index: 1;
        border-radius: 16px;
    }

    .banner-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .banner-subtitle {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-bottom: 10px;
    }

    .btn-shop-now {
        padding: 6px 16px;
        font-size: 0.8rem;
        border-radius: 20px;
        background: #fff;
        color: #333;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
    }

    /* Hide Desktop Navigation on Mobile (Swipe only) */
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }

    /* App-style Pagination dots */
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #fff;
        opacity: 0.5;
    }

    .swiper-pagination-bullet-active {
        width: 18px;
        border-radius: 4px;
        background: #fff;
        opacity: 1;
    }
}

/* Banner Desktop Look */
@media (min-width: 768px) {
    .banner-section {
        padding: 30px 0;
    }

    .banner-ad {
        height: 450px;
        /* Cinema style height */
        border-radius: 24px;
        /* Sophisticated Shadow */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    /* Desktop Overlay - Side Gradient */
    .banner-ad::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 50%;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }

    .banner-content {
        padding-left: 60px !important;
    }

    .banner-title {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: -1px;
        animation: fadeInUp 0.8s ease-out;
    }

    .banner-subtitle {
        font-size: 1.25rem;
        margin-bottom: 25px;
        font-weight: 300;
        animation: fadeInUp 1s ease-out;
    }

    .btn-shop-now {
        padding: 12px 35px;
        font-size: 1rem;
        border-radius: 8px;
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        border: 2px solid var(--primary-color);
        animation: fadeInUp 1.2s ease-out;
    }

    .btn-shop-now:hover {
        background: transparent;
        color: white;
        transform: translateY(-3px);
    }

    /* Custom Navigation Arrows */
    .swiper-button-next,
    .swiper-button-prev {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 50%;
        color: #fff;
        transition: all 0.3s;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
        font-weight: bold;
    }

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: #fff;
        color: #000;
        transform: scale(1.1);
    }
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shimmer pulse — used by skeleton/loading placeholders */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* ==========================================================================
   6. POPULAR PRODUCTS & PRODUCT CARDS
   ========================================================================== */
.popular-products {
    font-family: var(--font-sans);
    background-color: #fff;
}

/* Section Header */
.popular-products .section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0;
}

/* Swiper Navigation (Desktop) */
.swiper-buttons button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: white;
    color: #333;
    transition: all 0.2s ease;
}

.swiper-buttons button:hover {
    background: #212529;
    color: #fff;
    border-color: #212529;
}

@media (max-width: 768px) {
    .swiper-buttons {
        display: none;
    }

    /* Hide nav on mobile */
}

/* ==========================================================================
   ULTRA-MODERN PRODUCT CARD CORE
   ========================================================================== */
.product-card-design {
    position: relative;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    /* Soft, modern border instead of 5px brown */
    border-radius: 12px;
    padding: 6px;
    /* Ultra-compact padding */
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.product-card-design:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}

/* --- Edge-to-Edge Responsive Image Box --- */
.img-wrap-modern {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Creates a perfect responsive square */
    background-color: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    padding: 2px;
    max-height: 140px;
    /* Small padding makes the image look massive */
}

.img-wrap-modern img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (max-width: 576px) {
    .img-wrap-modern {
        max-height: 140px;
    }
}

/* --- Discount / Promo Badge --- */
.custom-badge-left {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    color: #ffffff;
    z-index: 10;
    border-radius: 11px 0 8px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.custom-badge-left::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -60%;
    width: 35%;
    height: 160%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 100%);
    transform: skewX(-18deg);
    animation: badgeRayShine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgeRayShine {
    0% {
        left: -60%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    38% {
        left: 130%;
        opacity: 0.7;
    }

    39%,
    100% {
        left: 130%;
        opacity: 0;
    }
}

/* --- Options / Variant Pill --- */
.badge-gradient-pill {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border-radius: 4px;
    /* Sleeker than fully rounded */
    background: #f0fdf4;
    /* Very soft green */
    color: #16a34a;
    /* Brand green text */
    border: 1px solid #bbf7d0;
    margin-bottom: 4px;
}



/* Centered & Micro-Sized Rating (Perfect Professional Colors) */
.prod-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    /* NEW: Centered alignment */
    gap: 1.5px;
    margin-bottom: 2px;
    font-size: 8px;
    /* Ultra-micro size (~0.5rem) */
}

.prod-rating .bi-star-fill,
.prod-rating .bi-star-half {
    color: #F59E0B;
    /* Premium Amber */
}

.prod-rating .bi-star {
    color: #e2e8f0;
    /* Soft Slate */
}

.prod-rating-count {
    color: #94a3b8;
    font-weight: 700;
    margin-left: 3px;
    font-size: 8px;
    /* Match star scale */
}

/* Bottom-Right Overlay Pill for Variants */
.badge-variant-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 10;
    padding: 3px 6px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #00A859;
    /* Brand Green */
    border: 1px solid #bbf7d0;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* --- Pricing Block --- */
/* Centered Pricing */
.price-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* NEW: Centered alignment */
    gap: 6px;
    margin-bottom: 4px;
}

.price-current {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.price-old {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

/* --- Product Card: Price + Button Column --- */
.product-card-design .mt-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 5px;
    width: 100%;
}
.product-card-design .price-wrap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin-bottom: 0;
    width: 100%;
}
.product-card-design .price-old {
    font-size: 0.65rem;
    font-weight: 500;
    color: #b0bec5;
    text-decoration: line-through;
    line-height: 1.3;
    white-space: nowrap;
}
.product-card-design .price-current {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1a202c;
    letter-spacing: -0.4px;
    line-height: 1.25;
    white-space: nowrap;
}
.product-card-design .btn-cart-wrapper {
    width: 100%;
    margin-top: 0;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(249, 125, 9, .30);
}
.product-card-design .btn-add-initial {
    width: 100% !important;
}

/* --- Buttons & Controls --- */
.btn-wishlist-modern {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 0;
}

/* ==========================================================================
   7. LATEST OFFERS SECTION — Enterprise Grade
   ========================================================================== */

/* --- Section Wrapper --- */
#latest-offers {
    background: #FFFFFF;
    border-top: none;
    font-family: var(--font-sans);
    overflow: hidden;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#latest-offers::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #4ade80 100%);
}

/* --- Section Header --- */
#latest-offers .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 4px 0;
}

#latest-offers .section-header > .w-100.text-center {
    text-align: left !important;
    width: auto !important;
    flex: 1;
}

#latest-offers .section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-ink-900);
    margin-bottom: 0;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

#latest-offers .section-subtitle {
    font-size: 0.78rem;
    color: var(--color-ink-600);
    margin-bottom: 0;
    margin-top: 3px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* ==========================================================================
   ✨ PREMIUM CSS CONFETTI ANIMATION ✨
   ========================================================================== */

/* The container that holds the confetti in the background */
.css-confetti-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Allows the user to click right through it to the offers */
    z-index: 0;
    overflow: hidden;
}

/* Confetti disabled for enterprise aesthetic */
.confetti-piece {
    display: none;
}

/* --- "View All" Button (Desktop) --- */
.btn-view-all {
    flex-shrink: 0;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: var(--radius-pill);
    padding: 5px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    letter-spacing: 0.1px;
    position: static !important;
    transform: none !important;
}

.btn-view-all:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ==========================================================================
   ENTERPRISE TICKET OFFER CARD
   ========================================================================== */
.offer-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 150px;
    position: relative;

    /* Signature ticket cutout: semi-circles on both sides at vertical center */
    -webkit-mask-image:
        radial-gradient(circle at 0% 50%, transparent 13px, black 14px),
        radial-gradient(circle at 100% 50%, transparent 13px, black 14px);
    -webkit-mask-size: 51% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left, right;

    mask-image:
        radial-gradient(circle at 0% 50%, transparent 13px, black 14px),
        radial-gradient(circle at 100% 50%, transparent 13px, black 14px);
    mask-size: 51% 100%;
    mask-repeat: no-repeat;
    mask-position: left, right;

    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.07));
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
}

@media (min-width: 992px) {
    .offer-card:hover {
        transform: translateY(-4px);
        filter: drop-shadow(0px 14px 24px rgba(0, 0, 0, 0.11));
    }
}

/* --- Image Box --- */
.offer-img-box {
    width: 116px;
    height: 116px;
    margin: 12px 10px 12px 14px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.offer-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.offer-card:hover .offer-img-box img {
    transform: scale(1.07);
}

/* --- Badge --- */
.offer-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    background: linear-gradient(135deg, #e53e3e 0%, #dd6b20 100%);
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.38);
    z-index: 2;
    letter-spacing: 0.6px;
}

/* --- Card Body --- */
.offer-body {
    padding: 12px 14px 12px 4px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    gap: 5px;
}

/* --- Expiry Meta --- */
.offer-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #FFF3E0;
    border: 1px solid rgba(230, 81, 0, 0.15);
    color: #bf360c;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--radius-pill);
    width: max-content;
    line-height: 1.6;
}

.offer-meta .bi {
    font-size: 0.68rem;
    opacity: 0.85;
}

/* --- Offer Title --- */
.offer-title {
    font-size: 0.925rem;
    font-weight: 800;
    color: var(--color-ink-900);
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.offer-title a {
    color: inherit;
    text-decoration: none;
}

/* --- Description --- */
.offer-desc {
    font-size: 0.73rem;
    color: var(--color-ink-600);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Separator hidden — clean, whitespace-driven separation */
.offer-separator {
    display: none;
}

/* --- Claim Offer CTA --- */
.btn-offer-claim {
    margin-top: 2px;
    width: max-content;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #ffffff;
    border: none;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.73rem;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    letter-spacing: 0.1px;
    box-shadow: 0 3px 10px rgba(0, 168, 89, 0.30);
}

.btn-offer-claim:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 168, 89, 0.38);
    color: #ffffff;
}

.btn-offer-claim[data-applied=”true”],
.btn-offer-claim.applied {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    box-shadow: none;
    pointer-events: none;
}

/* ==========================================================================
   MOBILE: HORIZONTAL SCROLL SNAP
   ========================================================================== */
@media (max-width: 991px) {
    #latest-offers .container-lg {
        padding-right: 0;
        padding-left: 0;
        overflow: hidden;
    }

    #latest-offers .section-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .offers-scroll-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 10px 16px 28px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .offers-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .offer-col-mobile {
        flex: 0 0 86%;
        max-width: 340px;
        scroll-snap-align: center;
    }

    .btn-view-all {
        display: none !important;
    }

    .offer-card {
        min-height: 138px;
    }

    .offer-img-box {
        width: 108px;
        height: 108px;
        margin: 10px 8px 10px 12px;
    }
}

/* ==========================================================================
   DESKTOP: 3-COLUMN GRID
   ========================================================================== */
@media (min-width: 992px) {
    .offers-scroll-container {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
    }

    .offer-col-mobile {
        width: 33.3333%;
        padding-right: 10px;
        padding-left: 10px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   MODERN COMPACT FOOTER STYLES
   ========================================================================== */
.modern-footer {
    background-color: #f8f9fa;
    padding: 10px 0 5px 0;
    font-family: var(--font-sans);
}

@media (min-width: 992px) {
    .modern-footer {
        padding: 20px 0 10px 0;
        /* Tighter padding for desktop */
    }
}

/* The Floating Glass Card */
.footer-glass-card {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 70px;
}

/* ==========================================================================
   ULTRA-MODERN SOCIAL PILLS (Natively Colored)
   ========================================================================== */
.social-pills {
    display: flex;
    gap: 12px;
}

.social-pill {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Perfect circle */
    background: #ffffff;
    font-size: 1.35rem;
    /* Slightly larger, crisp icons */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1.5px solid #f1f5f9;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Prevent native browser highlight on mobile tap */
    -webkit-tap-highlight-color: transparent;
}

/* Base tactile interaction */
.social-pill:active {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* --- FACEBOOK --- */
.social-pill.sp-facebook {
    color: #1877F2;
}

.social-pill.sp-facebook:active {
    background: #ebf4ff;
    /* Soft blue tint */
    border-color: #1877F2;
}

/* --- X (TWITTER) --- */
.social-pill.sp-twitter {
    color: #0f172a;
}

.social-pill.sp-twitter:active {
    background: #f1f5f9;
    /* Soft slate tint */
    border-color: #0f172a;
}

/* --- INSTAGRAM --- */
/* Apply gradient specifically to the icon text */
.social-pill.sp-instagram i {
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.social-pill.sp-instagram:active {
    background: #fdf2f8;
    /* Soft pink tint */
    border-color: #E1306C;
}

/* --- WHATSAPP --- */
.social-pill.sp-whatsapp {
    color: #25D366;
}

.social-pill.sp-whatsapp:active {
    background: #dcfce7;
    /* Soft green tint */
    border-color: #25D366;
}

/* Beautiful Fading Divider */
.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    margin: 8px 0;
}

/* Inline Minimal Links */
.footer-mini-links a {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-mini-links a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   10. OFFCANVAS MENU (Left Drawer)
   ========================================================================== */

/* --- General Offcanvas Styles --- */

.offcanvas {
    border-right: none;
    font-family: var(--font-main);
    will-change: transform;
}

/* Ensure the backdrop (dark overlay) is also high, but below the menu */
.offcanvas-backdrop {
    z-index: 1999 !important;
}

/* ==========================================================================
   SEARCH OFFCANVAS — OPEN/CLOSE ANIMATION PERFORMANCE
   The product grid renders dozens of images with mix-blend-mode:multiply.
   While this full-screen panel slides, the browser must re-blend every image
   against the moving backdrop on EVERY frame, which causes the open/close lag.
   Fixes below: (1) a snappy GPU-friendly slide curve, (2) a clean isolated
   compositing layer, (3) paint containment on the scrolling grid, and (4) the
   decisive one — the JS-toggled .sap-animating class disables the blend for the
   ~340ms of the slide. Against the white product card, multiply is identical to
   normal, so this is visually lossless while removing the per-frame blend cost.
   ========================================================================== */
#SearchAllProdPage.offcanvas {
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    backface-visibility: hidden;
    isolation: isolate;
}

/* Confine repaints to the scrolling grid (it already clips via overflow) */
#search-scroll-container {
    contain: paint;
}

/* While the panel is sliding, drop the expensive blend (lossless on white) */
#SearchAllProdPage.sap-animating .img-wrap-modern img {
    mix-blend-mode: normal;
}

.offcanvas-header {
    background-color: #fff;
    padding: 1rem 1.5rem;
    border-top-right-radius: 24px;
}

/* --- Container Layout --- */
.offcanvas-cat-container {
    padding: 0;
    /* Desktop default */
}

/* --- Individual Item Styling (Base) --- */
.cat-item-link {
    text-decoration: none;
    color: var(--text-dark);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    position: relative;
}

.cat-item-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface);
    border-radius: 50%;
    transition: transform 0.2s;
}

.cat-item-img-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.btn-close-app {
    border: none;
    background-color: #f1f3f5;
    /* Light Neutral Background */
    color: #dc3545;
    /* Dark Gray Icon */
    width: 36px;
    /* Comfortable touch target */
    height: 36px;
    border-radius: 50%;
    /* Perfect Circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Smooth bounce effect */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* Soft Lift */
    cursor: pointer;
    padding: 0;
}

.btn-close-app i {
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

/* Hover / Active State */
.btn-close-app:hover,
.btn-close-app:active {
    background-color: #fff5f5;
    /* Very light red tint */
    color: #dc3545;
    /* Red icon */
    transform: rotate(90deg);
    /* Professional rotation interaction */
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
    /* Red glow */
}

/* --- MOBILE LAYOUT: 2-Column Grid (Android Style) --- */
@media (max-width: 767px) {
    .offcanvas-start {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        max-width: 45%;
    }

    .offcanvas-start-body {
        /* Changed from background-color to background */
        background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
        border-bottom-right-radius: 24px;
    }

    .offcanvas-cat-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 Columns */
        gap: 12px;
        /* Space between cards */
        padding: 10px;
        /* Outer padding */
    }

    .cat-item-link {
        flex-direction: column;
        /* Stack Icon top, Text bottom */
        justify-content: center;
        text-align: center;
        background-color: #ffffff;
        border: 1px solid #f1f1f1;
        border-radius: 16px;
        /* App-like rounded corners */
        padding: 10px 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }

    .cat-item-link:active {
        transform: scale(0.98);
        /* Tactile tap effect */
        background-color: var(--bg-surface);
        border-color: var(--primary-color);
    }

    .cat-item-img-box {
        width: 65px;
        height: 65px;
        margin-bottom: 10px;
        /* Space between icon and text */
        background-color: #f8f9fa;
    }

    .cat-item-img-box img {
        width: 60px;
        height: 60px;
    }

    .cat-item-text {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3;
        color: #4b5563;
        /* Truncate text if too long */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* Standard */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hide the chevron on mobile grid */
    .cat-item-chevron {
        display: none;
    }
}

/* --- DESKTOP LAYOUT: Vertical List --- */
@media (min-width: 768px) {
    .offcanvas-start {
        width: 350px;
        /* Wider comfortable width for desktop */
    }

    /* Enhance shadow for desktop overlay feel */
    .offcanvas.show {
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
    }

    .offcanvas-cat-container {
        display: flex;
        flex-direction: column;
    }

    .cat-item-link {
        flex-direction: row;
        padding: 14px 24px;
        border-bottom: 1px solid #f8f9fa;
    }

    .cat-item-link:hover {
        background-color: var(--bg-surface);
        color: var(--primary-color);
        transform: translateX(4px);
    }

    .cat-item-img-box {
        width: 85px;
        height: 85px;
        margin-right: 16px;
        background-color: #fff;
        border: 1px solid #eee;
    }

    .cat-item-text {
        font-size: 0.95rem;
        font-weight: 500;
        flex-grow: 1;
    }

    .cat-item-chevron {
        font-size: 0.8rem;
        color: var(--text-muted);
    }
}

/* ==========================================================================
   11. OFFCANVAS CART (RIGHT Drawer)
   ========================================================================== */
/* Optional: Ensure the backdrop (dark overlay) is also high up if needed */

/* Desktop: Floating Sheet Style */
/* --- Offcanvas specific styling --- */
.app-style-offcanvas {
    width: 420px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    border: none;
}

@media (max-width: 767px) {
    .app-style-offcanvas {
        width: 100% !important;
        border-radius: 0 !important;
        height: 100% !important;
    }

    /* Tweak font sizes for mobile density */
    .cart-item-title {
        font-size: 0.95rem;
    }

    .cart-item-price {
        font-size: 1rem;
    }
}

/* Scrollable Area inside Offcanvas #28a745 */
.app-scroll-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 60px;
    /* Space for fixed bottom bar */
}

/* Custom Scrollbar for sleek look */
.app-scroll-body::-webkit-scrollbar {
    width: 6px;
}

.app-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}

.app-scroll-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}

/* --- Card Styling --- */
.app-card {
    background: #ffffff;
    border-radius: var(--card-radius);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 0.50rem;
    overflow: hidden;
}

.app-card-bill {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: var(--card-radius);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
    overflow: hidden;
}

/* --- Header --- */
.page-header {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    /* Prevents shrinking in flex container */
}

/* --- Delivery Timer Banner --- */
.delivery-timer {
    background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
    color: #0369a1;
    border-radius: 12px;
}

.card-section-header {
    background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
}

/* --- Bill Details --- */
.bill-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #4b5563;
}

.bill-row.total {
    border-top: 1px dashed #cbd5e1;
    padding-top: 12px;
    margin-top: 12px;
    color: #000;
    font-weight: 700;
    font-size: 1.1rem;
}

.text-green {
    color: #16a34a;
}

/* --- Fixed Bottom Bar --- */
/* Logic: Fixed absolutely to the bottom of the Offcanvas container */
.mobile-fixed-bottom {
    position: absolute;
    /* Or 'fixed' */
    bottom: 0;
    left: 0;
    width: 100%;

    /* --- 100% INVISIBLE --- */
    background: transparent;
    box-shadow: none;
    /* Must remove shadow, otherwise it leaves a dirty line */
    border: none;

    z-index: 1020;
}

.transition-hover {
    transition: all 0.2s ease;
}

.transition-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #cbd5e1 !important;
}



/* --- offcanvas category panel --- */
/* --- offcanvas category panel --- */
.search-header {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 100;
    padding: 11px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
}

.offcanvas-allprod-search-result .po-back-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #1e293b;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}


/* ══════════════════════════════════════════
   SAP — Search All Products Filter Bar
══════════════════════════════════════════ */
.sap-filter-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    position: sticky;
    top: 57px;
    z-index: 99;
}

.sap-filter-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sap-filter-scroll::-webkit-scrollbar {
    display: none;
}

.sap-divider {
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    flex-shrink: 0;
}

/* Base chip */
.sap-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.775rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    color: #374151;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.sap-chip:active {
    transform: scale(0.95);
}

.sap-chip.active {
    background: #f0fdf4;
    border-color: #00a859;
    color: #00a859;
}

/* Filter trigger chip */
.sap-chip-filter {
    border-color: #d1d5db;
    background: #f9fafb;
    position: relative;
}

.sap-chip-filter.has-filter {
    background: #fff7ed;
    border-color: #f97d09;
    color: #f97d09;
}

.sap-filter-count {
    background: #f97d09;
    color: #fff;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
}

/* ══ Filter Sheet (bottom-sheet) ══
   NOTE: #sap-sheet-backdrop and #sap-filter-sheet are portalled to <body> by
   app.js so the offcanvas's transform/will-change cannot become their containing
   block (which made the sheet slide up and "peek" while the panel closed).
   Because they now sit at body level, their z-index must clear the search
   offcanvas (--z-offcanvas-product-top = 11113). */
.sap-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 11120;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sap-sheet-backdrop.show {
    opacity: 1;
    pointer-events: all;
}

.sap-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 11121;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
}

.sap-filter-sheet.open {
    transform: translateY(0);
}

.sap-sheet-handle {
    width: 36px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.sap-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    flex-shrink: 0;
}

.sap-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.sap-sheet-clear {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f97d09;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.sap-sheet-clear:active {
    background: #fff7ed;
}

.sap-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sap-sheet-body::-webkit-scrollbar {
    display: none;
}

.sap-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
    margin-bottom: 12px;
}

.sap-sort-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sap-sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.sap-sort-chip:active {
    transform: scale(0.96);
}

.sap-sort-chip.active {
    background: #f0fdf4;
    border-color: #00a859;
    color: #00a859;
    font-weight: 700;
}

.sap-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sap-cat-chip {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.sap-cat-chip:active {
    transform: scale(0.96);
}

.sap-cat-chip.active {
    background: #f0fdf4;
    border-color: #00a859;
    color: #00a859;
    font-weight: 700;
}

.sap-sheet-footer {
    padding: 12px 20px 20px;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.sap-btn-apply {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00a859 0%, #009950 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(0, 168, 89, 0.25);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.sap-btn-apply:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 168, 89, 0.2);
}

.search-input-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    height: 44px;
}

.search-input-group input {
    border: none;
    outline: none;
    width: 100%;
    padding: 0 10px;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.trending-section {
    padding: 12px;
    background: #fff;
    margin-bottom: 4px;
}

.scroll-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 4px;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* --- Trending Brand Pill Design --- */
.trend-pill {
    /* 1. Layout & Shape */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    /* Slightly more padding for touch targets */
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    /* Softer, more modern corners */
    min-width: 110px;

    /* 2. Typography */
    font-weight: 500;
    color: #374151;
    /* Dark grey text */
    user-select: none;
    /* Prevents text highlighting on rapid clicks */
    cursor: pointer;

    /* 3. Base Animation Properties */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
}

/* --- Hover State (Desktop) --- */
.trend-pill:hover {
    border-color: #d1d5db;
    transform: translateY(-2px);
    /* Lifts up slightly */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: #b5ebdd;
}

/* --- Active / Click State (The Animation) --- */
.trend-pill:active {
    /* The "Press" Effect */
    transform: scale(0.95) translateY(0);
    /* Shrinks and resets lift */
    background-color: #f3f4f6;
    /* Slightly darker grey */
    border-color: #9ca3af;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Inner shadow for depth */
}

/* --- Image Styling Inside Pill --- */
.trend-pill img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.trend-pill span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* --- NEW: Vertical Scroll Area CSS --- */
.vertical-scroll-container {
    /* Set a fixed height or max-height to trigger scrolling */
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    /* Prevent scrollbar overlap */
    padding-bottom: 80px;
    /* Bottom padding so content isn't hidden behind sticky cart footer */
}

/* Custom scrollbar for vertical section */
.vertical-scroll-container::-webkit-scrollbar {
    width: 5px;
}

.vertical-scroll-container::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 10px;
}

/* --- NEW: Vertical Scroll Area CSS --- */
.vertical-scroll-container-all-products {
    /* Set a fixed height or max-height to trigger scrolling */
    max-height: 99vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    /* Prevent scrollbar overlap */
    padding-bottom: 80px;
    /* Bottom padding so content isn't hidden behind sticky cart footer */
}

/* Custom scrollbar for vertical section */
.vertical-scroll-container-all-products::-webkit-scrollbar {
    width: 5px;
}

.vertical-scroll-container-all-products::-webkit-scrollbar-thumb {
    background-color: #e5e7eb;
    border-radius: 10px;
}

/* ------------------------------------- */

.img-circle-wrapper {
    /* Ensuring images stay contained */
    margin-bottom: 8px;
}

.img-circle-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* --- Offcanvas Styling --- */
.bill-divider {
    height: 1px;
    /* Thickness of the line */
    border: none;
    /* Remove default HTML border */
    margin-top: 0;
    /* Stick close to the text above */
    margin-bottom: 16px;
    /* Space below the line */
    opacity: 1;
    /* Override Bootstrap's default hr opacity */

    /* Gradient: Transparent (0%) -> Gray (50%) -> Transparent (100%) */
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            /* Faded Start */
            rgba(0, 0, 0, 0.15) 50%,
            /* Solid Middle (Light Gray) */
            rgba(0, 0, 0, 0) 100%
            /* Faded End */
        );
}

.app-scroll-body-account {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 180px;
    background: linear-gradient(180deg, #f97d093f 0%, #fffbf2 60%, #ffffff 100%);

    /* Space for fixed bottom bar */

}

.app-scroll-body-account::-webkit-scrollbar {
    width: 6px;
}

.app-scroll-body-account::-webkit-scrollbar-track {
    background: transparent;
}

.app-scroll-body-account::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}



.input-container {
    padding: 0 20px 20px;
}

.search-box {
    display: flex;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 4px;
    transition: all 0.2s ease;
}

.search-box:focus-within {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 168, 90, 0.1);
}

.form-control-clean {
    border: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 1rem;
    width: 100%;
    color: var(--text-primary);
    outline: none;
}

.btn-icon-scan {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0 15px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.btn-icon-scan:active {
    color: var(--text-primary);
}

.btn-add-action {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0 24px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-add-action:active {
    background: var(--primary-dark);
    transform: scale(0.98);
}

/* --- 3. Product List --- */
.list-container {
    padding: 10px 20px;
}

.product-icon {
    width: 45px;
    height: 45px;
    background: rgba(0, 168, 90, 0.1);
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.product-details {
    flex-grow: 1;
    margin-left: 15px;
}

.product-code {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    font-size: 1rem;
}

.product-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* --- 4. Scanner Modal & Animation --- */
.modal-scanner .modal-content {
    background-color: #000;
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

#reader {
    width: 100%;
    background: #000;
    position: relative;
}

/* Red Laser Animation — uses transform instead of top to stay GPU-compositable */
.scan-region-highlight {
    position: absolute;
    top: 30%;
    /* start position; animation drives movement via transform */
    left: 15%;
    right: 15%;
    height: 2px;
    background: #dc2626;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.8);
    z-index: 10;
    animation: scanMove 2s ease-in-out infinite alternate;
    will-change: transform;
    pointer-events: none;
}

@keyframes scanMove {
    from {
        transform: translateY(0);
        opacity: 0.7;
    }

    to {
        transform: translateY(clamp(60px, 22vw, 120px));
        opacity: 0.7;
    }
}

/* --- Horizontal Scroller Styling --- */
.horizontal-scroll-view {
    display: flex;
    flex-wrap: nowrap;
    /* Prevents items from wrapping to next line */
    overflow-x: auto;
    /* Enables horizontal scrolling */
    gap: 12px;
    /* Space between items */
    padding: 10px 15px;
    /* Padding around the scroller */

    /* Smooth scrolling momentum for iOS */
    -webkit-overflow-scrolling: touch;

    /* Optional: Snap effect (cards lock into place) */
    scroll-snap-type: x mandatory;
}

/* Hide Scrollbar (Chrome, Safari, Opera) */
.horizontal-scroll-view::-webkit-scrollbar {
    display: none;
}

/* Hide Scrollbar (IE, Edge, Firefox) */
.horizontal-scroll-view {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Item Sizing */
.horizontal-item {
    flex: 0 0 auto;
    /* Don't grow, don't shrink, auto width */
    width: 160px;
    /* Fixed width for mobile */
    scroll-snap-align: start;
    /* Snap alignment */
}

/* --- Professional Cart Icon Styling --- */
.cart-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-btn:active {
    transform: scale(0.95);
    /* Click press effect */
}

/* The Icon Itself */
.cart-icon {
    font-size: 1.6rem;
    color: var(--color-ink-900);
    transition: color 0.2s ease;
}

/* The Counter Badge */
.cart-counter {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545;
    /* Professional Alert Red */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    /* White border creates the "cutout" look */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    padding: 0 4px;
    z-index: 2;
}

/* Hover: tint to brand color */
.cart-btn:hover .cart-icon {
    color: var(--color-primary);
}

/* Pulse Animation for the Counter (When items added) */
@keyframes popBadge {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.pop-anim {
    animation: popBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Make it wider on larger screens */
@media (min-width: 768px) {
    .horizontal-item {
        width: 200px;
    }
}

/* --- search result box --- */
.app-header {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%) !important;
    padding: 14px 16px !important;
    border-bottom: 3px solid #F97D09 !important;
    flex-shrink: 0;
    z-index: 1000;
}

/* --- Main Layout --- */
.app-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

/* --- Sidebar (Left Categories) --- */
.sidebar {
    width: 90px;
    background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
    border-right: 1px solid #f0f0f0;
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 80px;
}

/* Hide Scrollbar */
/* Hide Scrollbar */
/* 1. Define the Scrollbar Width */
.product-area {
    overflow-y: auto;
    overflow-x: auto;
    /* Ensure horizontal scroll is possible if content overflows */
    padding: 5px 15px;
}

/* 1. Define Scrollbar Size */
.sidebar::-webkit-scrollbar,
.product-area::-webkit-scrollbar {
    width: 6px;
    /* Width for Vertical Scrollbar */
    height: 10px;
    /* Height for Horizontal Scrollbar (Changed to 10px) */
}

/* 2. Style the Scrollbar Thumb */
.sidebar::-webkit-scrollbar-thumb,
.product-area::-webkit-scrollbar-thumb {
    background-color: var(--color-ink-300);
    border-radius: 10px;
}

/* 3. Style the Scrollbar Track */
.sidebar::-webkit-scrollbar-track,
.product-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* 4. Firefox Support */
.sidebar,
.product-area {
    scrollbar-width: thin;
    scrollbar-color: var(--color-ink-300) #f1f1f1;
}


.category-item-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    text-align: center;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.category-item-side:active {
    background: #efefef;
}

/* --- Active Sidebar Item Design --- */
.category-item-side.active {
    background: #fff;
    border-left-color: #00A859;
}

.category-item-side.active .cat-img-wrap {
    box-shadow: 0 2px 8px rgba(0, 168, 89, 0.2);
}


/* Active indicator is handled by border-left on .category-item-side.active */

.cat-img-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    overflow: hidden;
}

.cat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.category-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.category-item-side.active .category-name {
    color: #00A859;
    font-weight: 700;
}

.search-input-group {
    background-color: #f3f4f6;
    /* Light gray background */
    border-radius: 8px;
    display: flex;
    align-items: center;
    height: 40px;
}

.search-input-group input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 0.95rem;
    color: #333;
}

.search-input-group input::placeholder {
    color: #9ca3af;
}

/* Remove Bootstrap default focus glow */
.search-input-group input:focus {
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH SUGGESTION DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Anchor — wraps input-group + dropdown so the dropdown can be positioned
   relative to the exact edge of the search bar */
.sug-anchor {
    position: relative;
}

/* Dropdown panel */
.sug-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid rgba(249, 125, 9, 0.14);
    border-radius: 14px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 24px 56px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    /* Entrance animation */
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.sug-dropdown.sug-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Header bar ──────────────────────────────────────────────────── */
.sug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px 7px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(90deg, rgba(249, 125, 9, 0.05) 0%, transparent 100%);
}

.sug-header-label {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--color-primary, #F97D09);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sug-header-label i {
    font-size: 0.72rem;
}

/* ── Suggestion items ────────────────────────────────────────────── */
.sug-list {
    overflow-y: auto;
    max-height: 290px;
    scrollbar-width: none;
}

.sug-list::-webkit-scrollbar {
    display: none;
}

.sug-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-left: 2.5px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.14s ease, border-color 0.14s ease;
    position: relative;
}

.sug-item + .sug-item {
    border-top: 1px solid rgba(0, 0, 0, 0.045);
}

.sug-item:hover,
.sug-item--active {
    background: rgba(249, 125, 9, 0.055);
    border-left-color: var(--color-primary, #F97D09);
}

/* Thumbnail */
.sug-item-img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.sug-item-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1.1rem;
}

/* Text block */
.sug-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sug-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #111827;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sug-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.sug-item-cat {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--color-primary, #F97D09);
    background: rgba(249, 125, 9, 0.10);
    border: 1px solid rgba(249, 125, 9, 0.18);
    border-radius: 30px;
    padding: 1px 7px;
    white-space: nowrap;
}

/* Price + arrow block */
.sug-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.sug-item-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-primary, #F97D09);
    letter-spacing: -0.02em;
}

.sug-item-arrow {
    font-size: 0.7rem;
    color: #9ca3af;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sug-item:hover .sug-item-arrow,
.sug-item--active .sug-item-arrow {
    transform: translateX(2px);
    color: var(--color-primary, #F97D09);
}

/* ── Footer CTA ──────────────────────────────────────────────────── */
.sug-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(249, 125, 9, 0.03);
}

.sug-footer-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    transition: background 0.14s ease;
}

.sug-footer-btn:hover {
    background: rgba(249, 125, 9, 0.07);
}

.sug-footer-btn i:first-child {
    color: #9ca3af;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sug-footer-btn i:last-child {
    margin-left: auto;
    color: var(--color-primary, #F97D09);
    flex-shrink: 0;
}

.sug-footer-btn strong {
    font-weight: 700;
    color: #111827;
}

/* ── Loading skeleton ────────────────────────────────────────────── */
.sug-skeleton {
    padding: 6px 0;
}

.sug-skel-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
}

.sug-skel-row + .sug-skel-row {
    border-top: 1px solid rgba(0, 0, 0, 0.045);
}

.sug-skel-img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sugShimmer 1.4s infinite;
}

.sug-skel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sug-skel-line {
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sugShimmer 1.4s infinite;
}

.sug-skel-line--title {
    height: 12px;
    width: 70%;
}

.sug-skel-line--sub {
    height: 10px;
    width: 40%;
    animation-delay: 0.1s;
}

.sug-skel-price {
    width: 36px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sugShimmer 1.4s infinite;
    animation-delay: 0.2s;
}

@keyframes sugShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ─────────────────────────────────────────────────── */
.sug-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    gap: 6px;
    text-align: center;
}

.sug-empty i {
    font-size: 1.6rem;
    color: #d1d5db;
    margin-bottom: 4px;
}

.sug-empty p {
    font-size: 0.82rem;
    color: #374151;
    margin: 0;
}

.sug-empty span {
    font-size: 0.72rem;
    color: #9ca3af;
}

@media (min-width: 768px) {
    .main-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .sidebar {
        width: 240px;
        padding: 0;
    }

    .category-item-side {
        flex-direction: row;
        text-align: left;
        padding: 12px 20px;
        border-bottom: 1px solid #eef0f2;
        gap: 12px;
    }

    .cat-img-wrap {
        margin-bottom: 0;
        margin-right: 0;
    }

    .category-name {
        font-size: 0.875rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
}

/* Mobile adjustment for offcanvas width */

/* ==========================================================================
   OFFERS OFFCANVAS — FULL-HEIGHT FLEX CHAIN
   Propagates the offcanvas height all the way down to the product container
   so that justify-content:center has real space to work in.
   ========================================================================== */
#offcanvassearchOffersprod .app-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

#offcanvassearchOffersprod .product-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 0;
    /* padding lives on the container inside, not here */
}

#offcanvassearchOffersprod .product-area>.container-fluid {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    /* Preserve Bootstrap's 12px horizontal gutter so the product grid's
       negative row margins don't bleed past the viewport edge.
       Bottom padding creates clearance for the FAB cart button. */
    padding: 10px 12px 80px;
}

/* Product container fills all remaining height.
   When in empty-state mode the JS adds d-flex + justify-content-center;
   strip Bootstrap's py-5 padding so the true geometric center is used. */
#offcanvas-product-container-offers {
    min-height: 0;
}

#offcanvas-product-container-offers.d-flex {
    flex-grow: 1;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   SEARCH OFFCANVAS — EMPTY STATE CENTERING
   JS adds empty-mode to #search-scroll-container when no results.
   The product grid is absolutely positioned to fill the full
   scroll-container height; justify-content:center then has the
   entire screen to truly center the empty state content.
   ============================================================ */
#search-scroll-container.empty-mode {
    position: relative;
    overflow: hidden;
}

#search-scroll-container.empty-mode .product-grid.searchAllprod.d-flex {
    position: absolute;
    inset: 0;
    min-height: unset;
    padding: 0;
    background: #ffffff;
    z-index: 2;
}

#search-scroll-container.empty-mode .product-grid.searchAllprod.d-flex>.w-100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ==========================================================================
   EMPTY STATE COMPONENT
   Used by getEmptyStateHTML() across all product grids.
   ========================================================================== */

/* The w-100 wrapper from getEmptyStateHTML() must fill the flex container
   so the inner empty-state-container can itself center its content. */
#offcanvas-product-container-offers.d-flex>.w-100 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 2rem;
    width: 100%;
    max-width: 300px;
}

.empty-state-image {
    margin-bottom: 1.5rem;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-image svg {
    width: 90px;
    height: 90px;
    display: block;
    opacity: 0.55;
}

.empty-state-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
}

.empty-headline {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink-900);
    letter-spacing: -0.2px;
    margin: 0 0 0.45rem;
    line-height: 1.3;
}

.empty-subtext {
    font-size: 0.76rem;
    color: var(--color-ink-600);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Reset UA button appearance before applying custom styles */
.btn-secondary-mobile {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-ink-300);
    background: var(--color-white);
    color: var(--color-ink-900);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-secondary-mobile:hover {
    background: var(--color-surface);
    border-color: var(--color-ink-600);
    color: var(--color-ink-900);
    text-decoration: none;
}

.btn-secondary-mobile:active {
    transform: scale(0.96);
    background: var(--color-ink-300);
}

/* ==========================================================================
   REQUEST PRODUCT — CTA BUTTON (in empty state)
   ========================================================================== */
.btn-request-product {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    margin-top: 4px;
    border-radius: var(--radius-pill);
    border: none;
    background: linear-gradient(135deg, #00A859 0%, #007A41 100%);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 168, 89, 0.30);
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-request-product:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 18px rgba(0, 168, 89, 0.40);
}

.btn-request-product:active {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(0, 168, 89, 0.20);
}

/* ==========================================================================
   REQUEST PRODUCT — BOTTOM SHEET
   ========================================================================== */
.req-product-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-overlay-coupon);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.req-product-backdrop.open {
    opacity: 1;
}

.req-product-sheet {
    width: 100%;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.req-product-backdrop.open .req-product-sheet {
    transform: translateY(0);
}

/* Drag handle pill */
.req-product-handle {
    width: 36px;
    height: 4px;
    background: var(--color-ink-300);
    border-radius: var(--radius-pill);
    margin: 12px auto 0;
}

.req-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.req-product-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink-900);
    letter-spacing: -0.2px;
    margin: 0;
}

.req-product-close {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: var(--color-surface);
    color: var(--color-ink-600);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.78rem;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

.req-product-close:hover {
    background: var(--color-ink-300);
}

.req-product-close:active {
    transform: scale(0.92);
}

.req-product-body {
    padding: 14px 20px 8px;
}

.req-product-desc {
    font-size: 0.78rem;
    color: var(--color-ink-600);
    line-height: 1.55;
    margin: 0 0 16px;
}

.req-product-field {
    margin-bottom: 4px;
}

.req-product-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ink-600);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    margin-bottom: 7px;
}

.req-product-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--color-ink-300);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-ink-900);
    background: var(--color-surface);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.req-product-input::placeholder {
    color: var(--color-ink-300);
}

.req-product-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.12);
    background: #ffffff;
}

.req-product-footer {
    padding: 16px 20px 28px;
}

.btn-submit-request {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #00A859 0%, #007A41 100%);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 168, 89, 0.30);
    transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-submit-request:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
    transform: none;
}

.btn-submit-request:not(:disabled):hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(0, 168, 89, 0.40);
}

.btn-submit-request:not(:disabled):active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 168, 89, 0.20);
}

/* ==========================================================================
   ENTERPRISE DESKTOP INTERFACE — CONSOLIDATED ADDITIONS
   All @media(min-width:768px) blocks leave mobile layout untouched.
   ========================================================================== */

/* ── A. DESKTOP ANNOUNCEMENT BAR ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .desktop-announcement-bar {
        background: linear-gradient(90deg, #00A859 0%, #007A41 100%);
        color: #fff;
        height: 36px;
        display: flex;
        align-items: center;
        overflow: hidden;
        flex-shrink: 0;
    }

    /* ── B. DESKTOP MAIN HEADER ROW ────────────────────────────────────── */
    .desktop-header-main {
        display: grid;
        grid-template-columns: 230px auto 1fr auto;
        align-items: center;
        column-gap: 20px;
        padding: 0 32px;
        height: 74px;
        background: #fff;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Logo */
    .dh-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        flex-shrink: 0;
        cursor: pointer;
    }

    .dh-logo-img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: cover;
        border: 2.5px solid #e8f7ef;
        box-shadow: 0 2px 8px rgba(0, 168, 89, .12);
    }

    .dh-logo-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .dh-brand-row {
        display: flex;
        align-items: baseline;
        gap: 2px;
    }

    .dh-brand-main {
        font-size: 1rem;
        font-weight: 900;
        color: #1a237e;
        letter-spacing: -.5px;
    }

    .dh-brand-suffix {
        font-size: 1rem;
        font-weight: 900;
        color: #F97D09;
        letter-spacing: -.5px;
    }

    .dh-brand-tagline {
        font-size: .58rem;
        font-weight: 700;
        color: #00A859;
        letter-spacing: .4px;
        margin-top: 2px;
        text-transform: uppercase;
        display: block;
    }

    /* Location pill */
    .dh-location {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all .22s ease;
        min-width: 170px;
        max-width: 210px;
        background: #fff;
        flex-shrink: 0;
    }

    .dh-location:hover {
        border-color: #00A859;
        background: #f0fdf4;
        box-shadow: 0 4px 12px rgba(0, 168, 89, .08);
    }

    .dh-loc-icon {
        color: #00A859;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .dh-loc-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        min-width: 0;
    }

    .dh-loc-label {
        font-size: .58rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: block;
    }

    .dh-loc-value {
        font-size: .8rem;
        font-weight: 700;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .dh-loc-chevron {
        color: #94a3b8;
        font-size: .8rem;
        flex-shrink: 0;
    }

    /* Search bar */
    .dh-search {
        display: flex;
        align-items: center;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 14px;
        padding: 0 6px 0 16px;
        height: 48px;
        transition: all .25s ease;
        gap: 10px;
        min-width: 0;
    }

    .dh-search:focus-within {
        border-color: #00A859;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(0, 168, 89, .08);
    }

    .dh-search-icon {
        color: #94a3b8;
        font-size: 1rem;
        flex-shrink: 0;
        transition: color .2s;
    }

    .dh-search:focus-within .dh-search-icon {
        color: #00A859;
    }

    .dh-search-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: .9rem;
        color: #1e293b;
        font-weight: 500;
        outline: none;
        padding: 0;
        min-width: 0;
    }

    .dh-search-input::placeholder {
        color: #94a3b8;
    }

    .dh-search-btn {
        width: 38px;
        height: 36px;
        background: linear-gradient(135deg, #00A859 0%, #007A41 100%);
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s, transform .15s;
        flex-shrink: 0;
    }

    .dh-search-btn:hover {
        background: linear-gradient(135deg, #007A41 0%, #005930 100%);
        transform: scale(1.05);
    }

    /* Header actions */
    .dh-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .dh-action-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border: 1.5px solid #f1f5f9;
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        transition: all .2s ease;
        text-decoration: none;
        color: #1e293b;
        line-height: 1;
    }

    .dh-action-btn:hover {
        border-color: #e2e8f0;
        background: #f8fafc;
        color: #1e293b;
        text-decoration: none;
    }

    .dh-action-icon-wrap {
        position: relative;
        width: 38px;
        height: 38px;
        background: #f1f5f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        color: #475569;
        flex-shrink: 0;
        transition: all .2s;
    }

    .dh-action-btn:hover .dh-action-icon-wrap {
        background: #e8f7ef;
        color: #00A859;
    }

    .dh-action-text {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .dh-action-label {
        font-size: .58rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .5px;
        display: block;
    }

    .dh-action-value {
        font-size: .8rem;
        font-weight: 700;
        color: #1e293b;
        white-space: nowrap;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /* Cart badge */
    .dh-cart-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #dc2626;
        color: #fff;
        font-size: .6rem;
        font-weight: 800;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(220, 38, 38, .30);
        line-height: 1;
    }

    .dh-cart-btn {
        border-color: #e8f7ef;
        background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    }

    .dh-cart-btn:hover {
        border-color: #00A859;
        background: #f0fdf4;
        color: #1e293b;
    }

    .dh-cart-btn .dh-action-icon-wrap {
        background: #d1fae5;
        color: #00A859;
    }

    /* ── C. CATEGORY NAV BAR ───────────────────────────────────────────── */
    .dh-category-nav {
        background: #fff;
        border-bottom: 1.5px solid #f1f5f9;
        padding: 0 32px;
        height: 44px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .dh-nav-inner {
        display: flex;
        align-items: center;
        height: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 0;
    }

    .dh-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .dh-nav-all-cats {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 0 18px;
        height: 100%;
        font-size: .82rem;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #00A859 0%, #007A41 100%);
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s;
        flex-shrink: 0;
        border-right: 1px solid rgba(255, 255, 255, .2);
        letter-spacing: .2px;
    }

    .dh-nav-all-cats:hover {
        background: linear-gradient(135deg, #007A41 0%, #005930 100%);
        color: #fff;
    }

    .dh-nav-divider {
        width: 1px;
        height: 22px;
        background: #e2e8f0;
        margin: 0 6px;
        flex-shrink: 0;
    }

    .dh-nav-cats {
        display: flex;
        align-items: center;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        height: 100%;
    }

    .dh-nav-cats::-webkit-scrollbar {
        display: none;
    }

    .dh-nav-cat-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 13px;
        font-size: .78rem;
        font-weight: 600;
        color: #475569;
        text-decoration: none;
        border-radius: 8px;
        white-space: nowrap;
        transition: all .18s;
        flex-shrink: 0;
    }

    .dh-nav-cat-link:hover {
        background: #f0fdf4;
        color: #00A859;
    }

    .dh-nav-cat-link.active {
        background: #e8f7ef;
        color: #00A859;
        font-weight: 700;
    }

    .dh-nav-cat-link img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        border-radius: 4px;
    }

    /* ── D. DESKTOP HEADER — fixed, taller ─────────────────────────────── */
    .desktop-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #fff;
        box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
    }

    .main-content {
        padding-top: 154px;
    }

    /* ── E. LOGIN PAGE desktop ─────────────────────────────────────────── */
    .login-section {
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #f0fdf4 0%, #e8f7ef 35%, #f8fafc 100%);
        min-height: 100vh;
    }

    .bg-decoration {
        display: none;
    }

    .login-card {
        max-width: 440px;
        width: 100%;
        border-radius: 28px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .10), 0 8px 20px rgba(0, 168, 89, .06);
        padding: 3rem 2.5rem !important;
        margin-bottom: 0;
    }

    .drag-handle {
        display: none;
    }

    /* ── F. ADDRESS-SET desktop ────────────────────────────────────────── */
    .app-shell {
        max-width: 680px;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .04);
        margin: 2rem auto;
        height: auto;
        min-height: 75vh;
    }

    /* ── G. ORDER-SUCCESS desktop ──────────────────────────────────────── */
    body.order-success-page {
        background: linear-gradient(135deg, #f0fdf4 0%, #e8f7ef 40%, #f8fafc 100%);
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 1rem;
    }

    .order-success-page .app-container {
        max-width: 640px;
        border-radius: 28px;
        box-shadow: 0 32px 80px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 168, 89, .06);
        margin: 0 auto;
    }
}

/* ── H. BACK BUTTON (order_success.html) — all screen sizes ──────────────── */
.back-btn-fixed {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 50;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(5, 150, 105, .22);
    color: #059669;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
    transition: background .2s, box-shadow .2s, transform .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.back-btn-fixed:hover {
    background: #fff;
    border-color: #059669;
    box-shadow: 0 6px 20px rgba(5, 150, 105, .20);
    transform: scale(1.08);
    color: #047857;
    text-decoration: none;
}

.back-btn-fixed:active {
    transform: scale(.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.back-btn-fixed i {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── I. INDEX SPLASH LOADER (consolidated) ─────────────────────────────────── */
.splash-loader-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.splash-logo {
    width: 60px;
    height: auto;
    max-height: 60px;
    z-index: 2;
    object-fit: contain;
    animation: splashPulse 2s infinite ease-in-out;
}

.splash-spinner-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
    background: conic-gradient(from 0deg, transparent 0%, #F97D09 40%, transparent 40%, transparent 50%, transparent 50%, #F97D09 90%, transparent 90%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
    animation: splashSpin 1.2s linear infinite;
}

.splash-loading-text {
    position: absolute;
    bottom: -40px;
    width: 200px;
    text-align: center;
    color: #F97D09;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@keyframes splashSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes splashPulse {

    0%,
    100% {
        transform: scale(.95);
        opacity: .9;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* ── J. CONSOLIDATED TOAST SYSTEM ─────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: 90%;
    align-items: center;
}

.modern-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
    font-size: .875rem;
    font-weight: 600;
    color: #1e293b;
    transform: translateY(20px) scale(.9);
    opacity: 0;
    animation: toastIn .4s cubic-bezier(.34, 1.56, .64, 1) forwards;
    pointer-events: auto;
}

.modern-toast.toast-success {
    border-left: 4px solid #00A859;
    background-color: #f0fdf4;
}

.modern-toast.toast-error {
    border-left: 4px solid #EF4444;
    background-color: #fef2f2;
}

.modern-toast.toast-warning {
    border-left: 4px solid #F59E0B;
    background-color: #fffbeb;
}

.modern-toast i {
    font-size: 1.2rem;
}

.toast-success i {
    color: #00A859;
}

.toast-error i {
    color: #EF4444;
}

.toast-warning i {
    color: #F59E0B;
}

.modern-toast.fade-out {
    animation: toastOut .3s ease-in forwards;
}

@keyframes toastIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastOut {
    to {
        transform: translateY(20px) scale(.9);
        opacity: 0;
    }
}

.link-disabled {
    color: #6c757d !important;
    pointer-events: none;
    text-decoration: none;
}

/* OTP shake animation */
@keyframes shakeOTP {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

.shake-animation {
    animation: shakeOTP .4s ease-in-out;
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}

/* ==========================================================================
   WCAG 2.2 AA — ACCESSIBILITY ADDITIONS
   Covers: 2.4.1 Bypass Blocks, 2.4.7 Focus Visible, 1.4.3 Contrast,
           2.1.1 Keyboard, 4.1.3 Status Messages
   ========================================================================== */

/* ── Visually hidden but screen-reader accessible ────────────────────────── */
.rp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Skip navigation link (WCAG 2.4.1) ─────────────────────────────────── */
.rp-skip-link {
    position: absolute;
    top: -100%;
    left: 8px;
    z-index: 999999;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 0.15s ease;
}
.rp-skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}


/* Tighten the ring on pill/circular controls so it hugs the shape */
.rounded-pill:focus-visible,
.rounded-circle:focus-visible,
.btn-close:focus-visible,
.fab-cart-btn:focus-visible,
.var-btn-close:focus-visible {
    border-radius: var(--radius-pill) !important;
}

/* Bottom-nav items get a contained underline ring so the fixed bar looks clean */
.bottom-nav-item:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: -2px !important;
    border-radius: var(--radius-sm) !important;
}

/* ── FAB cart button — explicit focus ring (2.4.7) ─────────────────────── */
.fab-cart-btn:focus-visible {
    outline: 3px solid var(--color-primary-dark) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0, 168, 89, .25) !important;
}

/* ── Custom overlay close / action buttons ──────────────────────────────── */
.var-btn-close:focus-visible,
.coupon-bottom-sheet-custom .btn-close:focus-visible,
.sc-close-btn:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

.po-back-btn:focus-visible,
.po-back-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Make main#main-content not show a visual ring when targeted via skip
   link — the page scroll is feedback enough. ─────────────────────────── */
main#main-content:focus {
    outline: none;
}


.spinner-btn {
    width: 1.2rem;
    height: 1.2rem;
    border: .15em solid #00A859;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinBtn .75s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spinBtn {
    to {
        transform: rotate(360deg);
    }
}

/* ── K. MAIN.HTML — preloader & component styles (consolidated) ────────────── */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), visibility .6s;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0d6efd;
    border-right-color: #0d6efd;
    animation: spin 1s linear infinite;
}

.loader-ring::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffc107;
    animation: spin 2s linear infinite reverse;
}

.loader-icon {
    font-size: 2rem;
    animation: pulse 1.5s ease-in-out infinite;
    z-index: 2;
}

.loader-text {
    font-size: .9rem;
    color: #6c757d;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: fadeText 1.5s ease-in-out infinite alternate;
}

@keyframes fadeText {
    from {
        opacity: .2;
    }

    to {
        opacity: 1;
    }
}

/* Payment cards */
.enterprise-pay-toggle {
    display: none;
}

.enterprise-pay-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
    margin: 0;
}

.enterprise-pay-card .icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease-in-out;
}

.enterprise-pay-card.disabled-card {
    opacity: .55;
    cursor: not-allowed;
    background-color: #f8fafc;
    border-color: #e2e8f0;
    pointer-events: none;
}

.enterprise-pay-card.disabled-card .icon-circle {
    background-color: #e2e8f0;
}

.enterprise-pay-card .icon-color {
    color: #64748b;
    transition: color .2s ease;
}

.enterprise-pay-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.enterprise-pay-toggle:checked+.enterprise-pay-card {
    border-color: #158791;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.enterprise-pay-toggle:checked+.enterprise-pay-card .icon-circle {
    background: #158791;
}

.enterprise-pay-toggle:checked+.enterprise-pay-card .icon-color {
    color: #fff;
}

.enterprise-pay-toggle:checked+.enterprise-pay-card h6 {
    color: #158791;
}

.wallet-card:has(.payment-radio:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CATEGORY — horizontal quick-access strip  (enterprise v2)
   ═══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.main-cat-section {
    padding: 2px 0 6px;
}

/* Section header row */
.mcs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 10px;
}

.mcs-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.25px;
}

/* ── Horizontal scroll strip ────────────────────────────────── */
.main-cat-hscroll {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 16px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main-cat-hscroll::-webkit-scrollbar {
    display: none;
}

/* ── Individual card ────────────────────────────────────────── */
.mch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    width: 68px;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    color: inherit;
    padding: 8px 4px 7px;
    border-radius: 18px;
    position: relative;
    transition: background 0.2s ease;
}

/* ── Icon tile ──────────────────────────────────────────────── */
.mch-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.09),
        0 1px 2px rgba(0, 0, 0, 0.06);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease;
}

.mch-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Press feedback */
.mch-card:active .mch-icon-wrap {
    transform: scale(0.87);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* ── Active state ───────────────────────────────────────────── */
.mch-card.active {
    background: rgba(249, 125, 9, 0.08);
}

.mch-card.active .mch-icon-wrap {
    outline-offset: 3px;
    box-shadow:
        0 4px 14px rgba(249, 125, 9, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
}

/* Active dot below label */
.mch-card.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F97D09;
}

.mch-card.active .mch-label {
    color: #F97D09;
    font-weight: 800;
}

/* ── Label ──────────────────────────────────────────────────── */
.mch-label {
    font-size: 0.67rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    max-width: 68px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.18s ease;
}

/* ── Responsive fixed-count breakpoints ─────────────────────── */
@media (min-width: 378px) and (max-width: 479px) {
    .main-cat-hscroll .mch-card {
        flex: 0 0 calc(25% - 4.5px);
        width: calc(25% - 4.5px);
        max-width: none;
    }
}

@media (min-width: 480px) and (max-width: 720px) {
    .main-cat-hscroll .mch-card {
        flex: 0 0 calc(20% - 4.8px);
        width: calc(20% - 4.8px);
        max-width: none;
    }
}

/* ── Skeleton — icon block + label bar ──────────────────────── */
.mch-skeleton {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 68px;
    padding: 8px 4px 7px;
}

.mch-skeleton::before {
    content: '';
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: mch-shimmer 1.5s ease-in-out infinite;
}

.mch-skeleton::after {
    content: '';
    display: block;
    width: 44px;
    height: 9px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: mch-shimmer 1.5s ease-in-out infinite 0.15s;
}

@keyframes mch-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CATEGORY BROWSER — left-side full-screen offcanvas
   Two-pane: narrow sidebar left  +  scrollable product grid right
   ═══════════════════════════════════════════════════════════════ */
.offcanvas-main-cat-browser {
    width: 100% !important;
    max-width: 540px;
    display: flex !important;
    flex-direction: column;
    padding: 0;
}

/* Header bar */
.mcb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mcb-back,
.search-input-Catcanva {
    line-height: 1;
    padding: 4px;
    flex-shrink: 0;
}

.mcb-title {
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Body: fills remaining height, no scroll on its own */
.mcb-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
    overflow: hidden;
    height: calc(100vh - 52px);
}

/* Left sidebar: narrow, scrollable, category list */
.mcb-sidebar {
    width: 80px;
    flex-shrink: 0;
    background: #f7f8fa;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #eef0f2;
    -webkit-overflow-scrolling: touch;
}

.mcb-sidebar::-webkit-scrollbar {
    width: 0;
}

.mcb-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    cursor: pointer;
    text-align: center;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mcb-cat-item:active {
    background: #efefef;
}

.mcb-cat-item.active {
    background: #fff;
    border-left-color: #F97D09;
}

.mcb-cat-thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    overflow: hidden;
}

.mcb-cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcb-cat-item.active .mcb-cat-thumb {
    box-shadow: 0 2px 8px rgba(249, 125, 9, .25);
}

.mcb-cat-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: #475569;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.mcb-cat-item.active .mcb-cat-name {
    color: #F97D09;
}

/* Right product area: scrollable */
.mcb-products {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f7f8fa;
    -webkit-overflow-scrolling: touch;
}

.mcb-products::-webkit-scrollbar {
    width: 3px;
}

.mcb-products::-webkit-scrollbar-thumb {
    background: #dde1e7;
    border-radius: 4px;
}

/* Product cards inside the two-pane browser */
.mcb-products .product-card {
    font-size: 0.8rem;
}

.mcb-products .product-card .product-title {
    font-size: 0.75rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Empty / loader state inside right pane */
.mcb-products-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: #94a3b8;
    gap: 8px;
    font-size: 0.8rem;
}

/* Slightly compact image box for cards inside the two-pane product browser */
#main-cat-product-container .img-wrap-modern {
    aspect-ratio: 4 / 3;
}

/* Section category card */
.section-cat-card {
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: all .2s ease;
    cursor: pointer;
}

.section-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.img-wrapper {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

/* Home section skeleton loaders — shimmer placeholders shown while the section
   data loads. Reuse .img-wrapper for an identically-sized shape and .rp-shimmer
   (design-tokens.css) for the animated tint + prefers-reduced-motion support. */
.section-cat-card.is-skel {
    pointer-events: none;
    cursor: default;
}
.section-cat-card.is-skel .img-wrapper {
    margin-bottom: 8px;
}
.skel-line {
    height: 10px;
    width: 70%;
    margin: 0 auto;
    border-radius: 6px;
}

.img-wrapper .cat-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-green-tint {
    background: rgba(0, 168, 89, .06);
}

.bg-blue-tint {
    background: rgba(13, 110, 253, .06);
}

.bg-orange-tint {
    background: rgba(249, 125, 9, .06);
}

/* Swiper slide banner */
.swiper-slide-banner {
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    background: #000;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.swiper-slide-banner:hover .slide-image {
    transform: scale(1.05);
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85) 100%);
    z-index: 1;
    pointer-events: none;
}

.slide-content-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.slide-title-banner {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    line-height: 1.2;
}

.slide-desc {
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 12px;
    font-weight: 400;
}

.btn-text {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #2ed573;
    padding-bottom: 2px;
}

@media (max-width: 768px) {
    .swiper-slide-banner {
        height: 150px;
    }

    .slide-title-banner {
        font-size: 1.2rem;
    }
}

/* Brand card */
.brand-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(to bottom, #f3f3cb 60%, #efd44e 60%);
    padding-bottom: 10px;
    height: 100%;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    cursor: pointer;
    transition: transform .2s;
}

.brand-card:hover {
    transform: translateY(-3px);
}

.brand-product-img {
    height: 90px;
    width: 100%;
    object-fit: contain;
    margin-top: 10px;
    margin-bottom: 25px;
}

.brand-logo-circle {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    z-index: 2;
}

.brand-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.brand-name {
    font-weight: 700;
    font-size: .85rem;
    color: #000;
    margin-bottom: 0;
    line-height: 1.2;
}

.shop-now-text {
    font-size: .7rem;
    color: #333;
    font-weight: 500;
}

@media (min-width: 768px) {
    .brand-product-img {
        height: 120px;
        margin-bottom: 30px;
    }

    .brand-logo-circle {
        width: 50px;
        height: 50px;
    }

    .brand-logo-img {
        width: 35px;
        height: 35px;
    }

    .brand-name {
        font-size: 1rem;
    }
}

/* Section header title, time slots, etc. */
.section-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
}

.see-all-link {
    color: #ffb300;
    font-size: .9rem;
    text-decoration: none;
    font-weight: 600;
}

@media (min-width: 768px) {
    .section-header-title {
        font-size: 1.5rem;
    }
}

.time-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.time-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
}

.section-card {
    background: linear-gradient(180deg, rgba(0, 168, 90, .094) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 0, 0, .03);
}

.white-card {
    background-color: #fff;
    border-radius: 12px;
}

/* ── L. ORDER-SUCCESS — page styles (consolidated) ─────────────────────────── */
.app-container {
    width: 100%;
    max-width: 720px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-height: 100vh;
}

@media (max-width: 575px) {
    .app-container {
        box-shadow: none;
    }
}

@media (min-width: 576px) {
    .app-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-radius: 30px;
        min-height: 800px;
    }
}

#confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.app-header-gradient {
    background: linear-gradient(180deg, #D1FAE5 0%, #FFFFFF 100%);
    padding-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.check-circle-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #D1FAE5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.5rem auto 1rem;
    opacity: 0;
    animation: wrapperPopLoop 3s infinite;
}

.check-circle-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: #059669;
    z-index: 0;
    opacity: 0;
    animation: rippleOutLoop 3s infinite;
}

.check-circle {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    background-color: #059669;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 16px rgba(5, 150, 105, .3);
    color: white;
    font-size: 1.75rem;
    opacity: 0;
    transform: scale(.5);
    animation: circlePopLoop 3s infinite;
}

.check-circle i {
    opacity: 0;
    animation: checkmarkSnapLoop 3s infinite;
}

@keyframes wrapperPopLoop {
    0% {
        transform: scale(.6);
        opacity: 0;
        animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    }

    16% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(.6);
        opacity: 0;
    }
}

@keyframes circlePopLoop {

    0%,
    5% {
        transform: scale(.5);
        opacity: 0;
        animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    }

    16% {
        transform: scale(1.05);
        opacity: 1;
    }

    21% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(.5);
        opacity: 0;
    }
}

@keyframes checkmarkSnapLoop {

    0%,
    10% {
        transform: scale(.5) rotate(-30deg);
        opacity: 0;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
    }

    23% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    80% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(.5) rotate(-30deg);
        opacity: 0;
    }
}

@keyframes rippleOutLoop {

    0%,
    11% {
        transform: scale(1);
        opacity: 0;
    }

    12% {
        transform: scale(1);
        opacity: .5;
        animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    }

    38% {
        transform: scale(1.7);
        opacity: 0;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.scratch-card-wrapper {
    position: relative;
    z-index: 15;
    width: 200px;
    height: 80px;
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid rgba(236, 214, 86, .74);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .04), 0 20px 25px -5px rgba(0, 0, 0, .08), inset 0 2px 0 rgba(255, 255, 255, .9);
    transform: translateY(-4px);
    overflow: hidden;
    display: none;
}

.scratch-reward-content {
    background: linear-gradient(135deg, #E8F5E9 0%, #F8FAFC 100%);
    width: 100%;
    height: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #1B5E20;
    transition: all .6s cubic-bezier(.34, 1.56, .64, 1);
}

.scratch-reward-content.revealed {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
    color: #78350F;
    transform: scale(1.04);
    box-shadow: 0 0 25px rgba(245, 158, 11, .35), inset 0 2px 4px rgba(255, 255, 255, .8), inset 0 -2px 10px rgba(217, 119, 6, .1);
}

.scratch-reward-content.revealed h3 {
    color: #B45309;
    font-weight: 800;
    letter-spacing: -.5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}

#scratch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    z-index: 5;
    cursor: grab;
    transition: opacity .6s cubic-bezier(.25, .8, .25, 1), transform .15s ease-out;
}

#scratch-layer:active {
    cursor: grabbing;
    transform: scale(.985);
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.product-img-circle {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
    margin-bottom: 6px;
    overflow: hidden;
}

.product-img-circle img {
    width: 95%;
    height: 95%;
    object-fit: contain;
}

.ads-swiper {
    width: 100%;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
}

.icon-box-premium {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #ECFDF5 0%, #faecd1 100%);
    color: #F59E0B;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(5, 150, 105, .1), inset 0 2px 0 rgba(255, 255, 255, .8);
    border: 1px solid rgba(5, 150, 105, .15);
}

.ad-slide-1 {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
}

.ad-slide-2 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.ad-slide-3 {
    background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
}

.ads-swiper .swiper-pagination-bullet {
    background: #fff;
    opacity: .5;
    width: 6px;
    height: 6px;
}

.ads-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

.ads-swiper .swiper-pagination {
    bottom: 4px !important;
}

.r-coins-section {
    background: linear-gradient(to bottom, #fff, #fafafa);
    border-radius: 14px;
    padding: 1rem .85rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .03);
    border: 1px solid #F3F4F6;
}

.r-coins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.r-coin-card {
    background: #fff;
    border-radius: 12px;
    padding: .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #cbcbcc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .02);
    transition: all .2s ease;
}

.r-coin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
    border-color: #E5E7EB;
}

.r-coin-img-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .4rem;
    border: 1px solid #F1F5F9;
}

.r-coin-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.r-coin-mrp {
    font-size: .75rem;
    color: #9CA3AF;
    text-decoration: line-through;
    font-weight: 500;
    margin-bottom: .1rem;
}

.r-coin-value {
    font-size: .75rem;
    font-weight: 800;
    color: #D97706;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: .6rem;
}

.r-coin-btn {
    background: transparent;
    color: #00A859;
    border: 1px solid #229b3c;
    border-radius: 8px;
    padding: 6px 0;
    font-size: .75rem;
    font-weight: 700;
    width: 100%;
    transition: all .2s;
}

.r-coin-card:hover .r-coin-btn {
    background: #00A859;
    color: white;
    border-color: #00A859;
}

.r-coin-btn:active {
    transform: scale(.95);
}

.r-coins-section.fullscreen-mode {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100vh;
    z-index: 999;
    margin: 0;
    border-radius: 0;
    border: none;
    background: #F1F5F9;
    overflow-y: auto;
}

@media (min-width: 576px) {
    .r-coins-section.fullscreen-mode {
        border-radius: 32px;
        min-height: 100%;
    }
}

/* ── M. ADDRESS_SET — page styles (consolidated) ────────────────────────────── */
.modern-input-group {
    position: relative;
    margin-bottom: 24px;
    background: transparent;
}

.modern-label {
    position: absolute;
    top: -9px;
    left: 12px;
    background-color: #fff;
    padding: 0 6px;
    font-size: .75rem;
    font-weight: 700;
    color: #888;
    z-index: 10;
    transition: color .2s ease;
    pointer-events: none;
}

.modern-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #1c1c1c;
    background-color: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    outline: none;
    transition: all .2s ease;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}


.modern-input-group:focus-within .modern-label {
    color: #0b9e43;
}

.modern-input-group.error {
    animation: shakeAddr .4s cubic-bezier(.36, .07, .19, .97) both;
}

.modern-input-group.error .modern-input {
    border-color: #ff3b30 !important;
}

.modern-input-group.error .modern-label {
    color: #ff3b30 !important;
}

@keyframes shakeAddr {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* ── GPS / Current-Location Row ────────────────────────────────────── */
.gps-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f0faf5 100%);
    border: 1.5px solid #c8ead8;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease,
        border-color 0.18s ease;
    box-shadow:
        0 4px 14px rgba(0, 122, 65, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.04);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Shimmer sweep on hover */
.gps-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.gps-row:hover {
    transform: translateY(-2px);
    border-color: #00A859;
    box-shadow:
        0 10px 28px rgba(0, 122, 65, 0.14),
        0 3px 8px rgba(0, 0, 0, 0.05);
}

.gps-row:hover::after {
    transform: translateX(100%);
}

.gps-row:active {
    transform: scale(0.975);
    box-shadow: 0 3px 10px rgba(0, 122, 65, 0.10);
}

/* ── Icon box ── */
.gps-icon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    color: #fff !important;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    position: relative;
    box-shadow:
        0 8px 20px rgba(0, 122, 65, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dual ripple rings */
.gps-icon-box::before,
.gps-icon-box::after {
    content: '';
    position: absolute;
    border-radius: 18px;
    border: 2px solid rgba(0, 168, 89, 0.35);
    animation: gpsRing 2.6s ease-out infinite;
    pointer-events: none;
}

.gps-icon-box::before {
    inset: -5px;
}

.gps-icon-box::after {
    inset: -10px;
    border-color: rgba(0, 168, 89, 0.18);
    animation-delay: 0.9s;
}

@keyframes gpsRing {
    0%   { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1.32); opacity: 0; }
}

.gps-row:hover .gps-icon-box {
    transform: scale(1.07);
}

/* ── Text column ── */
.gps-text-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.gps-title {
    font-weight: 800;
    font-size: 0.9375rem;
    color: #0a4d2a;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color 0.15s ease;
}

.gps-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    display: block;
    margin-top: 3px;
    line-height: 1.35;
    transition: color 0.15s ease;
}

.gps-row:hover .gps-title   { color: #007A41; }
.gps-row:hover .gps-subtitle { color: #374151; }

/* ── Arrow chevron ── */
.arrow-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    background: #fff;
    color: #00A859;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow:
        0 4px 12px rgba(0, 122, 65, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.18s ease,
        color 0.18s ease;
}

.gps-row:hover .arrow-icon {
    transform: translateX(4px);
    background: #e8f7ef;
    color: #007A41;
}

.gps-row:active .arrow-icon {
    transform: translateX(2px) scale(0.94);
}

/* ── Enable button (permission-denied state) ── */
.btn-enable {
    background: #fff;
    color: #dc3545;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid #fca5a5;
    box-shadow:
        0 4px 12px rgba(220, 53, 69, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        transform 0.16s ease,
        box-shadow 0.18s ease,
        border-color 0.15s ease;
}

.btn-enable:hover {
    border-color: #f87171;
    box-shadow: 0 6px 16px rgba(220, 53, 69, 0.22);
    transform: translateY(-1px);
}

.btn-enable:active {
    transform: scale(0.95);
}

#view-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s ease;
}

#view-map.active {
    transform: translateX(0);
}

#map-canvas {
    width: 100%;
    height: 100%;
}

.map-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    border: none;
}

.center-pin {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .2s cubic-bezier(.175, .885, .32, 1.275);
}

.pin-label {
    background: #0c0c0c;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    opacity: 1;
    transition: opacity .2s;
}

.pin-icon {
    font-size: 3rem;
    color: red;
    position: relative;
    z-index: 1;
    margin-bottom: -6px;
}

.pin-icon::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 15%;
    background: black;
    bottom: 0;
    left: 20%;
    border-radius: 50%;
    z-index: -1;
    opacity: .8;
}

.pin-shadow {
    width: 16px;
    height: 8px;
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    filter: blur(2px);
    margin-top: -2px;
    transition: transform .2s;
}

.is-dragging .center-pin {
    transform: translate(-50%, -120%) scale(1.1);
}

.is-dragging .pin-label {
    opacity: 0;
}

.is-dragging .pin-shadow {
    transform: scale(.6);
    opacity: .5;
}

.bottom-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgb(251, 255, 253) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, .15);
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom)) 24px;
    z-index: 1000;
    max-height: 50vh;
    overflow-y: auto;
}

.address-header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid rgba(0, 0, 0, .04);
}

.loc-icon-lg {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(4, 120, 87, .3);
}

.address-details {
    display: flex;
    flex-direction: column;
}

.address-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    letter-spacing: -.01em;
}

.address-desc {
    font-size: .9rem;
    color: #3f3f3f;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    color: transparent !important;
    animation: shimmerAnim 1s linear infinite forwards;
    border-radius: 4px;
}

@keyframes shimmerAnim {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.btn-primary-custom {
    background: #0b9e43;
    color: white;
    width: 100%;
    padding: 10px;
    border-radius: 24px;
    font-weight: 700;
    border: none;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(11, 158, 67, .3);
}

.btn-primary-custom:disabled {
    background: #ccc;
    box-shadow: none;
}

.toast-custom {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff3b30;
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(255, 59, 48, .3);
    z-index: 10000;
    display: none;
}


/* ==========================================================================
   LOGIN PAGE STYLES (merged from style_login.css)
   ========================================================================== */
/* style.css */
/* --- PAGE OPENING ZOOM IN ANIMATION --- */

/* --- ENHANCED SMOOTH ENTRANCE --- */
body {
    background-color: #f8f9fa;
    overflow-x: hidden;
}

.login-section {
    /* Increased duration from 0.10s to 0.8s for a fluid motion */
    /* Updated cubic-bezier for a more elegant "deceleration" feel */
    animation: zoomInEffect 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center;
}

@keyframes zoomInEffect {
    0% {
        transform: scale(0.85);
        /* Slightly closer starting point for less 'travel' */
        opacity: 0;
        filter: blur(8px);
        /* Reduced blur for better performance */
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Updated login card animation to sync with the zoom */
.animated-up {
    /* 0.8s duration with a 0.2s delay so it finishes just after the zoom */
    animation: slideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.login-section {
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(160deg, #F97D09 0%, #d8873b 55%, #F97D09 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: visible;
    position: relative;
}


/* Update bubbles to stand out against the new gradient */
.bubble {
    background: rgba(255, 255, 255, 0.4);
    /* Slightly more opaque glass */
    backdrop-filter: blur(12px);
    /* Stronger blur for premium feel */
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}

/* Container for decorative background elements */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65%;
    overflow: hidden;
    z-index: 1;
}

/* The Professional Bubble Design */
.bubble {
    position: absolute;
    width: 85px;
    height: 85px;
    background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 50%, #E0F6FF 100%);

    backdrop-filter: blur(8px);
    border-radius: 10%;
    padding: 6px;
    /* Creates the transparent-look gap */
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatBubble 7s ease-in-out infinite;
}

.bubble img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10%;
    background: white;
    /* Clean contrast for products */
}

/* Floating Animation with subtle rotation */
@keyframes floatBubble {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(5deg);
    }
}

/* Staggered Positioning & Speed for 15 Items */
.b1 {
    top: 10%;
    left: 10%;
    animation-duration: 6s;
}

.b2 {
    top: 15%;
    left: 40%;
    animation-duration: 8s;
    animation-delay: 1s;
}

.b3 {
    top: 5%;
    left: 75%;
    animation-duration: 7s;
    animation-delay: 0.5s;
}

.b4 {
    top: 35%;
    left: 5%;
    animation-duration: 9s;
    animation-delay: 2s;
}

.b5 {
    top: 30%;
    left: 25%;
    animation-duration: 6.5s;
}

.b6 {
    top: 45%;
    left: 50%;
    animation-duration: 8.5s;
    animation-delay: 1.5s;
}

.b7 {
    top: 30%;
    left: 80%;
    animation-duration: 7.5s;
}

.b8 {
    top: 60%;
    left: 15%;
    animation-duration: 6s;
    animation-delay: 3s;
}

.b9 {
    top: 55%;
    left: 35%;
    animation-duration: 8s;
}

.b10 {
    top: 65%;
    left: 65%;
    animation-duration: 7.2s;
    animation-delay: 1s;
}

.b11 {
    top: 50%;
    left: 90%;
    animation-duration: 9s;
}

.b12 {
    top: 80%;
    left: 5%;
    animation-duration: 6.8s;
    animation-delay: 2.5s;
}

.b13 {
    top: 75%;
    left: 45%;
    animation-duration: 7.5s;
}

.b14 {
    top: 85%;
    left: 75%;
    animation-duration: 8.2s;
    animation-delay: 0.8s;
}

.b15 {
    top: 20%;
    left: 60%;
    animation-duration: 7s;
    animation-delay: 4s;
}

/* Mobile Optimization: Scale bubbles down slightly */
@media (max-width: 768px) {
    .bubble {
        width: 85px;
        height: 85px;
    }
}

/* Floating Language Button */
.language-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 0.9rem;
    border: none;
    z-index: 10;
}

/* Update the drag handle to contain the logo */
/* dsn.css */

/* The Lunar Shape (Crescent cutout) */
.drag-handle {
    width: 110px;
    height: 55px;
    /* Half-height to create the 'dip' effect */
    background: #f4f7fe;
    /* Matches the background gradient to look like a cutout */

    /* This creates the downward curve (Lunar shape) */
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;

    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    /* Positions logo at the top of the dip */
    justify-content: center;
    z-index: 10;
}

/* The Logo sitting inside the lunar dip */
.handle-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
    border: 2px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: -32px;
    /* Pulls logo up so it sits on the edge */
}

/* The Login Card with the cutout padding */
.login-card {
    background: linear-gradient(180deg, #ffffff 0%, #f0fcfb 100%);
    width: 100%;
    padding: 3rem 1.5rem 3rem 1.5rem !important;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    z-index: 5;
    position: relative;
    /* This ensures that when the card moves, it stays above other elements */
    margin-top: auto;
}

/* Mobile Input Styling */
.text-center-wrapper {
    text-align: center;
    width: 100%;
}

/* dsn.css */

.text-center-wrapper h3 {
    margin-top: 2px;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    font-weight: 700;
    text-align: center;
    /* Deep Royal Blue from 'RIGHT' in the logo */
    color: #1a237e;
}

/* Vibrant Aqua Teal from 'PAY' in the logo */
.text-brand-aqua {
    color: #00bcd4;
}

.text-center-wrapper p {
    margin-bottom: 0;
    color: #6B7280;
    opacity: 0.9;
}

.input-container,
.btn-whatsapp-premium {
    width: 100%;
}

.terms-text {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #718096 !important;
    /* Professional Slate Grey */
    margin-top: 2rem !important;
}

.terms-text a {
    color: #5c6bc0;
    /* Matches your premium button theme */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-text a:hover {
    color: #25D366;
    /* Changes to WhatsApp green on hover */
    text-decoration: underline;
}



.custom-input-group .form-control {
    border: none;
    padding: 12px;
}

.custom-input-group .form-control:focus {
    box-shadow: none;
}

/* Continue Button */
.btn-continue {
    background-color: #9fa8da;
    /* Light blue/purple from image */
    color: white;
    font-weight: 600;
    border-radius: 12px;
    border: none;
}

.btn-continue:hover {
    background-color: #7986cb;
    color: white;
}

.terms-text {
    font-size: 0.75rem;
}

.small {
    font-weight: 800;
}

/* Responsive adjustment for Desktop */
@media (min-width: 768px) {
    .login-section {
        justify-content: center;
        /* Center on desktop */
        align-items: center;
        background-color: #f8f9fa;
    }

    .login-card {
        max-width: 400px;
        border-radius: 20px;
        /* Fully rounded on desktop */
        margin-bottom: 0;
    }
}


/* Label Styling */
.input-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    display: block;
    padding-left: 4px;
}

/* WhatsApp Professional Input Group */
.whatsapp-input-group {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px 16px;
    transition: all 0.3s ease;
}

.whatsapp-input-group:focus-within {
    border-color: #25D366;
    /* WhatsApp Green */
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.1);
}

.country-selector {
    display: flex;
    align-items: center;
    padding-right: 12px;
    border-right: 1px solid #e2e8f0;
    margin-right: 12px;
    font-weight: 700;
    color: #2d3748;
}

.country-selector .flag {
    margin-right: 6px;
    font-size: 1.1rem;
}

.main-input {
    border: none !important;
    background: transparent !important;
    font-size: 1rem;
    font-weight: 500;
    color: #1a202c;
    padding: 10px 0 !important;
}

.main-input:focus {
    box-shadow: none !important;
}

.whatsapp-icon-inline {
    color: #25D366;
    font-size: 1.2rem;
    margin-left: 8px;
}

/* Premium Button Design */
.btn-whatsapp-premium {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 6px 12px 6px 24px;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-whatsapp-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3) !important;
    color: white;
}

.btn-whatsapp-premium .icon-circle {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-whatsapp-premium:hover .icon-circle {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(360deg);
}

/* OTP Modal Specific Styles */
.otp-icon-circle {
    width: 70px;
    height: 70px;
    background: rgba(37, 211, 102, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-field {
    width: 42px;
    height: 52px;
    border: 2.5px solid #e2e8f0;
    border-radius: 14px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a237e;
    background: #f8fafc;
    margin: 0 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease, background 0.2s ease;
    caret-color: transparent;
}

.otp-field:focus {
    border-color: #25D366;
    outline: none;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.15);
    background: #f0fff4;
    transform: translateY(-2px) scale(1.05);
}

.otp-field.otp-filled {
    border-color: #25D366;
    background: #f0fff4;
    color: #166534;
}

.otp-sep {
    font-size: 1.1rem;
    font-weight: 300;
    color: #94a3b8;
    margin: 0 2px;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

/* Chrome, Safari, Edge, Opera: Remove arrows from number input */
.otp-field::-webkit-outer-spin-button,
.otp-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.btn-whatsapp-premium:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
    padding: 6px 15px;
    transform: none !important;
    box-shadow: none !important;
}


.btn-whatsapp-premium span {
    flex-grow: 1;
    text-align: center;
    margin-left: 40px;
    /* Offset to counter-balance the 40px icon on the right */
}

.btn-whatsapp-premium .icon-circle {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ==========================================================================
   MAIN APP — ADDITIONAL COMPONENT STYLES (consolidated from main.html inline block)
   ========================================================================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* --- UPDATED: Transparent Background --- */
    /* 0.5 alpha gives a 50% transparent white background */
    background-color: rgba(255, 255, 255, 0.5);

    /* Keep the blur for a premium glass effect */
    backdrop-filter: blur(10px);

    z-index: 99999;
    /* Highest priority */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

/* Container for Icon and Ring */
.loader-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* The Spinning Ring */
.loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0d6efd;
    /* Primary Color */
    border-right-color: #0d6efd;
    /* Primary Color */
    animation: spin 1s linear infinite;
}

/* Double ring effect for depth */
.loader-ring::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffc107;
    /* Warning/Accent Color */
    animation: spin 2s linear infinite reverse;
    /* Spins opposite way */
}

/* Central Icon */
.loader-icon {
    font-size: 2rem;
    animation: pulse 1.5s ease-in-out infinite;
    z-index: 2;
}

/* Loading Text */
.loader-text {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: fadeText 1.5s ease-in-out infinite alternate;
}

/* Fade Out State (Applied by JS) */
#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

@keyframes fadeText {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

/* Main container that centers everything vertically and horizontally */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Ensure it takes up substantial screen space but allows scrolling if needed */
    min-height: 40vh;
    padding: 32px 24px;
    text-align: center;
    background-color: transparent;
    /* Clean white background */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Illustration styling */
.empty-state-image {
    margin-bottom: 24px;
    /* Using a soft gray/blue palette for a professional, non-alarming look */
    color: #A0AEC0;
}

.empty-state-image svg {
    /* Ensure SVG scales nicely on different device densities */
    width: 120px;
    height: 120px;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05));
    /* Subtle depth */
}

/* Typography */
.empty-headline {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 700;
    color: #1A202C;
    /* Dark, professional gray, not pure black */
    letter-spacing: -0.5px;
}

.empty-subtext {
    margin: 0 0 32px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #718096;
    /* Softer gray for secondary text */
    max-width: 300px;
    /* Prevents text from getting too wide on larger phones */
}

/* Action buttons container */
.empty-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* Space between buttons */
}

/* Primary "Pill" Button - Material Design style */
.btn-primary-mobile {
    width: 100%;
    max-width: 280px;
    /* Don't get too wide on tablets */
    padding: 14px 24px;
    /* Replace with your app's primary brand color */
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 50px;
    /* Pill shape for modern mobile feel */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
    /* Subtle shadow matching button color */
}

.btn-primary-mobile:active {
    background-color: #0b5ed7;
    /* slightly darker on tap */
    box-shadow: none;
}

/* Secondary Text Button */
.btn-secondary-mobile {
    background: none;
    border: none;
    /* Replace with your brand color */
    color: #0d6efd;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}


/* -------------------------------------------------------------------------- */
/* Animated Add to Cart Button (Custom Green Style) */
/* -------------------------------------------------------------------------- */

/* Wrapper to hold both states (Add Button & Qty Control) */
.btn-cart-wrapper {
    position: relative;
    width: 100%;
    min-width: 90px;
    height: 32px;
    /* Fixed height to match your font-size/padding look */
    border-radius: 12px;
    /* Updated to 6px */
    overflow: hidden;
    margin-top: auto;
    /* Pushes button to bottom of card */
    transition: all 0.3s ease;
    /* Optional: Shadow to make it pop like the original button might have */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* State 1: The Initial "+ Add" Button */
.btn-add-initial {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;

    /* Your Custom Styles Applied Here */
    background-color: #fff;
    border: 2px solid #fa8803;
    color: #fa8803;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 999px;

    /* Positioning Logic */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Animation Properties */
    transition: all 0.3s ease;
}

/* Hover State */
.btn-add-initial:hover {
    background-color: #F97D09;
    color: #fff;
}

/* Gradient fill for pill-style add/options buttons and qty stepper */
.btn-add-initial.rounded-pill {
    background: #fff !important;
    border: 2px solid #fa8803 !important;
    color: #fa8803 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    line-height: 1;
}

/* Small gap between the layers icon and the "Options" label */
.btn-options-dynamic {
    gap: 6px;
}
.btn-add-initial.rounded-pill.is-in-cart {
    background: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.qty-control-group.rounded-pill {
    background: linear-gradient(135deg, #ffb347 0%, #fa8803 60%, #e07600 100%) !important;
    border: none !important;
    color: #fff !important;
    height: calc(100% - 2px) !important;
    top: 1px !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(250, 136, 3, 0.32) !important;
    transition: all 0.2s ease;
}
.qty-control-group.rounded-pill .qty-btn,
.qty-control-group.rounded-pill .qty-input {
    color: #fff !important;
}
.qty-control-group.rounded-pill:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 6px 18px rgba(250, 136, 3, 0.45) !important;
}

/* State 2: The Quantity Control Group */
.qty-control-group {
    width: 100%;
    height: 100%;

    /* Active State Colors (Green background) */
    background-color: #fa8803;
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border-radius: 6px;
    /* Match wrapper radius */

    /* Positioning Logic (Hidden initially) */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateY(100%);
    /* Pushed down */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Icons inside the group (+ / - / Trash) */
.qty-btn {
    cursor: pointer;
    padding: 0 8px;
    /* Adjusted padding for smaller button */
    font-size: 1rem;
    display: flex;
    align-items: center;
    height: 100%;
    user-select: none;
    color: white;
}

.qty-btn:active {
    opacity: 0.7;
}

/* The Input Field */
.qty-input {
    width: 30px;
    background: transparent;
    border: none;
    text-align: center;
    color: white;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0;
    pointer-events: none;
}

/* Product-card image overlay badge */
.product-card-design .img-wrap-modern .pcd-badge-row {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}
.product-card-design .img-wrap-modern .pcd-brand-pill {
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 11px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.2px;
    line-height: 1.5;
}

/* Product-card stepper: mirror the −/+ icons for pixel-perfect symmetry.
   Overrides Bootstrap's px-1/py-1 (!important) and the legacy qty-btn padding
   so each side button is an equal fixed-width box with a centered glyph. */
.product-card-design .qty-control-group {
    padding: 0 4px !important;
}
.product-card-design .qty-control-group .qty-btn {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 100%;
    padding: 0;
    justify-content: center;
}
.product-card-design .qty-control-group .qty-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    text-align: center;
}

/* --- ACTIVE STATE LOGIC --- */

/* When active: Move initial button UP and out */
.btn-cart-wrapper.active .btn-add-initial {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* When active: Move Quantity Group UP and in */
.btn-cart-wrapper.active .qty-control-group {
    transform: translateY(0);
    opacity: 1;
    z-index: 3;
}

/* --- 1. Backdrop & Sheet (Standard Android Bottom Sheet) --- */
.var-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--z-overlay-variant);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: flex-end;
}

.var-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.var-bottom-sheet {
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding-bottom: 20px;
    transform: translateY(100%);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}

.var-backdrop.active .var-bottom-sheet {
    transform: translateY(0);
}

/* --- 2. Header --- */
.var-header {
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.var-title-group {
    display: flex;
    flex-direction: column;
}

.var-product-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 2px;
}

.var-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
}

.var-btn-close {
    background: #f8f9fa;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #495057;
    cursor: pointer;
    transition: background 0.2s;
}

.var-btn-close:hover {
    background: #e9ecef;
}

/* --- 3. Content List --- */
.var-content {
    padding: 10px 0;
    /* Full width list feel */
    overflow-y: auto;
    scrollbar-width: none;
}

.var-content::-webkit-scrollbar {
    display: none;
}

.var-list {
    display: flex;
    flex-direction: column;
}

/* --- 4. The Row Item Design --- */
.var-row-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f8f9fa;
    gap: 15px;
    /* Spacing between columns */
}

/* Column 1: Image */
.var-img-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #eaeaea;
}

.var-img-box img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Column 2: Info (Flex Grow) */
.var-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.var-weight {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 2px;
}

.var-pricing {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.var-price-current {
    font-weight: 700;
    color: #000;
}

.var-price-old {
    text-decoration: line-through;
    color: #adb5bd;
    font-size: 0.8rem;
}

.var-badge-save {
    background: #e6fcf5;
    color: #0ca678;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

/* Column 3: Action (Right Aligned) */
.var-action {
    flex-shrink: 0;
    width: 100px;
    /* Fixed width for button consistency */
    display: flex;
    justify-content: flex-end;
}

/* --- 5. Override Button Styles for List View --- */
/* The button wrapper is imported from your previous code, 
       but we reset margin-top to 0 so it centers vertically in the row */
.var-row-item .btn-cart-wrapper {
    margin-top: 0 !important;
    box-shadow: none;
    /* Cleaner look in list */
}

.heart-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 10px;
    row-gap: 14px;
    padding: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.heart-grid>div {
    width: 80px;
    flex-shrink: 0;
}

.heart-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    /* Creates the Heart Shape */
    clip-path: path("M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
    /* Scale the path coordinate system to fit container */
    transform: scale(3.5);
    /* Adjust based on container size usually, but simpler to use masking for responsiveness */
    /* Better Responsive Heart Approach using Mask */
    clip-path: none;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center / contain;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center / contain;

    background: #ffcdd2;
    /* Fallback pink color */
    margin: 0 auto;
}

/* ── Category tile: square card matching reference design ── */
.heart-simple {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background-color: #ebebeb;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
    display: block;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.heart-simple:active {
    transform: scale(0.94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.heart-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.heart-label {
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 6px;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-card {
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    height: 100%;
    transition: transform 0.2s;
}

/* Specific background colors to match the App look */
.bg-green-light {
    background-color: #e8f5e9;
}

/* Light Green */
.bg-blue-light {
    background-color: #e3f2fd;
}

/* Light Blue */
.bg-orange-light {
    background-color: #fff3e0;
}

/* Light Orange */

/* The 2x2 Grid for the 4 images */
.mini-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columns */
    gap: 4px;
    /* Space between images */
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.5);
    /* Slight white backing */
    padding: 4px;
    border-radius: 8px;
}

/* Individual small images */
.mini-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Keeps them square */
    object-fit: cover;
    border-radius: 4px;
    background-color: #fff;
}

/* The Heading Text */
.cat-title {
    font-size: 0.75rem;
    /* Small text for mobile fitting */
    font-weight: 700;
    color: #333;
    margin-bottom: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop Adjustments: Make text slightly bigger */
@media (min-width: 768px) {
    .cat-title {
        font-size: 0.9rem;
    }
}

body {
    background-color: #f8f9fa;
}

/* --- Section Header --- */
.section-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
}

.see-all-link {
    color: #ffb300;
    /* Darker yellow for text */
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
}

/* --- Brand Card Styles (The Yellow/Beige Card) --- */
.brand-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    /* Create the two-tone background split: 60% Light, 40% Yellow */
    background: linear-gradient(to bottom, #f3f3cb 60%, #efd44e 60%);
    padding-bottom: 10px;
    height: 100%;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s;
}

.brand-card:hover {
    transform: translateY(-3px);
}

/* Product Image Group Area */
.brand-product-img {
    height: 90px;
    width: 100%;
    object-fit: contain;
    margin-top: 10px;
    margin-bottom: 25px;
    /* Space for the overlapping logo */
}

/* The Circular Logo Overlapping the line */
.brand-logo-circle {
    position: absolute;
    top: 60%;
    /* Position exactly on the color split line */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.brand-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Bottom Text Area */
.brand-info {
    margin-top: 5px;
}

.brand-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #000;
    margin-bottom: 0;
    line-height: 1.2;
}

.shop-now-text {
    font-size: 0.7rem;
    color: #333;
    font-weight: 500;
}

/* --- Everyday Essentials Product Card --- */
.product-card-bg {
    background: white;
    border-radius: 12px;
    padding: 10px;
    position: relative;
    border: 1px solid #eee;
    height: 100%;
}

.discount-badge {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: #efd44e;
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.prod-img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 8px;
}

.prod-title {
    font-size: 0.8rem;
    margin-bottom: 2px;
    line-height: 1.2;
    /* Center the Title */
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve two lines so single-line titles keep buttons aligned across cards */
    min-height: 2.4em;
}

.price-text {
    font-weight: bold;
    font-size: 0.95rem;
}

.mrp-text {
    text-decoration: line-through;
    font-size: 0.75rem;
    color: #999;
    margin-left: 5px;
}

.btn-add-outline {
    border: 1px solid #efd44e;
    color: #d68f00;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    width: 100%;
    padding: 4px 0;
    border-radius: 6px;
}

/* --- Desktop Tweaks --- */
@media (min-width: 768px) {
    .brand-product-img {
        height: 120px;
        margin-bottom: 30px;
    }

    .brand-logo-circle {
        width: 50px;
        height: 50px;
    }

    .brand-logo-img {
        width: 35px;
        height: 35px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .section-header-title {
        font-size: 1.5rem;
    }
}

#compact-offers {
    width: 100%;
    max-width: 1200px;
    padding: 10px;
    margin: 0 auto;
}

/* --- Swiper Styles --- */
.swiper {
    width: 100%;
    padding-bottom: 4px;
    /* Space for dots */
    height: -webkit-fill-available;
}

/* Note: Added 'swiper-slide' to HTML, but we style your custom class */
.swiper-slide-banner {
    /* Low profile height */
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #000;
    /* Fallback color */
}

/* The Image */
.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    /* Removes bottom space */
}

/* Hover Effect: Gentle Zoom */
.swiper-slide-banner:hover .slide-image {
    transform: scale(1.05);
}

/* The Gradient Overlay */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Badge (Top Left) — scoped to banner slides only */
.swiper-slide-banner .offer-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Text Content (Bottom Overlay) */
.slide-content-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.slide-title-banner {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.slide-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    font-weight: 400;
}

.btn-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 2px solid #2ed573;
    padding-bottom: 2px;
}

/* --- Pagination Dots --- */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #2ed573;
    opacity: 1;
    width: 18px;
    border-radius: 10px;
    transition: all 0.3s;
}

/* --- Mobile Tweaks --- */
@media (max-width: 768px) {
    #compact-offers {
        padding: 6px;
    }

    .swiper-slide-banner {
        height: 150px;
    }

    .slide-title-banner {
        font-size: 1.2rem;
    }
}

/* Section Cards */
.section-card {
    background: linear-gradient(180deg, rgba(0, 168, 90, 0.094) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    /* Spacing between cards */
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.white-card {
    background-color: #ffffff;
    border-radius: 12px;
}

/* Delivery Location */
.location-icon {
    font-size: 24px;
    color: #00796b;
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Time Slots Grid */
.time-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}


.time-btn:hover {
    background-color: #fdfdfd;
}



.time-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #adb5bd !important;
}

/* Order Type Radio */
.form-check-input:checked {
    background-color: #FFC107;
    border-color: #FFC107;
}

.form-check-label {
    font-size: 0.9rem;
}

/* ==========================================================================
   PAYMENT METHOD SECTION - ENTERPRISE UI
   ========================================================================== */

/* ==========================================================================
   PAYMENT CARDS - ENTERPRISE EDITION
   ========================================================================== */

/* Hide native bootstrap radio behavior */
.enterprise-pay-toggle {
    display: none;
}

/* Compact Card Styling */
.enterprise-pay-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
    /* Ensures both cards are exactly the same height */
    margin: 0;
}

/* Circular Background for Icons */
.enterprise-pay-card .icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    /* Soft grey background */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   DISABLED PAYMENT CARD STATE
   ========================================================================== */
.enterprise-pay-card.disabled-card {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #f8fafc;
    /* Subtle greyed-out background */
    border-color: #e2e8f0;
    pointer-events: none;
    /* Physically prevents clicks on the label */
}

/* Dim the icon circle to show it's inactive */
.enterprise-pay-card.disabled-card .icon-circle {
    background-color: #e2e8f0;
}

.enterprise-pay-card .icon-color {
    color: #64748b;
    /* Sleek slate grey */
    transition: color 0.2s ease;
}

/* Hover Effect */
.enterprise-pay-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* Active/Checked State (The "Enterprise Deep Slate" Magic) */
.enterprise-pay-toggle:checked+.enterprise-pay-card {
    border-color: #158791;
    /* Deep Slate Border */
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Invert the icon circle color when selected */
.enterprise-pay-toggle:checked+.enterprise-pay-card .icon-circle {
    background: #158791;
    /* Dark circle */
}

/* Turn the icon white when selected */
.enterprise-pay-toggle:checked+.enterprise-pay-card .icon-color {
    color: #ffffff;
}

/* Darken the title text when selected */
.enterprise-pay-toggle:checked+.enterprise-pay-card h6 {
    color: #158791;
}

/* =========================================
   ACTIVE / CHECKED STATES
   ========================================= */

/* Wallet Active State */
.wallet-card:has(.payment-radio:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.wallet-card:has(.payment-radio:checked) .custom-radio-circle {
    border-color: #3b82f6;
}

.wallet-card:has(.payment-radio:checked) .custom-radio-circle::after {
    background-color: #3b82f6;
    transform: translate(-50%, -50%) scale(1);
}

/* Online Active State */
.online-card:has(.payment-radio:checked) {
    border-color: #8b5cf6;
    background: #faf5ff;
}

.online-card:has(.payment-radio:checked) .custom-radio-circle {
    border-color: #8b5cf6;
}

.online-card:has(.payment-radio:checked) .custom-radio-circle::after {
    background-color: #8b5cf6;
    transform: translate(-50%, -50%) scale(1);
}

/* COD Active State */
.cod-card:has(.payment-radio:checked) {
    border-color: #10b981;
    background: #f0fdf4;
}

.cod-card:has(.payment-radio:checked) .custom-radio-circle {
    border-color: #10b981;
}

.cod-card:has(.payment-radio:checked) .custom-radio-circle::after {
    background-color: #10b981;
    transform: translate(-50%, -50%) scale(1);
}

/* Fallback for older browsers that don't support :has() */
@supports not selector(:has(a, b)) {
    .payment-radio:checked~.pay-card-visual {
        background: rgba(0, 0, 0, 0.02);
    }

    .payment-radio:checked~.pay-card-visual .custom-radio-circle::after {
        background-color: #111;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* --- 4. Grid & Cards --- */
.section-cat-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.section-cat-card:active {
    transform: scale(0.95);
}

.img-wrapper {
    background-color: #f3f6f8;
    /* Default pastel grey */
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    /* Perfect Square */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    padding: 0;
}

/* Subtle pastel variations for realism */
.bg-blue-tint {
    background-color: #eaf6ff;
}

.bg-green-tint {
    background-color: #e8f5e9;
}

.bg-yellow-tint {
    background-color: #fff9c4;
}

.bg-pink-tint {
    background-color: #fce4ec;
}

.bg-purple-tint {
    background-color: #f3e5f5;
}

.cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-title {
    font-size: 0.75rem;
    line-height: 1.2;
    color: #333;
    font-weight: 500;

    /* Required for Ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Truncation Properties */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Vendor prefix (Currently required for most browsers) */
}

/* ════════════════════════════════════════════════════════════════
           PRODUCT VIEW OFFCANVAS  —  Enterprise Redesign
           ════════════════════════════════════════════════════════════════ */

/* Shell */
#offcanvasProductView {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    background: #f4f6f9;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 576px) {
    #offcanvasProductView {
        max-width: 100%;
    }
}

/* ── Header bar ─────────────────────────── */
.pvh-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    z-index: 10;
}

.pvh-back,
.pvh-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #0f172a;
    font-size: 1rem;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.pvh-back:hover,
.pvh-back:active,
.pvh-action:hover,
.pvh-action:active {
    color: #0f172a;
}

.pvh-title {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
    text-align: center;
}

/* ── Scrollable body ───────────────────── */
.pv-scroll-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pv-scroll-body::-webkit-scrollbar {
    display: none;
}

/* ── Image gallery ─────────────────────── */
.pv-gallery {
    background: #ffffff;
}

.product-swiper-products-view {
    height: 285px;
    background: #ffffff;
}

.product-swiper-products-view .swiper-button-next,
.product-swiper-products-view .swiper-button-prev {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
    color: #0f172a;
}

.product-swiper-products-view .swiper-button-next::after,
.product-swiper-products-view .swiper-button-prev::after {
    font-size: 0.65rem;
    font-weight: 900;
}

.product-swiper-products-view .swiper-pagination-bullet {
    background: #cbd5e1;
    width: 6px;
    height: 6px;
    opacity: 1;
    transition: all 0.25s;
}

.product-swiper-products-view .swiper-pagination-bullet-active {
    background: #00A859;
    width: 18px;
    border-radius: 4px;
}

.pv-carousel-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 356px;

}

.pv-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Product info block ────────────────── */
.product-card-bg-design {
    
    border-radius: 22px 22px 0 0;
    margin-top: -14px;
    padding: 20px 16px 16px;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
}

.pvi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pv-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    letter-spacing: -0.4px;
    flex: 1;
    margin: 0;
}

.pvi-wish {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pvi-wish:active {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
}

.pvi-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.rating-pill-minimal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 3px 9px;
    font-size: 0.73rem;
    font-weight: 700;
    color: #1e293b;
}

.rating-pill-minimal i {
    color: #f59e0b;
    font-size: 0.65rem;
}

.pvi-sep {
    color: #cbd5e1;
}

.pvi-stock {
    font-size: 0.73rem;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pvi-stock i {
    font-size: 0.68rem;
}

.short-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 16px;
}

.pvi-pack-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #00A859;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 10px;
}

/* ── Variant option tiles ──────────────── */
.unit-option {
    height: 68px;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    background: #f8fafc;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

.unit-option:active {
    transform: scale(0.96);
}

.unit-option.selected {
    border-color: #00A859;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.12);
}

.badge-save-pill {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    padding: 2px 7px;
    border-bottom-left-radius: 10px;
    z-index: 2;
}

.unit-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}

.unit-price {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.unit-old-price {
    font-size: 0.65rem;
    color: #94a3b8;
    text-decoration: line-through;
    font-weight: 500;
}

.check-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 0.88rem;
    color: #00A859;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.unit-option.selected .check-icon {
    opacity: 1;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Details accordion ─────────────────── */
.gradient-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    margin-top: 6px;
}

.pva-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8fafc;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.pva-trigger:active {
    background: #f1f5f9;
}

.pva-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.pva-chevron {
    font-size: 0.78rem;
    color: #64748b;
    transition: transform 0.25s ease;
}

.pva-body {
    padding: 14px 16px;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.65;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.chevron-bounce {
    animation: bounceDown 2s infinite;
}

@keyframes bounceDown {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(3px);
    }

    60% {
        transform: translateY(1.5px);
    }
}

/* ── Recommendations ───────────────────── */
.grocer-rec-section {
    padding: 16px 12px;
    margin-top: 8px;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(0, 168, 89, 0.10);
}
.ws-add{
 height: 40px;
 width: 40px;
}
.grocer-rec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 4px;
}

.grocer-rec-title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #064e3b;
    margin: 0;
    letter-spacing: -0.25px;
    display: flex;
    align-items: center;
    gap: 7px;
}

#recContainer {
    margin-bottom: 76px;
}

.title-icon {
    color: #10b981;
    font-size: 1.05rem;
    font-size: 1.1rem;
}




/* ── Footer wrapper + bar ──────────────── */
.pv-footer-wrapper {
    flex-shrink: 0;
}

.pv-footer {
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
}

/* ── Footer inner layout ───────────────── */
.pvf-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 20px;
}

/* Price column */
.pvf-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pvf-mrp {
    font-size: 0.73rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
    line-height: 1;
    margin: 0;
}

.pvf-current-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}

.pvf-price {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.6px;
    line-height: 1;
}

.pvf-saving {
    display: inline-flex;
    align-items: center;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border: 1px solid #bbf7d0;
}

/* ── Add / qty action area ─────────────── */
/* The .active class is toggled by the global toggleCartState() —
           same mechanism used by standard product cards. */
.pv-action-area {
    width: 136px;
    height: 46px;
    flex-shrink: 0;
    position: relative;
}

/* Default (not in cart): Add visible, qty hidden */
.pv-action-area .pv-btn-add {
    display: flex !important;
}

.pv-action-area .pv-qty-wrapper {
    display: none !important;
}

/* Active (in cart): Add hidden, qty visible */
.pv-action-area.active .pv-btn-add {
    display: none !important;
}

.pv-action-area.active .pv-qty-wrapper {
    display: flex !important;
}

.pv-btn-add {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fa8803 0%, #F97D09 60%, #DF6B00 100%);
    color: #ffffff;
    border: none;
    border-radius: 26px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 5px 16px rgba(249, 125, 9, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pv-btn-add:hover {
    box-shadow: 0 8px 22px rgba(249, 125, 9, 0.42);
}

.pv-btn-add:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(249, 125, 9, 0.20);
}

.pv-qty-wrapper {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 2px solid #00A859;
    border-radius: 26px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.pv-qty-btn {
    background: transparent;
    color: #00A859;
    border: none;
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.pv-qty-btn:active {
    background: rgba(0, 168, 89, 0.10);
}

.pv-qty-input {
    flex: 1;
    text-align: center;
    border: none;
    background: transparent;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    outline: none;
    pointer-events: none;
}

/* --- OVERLAY BACKDROP --- */
.overlay-container-notify {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    /* Dark dimmed background */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* ANCHORS CONTENT TO THE VERY BOTTOM */
    z-index: 99988;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

/* Active State for Overlay */
.overlay-container-notify.active {
    opacity: 1;
    visibility: visible;
}

/* --- MODAL WRAPPER (Holds Button + Card) --- */
.modal-wrapper {
    width: 100%;
    max-width: 580px;
    /* Mobile width constraint for desktop view */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Slide up animation */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Smooth snap */
}

.overlay-container-notify.active .modal-wrapper {
    transform: translateY(0);
}

/* --- FLOATING CLOSE BUTTON --- */
.close-btn-floating {
    background: #000;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 15px;
    /* Space between button and the card */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: background 0.2s;
}

.close-btn-floating:active {
    background: #333;
}

/* --- THE MAIN CARD --- */
.promo-card {
    width: 100%;
    background-color: #38cd3e;
    /* Base Green */
    position: relative;
    overflow: hidden;
    /* Keeps background rays strictly inside */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.2);
    /* Perfect Android Bottom Sheet Curve */
    border-top-left-radius: 45%;
    border-top-right-radius: 45%;
    padding-bottom: env(safe-area-inset-bottom, 20px);

    /* iPhone/Android safe area */
}

/* --- SUNBURST BACKGROUND EFFECT --- */
.promo-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.08) 0deg 10deg,
            transparent 10deg 20deg);
    animation: rotateSunburst 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rotateSunburst {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- CONTENT WRAPPER --- */
.content-wrap {
    position: relative;
    z-index: 2;
    /* Sit above sunburst */
    width: 100%;
    padding: 0 20px 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- LOGO & WALLET ICON --- */
.wallet-icon {
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
    display: flex;
    justify-content: center;
    align-items: center;
}

.wallet-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.brand-logo {
    font-size: 26px;
    font-weight: 900;
    color: #2610a3;
    /* Your custom color */
    margin-bottom: 0px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.brand-light {
    color: #000000;
    font-weight: 500;
}

.brand-slogan {
    color: #030F44;
    font-size: 11px;
    /* Small size */
    text-transform: uppercase;
    /* Forces text to ALL CAPS */
    font-weight: 800;
    /* Makes it bold and readable */
    letter-spacing: 0.5px;
}

.main-headline {
    font-size: 24px;
    font-weight: 900;
    color: white;
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    margin: 10px 0 25px 0;
    text-transform: uppercase;
}

/* --- OFFER CIRCLES --- */
.offers-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 25px;
}

.offer-circle {
    background: linear-gradient(180deg, #ffeb3b 0%, #fbc02d 100%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #2e8b32;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.circle-text-main {
    font-size: 38px;
    font-weight: 900;
    color: white;
    line-height: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.circle-text-sub {
    font-size: 16px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.symbol {
    font-size: 20px;
    vertical-align: top;
}

.pill-badge {
    position: absolute;
    bottom: -12px;
    background: #1b5e20;
    color: white;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- FEATURE LIST --- */
.features-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    text-align: left;
    backdrop-filter: blur(2px);
}

.icon-wrapper {
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.icon-wrapper::after {
    content: "✓";
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #4caf50;
    color: white;
    font-size: 9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
}

.feature-text h3 {
    font-size: 13px;
    font-weight: 800;
    color: #051b05;
    margin-bottom: 2px;
}

.feature-text p {
    font-size: 12px;
    color: #0f350f;
    font-weight: 600;
}

/* --- CTA BUTTON --- */
.cta-btn {
    background-color: #ffd600;
    color: #000;
    width: 90%;
    padding: 16px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s;
}

.cta-btn:active {
    transform: scale(0.97);
}

/* --- MINI EXPRESS DELIVERY NAV BADGE --- */

.nav-badge-container {
    display: inline-flex;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s ease;
}

/* Push effect on tap/click */
.nav-badge-container:active {
    transform: scale(0.95);
}

.nav-badge-top {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

.nav-badge-icon {
    position: relative;
    width: 42px;
    height: 42px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* The Circle */
.nav-badge-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: 12px;
    border: 2px solid #0f132a;

    /* --- PROFESSIONAL 3D BACKGROUND UPGRADE --- */

    /* 1. Metallic/Pearl Radial Gradient (Creates a simulated light source at the top left) */
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #eef0ff 50%, #d0d5ed 100%);

    /* 2. Layered 3D Shadows */
    box-shadow:
        0 4px 6px rgba(15, 19, 42, 0.25),
        /* Bottom drop shadow makes it float off the page */
        inset 0 2px 3px rgba(255, 255, 255, 0.9),
        /* Top inner highlight makes it look like glossy glass/plastic */
        0 0 0 1px rgba(255, 255, 255, 0.5);
    /* Your existing clean white halo */
}

.nav-badge-time {
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    color: #ff9f1c;
    line-height: 1;
    margin-top: 1px;
}

.nav-badge-unit {
    font-size: 8px;
    font-weight: 800;
    color: #0f132a;
    letter-spacing: 0.5px;
    margin-top: 0px;
}

/* Speed Lines */
/* Base line styling */
.nav-badge-line {
    background-color: #0f132a;
    height: 4px;
    /* Made slightly thicker (was 3px) */
    border-radius: 3px;
    position: absolute;
    z-index: 1;
}

/* Top line */
.nav-line-1 {
    width: 16px;
    /* Made longer */
    top: 15px;
    /* Positioned neatly near the top */
    left: -8px;
    /* Pulled further left so it sticks out */
    opacity: 0.7;
}

/* Middle line (Longest for the speed effect) */
.nav-line-2 {
    width: 24px;
    /* Made significantly longer */
    top: 70%;
    transform: translateY(-50%);
    left: -14px;
    /* Pulled furthest to the left */
    opacity: 1;
    /* Fully solid */
}

/* Bottom line */
.nav-line-3 {
    width: 16px;
    /* Made longer */
    bottom: 0px;
    /* Positioned neatly near the bottom */
    left: -8px;
    /* Pulled further left */
    opacity: 0.7;
}

/* The "EXPRESS" Text */
.nav-badge-express {
    background-color: #00A859;
    color: #ffffff;
    height: 20px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    padding-right: 8px;
    padding-left: 18px;
    margin-top: 0px;
    /* Extra padding to clear the circle */
    margin-left: -14px;

    /* Tuck under the circle */
}

/* The "DELIVERY" Text */
.nav-badge-delivery {
    background-color: #ff9f1c;
    color: #ffffff;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    margin-top: -10px;
    /* Overlap upwards */
    margin-left: 32px;
    /* Offset right */
    position: relative;
    z-index: 5;
    /* Behind the top row */
}

/* Fluid adjustments for the tightest screens (e.g., 389px) */
@media (max-width: 415px) {
    .mobile-app-bar {
        padding: 0 8px;
        /* Reclaim some edge space */
        gap: 6px;
    }

    .brand-title {
        font-size: 1rem !important;
        /* Scale down slightly to ensure fit */
    }

    .brand-slogan {
        font-size: 0.5rem !important;
        letter-spacing: 1px !important;
    }

    /* Slightly soften the shadow to prevent muddiness on small screens */
    .nav-badge-container {
        filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
    }

    /* 1. Shrink the main icon wrapper */
    .nav-badge-icon {
        width: 34px;
        height: 34px;
    }

    /* 2. Scale down the 3D Circle */
    .nav-badge-circle {
        width: 32px;
        height: 32px;
        margin-top: 8px;
        /* Tighter top spacing */
        border-width: 1.5px;
    }

    /* 3. Adjust circle typography */
    .nav-badge-time {
        font-size: 13px;
        margin-top: 2px;
    }

    .nav-badge-unit {
        font-size: 6.5px;
    }

    /* 4. Refine the Speed Lines */
    .nav-badge-line {
        height: 3px;
        /* Slightly thinner */
    }

    .nav-line-1 {
        width: 12px;
        top: 10px;
        left: -5px;
        /* Pull back in slightly */
    }

    .nav-line-2 {
        width: 18px;
        left: -9px;
    }

    .nav-line-3 {
        width: 12px;
        bottom: 2px;
        left: -5px;
    }

    /* 5. Scale the EXPRESS text pill and fix overlap */
    .nav-badge-express {
        height: 18px;
        font-size: 9px;
        padding-right: 6px;
        padding-left: 14px;
        /* Reduced to match the smaller circle radius */
        margin-left: -10px;
        /* Tighter tuck under the circle */
        border-radius: 4px;
    }

    /* 6. Scale the DELIVERY text pill and fix vertical overlapping */
    .nav-badge-delivery {
        font-size: 8px;
        padding: 2px 6px;
        margin-top: -6px;
        /* Adjust upward overlap */
        margin-left: 24px;
        /* Pull left to align perfectly with smaller elements */
    }
}

/* --- Seamless Attached Cart Bar (Blinkit/Instamart Style) --- */
.bottom-cart-attached {
    position: fixed;
    bottom: 65px;
    /* Flush with the 65px bottom nav — zero gap */
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%);
    /* Deep Brand Green */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 9990;
    cursor: pointer;
    padding: 6px 26px;
    box-shadow: 0 -4px 15px rgba(0, 168, 90, 0.2);
    transition: transform 0.2s ease, opacity 0.3s;
}

.bottom-cart-attached:active {
    background-color: #009650;
    /* Slightly darker green on tap */
}

.cart-attached-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LEFT SIDE */
.cart-left-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    padding-right: 15px;
}

.cart-prog-info {
    display: flex;
    flex-direction: row;
    /* Changed from column so they sit side-by-side */
    align-items: baseline;
    /* Aligns the bottom of the texts perfectly */
    gap: 6px;
    /* Adds a nice space between the words */
    line-height: 1.1;
}

.cart-prog-info .text-light-green {
    font-size: 0.75rem;
    color: #ffffff;
    font-weight: 500;
}

.cart-prog-info strong {
    font-size: 0.9rem;
    /* Made slightly larger to stand out */
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.cart-prog-bar {
    width: 100%;
    max-width: 160px;
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    overflow: hidden;
}

.cart-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, #14A44D, #14a47e);
    /* Vibrant Yellow/Gold progress */
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* RIGHT SIDE */
.cart-right-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Overlapping Images */
.overlap-img-group {
    display: flex;
    align-items: center;
}

.overlap-img-group img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #00a85a;
    /* Matches background so they cut into each other */
    object-fit: cover;
    margin-left: -14px;
    /* Pulls images left to overlap */
    background-color: #ffffff;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overlap-img-group img:nth-child(1) {
    z-index: 3;
    margin-left: 0;
}

.overlap-img-group img:nth-child(2) {
    z-index: 2;
}

.overlap-img-group img:nth-child(3) {
    z-index: 1;
}

/* View Button */
.view-btn-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
}

.view-cart-text {
    font-weight: 800;
    font-size: 1.05rem;
    margin-right: 6px;
}

.view-cart-arrow {
    font-size: 1.2rem;
    font-weight: bold;
    animation: bounceUp 1.5s infinite;
    /* Gentle bounce */
}

@keyframes bounceUp {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-4px);
    }

    60% {
        transform: translateY(-2px);
    }
}

/* --- CART ROW PREMIUM NATIVE ANIMATIONS --- */
.cart-row-animate-enter {
    /* Uses a spring-like cubic-bezier for a subtle, professional 'pop' */
    animation: cartRowEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center center;
}

.cart-row-animate-exit {
    /* Uses Material Design's standard smooth ease-in-out curve */
    animation: cartRowExit 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top center;
}

@keyframes cartRowEnter {
    0% {
        opacity: 0;
        /* Slides up gently from the bottom while slightly smaller */
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cartRowExit {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 120px;
        /* Safe upper bound for your row height */
        padding-top: 0.5rem;
        /* Matches Bootstrap py-2 */
        padding-bottom: 0.5rem;
    }

    40% {
        /* Fades out and slides left quickly... */
        opacity: 0;
        transform: translateX(-40px) scale(0.95);
        /* ...BUT holds its physical space so the list doesn't snap up yet */
        max-height: 120px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    100% {
        /* Finally, smoothly collapses the height to 0 after it's invisible */
        opacity: 0;
        transform: translateX(-50px) scale(0.9);
        max-height: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        border-color: transparent !important;
        /* Hides border smoothly without 1px jumps */
        overflow: hidden;
    }
}

/* --- RECOMMENDATION STAGGERED ANIMATIONS --- */
.recommendation-animate-enter {
    opacity: 0;
    /* Spring physics curve for a beautiful snap */
    animation: recFadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes recFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- FREE DELIVERY CHECKOUT WIDGET --- */
/* --- FREE DELIVERY HOVER EFFECT --- */
#checkout-free-delivery-widget[data-bs-toggle="offcanvas"]:active,
#checkout-free-delivery-widget[data-bs-toggle="offcanvas"]:hover {
    transform: scale(0.98);
    opacity: 0.9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fd-progress-bg {
    height: 6px;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.fd-progress-fill {
    height: 100%;
    /* Beautiful Orange Gradient for 'Almost There' */
    background: linear-gradient(90deg, #ff9800, #ff5722);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy spring fill */
}

.fd-progress-fill.success {
    /* Beautiful Green Gradient for 'Unlocked' */
    background: linear-gradient(90deg, #00b09b, #96c93d);
}

.fd-unlocked-text {
    animation: fdPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fdPopIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}



/* =========================================
   PREMIUM CHECKOUT CARDS (Timer & Free Delivery)
   ========================================= */

/* ================================================================
           DELIVERY TIMER CARD — Enterprise Redesign (dtc-*)
        ================================================================ */

.dtc-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(0, 168, 89, 0.14);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 168, 89, 0.08);
}

/* Animated shimmer accent line along the bottom edge */
.dtc-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            #00A859 25%,
            #00d4ff 50%,
            #00A859 75%,
            transparent 100%);
    background-size: 250% 100%;
    animation: dtc-shimmer 3.5s linear infinite;
}

@keyframes dtc-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Main flex row */
.dtc-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 15px;
}

/* Lottie zone — clips the scaled SVG to a fixed viewport */
.dtc-icon-zone {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Scale the Lottie container so the SVG renders zoomed-in.
           transform does not affect layout, overflow:hidden on the parent clips it. */
.dtc-card .delivery-lottie-wrap {
    width: 70px;
    height: 70px;
    transform: scale(2.5);
    transform-origin: center center;
}

/* Text zone */
.dtc-text-zone {
    flex: 1;
    min-width: 0;
}

.dtc-badge-row {
    margin-bottom: 5px;
}

.dtc-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(90deg,
            rgba(0, 168, 89, 0.10) 0%,
            rgba(0, 212, 255, 0.07) 100%);
    border: 1px solid rgba(0, 168, 89, 0.22);
    border-radius: 20px;
    padding: 2px 9px 2px 6px;
    font-size: 0.58rem;
    font-weight: 800;
    color: #00875a;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.dtc-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00A859;
    flex-shrink: 0;
    animation: dtc-pulse 1.8s ease-in-out infinite;
}

@keyframes dtc-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.7);
    }
}

.dtc-headline {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtc-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtc-sub i {
    font-size: 0.75rem;
    color: #00A859;
    flex-shrink: 0;
}

/* CTA zone */
.dtc-cta-zone {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Express delivery toggle switch (mirrors .fb-urgent-toggle from service.html) */
.dtc-express-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.dtc-express-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dtc-express-slider {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #e2e8f0;
    transition: background 0.2s;
    cursor: pointer;
}

.dtc-express-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.dtc-express-toggle input:checked + .dtc-express-slider {
    background: #00A859;
}

.dtc-express-toggle input:checked + .dtc-express-slider::before {
    transform: translateX(18px);
}

.dtc-express-toggle input:disabled + .dtc-express-slider {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Card highlight when express is active */
.dtc-card.dtc-express-active {
    border-color: rgba(0, 168, 89, 0.40);
    box-shadow:
        0 0 0 3px rgba(0, 168, 89, 0.10),
        0 4px 16px rgba(0, 168, 89, 0.12);
}

.dtc-cta-hint {
    font-size: 0.58rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Match the Free Delivery Widget's shape to the Timer */
.widget-card-match {
    border-radius: 1rem !important;
    /* Matches rounded-4 */
    border: none !important;
}

/* =========================================
           ADDRESS BOTTOM SHEET (Ultra-Modern Native App)
           ========================================= */

/* --- Panel Backdrop & Glassmorphism --- */
.addr-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    /* Deep slate overlay instead of harsh black */
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 99990;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.addr-backdrop.open {
    display: flex;
    opacity: 1;
}

/* --- The Sheet Surface --- */
.addr-panel {
    width: 100%;
    height: auto;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 10px);
}

.addr-backdrop.open .addr-panel {
    transform: translateY(0);
}

/* --- iOS Style Drag Handle --- */
.addr-drag-handle {
    width: 38px;
    height: 5px;
    background-color: #cbd5e1;
    border-radius: 10px;
    margin: 10px auto 4px;
    display: block;
}

/* --- Clean Header --- */
.addr-panel-head {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.addr-panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.addr-dismiss {
    border: none;
    background: rgba(250,136,3,.08);
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    border: 1px solid rgba(250,136,3,.28);
}

.addr-dismiss:active {
    background: #e2e8f0;
    color: #0f172a;
    transform: scale(0.9);
}

/* --- Scrollable Content Area --- */
.addr-panel-content {
    padding: 16px 24px 24px;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    /* Prevents background scrolling */
}

.addr-panel-content::-webkit-scrollbar {
    display: none;
}

.addr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

/* ===================================================================
           ADDRESS RADIO CARD — Premium design
           Selected state is driven by the hidden radio sibling, so the
           checkmark, border, and icon tint stay in sync with `:checked`.
           =================================================================== */
.addr-radio-card {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

.addr-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.addr-card-visual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 46px 10px 10px;
    border: 1px solid #e9eef4;
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
}

.addr-radio-card:active .addr-card-visual {
    transform: scale(0.982);
    transition: transform 0.12s ease;
}

.addr-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background 0.18s ease, color 0.18s ease;
}

.addr-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.addr-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.83rem;
    color: #111827;
    line-height: 1.2;
}

.addr-text {
    font-size: 0.73rem;
    color: #6b7280;
    line-height: 1.35;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addr-default-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fff0de;
    color: #c45e00;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

.addr-default-pill i {
    font-size: 0.65rem;
}

/* Check indicators — scoped under .addr-radio-card to override the global
           .check-circle animation used on the order-success page (line ~3932).
           !important is required only on properties that the global rule sets
           with higher specificity (position, transform, animation, opacity). */
.addr-radio-card .uncheck-circle,
.addr-radio-card .check-circle {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    font-size: 1.2rem;
    line-height: 1;
    z-index: 1;
    transition: opacity 0.18s ease;
}

.addr-radio-card .uncheck-circle {
    color: #d1d5db;
    opacity: 1 !important;
}

.addr-radio-card .check-circle {
    color: #F97D09;
    opacity: 0 !important;
}

/* --- 🔥 BRAND THEME: Checked State Styling --- */
.addr-radio-card input:checked+.addr-card-visual {
    border-color: #F97D09;
    background: #fff8f0;
    box-shadow: 0 0 0 1px rgba(249, 125, 9, 0.15);
}

.addr-radio-card input:checked+.addr-card-visual .addr-icon {
    background: #F97D09;
    color: #ffffff;
}

.addr-radio-card input:checked+.addr-card-visual .uncheck-circle {
    opacity: 0 !important;
}

.addr-radio-card input:checked+.addr-card-visual .check-circle {
    opacity: 1 !important;
}

.addr-radio-card input:focus-visible+.addr-card-visual {
    outline: 2px solid rgba(249, 125, 9, 0.4);
    outline-offset: 2px;
}

/* --- Premium "Add New Address" Button --- */
.btn-add-new {
    width: 100%;
    height: 46px;
    /* Perfect mobile touch target height */
    border: 2px dashed #a7f3d0;
    /* Soft dashed green border */
    background: #f0fdf4;
    /* Ultra-light green background */
    color: #00A859;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.btn-add-new:active {
    transform: scale(0.97);
    background: #dcfce7;
    border-color: #00A859;
}

/* --- Desktop Specifics --- */
@media (min-width: 768px) {
    .addr-backdrop {
        align-items: center;
    }

    .addr-drag-handle {
        display: none;
    }

    .addr-panel {
        width: 480px;
        max-width: 90%;
        border-radius: 24px;
        transform: scale(0.95) translateY(20px);
        opacity: 0;
        padding-bottom: 0;
    }

    .addr-backdrop.open .addr-panel {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Full Screen Map Overlay */
.map-fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    /* Map background fallback */
    z-index: 99993;
    /* Above regular offcanvas */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.map-fs-overlay.active {
    transform: translateX(0);
}

/* Map Header & Floating Search */
.map-header {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
}

/* 1. The Search Box Parent */
.map-search-box {
    position: absolute;
    top: 65px;
    left: 16px;
    right: 16px;
    background: #fff;
    border-radius: 12px;
    /* Smoother, modern corners */
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    z-index: 10;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

/* Add a subtle green glow when the user is typing */
.map-search-box:focus-within {
    border-color: #0b9e43;
    box-shadow: 0 6px 20px rgba(11, 158, 67, 0.15);
}

.map-search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    background-color: transparent;

    /* Mobile Typing Fixes */
    user-select: text !important;
    -webkit-user-select: text !important;
    pointer-events: auto !important;
}

/* 2. The Google Dropdown Container */
.pac-container {
    z-index: 999999 !important;
    position: absolute !important;

    /* 🔥 THE MAGIC TRICK: Match the exact width and position of the search box */
    left: 16px !important;
    width: calc(100% - 32px) !important;

    font-family: 'Plus Jakarta Sans', sans-serif;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #eaeaea !important;
    margin-top: 10px;
    overflow: hidden;
    /* Keeps items inside the rounded corners */
}

/* 3. The Individual Address Suggestions */
.pac-item {
    padding: 14px 16px !important;
    cursor: pointer !important;
    border-top: 1px solid #f4f6f8 !important;
    display: flex !important;
    align-items: center;
    color: #555;
    transition: background-color 0.2s ease;
}

/* Remove border from the very first item */
.pac-item:first-child {
    border-top: none !important;
}

/* Touch fixes */
.pac-item * {
    pointer-events: none !important;
}

/* Hover/Active states */
.pac-item:hover,
.pac-item:active {
    background-color: #f0fdf4 !important;
    /* Very subtle brand green tint */
}

/* 4. Typography inside the suggestions */
/* The main title of the location */
.pac-item .pac-item-query {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin-right: 6px;
}

/* The secondary text (City, State) */
.pac-item span:last-child {
    color: #777 !important;
    font-size: 0.85rem !important;
}

/* 5. The Google Pin Icon next to text */
.pac-icon {
    margin-right: 12px !important;
    margin-top: 0 !important;
    opacity: 0.6;
}

/* Hide the "Powered by Google" logo to keep it looking like a native app */
.pac-logo::after {
    display: none !important;
}

/* Map Area & Center Pin */
.map-area {
    flex-grow: 1;
    position: relative;
    background-color: #eef2f8;
    overflow: hidden;
    /* Ensure touches register on this block */
    pointer-events: auto;
}

/* --- PROFESSIONAL MAP PIN ANIMATIONS --- */
.map-center-pin-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none !important;
}

.map-center-pin-container i {
    font-size: 3rem;
    color: red;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The shadow under the pin */
.pin-shadow {
    width: 15px;
    height: 6px;
    background: rgba(0, 0, 0, 0.753);
    border-radius: 50%;
    margin-top: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* When the map is dragging, lift the pin up */
.map-center-pin-container.dragging img {
    transform: translateY(-15px);
}

.map-center-pin-container.dragging .pin-shadow {
    transform: scale(0.5);
    opacity: 0.5;
}

.btn-current-loc {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #2e7d32;
    color: #2e7d32;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    /* CRITICAL: Ensures the button is clickable */
    pointer-events: auto !important;
    cursor: pointer;
}

.map-pin-tooltip {
    background: #333;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    padding: 8px 12px;
    border-radius: 6px;
    line-height: 1.3;
    margin-bottom: 8px;
    position: relative;
    white-space: nowrap;
}

.map-pin-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* --- BOTTOM SHEET 1: Location Confirm --- */
.map-bottom-sheet {
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px 16px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    z-index: 10;
    position: relative;
}

.loc-info-box {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

/* --- BOTTOM SHEET 2: Full Address Form --- */
.address-form-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 1070;

    /* 1. FLEX LAYOUT */
    display: flex;
    flex-direction: column;

    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 2. HEIGHT & OVERFLOW FIXES (CRITICAL) */
    max-height: 85vh;
    /* Keep it slightly below full screen */
    overflow: hidden;
    /* Stops content from expanding the parent */
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
}

.address-form-sheet.active {
    transform: translateY(0);
}

.form-sheet-header {
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 3. SOLIDIFY HEADER */
    background: #fff;
    flex-shrink: 0;
    z-index: 5;
}

/* --- THE SCROLLABLE CONTAINER --- */
.form-sheet-body {
    padding: 16px;
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* 4. STOP BACKGROUND SCROLL BLEED */
    overscroll-behavior-y: contain;

    /* 5. EXTRA PADDING FOR KEYBOARD */
    padding-bottom: 60px;
}

/* Material Design Outlined Inputs */
.mat-input-group {
    position: relative;
    margin-bottom: 24px;
}

.mat-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 14px 12px;
    font-size: 0.95rem;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.mat-input:focus {
    border-color: #2e7d32;
    border-width: 2px;
    padding: 13px 11px;
    /* Adjust padding to prevent jumping when border thickens */
}

.mat-label {
    position: absolute;
    top: -8px;
    left: 10px;
    background: #fff;
    padding: 0 4px;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

/* Tag/Chip Selection */
.tag-chip-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tag-chip {
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #555;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.tag-chip.active {
    border-color: #2e7d32;
    color: #2e7d32;
    background: #f0fdf4;
    font-weight: 600;
}

.form-sheet-footer {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #eee;

    /* 6. SOLIDIFY FOOTER */
    flex-shrink: 0;
    z-index: 5;
}

.btn-solid-green {
    background: #2e7d32;
    color: white;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.btn-solid-green:active {
    background: #1b5e20;
}

/* Disabled state for the Save Address button */
.btn-solid-green:disabled {
    background: #a5d6a7;
    /* Faded out green */
    color: #f1f8e9;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
    /* Prevents any clicks */
}

/* ==========================================================
   🔥 ULTRA-MODERN TOAST NOTIFICATIONS
   ========================================================== */
#toast-container {
    position: fixed;
    bottom: 85px;
    /* Safely clears the mobile bottom nav bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column-reverse;
    /* Newest toasts appear at the bottom, pushing older ones up */
    gap: 10px;
    pointer-events: none;
    /* Let clicks pass through to the app */
    width: max-content;
    max-width: 90%;
    align-items: center;
}

.modern-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    /* Slightly padded for better touch targets */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    font-size: 0.65rem;
    /* Clean readable size */
    font-weight: 700;
    color: #1e293b;

    /* Animation entry properties */
    transform: translateY(20px) scale(0.9);
    opacity: 0;
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* Premium Spring Physics */
    pointer-events: auto;
}

/* --- THEME COLORS --- */
.modern-toast.toast-success {
    border-left: 4px solid #00A859;
    background-color: #f0fdf4;
}

.modern-toast.toast-error {
    border-left: 4px solid #EF4444;
    background-color: #fef2f2;
}

.modern-toast.toast-warning {
    border-left: 4px solid #F59E0B;
    background-color: #fffbeb;
}

.modern-toast.toast-info {
    border-left: 4px solid #3b82f6;
    background-color: #eff6ff;
}

/* --- ICON COLORS --- */
.modern-toast i {
    font-size: 1.1rem;
}

.toast-success i {
    color: #00A859;
}

.toast-error i {
    color: #EF4444;
}

.toast-warning i {
    color: #F59E0B;
}

.toast-info i {
    color: #3b82f6;
}

/* --- ANIMATIONS --- */
.modern-toast.fade-out {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    to {
        transform: translateY(20px) scale(0.9);
        opacity: 0;
    }
}

/* ==========================================================================
   PROFESSIONAL CALENDAR (FLATPICKR) THEME
   ========================================================================== */
.flatpickr-calendar {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 10px !important;
    width: 280px !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: #0b9e43 !important;
    border-color: #0b9e43 !important;
    font-weight: bold;
}

.flatpickr-day:hover {
    background: rgba(11, 158, 67, 0.1) !important;
}

/* ==========================================================================
   CHECKOUT ITEMS COLLAPSE ANIMATION
   ========================================================================== */
.transition-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the collapse is open (aria-expanded="true"), rotate the icon 180 degrees */
#btn-toggle-cart-items[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
    color: var(--primary-green) !important;
    /* Optional: turn green when open */
}

/* Styling for the dynamically injected Android-style list items */
.checkout-list-item {
    background-color: #fdfdfd;
    transition: background-color 0.2s ease;
}

.checkout-list-item:active {
    background-color: #f0f0f0;
}

.gradient-icon-boxes {
    /* 1. Choose your gradient colors */
    background: linear-gradient(45deg, #11998e, #38ef7d);

    /* 2. Clip the background to the text (icon) shape */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. Make the actual text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Optional: Adjust size and ensure the background applies correctly */
    display: inline-block;
    font-size: 1rem;
}

/* ==========================================
   PREMIUM 30PX OFFER AD BANNER
   ========================================== */
.offer-strip-swiper {
    width: 100%;
    height: 40px;
    /* Exact 30px height as requested */
    border-radius: 6px;
    /* Modern Android App curved edges */
    background-color: #f8f9fa;
    /* Light background while loading */
    overflow: hidden;
}

.offer-strip-img {
    width: 100%;
    height: 40px;
    object-fit: cover;
    /* Ensures the image doesn't squash or stretch */
    display: block;
}

/* Optional: Make the transition super smooth like a continuous ticker */
.offer-strip-swiper .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

/* ==========================================================================
   PREMIUM FLOATING CART BUTTON (FAB)
   ========================================================================== */
.fab-cart-btn {
    position: absolute;
    bottom: 24px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* Glossy Emerald Green Gradient */
    background: linear-gradient(135deg, #e08938 0%, #F97D09 100%);
    color: #ffffff;
    border: none;

    /* Perfect Center Alignment for Icon */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;

    /* Premium Glowing Shadow */
    box-shadow: 0 8px 20px rgba(0, 168, 89, 0.35);
    z-index: 1060;
    /* Keeps it above all scrollable products */

    /* Bouncy Animation */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    cursor: pointer;
}

/* Tactile Press Effect */
.fab-cart-btn:hover,
.fab-cart-btn:active {
    transform: scale(0.92);
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.5);
}

/* The Red Notification Badge */
.fab-cart-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #ff3b30;
    /* Vibrant iOS Red */
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 6px;
    border-radius: 50px;
    border: 2.5px solid #ffffff;
    /* Creates a cutout effect against the green button */
    line-height: 1;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Hides the badge if it's empty, we will control this with JS */
    display: none;
}

/* ==========================================================================
   PRODUCT VIEW: STACKED FOOTER & CART BAR FIX
   ========================================================================== */
.pv-footer-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1070;
    /* Stay above all scrolling product content */
    display: flex;
    flex-direction: column;
    box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.08);
}

/* Override the global fixed styling so it stacks perfectly on the Add button */
.pv-inner-cart-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: none !important;
    /* Wrapper handles the shadow */
}

/* Ensure the scrollable body has enough space so nothing hides behind the double-footer */
.pv-scroll-body {
    padding-bottom: 36px !important;
}

/* ==========================================================================
   🎉 FREE DELIVERY UNLOCKED: PREMIUM CSS EFFECTS (ALIGNMENT FIXED)
   ========================================================================== */

@keyframes premiumShimmerSweep {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* 1. The Checkout Widget Glow (Uses Relative Positioning) */
#checkout-free-delivery-widget[data-confetti-fired="true"] {
    background-color: #e8f5e9 !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2), inset 0 0 10px rgba(40, 167, 69, 0.05) !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* 2. The Product View Footer Glow (CRITICAL FIX: Keeps Absolute Flexbox Layout) */
.pv-footer-wrapper[data-confetti-fired="true"] {
    /* Forces it to stay pinned to the bottom and stack correctly */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;

    /* Adds the green premium glow without breaking alignment */
    background-color: #e8f5e9 !important;
    box-shadow: 0px -6px 20px rgba(40, 167, 69, 0.15) !important;
    border-top: 2px solid rgba(40, 167, 69, 0.3) !important;
    /* Only top border so it doesn't shift sideways */
    transition: all 0.4s ease-in-out;
    overflow: hidden;
}

/* 3. The Sparkling Light Sweep Effect (Runs on both) */
#checkout-free-delivery-widget[data-confetti-fired="true"]::after,
.pv-footer-wrapper[data-confetti-fired="true"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg,
            transparent 20%,
            rgba(255, 214, 0, 0.1) 30%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(40, 167, 69, 0.1) 70%,
            transparent 80%);
    background-size: 200% auto;
    animation: premiumShimmerSweep 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    pointer-events: none;
    /* Ensures users can still click the Add button underneath the light sweep */
    z-index: 20;
}

/* ==========================================================================
   🚀 ANIMATED COLORFUL ROCKET ICON
   ========================================================================== */

/* 1. The floating animation */
@keyframes rocketHover {

    0%,
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        /* Moves slightly up and to the right, tilting like a takeoff */
        transform: translate(2px, -2px) rotate(8deg);
    }
}

/* 2. The gradient icon styling */
/* 2. The gradient icon styling */
.animated-rocket {
    /* Vibrant fire/space gradient */
    background: linear-gradient(135deg, #ff007a 0%, #ff6a00 50%, #fec800 100%);

    /* Standard property for modern compatibility */
    background-clip: text;

    /* WebKit property for Safari and older iOS browsers */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: inline-block;
    /* Required for transforms to work on icons */
    font-size: 0.95rem;
    /* Make the icon slightly larger than the text */

    /* Apply the smooth animation */
    animation: rocketHover 1.5s ease-in-out infinite;
}

/* ==========================================================================
   🌈 COLORFUL ANIMATED BASKET ICON
   ========================================================================== */

/* 1. The subtle heartbeat pulse animation */
@keyframes basketPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        /* Slightly enlarges in the middle of the animation */
    }
}

.colorful-basket {
    /* Replace the background line with this: */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 50%, #c3cfe2 100%);

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: basketPulse 2s infinite ease-in-out;
}

/* ==========================================================================
   🛍️ PREMIUM BOTTOM CHECKOUT BAR
   ========================================================================== */

/* 1. The Floating Glass Background Container */


/* 2. The Emerald Gradient Button */
.btn-checkout {
    /* Rich green gradient */
    background: linear-gradient(135deg, #f09948 0%, #F97D09 100%);
    color: #ffffff !important;
    border: none;

    /* A soft green glowing shadow instead of a harsh black one */
    box-shadow: 0 8px 20px rgba(0, 168, 89, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* 3. Click / Press Effect */
.btn-checkout:active {
    transform: scale(0.97);
    /* Shrinks slightly when tapped */
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.15) !important;
    /* Lowers the glow */
}

/* 4. Subtle Arrow Animation */
@keyframes slideRightGently {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

.btn-checkout .checkout-arrow {
    animation: slideRightGently 2s infinite ease-in-out;
}

/* ==========================================================================
   📱 MOBILE INFINITE SCROLL FIX
   ========================================================================== */
#search-scroll-container,
#SearchAllProdPage .offcanvas-body {
    overflow-y: auto !important;

    /* 1. Forces native, buttery smooth momentum scrolling on iOS/Android */
    -webkit-overflow-scrolling: touch !important;

    /* 2. Prevents the "pull-to-refresh" browser action from breaking the scroll */
    overscroll-behavior-y: contain;
}

/* ==========================================================================
   OFFCANVAS: MY ACCOUNT (ULTRA PREMIUM, DENSE, MULTI-COLOR, SMOOTH)
   ========================================================================== */

/* 1. Base Setup & Typography */
#offcanvasAccount {
    font-size: 0.8rem;
    /* Reduced Base Font Size */
    background-color: #f8faf9;
    /* Subtle light green-tinted canvas background */
    color: #374151;
    /* Elegant dark gray */
}

/* 2. Lag-Free Smooth Collapse Animations */
/* Hardware acceleration and optimized cubic-bezier curve for luxurious feel */
#offcanvasAccount .collapsing {
    transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: height;
    transform: translateZ(0);
}

/* --- Profile Section --- */
.profile-section-modern {
    background: linear-gradient(180deg, #eedfd1 0%, #ffffff 100%);
    padding: 14px 18px 18px;
    /* Padding reduced by 2px */
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 168, 89, 0.05);
}

.profile-coins-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 60px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffedd1 100%);
    border: 1px solid rgba(217, 119, 6, 0.18);
}

.profile-coins-badge i {
    font-size: 1.05rem;
    color: #d97706;
    line-height: 1;
}

.profile-coins-badge span {
    font-size: 0.65rem;
    font-weight: 700;
    color: #92400e;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
}

.profile-avatar-modern {
    width: 55px;
    height: 55px;
}

.profile-avatar-modern img {
    border: 2px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.edit-badge {
    position: absolute;
    bottom: 0;
    right: -2px;
    background: #fff;
    color: #00A859;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Premium Banner --- */
.premium-banner-modern {
    background: linear-gradient(135deg, rgb(212, 151, 80) 0%, #F97D09 100%);
    border-radius: 14px;
    margin: -8px 14px 18px;
    /* Margins/Padding tightened */
    padding: 14px 18px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 6px 16px rgba(0, 168, 89, 0.2) !important;
}

.premium-glow {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
}

.premium-bg-icon {
    position: absolute;
    right: -15px;
    bottom: -25px;
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.06);
    transform: rotate(-15deg);
}

.premium-icon-box {
    background: rgba(251, 191, 36, 0.2);
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.btn-subscribe-modern {
    background: #ffd700;
    color: #1f2937;
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(251, 191, 36, 0.35);
    transition: transform 0.2s;
}

.btn-subscribe-modern:active {
    transform: scale(0.95);
}

/* --- Action Grid (Multi-color, compact) --- */
.action-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2, 8px);
}

.action-card-modern {
    background: #fff;
    border-radius: 14px;
    padding: var(--space-3, 12px) var(--space-1, 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02) !important;
}

.action-card-modern span {
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
}

.action-card-modern:active {
    background: #e2ad3b;
    transform: scale(0.97);
}

/* 1. Ensure the base card transitions smoothly */
.action-card-modern {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.action-card-modern[aria-expanded="true"] {

    /* Blends from a lighter highlight down to your exact gold */
    background: linear-gradient(145deg, #f5cc76 0%, #e2ad3b 100%) !important;

    /* Note: You might need to force the text inside to be black/dark for readability */
    color: #fffbfb !important;

    box-shadow: 0 6px 15px rgba(226, 173, 59, 0.3) !important;
    transform: translateY(-2px);
}

/* 3. Optional: Change the text color when active */
.action-card-modern[aria-expanded="true"] span {
    color: #fffbfb !important;
}

.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* --- Menu Sections & Rows --- */
.menu-section {
    background: #fff;
    margin-top: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02) !important;
}

.section-title {
    padding: 14px 18px 4px;
    font-size: 0.65rem;
    font-weight: 800;
    /* Tightened */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.extra-mrg {
    padding-bottom: 40px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    /* Tightened */
    text-decoration: none;
    color: #1f2937;
    transition: background-color 0.2s;
}

.menu-item:active {
    background-color: #f8faf9;
}

.menu-icon-wrapper {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 14px;
    font-size: 1 rem;
}

.menu-text {
    flex-grow: 1;
    font-weight: 700;
    font-size: 0.85rem;
}

.menu-arrow {
    color: #9ca3af;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.menu-item[aria-expanded="true"] .menu-arrow {
    transform: rotate(90deg);
}

/* --- Forms & Radios --- */
.custom-radio-input {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.custom-radio-input:checked {
    background-color: #00A859;
    border-color: #00A859;
}

.address-item {
    transition: all 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.address-item:active {
    transform: scale(0.98);
}

/* --- Scroll Wrappers --- */
.wishlist-scroll-wrapper,
.rewards-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}

.wishlist-scroll-wrapper::-webkit-scrollbar,
.rewards-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.wishlist-card {
    width: 110px;
    scroll-snap-align: start;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.wishlist-img-box {
    width: 50px;
    height: 50px;
}

.wishlist-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.wishlist-remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #fff;
    color: #9ca3af;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    z-index: 2;
    transition: color 0.2s;
}

.wishlist-remove-btn:active {
    color: #ef4444;
    background: #fef2f2;
}

/* --- Coupons & Scratch Cards --- */
/* ==========================================================================
   ULTRA-MODERN COUPON STYLING
   ========================================================================== */

/* The Card Container */
.modern-coupon-card {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.04));
}

/* --- LEFT SIDE: Ultra-Modern Gradients --- */
.coupon-left {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    position: relative;
    /* Adding a subtle inner glow */
    box-shadow: inset -2px 0 10px rgba(0, 0, 0, 0.05);
}

/* Vibrant Green for Fixed Discounts */
.bg-modern-green {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
}

/* Deep Violet/Fuchsia for Percentage Discounts */
.bg-modern-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Sunset Orange/Red for Free Delivery */
.bg-modern-orange {
    background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
}

/* --- RIGHT SIDE: Matte Finish --- */
.bg-matte-light {
    background-color: #fafafa;
    /* Flat, soft off-white */
}

/* Premium Base Card */
/* ==========================================================================
   ULTRA-MODERN REWARD CARDS (Compact & Premium)
   ========================================================================== */


.coupon-right {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- THE DIVIDER --- */
.coupon-divider {
    position: relative;
    width: 0px;
    border-left: 2px dashed #cbd5e1;
    /* Softer dash color */
    z-index: 1;
}

/* Punch holes matching the matte background */
.coupon-divider::before,
.coupon-divider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f8faf9;
    /* Match the Offcanvas background */
    border-radius: 50%;
    left: -11px;
}

.coupon-divider::before {
    top: -10px;
}

.coupon-divider::after {
    bottom: -10px;
}

/* Code Badge styling to fit the matte theme */
.coupon-code-badge {
    background: #f1f5f9;
    /* Matte grayish-blue */
    border: 1px dashed #cbd5e1;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    display: inline-block;
    letter-spacing: 0.5px;
}

/* Copy Button */
.btn-copy-code {
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, color 0.2s;
}

.btn-copy-code:active {
    transform: scale(0.92);
    background: #e2e8f0;
}

.scratch-card {
    width: 90px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.scratch-card:active {
    transform: scale(0.94);
}

.scratch-foil {
    background-color: #fcd34d;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.2) 20px), linear-gradient(135deg, #fef08a 0%, #fcd34d 100%);
}

.foil-glare {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    pointer-events: none;
}

/* --- Referral / Share --- */
.referral-header {
    background: linear-gradient(135deg, #e6f6ed 0%, #d1fae5 100%);
    overflow: hidden;
}

.referral-bg-shape-1 {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 168, 89, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

.referral-bg-shape-2 {
    position: absolute;
    bottom: -25px;
    right: -25px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

.border-dashed {
    border-top-style: dashed !important;
    border-color: #cbd5e1 !important;
}

/* --- About & App Icon --- */
.brand-logo-modern {
    background: linear-gradient(135deg, #e6f6ed 0%, #d1fae5 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.15);
}

.legal-link-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.legal-link-item:active {
    background-color: #f3f4f6 !important;
    transform: scale(0.97);
}

/* --- Delete Account --- */
.btn-delete-action {
    transition: all 0.2s ease;
}

.btn-delete-action:active {
    transform: scale(0.96);
}

/* --- Orders Collapse UX --- */
.order-history-card {
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.order-history-card>a:active {
    background-color: #f8faf9 !important;
}

.order-chevron {
    transition: transform 0.3s ease;
    display: inline-block;
}

.order-history-card>a[aria-expanded="true"] .order-chevron {
    transform: rotate(180deg);
    color: #00A859;
}

/* ==========================================================================
   WISHLIST MICRO-INTERACTION ANIMATION
   ========================================================================== */
.wishlist-bump {
    animation: heartPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes heartPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   MODAL OVERLAY, BACKGROUNDS & BOTTOM-SLIDE ANIMATION
   ========================================================================== */

/* 1. The Glassmorphism Overlay Backdrop */
.modal-backdrop.show {
    opacity: 1 !important;
    background-color: rgba(15, 23, 42, 0.4) !important;
    /* Elegant deep slate blue */
    backdrop-filter: blur(8px);
    /* Apple-style frosted glass */
    -webkit-backdrop-filter: blur(8px);
}

/* 2. The Modal Content Surface (Premium Background & Bevel) */
.enterprise-modal-content {
    /* Subtle premium gradient from pure white to soft slate */
    background: linear-gradient(180deg, #f7baaa 0%, #f8fafc 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    position: relative;
    overflow: visible;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* Adds a subtle top light-reflection (3D glass edge effect) */
.enterprise-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    z-index: 10;
    border-radius: 24px 24px 0 0;
}

/* 3. Set the starting position (Desktop/Tablet) */
#logoutConfirmModal.fade .modal-dialog {
    transform: translateY(150px) scale(0.95);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4. Set the ending position (Desktop/Tablet) */
#logoutConfirmModal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ==========================================================================
   MOBILE BOTTOM SHEET RESPONSIVENESS
   ========================================================================== */
@media (max-width: 576px) {
    #logoutConfirmModal .modal-dialog {
        display: flex;
        align-items: flex-end;
        /* Pushes the modal strictly to the bottom edge */
        min-height: 100%;
        margin: 0;
        padding-bottom: 0px;
    }

    #logoutConfirmModal .enterprise-modal-content {
        width: 100%;
        border-radius: 28px 28px 0 0 !important;
        /* Larger top rounding for bottom sheets */
        padding-top: 12px;
        /* Make room for the drag handle */
        padding-bottom: env(safe-area-inset-bottom, 20px);
        /* Respect iOS home bar */
    }

    /* Native OS Drag Handle Indicator (The Gray Pill) */
    #logoutConfirmModal .enterprise-modal-content::after {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 5px;
        background-color: #cbd5e1;
        /* Soft gray */
        border-radius: 50px;
        z-index: 10;
    }

    /* True bottom-up slide for mobile */
    #logoutConfirmModal.fade .modal-dialog {
        transform: translateY(100%);
        opacity: 1;
        /* Keep opacity 1 so it physically slides instead of fading */
    }

    #logoutConfirmModal.show .modal-dialog {
        transform: translateY(0);
    }
}

/* ==========================================================================
   CUSTOM COUPON BOTTOM SHEET
   ========================================================================== */
.coupon-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.4);
    /* Elegant dark slate overlay */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--z-overlay-coupon) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.coupon-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.coupon-bottom-sheet-custom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 55vh;
    background-color: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    z-index: var(--z-overlay-coupon);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.coupon-bottom-sheet-custom.active {
    transform: translateY(0);
}

.coupon-content-scroll {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    /* Prevents the page behind from scrolling */
    background-color: #f8fafc;
    flex-grow: 1;
    margin-bottom: 60px;

}

/* The Modern Apply Button */
.btn-apply-offer {
    background-color: #e8f5e9;
    /* Light premium green */
    color: #00A859;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-apply-offer:hover,
.btn-apply-offer:active {
    background-color: #00A859;
    color: #ffffff;
    transform: scale(0.95);
}

/* The Vibrant Green Apply Button */
.btn-coupon-green {
    background: #00A859;
    /* RightPay Brand Green */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-coupon-green:hover,
.btn-coupon-green:active {
    background: #008f4c;
    transform: scale(0.97);
}

/* Shake animation for invalid coupons */
@keyframes shake-coupon {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.coupon-error {
    border-color: #ef4444 !important;
    animation: shake-coupon 0.3s ease-in-out;
}

/* The Scrollable Parent */
.horizontal-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap !important;
    /* Forces items into a single line */
    overflow-x: auto !important;
    /* Enables horizontal scrolling */
    gap: 12px;
    padding: 4px 16px 16px 16px;

    /* Native App Physics */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    /* Hide Scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* The Individual Items */
.scroll-item-col {
    flex: 0 0 auto !important;
    /* CRITICAL: Prevents browser from shrinking the item */
    width: 22vw;
    /* Sizes item relative to the screen width */
    min-width: 85px;
    /* Ensures it never gets too tiny */
    max-width: 100px;
    /* Caps the size on larger screens */
    scroll-snap-align: start;
    /* Snaps beautifully into place */
}



/* Core Layout & Backgrounds */


/* Base Colors */
.bg-light-gray {
    background-color: #f8fafc;
}

.bg-soft-gray {
    background-color: #f1f5f9;
}

.bg-soft-dark {
    background-color: #f1f5f9;
    color: #334155;
}

/* Modern Checkout Cards */
.checkout-card {
    /* Soft white to premium mint-green gradient */
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);

    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.04);
    /* Faint green shadow */
    border: 1px solid rgba(16, 185, 129, 0.12);
    /* Subtle green-tinted border */
}

.section-title {
    color: #1e293b;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Reusable Soft Icon Boxes */
/* Premium Metallic Gold Icon Box */
.icon-box-soft {
    width: 36px;
    height: 36px;
    background: #f0fdf4;
    /* Very soft green */
    color: #16a34a;
    /* Premium green */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;


}

/* =========================================
   SEGMENTED CONTROL (Order Type)
   ========================================= */
.delivery-icon-wrapper {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    color: #3b82f6;
    /* Modern Blue */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Slightly sharper corners for a premium feel */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers horizontally */
    justify-content: center;
    /* Centers vertically */
    min-height: 85px;
    /* Strict height control */
}

/* ==========================================================================
   ORDER PREFERENCE CARDS - ENTERPRISE EDITION
   ========================================================================== */
.modern-order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* Slightly sharper corners for a premium feel */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers horizontally */
    justify-content: center;
    /* Centers vertically */
    min-height: 85px;
    /* Strict height control */
}

/* The new circular background for icons */
.modern-order-card .icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    /* Soft grey background */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.modern-order-card .icon-color {
    color: #64748b;
    /* Sleek slate grey */
    transition: color 0.2s ease;
}

/* Hover Effect */
.modern-order-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* Active/Checked State 
   Uses a deep slate/dark theme which is the current enterprise standard 
*/
.modern-order-toggle:checked+.modern-order-card {
    border-color: #fa8803;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(250, 136, 3, .36), 0 2px 6px rgba(250, 136, 3, .20);
}

/* Invert the icon circle color on active */
.modern-order-toggle:checked+.modern-order-card .icon-circle {
    background: linear-gradient(150deg, #ffab2e 0%, #fa8803 55%, #e67800 100%);
}

.modern-order-toggle:checked+.modern-order-card .icon-color {
    color: #ffffff;
}

.modern-order-toggle:checked+.modern-order-card h6 {
    color: #fa8803;
}

/* ── DISABLED STATE ─────────────────────────────────────────────────
           When the radio is disabled the adjacent label must produce zero
           interactive feedback of any kind.
             • pointer-events: none  — label click fires no event whatsoever
             • cursor: not-allowed   — communicates non-interactivity
             • transition: none      — eliminates hover/active animation flicker
             • opacity / colour      — communicates the inactive state visually
        ───────────────────────────────────────────────────────────────────── */
.modern-order-toggle:disabled+.modern-order-card {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.42;
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: none;
    transition: none;
    user-select: none;
}

/* Kill hover when disabled */
.modern-order-toggle:disabled+.modern-order-card:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
    box-shadow: none;
}

/* Freeze sub-element animations */
.modern-order-toggle:disabled+.modern-order-card .icon-circle {
    background: #f1f5f9;
    transition: none;
}

.modern-order-toggle:disabled+.modern-order-card .icon-color {
    color: #94a3b8;
    transition: none;
}

.modern-order-toggle:disabled+.modern-order-card h6 {
    color: #94a3b8;
}

/* Checked-AND-disabled: card was active before delivery became unavailable */
.modern-order-toggle:checked:disabled+.modern-order-card {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: none;
}

.modern-order-toggle:checked:disabled+.modern-order-card .icon-circle {
    background: #94a3b8;
}

.modern-order-toggle:checked:disabled+.modern-order-card h6 {
    color: #94a3b8;
}

.seg-label {
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease-in-out;
    font-size: 0.85rem;
}



/* =========================================
   DATE & TIME GRID
   ========================================= */
/* ==========================================================================
   EXPECTED TIME SECTION - ENTERPRISE EDITION
   ========================================================================== */

/* The Date Input Hover State */
.modern-input-group {
    border-color: #e2e8f0 !important;
}


/* Reusable small icon circle */
.icon-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Time Slot Grid - Tighter, sleeker layout */
.modern-time-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for a compact look */
    gap: 8px;
    /* Reduced gap */
}

/* Modern Time Chips */
.time-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 8px 12px;
    /* Tighter padding */
    border-radius: 10px;
    /* Modern curve */
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    /* Fill grid cell */
}

/* Exclude the selected chip: without :not(.active) this hover rule outranks
   .time-btn.active (higher specificity), so a freshly tapped button stays grey
   under the cursor / sticky touch-hover and the orange only appears after you
   tap elsewhere. */
.time-btn:hover:not(:disabled):not(.active) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Active State — brand orange #F97D09 (dominant stop + border + glow). */
.time-btn.active {
    background: linear-gradient(150deg, #ffa23d 0%, #F97D09 55%, #e06f00 100%);
    border-color: #F97D09;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(249, 125, 9, .36), 0 2px 6px rgba(249, 125, 9, .20);
}

/* Disabled State (For past times) */
.time-btn:disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.7;
}

/* =========================================
   COLLAPSE ARROW ANIMATION
   ========================================= */
.transition-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
}

/* =========================================
   GLASSMORPHISM BOTTOM BAR
   ========================================= */
.glass-bottom-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 1030;
}

.premium-btn {
    background: linear-gradient(135deg, #f09948 0%, #F97D09 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 168, 89, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.premium-btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 10px rgba(0, 168, 89, 0.15) !important;
}

.premium-btn:disabled {
    background: #94a3b8;
    opacity: 1;
}

.tracking-tight {
    letter-spacing: -0.03em;
}

/* =========================================
   FULLSCREEN ORDER DETAILS OVERLAY
   ========================================= */
.order-fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8fafc;
    z-index: 99996;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.order-fs-overlay.active {
    transform: translateX(0);
}

.order-header {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    z-index: 10;
    flex-shrink: 0;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
}

.order-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.order-scroll-area::-webkit-scrollbar {
    display: none;
}

.order-card-modern {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.order-card-modern-top {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* =========================================
   ORDER / BOOKING / FOOD OVERLAY — FOOTER ACTION BAR
   Premium, enterprise-grade button system.
   Brand: #F97D09 (primary)  +  #FFFFFF (secondary).
   Shared by #orderDetailsOverlay, #bookingDetailsOverlay,
   #foodOrderDetailsOverlay via the .order-footer-action container.
   ========================================= */
.order-footer-action {
    flex-shrink: 0;
    z-index: 10;
    background: #ffffff;
    /* Respect the iOS home-indicator safe area on mobile devices. */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.07);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Gradient hairline accent fading in from both edges along the top. */
.order-footer-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(249, 125, 9, 0) 0%,
        #F97D09 20%,
        #F97D09 80%,
        rgba(249, 125, 9, 0) 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.rp-foot-bar {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* ── Base button ───────────────────────────────────────────── */
.rp-foot-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 52px;                 /* touch-friendly target (>48px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;             /* clips the sheen + ripple */
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1),
                box-shadow .18s ease,
                background-color .18s ease,
                color .18s ease,
                border-color .18s ease;
}

.rp-foot-btn__icon {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.rp-foot-btn__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyboard accessibility — visible focus ring. */
.rp-foot-btn:focus-visible {
    outline: 3px solid rgba(249, 125, 9, 0.45);
    outline-offset: 2px;
}

/* Press / ripple micro-interaction. */
.rp-foot-btn:active {
    transform: translateY(1px) scale(0.985);
}
.rp-foot-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition: transform .5s ease, opacity .6s ease;
}
.rp-foot-btn:active::after {
    opacity: 1;
    transform: scale(1);
    transition: 0s;
}

/* ── PRIMARY (solid brand gradient) ────────────────────────── */
.rp-foot-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #FB8C1A 0%, #F97D09 55%, #E86F00 100%);
    box-shadow: 0 8px 18px rgba(249, 125, 9, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.rp-foot-btn--primary:hover {
    box-shadow: 0 10px 24px rgba(249, 125, 9, 0.44),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Glossy top sheen. */
.rp-foot-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* ── GHOST / SECONDARY (white with brand outline) ──────────── */
.rp-foot-btn--ghost {
    color: #E86F00;
    background: #ffffff;
    border: 1.5px solid rgba(249, 125, 9, 0.40);
    box-shadow: 0 4px 12px rgba(249, 125, 9, 0.10);
}
.rp-foot-btn--ghost:hover {
    background: #fff7ee;
    border-color: #F97D09;
    box-shadow: 0 6px 16px rgba(249, 125, 9, 0.18);
}

/* ── Loading + success states ──────────────────────────────── */
.rp-foot-btn.is-loading {
    pointer-events: none;
}
.rp-foot-btn.is-success.rp-foot-btn--ghost {
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.5);
    background: #f0fdf4;
}
.rp-foot-btn.is-success.rp-foot-btn--primary {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.34);
}

/* In-button spinner — inherits the button's current text color. */
.rp-btn-spinner {
    width: 17px;
    height: 17px;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    animation: rpBtnSpin 0.6s linear infinite;
}
@keyframes rpBtnSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-foot-btn { transition: none; }
    .rp-foot-btn::after { display: none; }
    .rp-btn-spinner { animation-duration: 1.2s; }
}

/* =========================================
   VERTICAL ORDER TRACKING TIMELINE
   ========================================= */
.order-track-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
}

.timeline-step {
    position: relative;
    padding-bottom: 24px;
}

.timeline-step:last-child {
    padding-bottom: 0;
}

/* The vertical connecting line */
.timeline-step::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 24px;
    bottom: -4px;
    width: 2px;
    background-color: #e2e8f0;
    border-radius: 2px;
}

.timeline-step:last-child::before {
    display: none;
}

/* The circular node */
.timeline-icon {
    position: absolute;
    left: -18px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f1f5f9;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkmark inside completed nodes */
.timeline-icon i {
    font-size: 0.6rem;
    font-weight: 900;
    display: none;
}

/* Active State (Green) */
.timeline-step.active::before {
    background-color: #00A859;
}

.timeline-step.active .timeline-icon {
    background-color: #00A859;
    box-shadow: 0 0 0 1px #00A859;
}

.timeline-step.active .timeline-icon i {
    display: block;
}

/* Current pulsing state */
.timeline-step.current .timeline-icon {
    box-shadow: 0 0 0 4px rgba(0, 168, 89, 0.2);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 168, 89, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(0, 168, 89, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 168, 89, 0);
    }
}

/* =========================================
   FULLSCREEN CHAT OVERLAY
   ========================================= */
.chat-fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: #f4f6f8;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    overscroll-behavior: none;
}

.chat-fs-overlay.active {
    transform: translateX(0);
}

.chat-header {
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    z-index: 10;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
}

/* Scrollable Chat Area */
.chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

.chat-body::-webkit-scrollbar {
    display: none;
}

/* Chat Message Layouts */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;
}

.chat-message.incoming {
    align-self: flex-start;
}

.chat-message.outgoing {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
}

/* Specific Bubble Curves */
.incoming .chat-bubble {
    border-bottom-left-radius: 4px;
    /* Native chat tail feel */
}

.outgoing .chat-bubble {
    border-bottom-right-radius: 4px;
    /* Native chat tail feel */
}

.chat-footer {
    padding: 12px 16px;
    flex-shrink: 0;
    background: #ffffff;
    /* 🔥 FIX 1: Force it above EVERYTHING */
    position: relative;
    z-index: 99999 !important;

    /* Adds padding for iPhones with bottom home bar */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.chat-input-wrapper {
    transition: all 0.2s ease;
    /* 🔥 FIX 2: Explicitly allow clicks and text selection */
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

.chat-input-wrapper:focus-within {
    border-color: #198754 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15) !important;
}

/* 🔥 FIX 3: Prevent the chat messages box from bleeding over the footer */
.chat-messages {
    z-index: 1;
    position: relative;
}

#chatInput {
    caret-color: #000000 !important;
    /* Forces the blinking cursor to be black */
    color: #000000 !important;
    /* Forces the typed text to be black */
    pointer-events: auto !important;
    /* Demands clickability */
    user-select: text !important;
    /* Allows text interaction */
    -webkit-user-select: text !important;
}

#chatSendBtn i {
    pointer-events: none !important;
}

/* ==========================================
   MODERN GST INPUT & BUTTON STYLING
   ========================================== */
/* ==========================================
   BOTTOM SHEET OVERLAY ENGINE
   ========================================== */

/* 1. The Dark Background (Fades in) */
.GSTin-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    /* Premium glass effect */
    z-index: 99999;
    /* 🔥 Forces it above Bootstrap */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.GSTin-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* 2. The White Panel (Slides up) */
.GSTin-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    /* Start pushed off the bottom */
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.GSTin-panel.active {
    transform: translateY(0);
    /* Snap into place */
}

/* 1. The Input Wrapper (Thinner) */
.modern-gst-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    /* Slightly smaller radius to match thinner height */
    padding: 2px 12px;
    /* 🔥 Reduced vertical padding from 4px to 2px */
    transition: all 0.3s ease;
}

/* Icon inside the input */
.modern-gst-input-wrapper i {
    color: #94a3b8;
    font-size: 1.1rem;
    /* Slightly smaller icon */
    margin-right: 10px;
    transition: color 0.3s ease;
}

/* 2. The Actual Input Field (Unlocked & Thinner) */
.modern-gst-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    /* 🔥 Reduced height from 12px to 8px */
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.5px;

    /* 🔥 CRITICAL FIXES: Forces the input to be clickable and typable */
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    caret-color: #0d9488 !important;
    /* Forces the blinking cursor to appear (teal color) */
    touch-action: manipulation !important;
    /* Stops touch delays on mobile */
}

.modern-gst-input:focus {
    outline: none;
    box-shadow: none;
}

.modern-gst-input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
    letter-spacing: normal;
}

/* Active Focus State */
.modern-gst-input-wrapper:focus-within {
    border-color: #0d9488;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

.modern-gst-input-wrapper:focus-within i {
    color: #0d9488;
}

/* 3. Premium Verify Button (Thinner) */
.btn-gst-verify {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    color: white;
    border: none;
    border-radius: 16px;
    /* Match input radius */
    padding: 5px 7px;
    /* 🔥 Reduced height from 14px to 10px */
    font-weight: 600;
    font-size: 0.95rem;
    /* Slightly smaller text */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}

.btn-gst-verify:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   /* ==========================================================================
   ULTRA-MODERN REWARD CARDS (Compact & Premium)
   ========================================================================== */

/* Premium Base Card - Mathematically Centered Grid */
.reward-card-modern {
    width: 80px;
    /* Perfectly proportioned app-grid size */
    height: 90px;
    border-radius: 12px;
    padding: 5px 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
    /* 🔥 This guarantees perfect vertical spacing between elements */
    position: relative;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reward-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Gradients with subtle, premium borders */
.reward-coupon {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
    border: 1px solid rgba(20, 184, 166, 0.2);
}

/* Gold Coin Theme */
.reward-coin {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Status States - Removed all Opacity Hacks */
.reward-locked {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.reward-redeemed {
    /* Uses a solid grayscale filter instead of transparency for a cleaner look */
    /*filter: grayscale(100%) contrast(0.9); */
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}

/* Coupon Theme 1: Cyan/Teal */
.theme-cyan {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%) !important;
    border: 1px solid rgba(20, 184, 166, 0.3) !important;
}

.theme-cyan .theme-icon {
    color: #0d9488 !important;
}

/* Coupon Theme 2: Soft Purple */
.theme-purple {
    background: linear-gradient(135deg, #fdf4ff 0%, #f3e8ff 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.theme-purple .theme-icon {
    color: #9333ea !important;
}

/* Coupon Theme 3: Rose/Ruby */
.theme-rose {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

.theme-rose .theme-icon {
    color: #e11d48 !important;
}

/* Coupon Theme 4: Ice Blue */
.theme-blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.theme-blue .theme-icon {
    color: #2563eb !important;
}

/* Universal Compact Promo Code Box */
.promo-code-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 2px 4px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 0.55rem;
    /* Shrunk for alignment */
    font-weight: 700;
    color: #334155;
    /* High-contrast neutral slate */
    cursor: pointer;
}

/* ==========================================================================
   METALLIC SCRATCH FOIL OVERLAY
   ========================================================================== */
.scratch-foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.2) 2px, rgba(255, 255, 255, 0.2) 4px),
        linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 25%, #f8fafc 50%, #94a3b8 75%, #e2e8f0 100%);
    background-size: 100% 100%, 200% 200%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Perfect spacing */
    z-index: 10;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.7);
    border: 1px solid #cbd5e1;
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow: hidden;
}

.scratch-foil-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg) translate(-50%, -50%);
    animation: foilShimmer 3s infinite ease-in-out;
}

@keyframes foilShimmer {
    0% {
        transform: rotate(45deg) translateX(-100%);
    }

    100% {
        transform: rotate(45deg) translateX(100%);
    }
}

.scratch-foil-overlay.scratched {
    opacity: 0;
    transform: scale(1.05);
    pointer-events: none;
}

/* ==========================================================================
   DELIVERY INSTRUCTIONS - ENTERPRISE UI
   ========================================================================== */

/* Main Card Container */
.enterprise-checkout-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    transition: all 0.3s ease;
}

/* Header Icon Wrapper */
.delivery-icon-wrapper {
    width: 36px;
    height: 36px;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ==========================================================================
   ENTERPRISE DELIVERY INSTRUCTION CHIPS — Premium Redesign
   ========================================================================== */

/* ── Sub-label (quick preferences) ─────────────────────── */
.dci-sub-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #94a3b8;
    margin: 0 0 6px;
    padding: 0;
    line-height: 1;
}

/* ── 3-column chip grid ─────────────────────────────────── */
.enterprise-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* ── Accessible checkbox hide (keyboard + screen-reader safe) ─ */
.delivery-chip-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ── Base chip label ────────────────────────────────────── */
.delivery-chip-label {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 10px 4px 9px;

    /* Appearance */
    background: #ffffff;
    border: 1.5px solid #eef2f7;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 2px 8px rgba(15, 23, 42, .04);

    /* Typography */
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: #475569;
    letter-spacing: .05px;

    /* Interaction */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background     .2s  cubic-bezier(.4, 0, .2, 1),
        border-color   .2s  cubic-bezier(.4, 0, .2, 1),
        box-shadow     .2s  cubic-bezier(.4, 0, .2, 1),
        color          .15s ease,
        transform      .18s cubic-bezier(.34, 1.56, .64, 1);
    will-change: transform, box-shadow;
}

.delivery-chip-label i {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1;
    transition:
        color     .18s ease,
        transform .2s  cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Hover ──────────────────────────────────────────────── */
.delivery-chip-label:hover {
    background: #fffbf5;
    border-color: rgba(250, 136, 3, .32);
    box-shadow:
        0 4px 14px rgba(250, 136, 3, .14),
        0 1px 3px  rgba(15, 23, 42, .06);
    color: #1e293b;
    transform: translateY(-2px);
}

.delivery-chip-label:hover i {
    color: #fa8803;
    transform: scale(1.1);
}

/* ── Active press (tactile feedback) ────────────────────── */
.delivery-chip-label:active {
    transform: scale(.96) translateY(0);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
    transition-duration: .1s;
}

/* ── Checked / selected ─────────────────────────────────── */
.delivery-chip-check:checked + .delivery-chip-label {
    background: linear-gradient(150deg, #ffab2e 0%, #fa8803 55%, #e67800 100%);
    border-color: #fa8803;
    color: #ffffff;
    box-shadow:
        0 6px 18px rgba(250, 136, 3, .36),
        0 2px 6px  rgba(250, 136, 3, .20);
    transform: translateY(-1px);
}

.delivery-chip-check:checked + .delivery-chip-label i {
    color: #ffffff;
    transform: scale(1.12);
}

/* ── Keyboard focus (screen readers + tab navigation) ───── */
.delivery-chip-check:focus-visible + .delivery-chip-label {
    outline: 2.5px solid #fa8803;
    outline-offset: 2px;
}

/* ── Custom instruction textarea ────────────────────────── */
.enterprise-textarea {
    background: #fafbfc;
    border: 1.5px solid rgba(250, 136, 3, .35);
    border-radius: 14px;
    resize: none;
    font-size: 0.85rem;
    padding: 12px 14px;
    color: #1e293b;
    box-shadow: 0 0 0 3px rgba(250, 136, 3, .08) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.enterprise-textarea:focus {
    border-color: #fa8803;
    box-shadow: 0 0 0 3px rgba(250, 136, 3, .16) !important;
    outline: none;
}

.enterprise-textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Responsive: very small screens (320px) ─────────────── */
@media (max-width: 360px) {
    .enterprise-chip-grid       { gap: 6px; }
    .delivery-chip-label        { padding: 8px 3px 7px; font-size: 0.62rem; }
    .delivery-chip-label i      { font-size: 1rem; }
}

.enterprise-textarea:focus {
    background: #ffffff;
    border-color: #158791;
}

/* Custom Textarea Focus Ring */
.textarea-focus-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 16px;
    border: 2px solid rgba(15, 23, 42, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.enterprise-textarea:focus~.textarea-focus-ring {
    opacity: 1;
}

/* Smooth Fade-In Animation for the Textarea Container */
.custom-instruction-wrapper {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The base ribbon structure */
.enterprise-ribbon {
    position: absolute;
    top: 10px;
    /* Drop it down slightly from the top */
    left: -8px;
    /* Pull it exactly 8px outside the left edge */
    z-index: 10;

    /* Premium Typography */
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;

    /* Shape & Spacing */
    padding: 5px 10px;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    /* Flatten the bottom left for the fold */

    /* Glassmorphism highlight edge for premium feel */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* 🔥 THE 3D FOLD EFFECT 🔥 
   This creates the tiny dark triangle underneath the ribbon 
   to make it look folded around the container edge. */
.enterprise-ribbon::before {
    content: '';
    position: absolute;
    top: 100%;
    /* Push it exactly below the ribbon */
    left: 0;
    /* Align with the far left edge */
    width: 0;
    height: 0;
    /* Create the triangle */
    border-top: 8px solid currentColor;
    /* Uses inherited color, overridden below */
    border-left: 8px solid transparent;
    filter: brightness(0.6);
    /* Automatically darkens the fold color */
    z-index: -1;
}

/* ========================================================================
   ENTERPRISE SECURE BUTTON LOCK
   ======================================================================== */
.enterprise-locked-btn {
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    /* Hardware-level CSS click prevention */
    user-select: none !important;
    /* Prevents text highlighting */
    filter: grayscale(100%);
    /* Optional: makes the button look visually "dead" */
}

/* ========================================================================
   SELF-BILLING: EMPTY STATE (Lottie)
   ======================================================================== */

.sb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 56px;
    text-align: center;
}

.sb-empty-lottie-wrap {
    width: 210px;
    height: 210px;
    margin-bottom: 4px;
}

.sb-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 7px;
    letter-spacing: -0.25px;
}

.sb-empty-sub {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.65;
    max-width: 230px;
    margin: 0 auto;
}

/* ========================================================================
   ENTERPRISE BARCODE DROPDOWN (SELF BILLING)
   ======================================================================== */
.enterprise-barcode-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    z-index: 1060;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform-origin: top center;
    animation: dropdownPopIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes dropdownPopIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.enterprise-barcode-dropdown::-webkit-scrollbar {
    width: 6px;
}

.enterprise-barcode-dropdown::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

.enterprise-dropdown-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: transparent;
}

.enterprise-dropdown-item:last-child {
    border-bottom: none;
}

.enterprise-dropdown-item:active {
    background-color: #f8fafc;
    transform: scale(0.98);
}

.dd-img-wrapper {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 10px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    padding: 6px;
    overflow: hidden;
}

.dd-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.dd-details {
    flex-grow: 1;
    min-width: 0;
}

.dd-title {
    font-size: 0.95rem;
    line-height: 1.3;
}

.bg-purple-soft {
    background-color: #f3e8ff !important;
}

.text-purple {
    color: #9333ea !important;
}

.border-purple-soft {
    border-color: #e9d5ff !important;
}

/* ========================================================================
   ENTERPRISE SELF-BILLING CART LIST (COMPACT DESIGN)
   ======================================================================== */
.self-cart-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.self-cart-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 80px;
    /* Highly compact enterprise height */
}

.self-cart-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Image */
.sc-img-box {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-right: 14px;
}

.sc-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Middle Details Area */
.sc-details {
    flex-grow: 1;
    min-width: 0;
    /* Prevents flexbox truncation blowout */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sc-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    line-height: 1.2;
}

.sc-meta {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-price {
    font-size: 0.95rem;
    letter-spacing: -0.2px;
}

.sc-unit-price {
    font-size: 0.65rem;
}

/* Right Side Actions Panel */
.sc-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    min-width: 85px;
    flex-shrink: 0;
}

/* The 'X' Remove Button */
.sc-remove-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    margin-top: -2px;
    /* Pull it flush with the top */
    margin-right: -2px;
}

.sc-remove-btn:hover,
.sc-remove-btn:active {
    color: #ef4444;
    /* Alert Red */
    transform: scale(1.1);
}

/* Quantity Control Input */
.sc-qty-ctrl {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    height: 28px;
    /* Ultra-low profile */
    overflow: hidden;
}

.sc-qty-btn {
    background: transparent;
    border: none;
    color: #475569;
    width: 26px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sc-qty-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.sc-qty-btn:active {
    background: #cbd5e1;
}

.sc-qty-input {
    width: 24px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    padding: 0;
    pointer-events: none;
    /* Block OS keyboard from opening on mobile */
}

/* ========================================================================
   ENTERPRISE BARCODE SCANNER UI
   ======================================================================== */

.enterprise-scanner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    background-color: #0f172a;
    /* Deep slate */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.enterprise-scanner-overlay.active {
    opacity: 1;
    visibility: visible;
}

.scanner-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    z-index: 10;
}

/* The actual camera viewport */
.scanner-viewport {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override the library's ugly default video styling */
#qr-reader {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Forces the camera to fill the screen without distortion */
}

/* Hide the library's default UI elements */
#qr-reader__dashboard_section_csr span,
#qr-reader__dashboard_section_swaplink {
    display: none !important;
}

/* --- THE AIMING RETICLE --- */
.scanner-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 150px;
    z-index: 5;
    box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.45);
    /* Darkens everything outside the box */
}

.reticle-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: #00A859;
    /* Brand Green */
    border-style: solid;
}

.reticle-corner.top-left {
    top: 0;
    left: 0;
    border-width: 4px 0 0 4px;
    border-top-left-radius: 8px;
}

.reticle-corner.top-right {
    top: 0;
    right: 0;
    border-width: 4px 4px 0 0;
    border-top-right-radius: 8px;
}

.reticle-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-width: 0 0 4px 4px;
    border-bottom-left-radius: 8px;
}

.reticle-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-width: 0 4px 4px 0;
    border-bottom-right-radius: 8px;
}

/* The Animated Scanning Laser */
.scanning-laser {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #00A859;
    box-shadow: 0 0 8px 2px rgba(0, 168, 89, 0.5);
    top: 0;
    left: 0;
    animation: laserScan 2.5s infinite linear;
}

@keyframes laserScan {
    0% {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* --- BOTTOM CONTROLS --- */
.scanner-controls {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    z-index: 10;
}

.btn-scanner-action {
    width: 56px;
    height: 56px;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.2s ease;
}

.btn-scanner-action:active {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

/* Active state for the flash button */
.btn-scanner-action.active {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #ffffff;
}

/* ========================================================================
   SELF-BILLING — OFFCANVAS FLEX LAYOUT
   ======================================================================== */

/* Flex-column shell: header/search are static, middle scrolls, footer sticks */
#offcanvasSelfbilling {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #f4f6f9 !important;
}

/* Scrollable product list */
#offcanvasSelfbilling .list-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px 12px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#offcanvasSelfbilling .list-container::-webkit-scrollbar {
    width: 4px;
}

#offcanvasSelfbilling .list-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* "Order Summary / N Items" label row inside the scroll area */
.sb-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px 10px;
}

.sb-summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

/* Remove old padding-bottom hack — footer is now out of flow */
.self-cart-list {
    padding-bottom: 0 !important;
}

/* ========================================================================
   SELF-BILLING — STICKY BILL FOOTER
   ======================================================================== */

.sb-bill-footer {
    flex-shrink: 0;
}

/* Card is full-width inside the footer — no rounded top corners */
.sb-bill-card {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

/* Dark-green header strip */
.sb-bill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    background: linear-gradient(135deg, #1a3c2e 0%, #2d6a4f 100%);
}

.sb-bill-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.sb-bill-header-left i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.sb-bill-item-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* Bill rows area */
.sb-bill-body {
    padding: 2px 16px 4px;
}

.sb-bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sb-bill-row:last-child {
    border-bottom: none;
}

.sb-bill-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.sb-bill-label-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
}

.sb-bill-value {
    font-size: 0.82rem;
    color: #1e293b;
    font-weight: 600;
}

.sb-bill-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
    margin: 2px 0;
}

.sb-bill-total-row {
    padding: 7px 0 3px;
}

.sb-bill-total-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.sb-bill-total-value {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

/* Savings banner */
.sb-savings-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    background: linear-gradient(90deg, #dcfce7, #f0fdf4);
    border-top: 1px dashed #86efac;
    font-size: 0.76rem;
    color: #15803d;
    font-weight: 600;
}

.sb-savings-banner i {
    font-size: 0.75rem;
    color: #22c55e;
    flex-shrink: 0;
}

.sb-savings-banner strong {
    font-weight: 800;
}

/* ── Send Request Button ─────────────────────────────────── */
.sb-send-wrap {
    padding: 11px 14px 16px;
    background: #ffffff;
}

.sb-send-btn {
    width: 100%;
    background: linear-gradient(135deg, #00A859 0%, #007a3f 100%);
    border: none;
    border-radius: 14px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 168, 89, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.sb-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 168, 89, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sb-send-btn:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 3px 12px rgba(0, 168, 89, 0.25);
}

.sb-send-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    color: #ffffff;
}

.sb-send-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
}

.sb-send-sub {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 2px;
    text-align: left;
}

.sb-send-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
    margin-left: 12px;
}

/* ============================================================
           USER NOTIFICATION OVERLAY  (uni-*)
           Premium dark-island design — timeless, animated, stunning.
        ============================================================ */

/* Backdrop: deep dark with green radial bloom from bottom */
.uni-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.38s ease, visibility 0.38s ease;
    background:
        radial-gradient(ellipse 100% 55% at 50% 105%, rgba(0, 120, 60, 0.55) 0%, transparent 68%),
        rgba(6, 12, 22, 0.84);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.uni-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Wrapper: spring-bounce slide-up */
.uni-wrapper {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(110%);
    transition: transform 0.56s cubic-bezier(0.34, 1.42, 0.64, 1);
}

.uni-overlay.active .uni-wrapper {
    transform: translateY(0);
}

/* Floating close button — frosted glass pill */
.uni-close-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
}

.uni-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1) rotate(90deg);
}

.uni-close-btn:active {
    transform: scale(0.92);
}

/* Card — large fully-rounded top */
.uni-card {
    width: 100%;
    border-radius: 45% 45% 0 0;
    background: #fff9ee;
    overflow: hidden;
    box-shadow:
        0 -2px 0 rgba(0, 220, 110, 0.28),
        0 -20px 60px rgba(0, 0, 0, 0.38),
        0 -4px 100px rgba(0, 168, 90, 0.14);
}

/* Image band — dark island with curved bottom */
.uni-img-band {
    position: relative;
    background: linear-gradient(170deg, #011e10 0%, #013318 45%, #01521e 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 32px 24px 0;
    min-height: 175px;
    overflow: hidden;
    border-radius: 0 0 44px 44px;
}

/* Soft radial glow orb behind the product image */
.uni-img-band::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 255, 130, 0.30) 0%, transparent 68%);
    border-radius: 50%;
    animation: uniGlowPulse 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* Floating particle grid — subtle depth effect */
.uni-img-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.30) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(0, 255, 140, 0.20) 1px, transparent 1px);
    background-size: 55px 55px, 38px 38px;
    background-position: 8px 12px, 22px 28px;
    animation: uniParticleFloat 10s linear infinite;
    pointer-events: none;
}

@keyframes uniGlowPulse {

    0%,
    100% {
        opacity: 0.65;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.18);
    }
}

@keyframes uniParticleFloat {
    0% {
        background-position: 8px 12px, 22px 28px;
    }

    100% {
        background-position: 8px -43px, 22px -10px;
    }
}

/* Product image: gentle float + green glow halo */
.uni-banner-img {
    position: relative;
    z-index: 2;
    height: 148px;
    width: auto;
    max-width: 68%;
    object-fit: contain;
    filter:
        drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(0, 255, 130, 0.28));
    animation: uniImageFloat 4.5s ease-in-out infinite;
}

@keyframes uniImageFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* Sunlight ray sweep across the body */
@keyframes uniSunRay {
    0% {
        transform: translateX(-120%) skewX(-18deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    40% {
        transform: translateX(220%) skewX(-18deg);
        opacity: 0.7;
    }

    41% {
        opacity: 0;
    }

    100% {
        transform: translateX(220%) skewX(-18deg);
        opacity: 0;
    }
}

/* Body section */
.uni-body {
    position: relative;
    background: #fff9ee;
    padding: 20px 22px 38px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: flex-start;
}

.uni-body::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 38%;
    height: 130%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 210, 100, 0.18) 40%,
            rgba(255, 230, 150, 0.32) 55%,
            rgba(255, 210, 100, 0.18) 70%,
            transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: uniSunRay 5s 1s ease-in-out infinite;
}

.uni-body>* {
    position: relative;
    z-index: 1;
}

/* Staggered content entrance — fires each time overlay becomes active */
.uni-overlay.active .uni-badge {
    animation: uniRiseIn 0.48s 0.28s both ease-out;
}

.uni-overlay.active .uni-title {
    animation: uniRiseIn 0.48s 0.36s both ease-out;
}

.uni-overlay.active .uni-subtitle {
    animation: uniRiseIn 0.48s 0.42s both ease-out;
}

.uni-overlay.active .uni-body-text {
    animation: uniRiseIn 0.48s 0.48s both ease-out;
}

.uni-overlay.active .uni-cta-btn {
    animation: uniRiseIn 0.50s 0.54s both ease-out;
}

@keyframes uniRiseIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge pill — shimmer sweep + glow pulse */
.uni-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(90deg, #00a85a 0%, #00d46a 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 168, 90, 0.38);
    animation: uniBadgeGlow 2.8s ease-in-out infinite;
}

.uni-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -90%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
    animation: uniShimmerSweep 2.8s 0.6s ease-in-out infinite;
}

.uni-badge:empty {
    display: none;
}

@keyframes uniBadgeGlow {

    0%,
    100% {
        box-shadow: 0 3px 12px rgba(0, 168, 90, 0.38);
    }

    50% {
        box-shadow: 0 4px 20px rgba(0, 168, 90, 0.62);
    }
}

@keyframes uniShimmerSweep {
    0% {
        left: -90%;
    }

    100% {
        left: 160%;
    }
}

/* Discount badge — saffron/amber + brighter shine */
.uni-badge--discount {
    background: linear-gradient(90deg, #ffb830 0%, #ff6f00 100%);
    box-shadow: 0 3px 14px rgba(255, 130, 0, 0.46);
    animation: uniDiscountGlow 2.2s ease-in-out infinite;
}

.uni-badge--discount::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
    animation: uniShimmerSweep 2.2s 0.2s ease-in-out infinite;
}

@keyframes uniDiscountGlow {

    0%,
    100% {
        box-shadow: 0 3px 14px rgba(255, 130, 0, 0.46);
    }

    50% {
        box-shadow: 0 5px 24px rgba(255, 130, 0, 0.72);
    }
}

/* Title */
.uni-title {
    font-size: 24px;
    font-weight: 900;
    color: #080f08;
    line-height: 1.18;
    margin: 0 0 7px;
    letter-spacing: -0.5px;
}

/* Subtitle */
.uni-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #1e5c2e;
    margin: 0 0 8px;
    line-height: 1.48;
}

/* Body text */
.uni-body-text {
    font-size: 13px;
    color: #647a64;
    line-height: 1.62;
    margin: 0 0 24px;
}

.uni-body-text:empty {
    display: none;
}

/* CTA button — gradient + shimmer sweep */
.uni-cta-btn {
    position: relative;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #00c96d 0%, #007842 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    letter-spacing: 0.4px;
    box-shadow: 0 8px 26px rgba(0, 168, 90, 0.42);
    transition: box-shadow 0.22s, transform 0.14s;
}

.uni-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -90%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    animation: uniShimmerSweep 3s 1.4s ease-in-out infinite;
}

.uni-cta-btn:hover {
    box-shadow: 0 10px 30px rgba(0, 168, 90, 0.55);
}

.uni-cta-btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(0, 168, 90, 0.30);
}


/* ==========================================================================
   RESPONSIVE GRID OVERRIDES — Section category cards & Gift grid
   Breakpoints: 379–479px → 4 columns | 480–720px → 5 columns
   ========================================================================== */

/* ── Section cat-card rows (sections 1, 3, 4) ── */
@media (min-width: 379px) and (max-width: 479px) {

    #section-1-grid .row>.col,
    #section-3-grid .row>.col,
    #section-4-grid .row>.col {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 480px) and (max-width: 720px) {

    #section-1-grid .row>.col,
    #section-3-grid .row>.col,
    #section-4-grid .row>.col {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ── Gift section heart-grid (section-5) ── */
@media (max-width: 388px) {

    .heart-grid,
    #section-5-grid {
        max-width: calc(3 * 80px + 2 * 10px);
        /* 260px – 3 cols */
    }
}

@media (min-width: 389px) and (max-width: 479px) {

    .heart-grid,
    #section-5-grid {
        max-width: calc(4 * 80px + 3 * 10px);
        /* 350px – 4 cols */
    }
}

@media (min-width: 480px) and (max-width: 720px) {

    .heart-grid,
    #section-5-grid {
        max-width: calc(5 * 80px + 4 * 10px);
        /* 440px – 5 cols */
    }
}

/* ========================================================================
   SELF-BILLING: STORE CONTEXT BANNER
   ======================================================================== */

.sb-store-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 16px 4px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-left: 3px solid #16a34a;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.09);
    animation: sb-banner-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes sb-banner-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sb-store-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

.sb-store-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-store-label {
    font-size: 10px;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    line-height: 1;
}

.sb-store-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.sb-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcfce7;
    border-radius: 20px;
    padding: 4px 10px;
    flex-shrink: 0;
}

.sb-dot {
    width: 6px;
    height: 6px;
    background: #16a34a;
    border-radius: 50%;
    animation: sb-dot-pulse 2s ease-in-out infinite;
}

@keyframes sb-dot-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.8);
    }
}

.sb-verified-text {
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
    letter-spacing: 0.25px;
}

/* ========================================================================
   DELIVERY TIMER LOTTIE ICON
   ======================================================================== */

.delivery-lottie-wrap {
    width: 80px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* ========================================================================
   SELF-BILLING GEO-GATE BOTTOM SHEET
   ======================================================================== */

#overlay-geogate {
    position: fixed;
    inset: 0;
    z-index: 11500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

#overlay-geogate.active {
    opacity: 1;
    pointer-events: all;
}

#overlay-geogate .gg-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 30, 0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#overlay-geogate .gg-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    padding: 12px 28px 48px;
    width: 100%;
    max-width: 520px;
    text-align: center;
    transform: translateY(110%);
    transition: transform 0.40s cubic-bezier(0.34, 1.38, 0.64, 1);
    box-shadow: 0 -8px 60px rgba(0, 0, 0, 0.20);
}

#overlay-geogate.active .gg-card {
    transform: translateY(0);
}

#overlay-geogate .gg-drag-handle {
    width: 44px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 0 auto 22px;
}

#overlay-geogate .gg-lottie {
    width: 190px;
    height: 190px;
    margin: 0 auto 8px;
    border-radius: 16px;
    overflow: hidden;
}

#overlay-geogate .gg-icon-wrap {
    width: 90px;
    height: 90px;
    margin: 4px auto 18px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #d97706;
    box-shadow: 0 6px 24px rgba(217, 119, 6, 0.28);
}

#overlay-geogate .gg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

#overlay-geogate .gg-badge-blue {
    background: #eff6ff;
    color: #2563eb;
}

#overlay-geogate .gg-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    line-height: 1.3;
}

#overlay-geogate .gg-msg {
    font-size: 14.5px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 28px;
}

#overlay-geogate .gg-btn-primary {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.13s ease, box-shadow 0.13s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.40);
    letter-spacing: 0.2px;
}

#overlay-geogate .gg-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(22, 163, 74, 0.48);
}

#overlay-geogate .gg-btn-primary:active {
    transform: scale(0.975);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.32);
}

#overlay-geogate .gg-btn-secondary {
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    background: transparent;
    color: #9ca3af;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}

#overlay-geogate .gg-btn-secondary:hover {
    color: #6b7280;
}

/* Checking spinner shown while geolocation is in progress */
#overlay-geogate .gg-checking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px 0 6px;
}

#overlay-geogate .gg-checking-ring {
    width: 52px;
    height: 52px;
    border: 4px solid #e5e7eb;
    border-top-color: #16a34a;
    border-radius: 50%;
    animation: gg-spin 0.8s linear infinite;
}

@keyframes gg-spin {
    to {
        transform: rotate(360deg);
    }
}

#overlay-geogate .gg-checking p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* ========================================================================
   VOICE SEARCH: MIC BUTTON ZOOM ANIMATION
   ======================================================================== */

#offcanvas-mic-icon {
    transition: transform 0.15s ease;
}

#offcanvas-mic-icon.zoom-pulse {
    animation: mic-zoom-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

@keyframes mic-zoom-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   PAYMENT ORDER OFFCANVAS — ULTRA-MODERN ENTERPRISE REDESIGN
   Scoped to .offcanvas-Payment-Order — no bleed to other offcanvases.
   ========================================================================== */

/* ── HEADER ── */
.offcanvas-Payment-Order .po-header {
   display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    flex-shrink: 0;
}

.offcanvas-Payment-Order .po-back-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 10px;
    color: #1e293b;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}

.offcanvas-Payment-Order .po-back-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.offcanvas-Payment-Order .po-header-info {
    flex: 1;
    min-width: 0;
}

.offcanvas-Payment-Order .po-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.offcanvas-Payment-Order .po-header-sub {
    font-size: 0.67rem;
    color: #1e293b;
    display: block;
    margin-top: 1px;
}

.offcanvas-Payment-Order .po-secure-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(249, 125, 9, 0.15);
    border: 1px solid rgba(249, 125, 9, 0.3);
    color: #f5a94e;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.67rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── BODY ── */
.offcanvas-Payment-Order .po-body {
    background: #f1f5f9;
    flex: 1 1 0;              /* grow + shrink; basis 0 so it never pushes past viewport  */
    min-height: 0;            /* critical: lets flex child shrink below its content size   */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Contain overscroll so it doesn't chain to the body and cause freeze              */
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    padding-bottom: 0;        /* .po-sections handles footer clearance; zero base bleed   */
}

.offcanvas-Payment-Order .po-body::-webkit-scrollbar {
    display: none;
}

.offcanvas-Payment-Order .po-sections {
    /* Footer is p-3 + py-3 button ≈ 88px + safe-area (up to 44px on iPhone) */
    padding: 14px 14px calc(88px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── CARD BASE ── */
.offcanvas-Payment-Order .po-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1px solid #edf2f7;
}

/* ── STEP HEADER ROW ── */
.offcanvas-Payment-Order .po-step-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.offcanvas-Payment-Order .po-step-dot {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #F97D09;
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offcanvas-Payment-Order .po-step-dot.po-step-green {
    background: #16a34a;
}

.offcanvas-Payment-Order .po-step-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}

.offcanvas-Payment-Order .po-step-sub {
    font-size: 0.67rem;
    color: #94a3b8;
    font-weight: 400;
}

/* ── ADDRESS ROW ── */
.offcanvas-Payment-Order .po-address-row {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid #e9eef4;
}

.offcanvas-Payment-Order .po-addr-pin {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: #fff8f0;
    color: #F97D09;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.offcanvas-Payment-Order .po-addr-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.offcanvas-Payment-Order .po-addr-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 1px;
}

.offcanvas-Payment-Order .po-addr-line {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.offcanvas-Payment-Order .po-change-btn {
    background: none;
    border: none;
    color: #F97D09;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── BILLING SUMMARY ICON ── */
.offcanvas-Payment-Order .icon-box-soft {
    background: linear-gradient(150deg, #ffab2e 0%, #fa8803 55%, #e67800 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(250, 136, 3, .36), 0 2px 6px rgba(250, 136, 3, .20);
}

/* ── SSL TAG ── */
.offcanvas-Payment-Order .po-ssl-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── FOOTER: safe-area padding so Place Order button clears iPhone home bar ── */
.offcanvas-Payment-Order .mobile-fixed-bottom {
    /* p-3 gives 16px on all sides; override bottom to add safe-area on top   */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── COLLAPSE TRIGGER CARD ── */
.offcanvas-Payment-Order .po-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

/* ── INNER / BILL CARD ── */
.offcanvas-Payment-Order .po-inner-card {
    background: #fafbfc;
    border: 1px solid #edf2f7;
    padding: 0;
    overflow: hidden;
}

.offcanvas-Payment-Order .po-bill-card {
    background: #f8fafc;
    border: 1px solid #e9eef4;
}

/* ── G-FORCE TELEMETRY WIDGET — matches the standard .po-card chrome ── */
.offcanvas-Payment-Order .po-gforce-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Match .po-card exactly: white background, same radius/padding/border/shadow. */
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1px solid #edf2f7;
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    animation: gf2Entrance .6s cubic-bezier(.22, 1, .36, 1) both;
}

/* No card chrome to light up on hover now — only intensify the wave glow. */
.offcanvas-Payment-Order .po-gforce-card:hover .gf2-line,
.offcanvas-Payment-Order .po-gforce-card:active .gf2-line {
    filter:
        drop-shadow(0 0 1.5px rgba(249, 125, 9, 1))
        drop-shadow(0 0 6px rgba(249, 125, 9, .7))
        drop-shadow(0 0 16px rgba(249, 125, 9, .4));
}

.offcanvas-Payment-Order .gf2-ambient {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(22px);
    pointer-events: none;
}

.offcanvas-Payment-Order .gf2-ambient-a {
    width: 70%;
    height: 70%;
    left: -10%;
    top: -25%;
    background: radial-gradient(circle, rgba(249, 125, 9, .07), transparent 70%);
    animation: gf2Pulse 4.2s ease-in-out infinite;
}

.offcanvas-Payment-Order .gf2-ambient-b {
    width: 55%;
    height: 55%;
    right: -12%;
    bottom: -22%;
    background: radial-gradient(circle, rgba(249, 125, 9, .05), transparent 70%);
    animation: gf2Pulse 4.2s ease-in-out 1.4s infinite;
}

.offcanvas-Payment-Order .gf2-heading {
    position: relative;
    z-index: 3;
    margin: 0 0 12px;
    text-align: center;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #F97D09;
    text-shadow: 0 0 12px rgba(249, 125, 9, .45);
}

.offcanvas-Payment-Order .gf2-graph {
    position: relative;
    z-index: 1;
    height: 72px;
    border-radius: 12px;
    background-image:
        linear-gradient(rgba(249, 125, 9, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 125, 9, .06) 1px, transparent 1px);
    background-size: 100% 25%, 8.333% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}

.offcanvas-Payment-Order .gf2-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.offcanvas-Payment-Order .gf2-area {
    opacity: .9;
}

.offcanvas-Payment-Order .gf2-line {
    stroke: #F97D09;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;          /* sharp seismic peaks join cleanly */
    vector-effect: non-scaling-stroke;
    /* Solid continuous trace — a seismograph is never dashed; the JS ring
       buffer provides the scrolling motion, so no dash-flow is needed. */
    filter:
        drop-shadow(0 0 1px rgba(249, 125, 9, .95))
        drop-shadow(0 0 4px rgba(249, 125, 9, .55))
        drop-shadow(0 0 10px rgba(249, 125, 9, .3));
    animation: gf2Glow 2.6s ease-in-out infinite;
    transition: stroke-width .25s ease;
}

/* Energetic mode (JS adds .gf2-active while shaking):
   solid continuous trace instead of the idle dashes. */
.offcanvas-Payment-Order .gf2-line.gf2-active {
    stroke-dasharray: none;
    stroke-width: 1.8;
    animation: gf2Glow 2.6s ease-in-out infinite;
}

@keyframes gf2Entrance {
    from { opacity: 0; transform: translateY(14px) translateZ(0); }
    to   { opacity: 1; transform: translateY(0) translateZ(0); }
}

@keyframes gf2Flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -22; }
}

@keyframes gf2Glow {
    0%, 100% {
        filter:
            drop-shadow(0 0 1px rgba(249, 125, 9, .9))
            drop-shadow(0 0 4px rgba(249, 125, 9, .5))
            drop-shadow(0 0 10px rgba(249, 125, 9, .28));
    }
    50% {
        filter:
            drop-shadow(0 0 1.5px rgba(249, 125, 9, 1))
            drop-shadow(0 0 7px rgba(249, 125, 9, .65))
            drop-shadow(0 0 15px rgba(249, 125, 9, .4));
    }
}

@keyframes gf2Pulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas-Payment-Order .po-gforce-card,
    .offcanvas-Payment-Order .gf2-line,
    .offcanvas-Payment-Order .gf2-ambient {
        animation: none;
    }
    .offcanvas-Payment-Order .gf2-line {
        stroke-dashoffset: 0;
    }
}

/* ==========================================================================
   SPIN & WIN — premium CTA card (injected below .po-gforce-card after the
   auto-opened wheel is closed). Mirrors service.html's .fb-spinner-cta /
   food.html's .fp-spinner-cta exactly (same layout, motion, breakpoints),
   re-themed to main.html's orange brand (#F97D09) instead of their green.
   ========================================================================== */
.offcanvas-Payment-Order .po-spinner-cta {
    margin: 14px 0 2px;
    padding: 1.5px;                      /* gradient hairline border */
    border-radius: 20px;
    background: linear-gradient(135deg,
                rgba(249, 125, 9, .55), rgba(250, 136, 3, .12) 45%, rgba(255, 214, 107, .6));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    animation: poCtaIn .55s cubic-bezier(.16, 1, .3, 1) both;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
}
@keyframes poCtaIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.offcanvas-Payment-Order .po-spinner-cta-inner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 14px;
    border-radius: 18.5px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(255, 248, 240, .96));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}
.offcanvas-Payment-Order .po-spinner-icon {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 15px;
    display: grid; place-items: center;
    font-size: 27px; line-height: 1;
    background:
        radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, #FFD66B, #E8A93C);
    box-shadow: 0 8px 18px rgba(232, 169, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: poCtaSpin 7s linear infinite;
}
@keyframes poCtaSpin { to { transform: rotate(360deg); } }
.offcanvas-Payment-Order .po-spinner-copy { flex: 1; min-width: 0; }
.offcanvas-Payment-Order .po-spinner-copy h4 {
    margin: 0; font: 800 14.5px/1.2 'Inter', sans-serif;
    color: #1e293b; letter-spacing: -.2px;
}
.offcanvas-Payment-Order .po-spinner-copy p {
    margin: 3px 0 0; font: 600 11.5px/1.42 'Inter', sans-serif; color: #94a3b8;
}
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger {
    flex-shrink: 0;
    border: none;
    border-radius: 13px;
    padding: 12px 17px;
    font: 800 13px/1 'Inter', sans-serif; letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(160deg, #fa8803, #cc6a00);
    box-shadow: 0 7px 18px rgba(250, 136, 3, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger:hover  { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(250, 136, 3, .45); }
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger:active { transform: translateY(0) scale(.95); }
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger:focus-visible { outline: 3px solid #fa8803; outline-offset: 2px; }
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger[disabled],
.offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger[aria-busy="true"] { opacity: .65; cursor: default; pointer-events: none; }

@media (max-width: 360px) {
    .offcanvas-Payment-Order .po-spinner-cta-inner { flex-wrap: wrap; }
    .offcanvas-Payment-Order .po-spinner-cta #poSpinTrigger { width: 100%; order: 3; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .offcanvas-Payment-Order .po-spinner-cta { animation: none; }
    .offcanvas-Payment-Order .po-spinner-icon { animation: none; }
}

/* ==========================================================================
   SHAKE-TO-EARN REWARD READOUT  (inside .po-gforce-card)
   Orange (#F97D09) theme throughout. Glow radius + halo opacity scale with
   the --gf-tier custom property (0-9, set by js/gforce-sensor.js); a one-shot
   flash/scale "pop" fires on each level-up. No per-tier classes needed.
   ========================================================================== */
.offcanvas-Payment-Order .gf2-reward {
    position: relative;
    z-index: 3;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(249, 125, 9, .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.offcanvas-Payment-Order .gf2-reward-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #64748b;   /* muted slate — readable on the white card */
}

.offcanvas-Payment-Order .gf2-reward-amount {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-weight: 800;
    line-height: 1;
    color: #F97D09;
    transform: translateZ(0);
    will-change: transform, filter;
    /* Glow radius grows with shake tier (0 = subtle, 9 = blazing). */
    filter: drop-shadow(0 0 calc(4px + var(--gf-tier, 0) * 3px) rgba(249, 125, 9, .85));
    transition: filter .3s ease;
}

.offcanvas-Payment-Order .gf2-reward-cur { font-size: 1.2rem; font-weight: 700; }
.offcanvas-Payment-Order .gf2-reward-num { font-size: 2.3rem; font-variant-numeric: tabular-nums; }

/* Section 8 — user instruction, orange, responsive. */
.offcanvas-Payment-Order .gf2-reward-hint {
    margin: 2px auto 0;
    max-width: 100%;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.45;
    color: #F97D09;
}

/* Ambient pulse halo behind the amount — opacity scales with tier.
   On a separate pseudo-element so it never collides with the .gf2-pop scale. */
.offcanvas-Payment-Order .gf2-reward-amount::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    height: 190%;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle, rgba(249, 125, 9, .32), transparent 67%);
    opacity: calc(var(--gf-tier, 0) / 9);
    transform: translate(-50%, -50%) translateZ(0);
    transition: opacity .35s ease;
    animation: gf2RewardPulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* One-shot flash + scale burst, re-triggered by JS on each level-up */
.offcanvas-Payment-Order .gf2-reward-amount.gf2-pop {
    animation: gf2RewardPop .55s cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes gf2RewardPop {
    0%   { transform: scale(1) translateZ(0);    filter: drop-shadow(0 0 8px rgba(249, 125, 9, .55)) brightness(1); }
    25%  { transform: scale(1.45) translateZ(0); filter: drop-shadow(0 0 26px rgba(255, 190, 120, .98)) brightness(1.7); }
    60%  { transform: scale(.95) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

@keyframes gf2RewardPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(.88) translateZ(0); }
    50%      { transform: translate(-50%, -50%) scale(1.14) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas-Payment-Order .gf2-reward-amount,
    .offcanvas-Payment-Order .gf2-reward-amount::after {
        animation: none;
    }
}

/* ==========================================================================
   CART / CHECKOUT OFFCANVAS — ULTRA-MODERN ENTERPRISE REDESIGN
   Scoped to .offcanvas-checkout-section — no bleed to other offcanvases.
   Accent: #00A859 (green) to differentiate from Payment's orange stripe.
   ========================================================================== */

/* ── HEADER ── */
.offcanvas-checkout-section .cc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    flex-shrink: 0;
}

.offcanvas-checkout-section .po-back-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 10px;
    color: #1e293b;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}

.offcanvas-checkout-section .po-back-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.offcanvas-checkout-section .cc-header-info {
    flex: 1;
    min-width: 0;
}

.offcanvas-checkout-section .cc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.offcanvas-checkout-section .cc-subtitle {
    font-size: 0.67rem;
    color: #1e293b;
    display: block;
    margin-top: 1px;
}

/* Cart chip — matches .po-secure-chip */
.offcanvas-checkout-section .cc-secure-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(249, 125, 9, 0.15);
    border: 1px solid rgba(249, 125, 9, 0.3);
    color: #f5a94e;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.67rem;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}

.offcanvas-checkout-section .cc-secure-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f5a94e;
    flex-shrink: 0;
}

/* ── BODY WRAPPER ── */
.offcanvas-checkout-section .cc-body {
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── CARD BASE ── */
.offcanvas-checkout-section .cc-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1px solid #edf2f7;
}

.offcanvas-checkout-section .cc-card.cc-card--slim {
    padding: 12px 14px 10px;
}

/* ── CARD HEADER ROW ── */
.offcanvas-checkout-section .cc-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.offcanvas-checkout-section .cc-card--slim .cc-card-head {
    margin-bottom: 10px;
}

.offcanvas-checkout-section .cc-card-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.offcanvas-checkout-section .cc-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    flex: 1;
    min-width: 0;
}

.offcanvas-checkout-section .cc-see-all {
    font-size: 0.75rem;
    font-weight: 600;
    color: #F97D09;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.offcanvas-checkout-section .cc-see-all:hover {
    color: #d96800;
}

/* ── POLICY CARD ── */
.offcanvas-checkout-section .cc-policy-card {
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid #e9eef4;
}

.offcanvas-checkout-section .cc-policy-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.offcanvas-checkout-section .cc-policy-head i {
    color: #64748b;
    font-size: 0.85rem;
}

.offcanvas-checkout-section .cc-policy-body {
    font-size: 0.71rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

/* ── BILL CARD ── */
.offcanvas-checkout-section .cc-bill-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
    border: 1px solid #edf2f7;
}

.offcanvas-checkout-section .cc-bill-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.offcanvas-checkout-section .cc-bill-divider {
    height: 1px;
    background: #e9eef4;
    margin-bottom: 12px;
}

/* ==========================================================================
   CATEGORIES SIDEBAR — ULTRA-MODERN ENTERPRISE REDESIGN
   Scoped to .offcanvas-side-categorys — no bleed to other offcanvases.
   Accent: #00A859 (brand green), dark navy header.
   ========================================================================== */

/* ── HEADER ── */
.offcanvas-side-categorys .sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(249, 125, 9, 0.281) 0%, rgba(255, 255, 255, 1) 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.offcanvas-side-categorys .sc-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.offcanvas-side-categorys .sc-header-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    background: rgba(0, 168, 89, 0.2);
    border: 1px solid rgba(0, 168, 89, 0.35);
    color: #F97D09;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.offcanvas-side-categorys .sc-header-info {
    min-width: 0;
}

.offcanvas-side-categorys .sc-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.offcanvas-side-categorys .sc-subtitle {
    font-size: 0.63rem;
    color: #1e293b;
    display: block;
    margin-top: 1px;
}

.offcanvas-side-categorys .sc-close-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.82rem;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.offcanvas-side-categorys .sc-close-btn:hover,
.offcanvas-side-categorys .sc-close-btn:active {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
    border-color: rgba(220, 53, 69, 0.3);
}

/* ── BODY ── */
.offcanvas-side-categorys .sc-body {
    background: #f8fafc;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.offcanvas-side-categorys .sc-body::-webkit-scrollbar {
    width: 4px;
}

.offcanvas-side-categorys .sc-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* ── MOBILE: 2-column card grid ── */
@media (max-width: 767px) {
    .offcanvas-side-categorys .offcanvas-cat-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 10px 20px;
    }

    .offcanvas-side-categorys .cat-item-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: #ffffff;
        border: 1px solid #edf2f7;
        border-radius: 14px;
        padding: 14px 8px 12px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
        gap: 9px;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .offcanvas-side-categorys .cat-item-link:active {
        transform: scale(0.96);
        border-color: #00A859;
        box-shadow: 0 0 0 2px rgba(0, 168, 89, 0.15);
    }

    .offcanvas-side-categorys .cat-item-img-box {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
        background: #f0fdf4;
        border: none;
        margin-bottom: 0;
    }

    .offcanvas-side-categorys .cat-item-img-box img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .offcanvas-side-categorys .cat-item-text {
        font-size: 0.72rem;
        font-weight: 600;
        color: #334155;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .offcanvas-side-categorys .cat-item-chevron {
        display: none;
    }
}

/* ── DESKTOP: vertical list ── */
@media (min-width: 768px) {
    .offcanvas-side-categorys .offcanvas-cat-container {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
    }

    .offcanvas-side-categorys .cat-item-link {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: transparent;
        border-bottom: 1px solid #f1f5f9;
        border-radius: 0;
        box-shadow: none;
        transition: background 0.15s ease, padding-left 0.15s ease, color 0.15s ease;
    }

    .offcanvas-side-categorys .cat-item-link:hover {
        background: #f0fdf4;
        padding-left: 20px;
        color: #00A859;
    }

    .offcanvas-side-categorys .cat-item-img-box {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
        background: #f0fdf4;
        border: none;
        margin: 0;
    }

    .offcanvas-side-categorys .cat-item-img-box img {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    .offcanvas-side-categorys .cat-item-text {
        font-size: 0.88rem;
        font-weight: 600;
        color: #1e293b;
        flex: 1;
        min-width: 0;
    }

    .offcanvas-side-categorys .cat-item-chevron {
        color: #94a3b8;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   ORDER DETAILS TRACKER (odt) — ULTRA-MODERN ENTERPRISE REDESIGN
   Generated by JS into #dynamic-order-details-content via openOrderDetailsOverlay()
   ========================================================================== */

/* ── WRAPPER CARD ── */
.odt-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 14px 0;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
    min-height: 240px;
}

/* ── HEADER ROW ── */
.odt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* ── STATUS PILL ── */
.odt-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
}

.odt-pill--green {
    background: rgba(0, 168, 89, 0.1);
    color: #16a34a;
    border: 1px solid rgba(0, 168, 89, 0.25);
}

.odt-pill--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.odt-pill--orange {
    background: rgba(249, 125, 9, 0.1);
    color: #d97706;
    border: 1px solid rgba(249, 125, 9, 0.25);
}

.odt-pill--red {
    background: rgba(220, 53, 69, 0.1);
    color: #dc2626;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

/* ── ORDER ID ── */
.odt-order-id {
    font-size: 0.67rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

/* ── TIMELINE (scoped inside .odt-card, full column height) ── */
.odt-card .order-track-timeline.odt-timeline-full {
    padding-left: 22px;
    padding-top: 2px;
    margin-top: 0;
    height: 100%;
    min-height: 160px;
}

/* Connector line — standard light */
.odt-card .odt-timeline-full .timeline-step::before {
    background-color: #e2e8f0;
}

.odt-card .odt-timeline-full .timeline-step.active::before {
    background-color: #00A859;
}

/* Node — standard light bg */
.odt-card .odt-timeline-full .timeline-icon {
    background-color: #f1f5f9;
    border-color: #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.odt-card .odt-timeline-full .timeline-step.active .timeline-icon {
    background-color: #00A859;
    box-shadow: 0 0 0 1px #00A859;
}

.odt-card .odt-timeline-full .timeline-step.current .timeline-icon {
    box-shadow: 0 0 0 4px rgba(0, 168, 89, 0.2), 0 0 0 1px #00A859;
}

/* ── STEP LABELS (compact for col-4) ── */
.odt-step-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    margin-top: 3px;
}

.odt-card .timeline-step.active .odt-step-label,
.odt-card .timeline-step.current .odt-step-label {
    color: #1e293b;
}

.odt-step-meta {
    display: block;
    font-size: 0.58rem;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.3;
}

/* ── RIGHT PANEL ── */
.odt-right-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 160px;
    padding: 4px 6px 4px 2px;
}

/* ── LOTTIE CONTAINER (zoomed-in view) ── */
.odt-lottie-box {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    margin-bottom: 6px;
    overflow: visible;
}

/* ── NO-ANIMATION ICON (cancelled / failed) ── */
.odt-no-anim-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #94a3b8;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.odt-no-anim-icon--red {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* ── STATUS HEADLINE ── */
.odt-status-headline {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 5px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ── STATUS SUB-TEXT ── */
.odt-status-sub {
    font-size: 0.65rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 8px;
}

/* ── META CHIP (date / item count / ETA) ── */
.odt-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.61rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 3px 8px;
}

.odt-meta--success {
    color: #16a34a;
    background: #f0fdf4;
    border-color: rgba(0, 168, 89, 0.25);
}

/* ── MAP MODE: right panel with live map ── */
.odt-right-panel--map {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    align-items: stretch;
    height: 100%;
}

/* The map canvas itself */
.odt-map-box {
    width: 100%;
    height: 165px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #e8f0fe;
    flex-shrink: 0;
    position: relative;
}

/* Loading state while Google Maps API is initialising */
.odt-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 10px 10px 0 0;
}

/* Staff badge below the map */
.odt-staff-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px 4px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px;
}

.odt-staff-badge > .bi {
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #16a34a;
}

.odt-staff-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.odt-staff-info .odt-status-headline {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.odt-staff-info .odt-status-sub {
    font-size: 0.62rem;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Distance badge — right side of odt-staff-badge ── */
.odt-distance-badge {
    margin-left: auto;
    flex-shrink: 0;
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 10px;
    padding: 5px 10px;
    min-width: 58px;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.08);
}

.odt-dist-km {
    font-size: 0.72rem;
    font-weight: 800;
    color: #16a34a;
    line-height: 1.25;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.odt-dist-eta {
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    margin-top: 1px;
    line-height: 1.2;
}

/* ── Call button — next to distance badge in odt-staff-badge ── */
.odt-call-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
    transition: all 0.2s ease;
    margin-left: 8px;
}

.odt-call-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
    transform: translateY(-2px);
}

.odt-call-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* ─── Featured Recipe Scroll ──────────────────────────────────────────── */
.section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px;
}
.section-hdr h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-ink-900);
    margin: 0;
}
.section-hdr a {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.featured-scroll {
    display: flex;
    gap: 16px;
    padding: 4px 20px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.featured-scroll::-webkit-scrollbar { display: none; }
.feat-card {
    flex-shrink: 0;
    width: 250px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    position: relative;
    background: #111;
    transition: transform .2s;
    max-height: 150px;
}
.feat-card:active { transform: scale(.97); }
.feat-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    opacity: .82;
    display: block;
}
.feat-card .feat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(13, 27, 42, .92) 60%, transparent);
    padding: 18px 14px 14px;
}
.feat-card .feat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 99px;
    padding: 4px 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.feat-card h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
}
.feat-card .meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .75);
}
.feat-card .meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   PRIVATE ORDER TOGGLE — Checkout Step 4
   ========================================================================== */

.offcanvas-Payment-Order .po-private-order {
    background: #ffffff;
    border: 1.5px solid #e8edf3;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .05);
    transition:
        border-color  .22s ease,
        background    .22s ease,
        box-shadow    .22s ease;
    cursor: pointer;
}

.offcanvas-Payment-Order .po-private-order:hover {
    border-color: rgba(250, 136, 3, .35);
    background: rgba(250, 136, 3, .02);
}

.offcanvas-Payment-Order .po-private-order.is-private {
    border-color: #fa8803;
    background: rgba(250, 136, 3, .05);
    box-shadow:
        0 0 0 3px rgba(250, 136, 3, .14),
        0 1px 5px rgba(15, 23, 42, .05);
}

/* ── Header row (the <label>) ── */
.offcanvas-Payment-Order .po-private-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.offcanvas-Payment-Order .po-private-left {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* ── Hide native checkbox ── */
.offcanvas-Payment-Order .po-private-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Custom checkmark box ── */
.offcanvas-Payment-Order .po-private-checkmark {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    border: 2px solid #c8d3dc;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: transparent;
    transition:
        border-color .18s ease,
        background   .18s ease,
        color        .18s ease,
        box-shadow   .18s ease;
}

.offcanvas-Payment-Order .po-private-order.is-private .po-private-checkmark {
    border-color: #fa8803;
    background:   #fa8803;
    color:        #ffffff;
    box-shadow:   0 3px 10px rgba(250, 136, 3, .32);
}

/* ── Label text ── */
.offcanvas-Payment-Order .po-private-label-text {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -.15px;
    line-height: 1;
}

/* ── Lock / unlock icon ── */
.offcanvas-Payment-Order .po-lock-icon {
    font-size: 19px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color .22s ease, transform .22s cubic-bezier(.32,.72,0,1);
}

.offcanvas-Payment-Order .po-private-order.is-private .po-lock-icon {
    color: #fa8803;
    transform: scale(1.12);
}

/* ── Description ── */
.offcanvas-Payment-Order .po-private-desc {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.6;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    font-weight: 500;
}

/* Responsive: ensure no overflow on very small screens */
@media (max-width: 360px) {
    .offcanvas-Payment-Order .po-private-label-text { font-size: 13px; }
    .offcanvas-Payment-Order .po-lock-icon          { font-size: 17px; }
}

/* ==========================================================================
   MOTION — prefers-reduced-motion overrides
   Mutes the legacy @keyframes pulse and other non-essential looping
   animations for users who have opted into reduced motion in their OS.
   (The .rp-shimmer class has its own override in design-tokens.css.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Preserve intentional fade transitions that only run once */
    .fade,
    .offcanvas.show,
    .modal.show {
        transition: none !important;
    }
}

/* =========================================================================
   VOICE INSTRUCTION RECORDER  (premium bottom-sheet)
   Brand: #F97D09 + white. Mobile-first; opened from the #inst-voice chip.
   ========================================================================= */
.rp-voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;                       /* above the checkout offcanvas */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.rp-voice-overlay.active {
    visibility: visible;
    opacity: 1;
    transition: opacity .28s ease;
}

.rp-voice-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.rp-voice-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 26px 26px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.22);
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.rp-voice-overlay.active .rp-voice-sheet { transform: translateY(0); }

.rp-voice-grip {
    width: 42px;
    height: 5px;
    border-radius: 99px;
    background: #e2e8f0;
    margin: 0 auto 14px;
}

.rp-voice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.rp-voice-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}
.rp-voice-sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.3;
}
.rp-voice-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease;
}
.rp-voice-close:hover { background: #e2e8f0; }

/* ── Visualizer stage ───────────────────────────────────────────────── */
.rp-voice-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 0 6px;
}
.rp-voice-mic {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    background: linear-gradient(135deg, #FB8C1A 0%, #F97D09 55%, #E86F00 100%);
    box-shadow: 0 10px 26px rgba(249, 125, 9, 0.4);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Pulsing halo while recording */
.rp-voice-sheet.is-recording .rp-voice-mic {
    animation: rpVoiceMicPulse 1.4s ease-out infinite;
}
@keyframes rpVoiceMicPulse {
    0%   { box-shadow: 0 10px 26px rgba(249,125,9,.4), 0 0 0 0 rgba(249,125,9,.45); }
    70%  { box-shadow: 0 10px 26px rgba(249,125,9,.4), 0 0 0 22px rgba(249,125,9,0); }
    100% { box-shadow: 0 10px 26px rgba(249,125,9,.4), 0 0 0 0 rgba(249,125,9,0); }
}
.rp-voice-sheet.is-paused .rp-voice-mic { opacity: .7; }

.rp-voice-wave {
    width: 100%;
    height: 64px;
    display: block;
}

.rp-voice-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}
.rp-voice-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}
.rp-voice-sheet.is-recording .rp-voice-status { color: #dc2626; }
.rp-voice-sheet.is-recording .rp-voice-dot {
    background: #dc2626;
    animation: rpVoiceDot 1s steps(2, start) infinite;
}
@keyframes rpVoiceDot { 50% { opacity: 0.25; } }

.rp-voice-timer {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* ── Native preview player ──────────────────────────────────────────── */
.rp-voice-audio {
    width: 100%;
    margin: 12px 0 4px;
    height: 40px;
}
.rp-voice-audio[hidden] { display: none; }

/* ── Transport controls ─────────────────────────────────────────────── */
.rp-voice-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 0 4px;
    min-height: 72px;
}
.rp-vbtn {
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease;
}
.rp-vbtn[hidden] { display: none; }
.rp-vbtn:active { transform: scale(0.92); }
.rp-vbtn:focus-visible { outline: 3px solid rgba(249,125,9,.45); outline-offset: 3px; }

.rp-vbtn--record {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}
.rp-vbtn--stop {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #334155, #1e293b);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.3);
}
.rp-vbtn--ghost {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    color: #475569;
    background: #f1f5f9;
}
.rp-vbtn--ghost:hover { background: #e2e8f0; }

/* ── Confirm / re-record footer ─────────────────────────────────────── */
.rp-voice-foot {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.rp-voice-foot:has(.rp-voice-action[hidden]:only-child) { display: none; }
.rp-voice-action {
    flex: 1 1 0;
    height: 50px;
    border: none;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
.rp-voice-action[hidden] { display: none; }
.rp-voice-action:active { transform: translateY(1px) scale(.99); }
.rp-voice-action--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #FB8C1A 0%, #F97D09 55%, #E86F00 100%);
    box-shadow: 0 8px 18px rgba(249, 125, 9, 0.34);
}
.rp-voice-action--secondary {
    color: #E86F00;
    background: #fff7ee;
    border: 1.5px solid rgba(249, 125, 9, 0.4);
}
.rp-voice-action.is-busy { pointer-events: none; opacity: 0.85; }

.rp-voice-hint {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.72rem;
    color: #94a3b8;
}

/* In-button spinner (shared sizing with the footer-button spinner) */
.rp-voice-action .rp-btn-spinner { width: 16px; height: 16px; }

/* ── Chip "attached" affirmation badge ──────────────────────────────── */
#inst-voice:checked + .delivery-chip-label {
    position: relative;
}
#inst-voice:checked + .delivery-chip-label.is-attached::after {
    content: '\2713';                      /* ✓ — plain unicode check (no icon-font dependency) */
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

/* =========================================================================
   ORDER-DETAILS VOICE PLAYBACK CARD
   Rendered inside the order details overlay when an order has a voice note.
   ========================================================================= */
.odt-voice-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.odt-voice-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, #FB8C1A 0%, #F97D09 55%, #E86F00 100%);
    box-shadow: 0 6px 16px rgba(249, 125, 9, 0.34);
    transition: transform .15s ease;
}
.odt-voice-btn:active { transform: scale(0.93); }
.odt-voice-btn .rp-btn-spinner { width: 18px; height: 18px; }
.odt-voice-meta { min-width: 0; }
.odt-voice-audio { width: 100%; margin-top: 12px; height: 40px; }
.odt-voice-audio[hidden] { display: none; }