/* --- 1. Reset & Base Styles --- */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
    font-family:'Mukta',system-ui,-apple-system,sans-serif;
    background:#fff;
    max-width:30rem; /* Mobile First: Centered on desktop like an app */
    margin:0 auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    color:#000;
    line-height:1.5
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* --- 2. CSS Variables --- */
:root{
    --red:#d01f29;
    --red-dk:#b01a22;
    --gray-txt:rgba(0,0,0,.6);
    --radius-m:.5rem;
    --fs-r: 0.95rem;
    --fs-xxs: 0.7rem;
    --fs-s: 0.85rem;
}

/* --- 3. Dark Mode Support --- */
@media(prefers-color-scheme:dark){
    body{background:#0a0a0a}
    :root{--gray-txt:rgba(255,255,255,.6);}
    .navbar{background:#111;border-bottom-color:#222}
    .category-bar-wrapper{background:var(--red-dk)}
    .bar-row{background:var(--red-dk)}
    .bar-row a.active{border-bottom-color:#fff}
    .bar-row.sub-bar a.sub-active{background:rgba(255,255,255,.1);border-bottom-color:rgba(255,255,255,.08)}
    .bar-row .back-btn{border-right-color:rgba(255,255,255,.08)}
    .bar-row .back-btn:active{background:rgba(255,255,255,.1)}
    .location-btn svg{fill:var(--gray-txt)}
}

/* --- 4. Top Navigation Bar --- */
.navbar{
    position:relative;
    background:#fff;
    padding:.625rem 0;
    border-bottom:.0625rem solid #eee;
    z-index:100
}
.navbar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 .75rem
}
.nav-left{display:flex;align-items:center;flex-shrink:0;z-index:2}
.nav-center{flex:1;display:flex;align-items:center;justify-content:center;z-index:1}
.navbar-brand{display:flex;align-items:center}
.navbar-brand img{width:7.5rem;height:auto}
.nav-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0;z-index:2}
.nav-right a img{width:2.375rem;height:2.375rem}

/* Location Button Styles */
.location-btn{
    display:flex;align-items:center;justify-content:center;
    padding:.5rem .75rem .5rem 0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    border:none;background:none;
}
.location-btn svg{
    width:1.75rem;height:1.75rem;
    fill:var(--gray-txt);
    transition:opacity .15s;
}
.location-btn:active svg{opacity:.5}

/* --- 5. Category Bar (Sticky) --- */
.category-bar-wrapper{
    position:sticky;top:0;z-index:99;background:var(--red)
}
.bar-row{
    display:flex;
    overflow-x:auto;
    background:var(--red);
    white-space:nowrap;
    /* Scrollbar Hidden */
    scrollbar-width:none 
}
/* Scrollbar Hidden for Chrome/Safari */
.bar-row::-webkit-scrollbar{display:none}

.bar-row a{
    display:inline-flex;align-items:center;gap:.1875rem;color:#fff;
    /* GAP KAM KIYA (Padding kam kar diya) */
    padding:.2rem .5rem; 
    font-size:var(--fs-r); 
    font-weight:600;flex-shrink:0;
    border-bottom:.125rem solid transparent;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .2s,background .2s;
    letter-spacing:.005em;
}
.bar-row a.active{border-bottom-color:#fff}
.bar-row .arrow{opacity:.5;font-size:var(--fs-xxs)}

/* Sub Menu Logic */
.bar-row.sub-bar{display:none}
.bar-row.sub-bar.visible{display:flex;animation:subIn .22s ease}
@keyframes subIn{from{opacity:0;transform:translateX(-.5rem)}to{opacity:1;transform:translateX(0)}}
.bar-row .back-btn{
    color:rgba(255,255,255,.85);font-weight:700;padding:.5rem .875rem;gap:.3125rem;
    border-right:.0625rem solid rgba(255,255,255,.12);margin-right:.125rem;flex-shrink:0;font-size:var(--fs-r);
}
.bar-row .back-btn .back-arrow{font-size:var(--fs-s);opacity:.65}
.bar-row .back-btn:active{background:rgba(0,0,0,.12)}
.bar-row.sub-bar a.sub-active{background:rgba(0,0,0,.12);border-bottom-color:rgba(255,255,255,.2)}

/* --- 6. Desktop Responsive Tweaks --- */
@media(min-width:768px){
    body{max-width:100%}
    .navbar-brand img{width:8.5rem}
    .nav-right a img{width:2.125rem;height:2.125rem}
    .location-btn svg{width:1.5rem;height:1.5rem}
}
@media(min-width:1024px){
    .navbar-brand img{width:7.8rem}
    .nav-right a img{width:1.875rem;height:1.875rem}
    .location-btn svg{width:1.25rem;height:1.25rem}
}

/* --- 7. Focus States for Accessibility --- */
[tabindex="0"]{outline:none}
*:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}
@media(forced-colors:active){outline:none}