/* =========================================================
   1. DESKTOP PAR SAB CHHUPA DO (No White Space)
   ========================================================= */
@media (min-width: 641px) { /* Changed from 769px to match design mobile breakpoint */
    .srm-nav, .srm-backdrop, .srm-sheet, #srm-fouc-block {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   2. SIRF MOBILE PAR DIKHAO (< 640px) - COMPLETE CODE
   ========================================================= */
@media (max-width: 640px) { /* Changed to match design mobile breakpoint */
    .srm-nav, .srm-sheet {
        font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    }

    body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

    @keyframes srmShimmer { 0%{background-position:200% 0}100%{background-position:-200% 0} }
    @keyframes srmDotPulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.35)} }
    @keyframes srmBlueBlink { 0%,49%{opacity:1}50%,100%{opacity:.25} }
    @keyframes srmGreenGlow { 0%,100%{box-shadow:0 0 0 0 rgba(21,128,61,.55)}50%{box-shadow:0 0 0 4px rgba(21,128,61,0)} } /* Updated Green */

    /* --- BOTTOM NAV BAR --- */
    .srm-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important;
        padding: 8px 12px calc(12px + env(safe-area-inset-bottom)) !important;
        visibility: visible !important;
        background: rgba(255, 255, 255, 0.98) !important; /* Made slightly more opaque for cleaner look */
        backdrop-filter: blur(14px) saturate(160%) !important; /* Adjusted blur to match design */
        -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
        border-top: 1px solid var(--border) !important; /* Using CSS variable from design */
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -8px 24px -12px rgba(15,23,42,.12) !important; /* Updated shadow from design */
        z-index: 99990 !important;
    }
    .srm-nav::before {
        content: '';
        position: absolute; top: 0; left: 10%; right: 10%; height: 2.5px; border-radius: 0 0 2px 2px;
        background: var(--gradient) !important; /* Updated to brand gradient */
        background-size: 200% 100%;
        animation: srmShimmer 2.8s linear infinite;
    }

    /* --- NAV ITEMS --- */
    .srm-item, .srm-more-btn {
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important;
        gap: 4px !important; width: 20% !important;
        text-decoration: none !important; background: none !important; border: none !important;
        color: var(--gray-400) !important; /* Updated to use design variable */
        font-size: 10.5px !important; font-weight: 600 !important; /* Adjusted to match design */
        padding: 4px 0 !important; cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color .2s, transform .18s !important;
        position: relative !important;
    }
    .srm-item:active, .srm-more-btn:active { transform: scale(.92) !important; }
    
    .srm-icon {
        width: 26px !important; height: 26px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        border-radius: 9px !important; transition: all .22s !important;
        position: relative !important;
    }
    .srm-icon svg {
        width: 21px !important; height: 21px !important; /* Matches design */
        fill: none !important; stroke: currentColor !important;
        stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
        transition: stroke .22s !important;
    }
    .srm-lbl { transition: color .22s !important; }
    
    /* Using brand colors for active states */
    .srm-item.srm-active .srm-icon { background: rgba(37,99,235,.10) !important; }
    .srm-item.srm-active .srm-icon svg { stroke: var(--blue) !important; }
    .srm-item.srm-active .srm-lbl { color: var(--blue) !important; }
    
    .srm-more-btn.srm-active .srm-icon { background: rgba(37,99,235,.10) !important; }
    .srm-more-btn.srm-active .srm-icon svg { fill: var(--blue) !important; stroke: none !important; }
    .srm-more-btn.srm-active .srm-lbl { color: var(--blue) !important; }
    .srm-more-btn .srm-icon svg { fill: currentColor !important; stroke: none !important; }
    
    .srm-dot {
        position: absolute !important; top: -1px !important; right: -1px !important;
        width: 7px !important; height: 7px !important;
        background: #fbbf24 !important; /* Updated to match dot color in design */
        border-radius: 50% !important;
        border: 1.5px solid #4338ca !important; /* Matching border color */
        animation: srmDotPulse 1.8s ease-in-out infinite !important;
    }

    /* --- CENTER FAB --- */
    .srm-center-wrap {
        width: 20% !important; display: flex !important;
        justify-content: center !important; align-items: center !important;
        position: relative !important;
    }
    .srm-fab {
        position: absolute !important; top: -36px !important;
        width: 50px !important; height: 50px !important; /* Matches design */
        border-radius: 16px !important; /* Matches design */
        background: var(--gradient) !important; /* Uses brand gradient */
        border: 2px solid #fff !important; /* Thinner border */
        box-shadow: 0 8px 18px -4px rgba(37,99,235,.55) !important; /* Matches design shadow */
        display: flex !important; flex-direction: column !important;
        align-items: center !important; justify-content: center !important; gap: 2px !important;
        text-decoration: none !important; color: #fff !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
    }
    .srm-fab svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width:2 !important; stroke-linecap: round !important; stroke-linejoin:round !important; } /* Uses SVG from design */
    .srm-fab span {
        display: none !important; /* Fab in design has no text */
    }
    .srm-fab:active { transform: scale(.91) !important; box-shadow: 0 4px 10px rgba(37,99,235,.30) !important; }

    /* --- BOTTOM SHEET & BACKDROP --- */
    .srm-backdrop {
        display: block !important;
        position: fixed !important; inset: 0 !important;
        background: rgba(15, 23, 42, 0.6) !important; /* slightly darker navy */
        backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
        z-index: 99991 !important;
        opacity: 0 !important; pointer-events: none !important;
        transition: opacity .3s ease !important;
        visibility: visible !important;
    }
    .srm-backdrop.srm-open { opacity: 1 !important; pointer-events: auto !important; }

    .srm-sheet {
        display: flex !important; flex-direction: column !important;
        position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        max-height: 88vh !important;
        background: #ffffff !important;
        border-radius: 28px 28px 0 0 !important;
        border-top: 1px solid var(--border) !important;
        box-shadow: 0 -12px 48px rgba(15,23,42,.14) !important;
        z-index: 99992 !important;
        transform: translateY(100%) !important;
        transition: transform .42s cubic-bezier(.25,1,.3,1) !important;
        visibility: visible !important;
    }
    .srm-sheet.srm-open { transform: translateY(0) !important; }

    .srm-handle {
        width: 38px !important; height: 4px !important; border-radius: 2px !important;
        background: var(--border) !important;
        margin: 12px auto 0 !important; flex-shrink: 0 !important;
    }

    .srm-sheet-head {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        padding: 16px 20px 14px !important;
        background: var(--bg-soft) !important;
        flex-shrink: 0 !important;
    }
    .srm-sheet-title-row {
        display: flex !important; align-items: center !important; gap: 10px !important;
    }
    .srm-sheet-ico {
        width: 32px !important; height: 32px !important; border-radius: 9px !important;
        background: rgba(37,99,235,.10) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .srm-sheet-ico svg { width: 16px !important; height: 16px !important; stroke: var(--blue) !important; stroke-width: 2.2 !important; fill: none !important; }
    .srm-sheet-title { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.3px !important; color: var(--ink) !important; }

    .srm-close-btn {
        width: 32px !important; height: 32px !important; border-radius: 10px !important;
        background: #f1f5f9 !important; border: none !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        color: var(--gray-500) !important; cursor: pointer !important;
        transition: all .2s !important; -webkit-tap-highlight-color: transparent !important; flex-shrink: 0 !important;
    }
    .srm-close-btn svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; stroke-width: 2.5 !important; fill: none !important; }
    .srm-close-btn:active { transform: scale(.88) !important; background: var(--border) !important; }

    .srm-divider { height: 1px !important; margin: 0 20px !important; background: var(--border) !important; flex-shrink: 0 !important; }

    .srm-body {
        padding: 16px 16px calc(28px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important; flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
    }

    .srm-section { margin-bottom: 22px !important; }

    .srm-sec-label {
        display: flex !important; align-items: center !important; gap: 7px !important;
        font-size: 10.5px !important; font-weight: 700 !important;
        text-transform: uppercase !important; letter-spacing: 1px !important;
        color: var(--gray-400) !important; margin-bottom: 12px !important;
    }
    .srm-sec-dot {
        width: 4px !important; height: 14px !important; border-radius: 2px !important;
        background: var(--blue) !important; flex-shrink: 0 !important; display: inline-block !important;
    }

    .srm-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .srm-grid-item {
        display: flex !important; align-items: center !important; gap: 10px !important;
        padding: 12px 14px !important; border-radius: 14px !important;
        text-decoration: none !important;
        background: var(--bg-soft) !important;
        border: 1px solid var(--border) !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform .16s, background .16s, box-shadow .16s !important;
    }
    .srm-grid-item:active {
        transform: scale(.94) !important;
        background: #f1f5f9 !important;
        box-shadow: 0 2px 8px rgba(37,99,235,.08) !important;
    }

    .srm-grid-ico {
        width: 36px !important; height: 36px !important; border-radius: 10px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .srm-grid-ico svg { width: 18px !important; height: 18px !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

    .srm-grid-txt { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }

    .srm-grid-name {
        display: block !important; font-size: 13px !important; font-weight: 700 !important;
        color: var(--ink) !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }

    /* --- COLORS AND BADGES (Updated to Brand Colors) --- */
    .srm-ic-blue   { background: #dbeafe !important; color: #2563eb !important; } /* Tailwind blue-100 */
    .srm-ic-blue   svg { stroke: currentColor !important; }
    
    .srm-ic-orange { background: #ffedd5 !important; color: #f97316 !important; } /* Tailwind orange-100 */
    .srm-ic-orange svg { stroke: currentColor !important; }
    
    .srm-ic-green  { background: #dcfce7 !important; color: #16a34a !important; } /* Tailwind green-100 */
    .srm-ic-green  svg { stroke: currentColor !important; }
    
    .srm-ic-red    { background: #fee2e2 !important; color: #dc2626 !important; } /* Tailwind red-100 */
    .srm-ic-red    svg { stroke: currentColor !important; }
    
    .srm-ic-purple { background: #f3e8ff !important; color: #9333ea !important; } /* Tailwind purple-100 */
    .srm-ic-purple svg { stroke: currentColor !important; }
    
    .srm-ic-teal   { background: #ccfbf1 !important; color: #0d9488 !important; } /* Tailwind teal-100 */
    .srm-ic-teal   svg { stroke: currentColor !important; }
    
    .srm-ic-amber  { background: #fef3c7 !important; color: #d97706 !important; } /* Tailwind amber-100 */
    .srm-ic-amber  svg { stroke: currentColor !important; }
    
    .srm-ic-sky    { background: #e0f2fe !important; color: #0284c7 !important; }
    .srm-ic-sky    svg { stroke: currentColor !important; }

    .srm-badge {
        display: inline-block !important;
        font-size: 9px !important; font-weight: 700 !important;
        padding: 3px 8px !important; border-radius: 999px !important;
        text-transform: uppercase !important; letter-spacing: .05em !important;
        width: fit-content !important;
    }
    .srm-new {
        background: rgba(37,99,235,.10) !important;
        border: 1px solid rgba(37,99,235,.25) !important;
        color: var(--blue) !important;
        animation: srmBlueBlink 1.1s step-end infinite !important;
    }
    .srm-live {
        background: rgba(22,163,74,.10) !important;
        border: 1px solid rgba(22,163,74,.25) !important;
        color: #15803d !important;
        animation: srmGreenGlow 2s ease-in-out infinite !important;
    }
    .srm-hot {
        background: rgba(217,119,6,.10) !important;
        border: 1px solid rgba(217,119,6,.25) !important;
        color: #b45309 !important;
    }
}