@font-face{font-family:'Vazirmatn';src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
    --bg:#0d0d0f;
    --bg-soft:#131316;
    --panel:rgba(19,19,22,.72);
    --panel-solid:#16161a;
    --line:rgba(224,30,43,.22);
    --line-soft:rgba(255,255,255,.07);
    --red:#e01e2b;
    --red-deep:#8e0f18;
    --gold:#d9b36c;
    --gold-dim:rgba(217,179,108,.35);
    --text:#f4f0e8;
    --muted:#9b978e;
    --radius:14px;
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --banner:url("../img/banner.jpg");
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
    background-color:var(--bg);
    color:var(--text);
    line-height:1.9;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:var(--banner);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-color:var(--bg);
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg,
            rgba(13,13,15,.55) 0%,
            rgba(13,13,15,.82) 22%,
            rgba(13,13,15,.93) 55%,
            rgba(13,13,15,.97) 100%);
}

.menu-page{
    max-width:760px;
    margin:0 auto;
    padding:0 clamp(12px,3.5vw,24px) 40px;
}

/* ---------- Hero ---------- */
.menu-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:clamp(240px,42vh,420px);
    margin:0 calc(clamp(12px,3.5vw,24px) * -1);
    overflow:hidden;
    text-align:center;
}

.menu-hero::before{
    content:"";
    position:absolute;
    width:min(62vw,340px);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 38% 34%, rgba(224,30,43,.5), rgba(142,15,24,.28) 55%, transparent 74%);
    filter:blur(6px);
    animation:sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse{
    0%,100%{transform:scale(1);opacity:.85}
    50%{transform:scale(1.06);opacity:1}
}

.menu-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:70px;
    background:linear-gradient(180deg,transparent,var(--bg));
    pointer-events:none;
}

.hero-content{position:relative;padding:24px}

.hero-title{
    margin:0;
    font-size:clamp(2rem,9vw,3.4rem);
    font-weight:900;
    letter-spacing:.02em;
    text-shadow:0 4px 26px rgba(0,0,0,.8);
}

.hero-tagline{
    margin:6px 0 0;
    font-size:clamp(.85rem,3.4vw,1.05rem);
    font-weight:400;
    color:var(--gold);
    letter-spacing:.35em;
    text-indent:.35em;
}

.hero-rule{
    width:130px;
    height:2px;
    margin:18px auto 0;
    background:linear-gradient(90deg,transparent,var(--red),transparent);
    position:relative;
}

.hero-rule::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:9px;height:9px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--red);
    box-shadow:0 0 12px rgba(224,30,43,.9);
}

.hero-rule{
    width:130px;
    height:2px;
    margin:18px auto 0;
    background:linear-gradient(90deg,transparent,var(--red),transparent);
    position:relative;
}

.hero-rule::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:9px;height:9px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:var(--red);
    box-shadow:0 0 12px rgba(224,30,43,.9);
}

/* ---------- Category tabs ---------- */
.cat-tabs-wrap{
    position:sticky;
    top:0;
    z-index:60;
    margin:8px calc(clamp(12px,3.5vw,24px) * -1) 0;
    padding:10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
    background:rgba(13,13,15,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
}

.cat-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-type:x proximity;
}

.cat-tabs::-webkit-scrollbar{display:none}

.cat-tab{
    flex:0 0 auto;
    scroll-snap-align:center;
    padding:9px 18px;
    font:inherit;
    font-size:.86rem;
    font-weight:500;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--line-soft);
    border-radius:999px;
    cursor:pointer;
    transition:color .25s,border-color .25s,background .25s,transform .15s;
    white-space:nowrap;
}

.cat-tab:active{transform:scale(.95)}

.cat-tab.is-active{
    color:#fff;
    background:linear-gradient(135deg,var(--red),var(--red-deep));
    border-color:transparent;
    box-shadow:0 4px 16px rgba(224,30,43,.35);
}

/* ---------- Sections ---------- */
.menu-section{
    margin-top:34px;
    scroll-margin-top:86px;
    animation:fadeUp .55s ease both;
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
}

.section-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 4px 14px;
}

.title-text{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:clamp(1.05rem,4.2vw,1.3rem);
    font-weight:900;
    color:var(--gold);
    white-space:nowrap;
}

.title-text::before{
    content:"";
    width:10px;height:10px;
    flex:0 0 auto;
    transform:rotate(45deg);
    background:var(--red);
    box-shadow:0 0 10px rgba(224,30,43,.7);
}

.title-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,var(--gold-dim),transparent);
}

.section-empty{
    margin:0;
    padding:18px 20px;
    color:var(--muted);
    font-size:.9rem;
    background:var(--panel);
    border:1px dashed var(--line-soft);
    border-radius:var(--radius);
    text-align:center;
}

/* ---------- Items ---------- */
.item-list{
    list-style:none;
    margin:0;
    padding:0;
    background:var(--panel);
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    overflow:hidden;
}

.menu-item{padding:0}

.item-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:15px 18px;
    transition:background .25s;
}

.menu-item + .menu-item .item-row{border-top:1px solid var(--line-soft)}

.menu-item:hover .item-row{background:rgba(255,255,255,.03)}

.item-info{min-width:0}

.item-name{
    margin:0;
    font-size:clamp(.95rem,3.6vw,1.08rem);
    font-weight:700;
    word-break:break-word;
}

.item-dots{
    flex:1 1 24px;
    min-width:24px;
    border-bottom:2px dotted rgba(255,255,255,.18);
    transform:translateY(-5px);
}

.item-price{
    flex:0 0 auto;
    display:flex;
    align-items:baseline;
    gap:5px;
    white-space:nowrap;
}

.price-value{
    font-size:clamp(1rem,3.8vw,1.12rem);
    font-weight:900;
    color:var(--gold);
    direction:ltr;
    unicode-bidi:embed;
}

.price-unit{font-size:.72rem;color:var(--muted)}

.menu-item.is-off .item-name{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(224,30,43,.55)}

.menu-item.is-off .item-dots{border-bottom-color:rgba(255,255,255,.08)}

.price-off{
    font-size:.72rem;
    font-weight:700;
    color:#ff8d95;
    border:1px solid rgba(224,30,43,.5);
    background:rgba(224,30,43,.12);
    padding:3px 12px;
    border-radius:999px;
}

/* ---------- Empty state / footer / misc ---------- */
.empty-state{
    margin:60px auto;
    padding:34px 20px;
    max-width:340px;
    text-align:center;
    color:var(--muted);
    background:var(--panel);
    border:1px dashed var(--line);
    border-radius:var(--radius);
}

.menu-footer{
    margin-top:56px;
    padding-top:18px;
    border-top:1px solid var(--line-soft);
    text-align:center;
    color:var(--muted);
    font-size:.78rem;
}

.back-to-top{
    position:fixed;
    bottom:max(18px, env(safe-area-inset-bottom));
    left:18px;
    z-index:70;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    color:var(--gold);
    background:rgba(22,22,26,.9);
    border:1px solid var(--gold-dim);
    border-radius:50%;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .3s,transform .3s,visibility .3s;
    text-decoration:none;
}

.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}

@media (max-width:380px){
    .item-row{padding:13px 14px;gap:8px}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
}