@import url('../fonts/vazirmatn/Vazirmatn-font-face.css');


    :root{
      --headerH:64px; --container:min(1100px,92vw); --radius:18px; --shadow-dark:0 6px 22px rgba(0,0,0,.35);
      --fast:.18s ease; --price-color:#f59e0b; --badge-brd-mix:42%; --badge-bg-mix:24%;
      --card-bg: var(--card); --heading-color: var(--card-text);
      /* fallback + modern */
      --desc-color: var(--card-muted);
      --desc-color: color-mix(in srgb, var(--card-text) 70%, var(--card-muted) 30%);
    }
    /* Themes */
    [data-theme="light"]{ --bg:#ffffff; --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --card:#111827; --card-soft:#1f2937; --card-text:#e5e7eb; --card-muted:#9ca3af; --rail-bg:#ffffffcc }
    [data-theme="dark"]{
      --bg:#0b1220; --text:#e5e7eb; --muted:#93a4b8; --line:#1f2a3a; --card:#111827; --card-soft:#0f172a; --card-text:#e5e7eb; --card-muted:#94a3b8; --rail-bg:#0b1220cc;
    }
    /* Accent palettes */
    [data-palette="classic"]{ --accent:#f59e0b; --price-color: color-mix(in srgb, var(--accent) 80%, #ffffff); --card-bg: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);  --heading-color: color-mix(in srgb, var(--card-text) 50%, var(--accent) 50%) }
    [data-palette="warm"]{    --accent:#ef4444; --price-color: color-mix(in srgb, var(--accent) 70%, #ffffff); --card-bg: color-mix(in srgb, var(--card) 93%, var(--accent) 7%);   --heading-color: color-mix(in srgb, var(--card-text) 90%, var(--accent) 10%) }
    [data-palette="mint"]{    --accent:#10b981; --price-color: color-mix(in srgb, var(--accent) 78%, #ffffff); --card-bg: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);  --heading-color: color-mix(in srgb, var(--card-text) 88%, var(--accent) 12%); --badge-bg-mix:28% }
    [data-palette="royal"]{   --accent:#6366f1; --price-color: color-mix(in srgb, var(--accent) 78%, #ffffff); --card-bg: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);  --heading-color: color-mix(in srgb, var(--card-text) 88%, var(--accent) 12%) }
    [data-palette="sepia"]{   --accent:#b7791f; --price-color: color-mix(in srgb, var(--accent) 85%, #ffffff); --card-bg: color-mix(in srgb, var(--card) 91%, var(--accent) 9%);   --heading-color: color-mix(in srgb, var(--card-text) 90%, var(--accent) 10%); --badge-bg-mix:28% }

    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:"Vazirmatn", Tahoma, ui-sans-serif, system-ui;line-height:1.7}

    /* Skip link (theme-aware) */
    .skip-link{position:absolute;inset-inline-start:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip-link:focus{
      position:fixed;inset-inline-start:10px;top:10px;width:auto;height:auto;
      padding:8px 12px;border-radius:10px;background:var(--bg);color:var(--text);
      border:1px solid var(--line); z-index:200
    }

    /* Preloader */
    .preloader{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:1000;transition:opacity .25s ease, visibility .25s ease}
    .preloader[aria-hidden="true"]{opacity:0;visibility:hidden}
    .pl-card{display:grid;gap:12px;place-items:center;border:1px solid var(--line);padding:18px 22px;border-radius:14px;background:var(--rail-bg);backdrop-filter:blur(8px)}
    .pl-logo-wrap{width:96px;height:96px;position:relative;display:none;border-radius:16px;overflow:hidden}
    .pl-logo{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.25)) saturate(.8) contrast(.95) brightness(.95);opacity:.4;animation:logo-base-fade 1.2s ease-out forwards}
    @keyframes logo-base-fade{to{opacity:1;filter:drop-shadow(0 3px 10px rgba(0,0,0,.25)) saturate(1) contrast(1) brightness(1)}}
    .pl-logo-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 40%, rgba(255,255,255,0) 75%);transform:translateY(0);animation:logo-reveal 1.2s ease-out forwards;pointer-events:none}
    @keyframes logo-reveal{to{transform:translateY(100%)}}
    .pl-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
    .pl-text{color:var(--muted);font-size:14px}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Header: limit sticky to the page header only */
    .site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
    .header-row{width:var(--container);margin-inline:auto;display:flex;align-items:center;gap:12px;justify-content:space-between;min-height:var(--headerH)}
    .title{margin:0;font-weight:900;font-size:clamp(20px,2.6vw,28px)}
    .actions{display:flex;gap:8px;align-items:center}

    /* Controls */
    .btn,.sel{font-family: vazirmatn;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
    /* Selects (palette/lang) with theme-aware dropdown */
    .sel{appearance:none; background-color: var(--bg); color: var(--text)}
    .sel:hover{ border-color: var(--accent) }
    .sel:focus{ outline:2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset:2px; border-color: var(--accent) }
    /* Options background for dark/light themes */
    .sel option, .sel optgroup{  color: var(--text) }
    /* High-contrast in dark theme inside header */
    [data-theme="dark"] .sel{ background-color: color-mix(in srgb, var(--bg) 92%, transparent) }
    .sel:focus{outline:none; border-color:var(--accent)}
    .sel option{  color: var(--text) }
    .sel option:checked{ background-color: color-mix(in srgb, var(--accent) 18%, var(--bg)); color: var(--text) }
    .btn:hover,.sel:hover{border-color:var(--accent)}
    .icon-btn{ width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;font-size:18px;line-height:1;vertical-align:middle;text-align:center }
    .icon-btn[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 22%, transparent)}

    .toolbar{width:var(--container);margin:10px auto 0;display:flex;gap:10px;align-items:center}
    .search{flex:1;position:relative}
    .search input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text)}
    .search input:focus{outline:none;border-color:var(--accent)}
    .view-toggle{display:flex;gap:6px}

    /* Categories (sticky + snap) */
    .cats-wrap{position:sticky;top:var(--headerH);z-index:15;background:var(--bg)}
    .cats{width:var(--container);margin:0 auto;display:flex;gap:12px;overflow:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:12px 0;scroll-snap-type:x mandatory;scroll-snap-stop: always}
    .cat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:78px;font-size:13px;font-family:"Vazirmatn", Tahoma, ui-sans-serif, system-ui;user-select:none;scroll-snap-align:center;border:1px solid transparent;background:transparent;color:var(--muted);padding:6px 12px;border-radius:12px;transition:background var(--fast), color var(--fast), border-color var(--fast)}
    .cat .ic{font-size:24px}
    .cat .ic img{width:48px;height:48px;object-fit:cover;border-radius:6px;display:block}
    
    /* Base state - ensure inactive categories stay muted */
    .cat:not(.active){color:var(--muted) !important;background:transparent !important;border-color:transparent !important}
    
    /* Focus state for keyboard navigation (only when not active) */
    .cat:not(.active):focus{outline:2px solid var(--accent);outline-offset:2px}
    .cat:not(.active):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    
    /* Active state - only for the currently active category */
    .cat.active{color:var(--accent) !important;background:color-mix(in srgb, var(--accent) 12%, transparent) !important;border-color:color-mix(in srgb, var(--accent) 25%, transparent) !important}
    
    /* Active category focus (when navigated via keyboard) */
    .cat.active:focus{outline:2px solid var(--accent);outline-offset:2px}
    .cat.active:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    
    .cats-sep{border:none;border-top:1px solid var(--line);margin:0}

    /* Content */
    main{width:var(--container);margin:12px auto 90px;display:grid;gap:22px}
    .groups{display:grid;gap:30px}
    .group-title{margin:6px 0 10px;font-size:18px; color: var(--heading-color)}
    section.menu-group{ scroll-margin-top: calc(var(--headerH) + 12px); }

    /* Cards */
    .cards{display:grid;gap:22px}
    .cards[role="list"].grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
    @media (min-width: 768px){ .cards[role="list"].grid{grid-template-columns: repeat(3, minmax(0,1fr))} }
    @media (min-width: 1280px){ .cards[role="list"].grid{grid-template-columns: repeat(3, minmax(0,1fr))} }
    /* TV: apply grid columns ONLY when .grid is active */
    @media (min-width: 1920px){ .cards[role="list"].grid{grid-template-columns: repeat(4, minmax(0,1fr))} }

    /* Grid view layout */
    .cards[role="list"].grid .card{display:grid; grid-template-rows: auto 1fr auto; padding:14px 16px}
    .cards[role="list"].grid .thumb{width:100%;aspect-ratio:1/1;height:auto;flex:none;margin:0 0 10px 0}
    @media (min-width: 768px){ .cards[role="list"].grid .thumb{aspect-ratio:4/3} }
    .cards[role="list"].grid .info{min-width:0}
    .cards[role="list"].grid .info h3{font-size:16px}
    .cards[role="list"].grid .info p{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
    .cards[role="list"].grid .badges{margin-top:8px}
    .cards[role="list"].grid .badge{font-size:11px; padding:2px 6px}
    .cards[role="list"].grid .price{margin-inline-start:0;align-items:flex-start;margin-top:8px}
    .cards[role="list"].grid .price .num{font-size:clamp(18px, 2.4vw, 24px)}

    @media (max-width: 360px){
      .cards[role="list"].grid{gap:16px}
      .cards[role="list"].grid .info h3{font-size:15px}
      .cards[role="list"].grid .price .num{font-size:18px}
    }
    @media (min-width: 1920px){
      body{font-size:22px}
      .cards[role="list"].grid .thumb{aspect-ratio:4/3}
      .cards[role="list"].grid .price .num{font-size:28px}
    }

    /* Smooth view switch with staggered animations */
    .cards.anim .card{animation:viewSwap .18s ease both}
    .cards.anim .card:nth-child(1){animation-delay:0ms}
    .cards.anim .card:nth-child(2){animation-delay:50ms}
    .cards.anim .card:nth-child(3){animation-delay:100ms}
    .cards.anim .card:nth-child(4){animation-delay:150ms}
    .cards.anim .card:nth-child(5){animation-delay:200ms}
    .cards.anim .card:nth-child(6){animation-delay:250ms}
    .cards.anim .card:nth-child(7){animation-delay:300ms}
    .cards.anim .card:nth-child(8){animation-delay:350ms}
    
    @keyframes viewSwap{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none}}
    @media (prefers-reduced-motion: reduce){ .cards.anim .card{animation:none} }
    
    /* Enhanced button animations */
    .btn{transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1)}
    .btn:active{transform: scale(0.98)}
    .btn:hover{transform: translateY(-1px)}
    .btn.primary:hover{filter: brightness(1.05)}
    
    /* Ripple effect for buttons */
    .btn{position:relative;overflow:hidden}
    .btn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);opacity:0;transform:scale(0);transition:opacity 0.3s, transform 0.3s}
    .btn:active::before{opacity:1;transform:scale(2);transition:none}
    
    /* Enhanced focus states */
    .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
    
    /* Loading spinner animation */
    @keyframes spin{to{transform:rotate(360deg)}}
    
    /* Skeleton loading states */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: 8px;
    }
    
    [data-theme="dark"] .skeleton {
      background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
      background-size: 200% 100%;
    }
    
    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    .skeleton-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      background: var(--card-bg);
      border-radius: var(--radius);
      border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }
    
    .skeleton-card .skeleton-thumb {
      width: 160px;
      height: 160px;
      border-radius: 16px;
      flex-shrink: 0;
    }
    
    .skeleton-card .skeleton-content {
      flex: 1;
      display: grid;
      gap: 12px;
    }
    
    .skeleton-card .skeleton-title {
      height: 20px;
      width: 70%;
    }
    
    .skeleton-card .skeleton-text {
      height: 16px;
      width: 90%;
    }
    
    .skeleton-card .skeleton-text.short {
      width: 50%;
    }
    
    .skeleton-card .skeleton-price {
      height: 18px;
      width: 60px;
      margin-left: auto;
    }
    
    /* Staggered skeleton animations */
    .skeleton-card:nth-child(1) { animation-delay: 0ms; }
    .skeleton-card:nth-child(2) { animation-delay: 100ms; }
    .skeleton-card:nth-child(3) { animation-delay: 200ms; }
    .skeleton-card:nth-child(4) { animation-delay: 300ms; }
    .skeleton-card:nth-child(5) { animation-delay: 400ms; }
    .skeleton-card:nth-child(6) { animation-delay: 500ms; }

    .card{
      display:flex;align-items:center;gap:1px;background:var(--card-bg);color:var(--card-text);
      border-radius:var(--radius);padding:18px 20px;outline:2px solid transparent;border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
      transition:outline-color var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast);
      /* Perf: large lists */
      content-visibility:auto; contain-intrinsic-size: 300px;
    }
    .card:hover{
      outline-color:var(--accent);
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
      border-color:color-mix(in srgb, var(--accent) 45%, transparent);
      transform: translateY(-2px);
    }
    .card:focus{outline:3px solid var(--accent)}
    .card[data-selected="true"], .card:focus-visible{
      outline-color:var(--accent);
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
      transform: translateY(-1px);
    }
    [data-theme="dark"] .card{box-shadow:var(--shadow-dark)}

    /* Enhanced card animations */
    .card{transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)}

    /* Better color contrast for accessibility */
    :root {
      --text: #0f172a; /* Better contrast */
      --muted: #64748b; /* Better contrast */
    }

    [data-theme="dark"] {
      --text: #f1f5f9; /* Better contrast */
      --muted: #94a3b8; /* Better contrast */
    }

    /* Enhanced focus indicators */
    .btn:focus-visible,
    .card:focus-visible,
    .sel:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    /* Smooth scrolling for better UX */
    html {
      scroll-behavior: smooth;
    }

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

    .thumb{position:relative;width:160px;height:160px;border-radius:16px;background:var(--card-soft);display:grid;place-items:center;color:var(--card-muted);flex:0 0 160px;overflow:hidden}
    .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));transform:translateX(-100%);animation:shimmer 1.4s ease-in-out infinite}
    [data-theme="dark"] .thumb::after{background:linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0))}
    .thumb.loaded::after{display:none}
    @keyframes shimmer{0%{transform:translateX(-100%)} 100%{transform:translateX(100%)}}

    .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .info{flex:1;min-width:0;display:grid;gap:8px;padding: 10px;}
    .info h3{margin:0;font-size:17px;font-weight:800;color:var(--heading-color)}
    .info p{margin:0;color:var(--desc-color);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .badge{border:1px solid color-mix(in srgb, var(--accent) var(--badge-brd-mix), transparent);color:var(--card-text);background:color-mix(in srgb, var(--accent) var(--badge-bg-mix), transparent);padding:2px 8px;border-radius:999px;font-size:12px}
    /* Special badge */
    .special-badge{ position:absolute; top:8px; inset-inline-start:8px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; color:#0b1220; background:linear-gradient(135deg, #ffd54f, #ffb300); border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 18px rgba(0,0,0,.18) }
    .special-badge svg{ width:14px; height:14px; display:block }
    .price{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;color:var(--price-color)}
    .price .num{font-weight:900;font-size:22px;line-height:1}
    .price .unit{font-size:11px;color:color-mix(in srgb, var(--price-color) 70%, #ffffff)}
    .add-btn{margin-top:8px; font-size:12px; padding:8px 10px; border-radius:999px}
    .add-btn:hover{filter:brightness(1.05)}
    .add-btn::before{content:none}
    [data-theme="dark"] .thumb{ background:#0e1624 }

    /* Side rail */
    .side-rail{position:fixed;inset-inline-end:5px;bottom:5vh;display:grid;gap:10px;background:var(--rail-bg);backdrop-filter:blur(8px);padding:5px;border:1px solid var(--line);border-radius:14px;z-index:30}
    .rail-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
    .rail-btn:hover{border-color:var(--accent)}
    .order-count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;line-height:1;border:2px solid var(--bg);}
    .rail-btn.pulse{animation:btnpulse .6s ease-out}
    @keyframes btnpulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

    /* Modals - Enhanced for mobile */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.5);
      z-index:50;
      backdrop-filter: blur(6px);
      padding: 16px;
      box-sizing: border-box;
    }
    .modal[aria-hidden="false"]{display:flex}
    .modal::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.25));
      opacity:0;
      animation:modalBackdrop 0.3s ease forwards;
    }
    @keyframes modalBackdrop{to{opacity:1}}

    .dialog{
      background:var(--bg);
      color:var(--text);
      width:min(600px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      border-radius:20px;
      border:1px solid var(--line);
      box-shadow:0 20px 60px rgba(0,0,0,.35);
      transform:scale(.95);
      opacity:0;
      transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position:relative;
      z-index:1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .modal[aria-hidden="false"] .dialog{
      transform:scale(1);
      opacity:1;
    }

    /* Mobile-specific modal adjustments */
    @media (max-width: 480px) {
      .modal {
        padding: 12px;
        align-items: flex-end;
      }

      .dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 16px 16px 0 0;
        margin-bottom: 0;
        transform: translateY(100%);
      }

      .modal[aria-hidden="false"] .dialog {
        transform: translateY(0);
      }
    }

    .dialog header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 20px;
      border-bottom:1px solid var(--line);
      background: var(--bg);
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .dialog h2.hd{
      margin:0;
      font-size:18px;
      font-weight: 700;
      color: var(--text);
    }
    .dialog .body{
      flex: 1;
      overflow-y: auto;
      padding:20px;
      gap:16px;
    }

    /* Mobile header adjustments */
    @media (max-width: 480px) {
      .dialog header {
        padding: 14px 16px;
      }

      .dialog h2.hd {
        font-size: 16px;
      }

      .dialog .body {
        padding: 16px;
      }
    }
    .dialog .pic{margin:auto;width:260px;height:260px;border-radius:14px;background:var(--card-soft);display:grid;place-items:center;font-size:48px;overflow:hidden}
    .dialog .pic img{width:100%;height:100%;object-fit:cover;display:block}
    #infoModal .body{display:grid;gap:16px;}
    #infoModal .pic{width:min(260px,100%);height:auto;aspect-ratio:1;border-radius:18px;overflow:hidden}
    #infoModal .pic img{width:100%;height:100%;object-fit:cover;display:block}
    #infoModal .info-content{display:grid;gap:12px;color:var(--muted);line-height:1.7}
    #infoModal .info-content .info-text{white-space:normal}
    #infoModal .info-content > *:not(:first-child){margin-top:0}
    #infoModal .info-content img,
    #infoModal .info-content figure img{max-width:100%;height:auto;display:block;margin:12px 0;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.12)}
    #infoModal .info-content figure{margin:0}
    .facts{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px;margin-top:6px}
    .fact{border:1px solid var(--line);border-radius:10px;padding:8px;font-size:14px}
    .dialog .price{color:var(--price-color);font-size:26px;font-weight:900}
    .dialog .actions{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px}
    /* Order modal */
    #orderList{ display:grid; gap:12px; padding-bottom:12px }
    /* چهار ستون: تصویر | نام | تعداد/± | حذف */
    .order-row{ display:grid; grid-template-columns: 64px 1fr auto auto; align-items:center; gap:14px; border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:transparent; min-width:0 }
    .order-row:hover{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
    .order-row .thumb{ width:56px; height:56px; border-radius:12px; overflow:hidden; background:var(--card-soft); display:grid; place-items:center; font-size:22px; flex-shrink:0 }
    .order-row .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
    .order-row .nm{ font-weight:500; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-width:0 }
    .order-row .ctrls{ display:flex; align-items:center; gap:10px; justify-content:flex-start; flex-shrink:0 }
    .order-row .qty{ display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:16px; padding:4px; flex-shrink:0 }
    .order-row .qty .btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); color:var(--accent); border-radius:999px; background:transparent; line-height:0; padding:0; flex-shrink:0 }
    .order-row .qty .btn:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent) }
    .order-row .qty .btn svg{ width:12px; height:12px; display:block }
    .order-row .qty span{ min-width:20px; text-align:center; font-weight:500; flex-shrink:0 }
    .order-row .rm{ width:28px; height:28px; border-radius:50%; background:transparent; color:var(--muted); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0 }
    .order-row .rm:hover{ color:var(--accent); border-color:var(--accent) }
    .order-empty{ text-align:center; color:var(--muted) }
    /* نوار جمع‌بندی زیر آخرین آیتم، کاملاً پایین بدنه */
    #orderTotals{ position:static; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--text); }
    #orderTotals .sum{ font-weight:900 }

    .close{
      border: none;
      background: transparent;
      color: var(--muted);
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 20px;
      padding: 0;
      margin: -4px;
    }
    .close:hover{
      background: color-mix(in srgb, var(--text) 8%, transparent);
      color: var(--text);
    }

    .btn,.sel{
      border:1px solid var(--line);
      background:transparent;
      color:var(--text);
      border-radius:12px;
      padding:12px 16px;
      cursor:pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      font-weight: 500;
    }

    /* Mobile button adjustments */
    @media (max-width: 480px) {
      .close {
        width: 32px;
        height: 32px;
        font-size: 18px;
      }

      .btn, .sel {
        padding: 14px 18px;
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 48px; /* Better touch target */
      }
    }
    /* Poll modal - Enhanced mobile experience */
    .poll-info{
      margin-bottom:16px;
      font-family: Vazirmatn, Tahoma, system-ui;
      display:flex;
      gap:8px;
      align-items:flex-start;
      border:1px solid var(--line);
      border-radius:12px;
      padding:12px 14px;
      background: var(--rail-bg);
      font-size:14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      backdrop-filter: blur(8px);
    }
    .poll-info .ic{
      width:18px;
      height:18px;
      display:inline-grid;
      place-items:center;
      color:var(--accent);
      flex-shrink:0;
      margin-top:1px;
    }
    .poll-desc{
      white-space:pre-wrap;
      line-height:1.5;
      color: var(--text);
    }

    .poll-label{
      display:block;
      margin:8px 0 6px;
      font-size:14px;
      font-weight:600;
      color:var(--text);
    }

    .poll-field{
      font-family: vazirmatn;
      text-align:center;
      border:1px solid var(--line);
      border-radius:12px;
      padding:14px 16px;
      background: var(--bg);
      color:var(--text);
      font-size:16px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }
    .poll-field:focus{
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    }

    .poll-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    @media (max-width:720px){
      .poll-grid{ grid-template-columns: 1fr; gap:10px }
    }

    .qrow{
      display:grid;
      grid-template-columns: 1fr auto;
      align-items:center;
      gap:12px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:12px;
      background: var(--bg);
      transition: border-color 0.2s ease;
    }
    .qrow:hover{
      border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    }
    @media (max-width:640px){
      .qrow{
        grid-template-columns: 1fr;
        gap:8px;
        text-align: center;
      }
    }

    .qtitle{
      font-weight:500;
      font-size:15px;
      color: var(--text);
      line-height:1.4;
    }

    /* Enhanced star rating for mobile */
    .star-wrap{
      display:flex;
      gap:6px;
      align-items:center;
      outline: none;
      padding: 4px;
      border-radius: 8px;
      transition: background 0.2s ease;
    }
    .star-wrap:focus-visible{
      outline:2px solid color-mix(in srgb, var(--accent) 50%, #ffffff);
      outline-offset: 2px;
      background: color-mix(in srgb, var(--accent) 5%, transparent);
    }

    /* Better mobile spacing */
    @media (max-width: 480px) {
      .poll-info {
        padding: 10px 12px;
        font-size: 13px;
        margin-bottom: 12px;
      }

      .poll-field {
        padding: 12px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
      }

      .qrow {
        padding: 10px;
      }

      .qtitle {
        font-size: 14px;
      }
    }
    .qtitle{ font-weight:500 }
    .likert{ display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end }
    .star-wrap{ display:flex; gap:6px; align-items:center; outline: none }
    .star-btn{ width:28px; height:28px; padding:0; border:none; background:transparent; cursor:pointer; line-height:0; display:inline-grid; place-items:center }
    .star-btn svg{ width:100%; height:100%; stroke: #ccc; fill: transparent; opacity:1; transition:opacity .15s ease, transform .15s ease, fill .15s ease, stroke .15s ease }
    .star-btn:hover svg{ opacity:.85; transform:scale(1.06) }
    .star-btn[data-active="true"] svg{ opacity:1; fill: #EFBF04; stroke: #EFBF04; }
    .star-wrap:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 50%, #ffffff); outline-offset: 3px; border-radius:10px }
    .scale-hint{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:4px }
    /* Stronger style for add button to keep contrast over card */
    .btn.add-btn{ 
      display:inline-flex; align-items:center; gap:8px;
      background:var(--accent); border-color:var(--accent);
      color:#0b1220; font-weight:800; border-radius:999px; padding:8px 12px;
    }
    .btn.add-btn:hover{ filter:brightness(1.03); }
    .btn.add-btn:focus{ outline:2px solid color-mix(in srgb, var(--accent) 50%, #ffffff); outline-offset:2px }
    .btn.add-btn .ic{ display:inline-grid; place-items:center }
    .btn.add-btn .ic svg{ width:14px; height:14px; display:block }
    .btn.primary{border-color:var(--accent)}

    footer{text-align:center;color:var(--muted);font-size:12px;padding:24px 0}

    /* Responsive */
    @media (max-width: 520px){
      .thumb{max-width:130px;height:130px}
      .dialog .body{grid-template-columns:1fr}
      .dialog .pic{width:100%;height:220px}
    }
    @media (min-width: 1200px){ .info h3{font-size:18px} .price .num{font-size:28px} }
    @media (min-width: 1600px){ body{font-size:20px} .price .num{font-size:32px} .thumb{width:170px;height:170px} }
    @media (min-width: 1920px){ body{font-size:22px} }
    /* جلوگیری از اسکرول افقی های ناخواسته */
html, body {
  overflow-x: clip; /* در صورت نیاز: overflow-x: hidden; */
}

/* هدر و نوار دسته‌ها به‌صورت full-bleed رنگ‌آمیزی شوند */
.site-header,
.cats-wrap {
  /* رنگ پس‌زمینه‌ی خودشان را به کل عرض ویوپورت «شِیدو» بدهند */
  box-shadow: 0 0 0 100vmax var(--bg);
  /* از بیرون‌زدگی جلوگیری کند و دو طرف را باز نگه دارد */
  clip-path: inset(0 -100vmax);
  /* اطمینان از چسبان بودن و پرشدن کل خط */
  left: 0;
  right: 0;
}

/* Header no longer sticky; keep categories sticky at top */
.site-header { position: static; top: auto; }
.cats-wrap   { position: sticky; top: 0; }

/*  Hamid   */
@media (max-width: 600px) {
.btn.add-btn .lbl {
  display: none;
}

.btn.add-btn .ic svg {
  width: 20px;
  height: 20px;
  display: block;
}

.order-row .qty {
  gap: 2px;
}
.order-row .qty .btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-row .rm {
  padding: 8px 12px;
  border-radius: 8px;
}
.order-row {
  gap: 8px;
  padding: 12px 16px;
}

/* Better mobile spacing */
.card {
  padding: 16px 18px;
}
.thumb {
  width: 140px;
  height: 140px;
}
.info {
  padding-right: 12px;
}

/* Enhanced touch feedback */
.btn:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Larger rail buttons for mobile */
.side-rail .rail-btn {
  width: 48px;
  height: 48px;
}
}

/* Enhanced mobile optimization for order modal */
@media (max-width: 480px) {
  /* Order modal specific mobile enhancements */
  #orderModal .dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    transform: translateY(0);
    overflow: hidden;
  }

  #orderModal .dialog header {
    padding: 16px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }

  #orderModal .dialog .body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #orderModal .dialog .actions {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-shrink: 0;
  }

  /* Order row mobile layout */
  .order-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    min-height: 65px;
    overflow: hidden;
  }

  .order-row .thumb {
    max-width: 60px;
    height: 60px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .order-row .nm {
    flex: 1;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
    text-align: right;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .order-row .ctrls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
    flex-shrink: 0;
  }

  .order-row .qty {
    display: flex;
    align-items: center;
    gap: 2px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 12px;
    padding: 2px;
  }

  .order-row .qty .btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
  }

  .order-row .qty span {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
  }

  .order-row .rm {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
  }

  /* Order totals mobile */
  #orderTotals {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 16px 0;
    margin-top: 16px;
  }

  #orderTotals .sum {
    font-size: 18px;
    text-align: center;
  }

  #orderCountText {
    text-align: center;
    font-size: 14px;
  }

  /* Empty state mobile */
  #orderEmpty {
    padding: 40px 20px;
    font-size: 16px;
    text-align: center;
  }

  /* Modal backdrop for mobile */
  #orderModal {
    padding: 0;
    align-items: flex-end;
  }

  #orderModal .modal {
    padding: 0;
  }

  /* Prevent horizontal scrolling when modal is open */
  #orderModal[aria-hidden="false"] {
    overflow-x: hidden;
  }

  #orderModal[aria-hidden="false"] body {
    overflow-x: hidden;
  }
}

/* Focus Management and Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent-color);
  color: white;
  padding: 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}

/* Screen reader only content */
.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;
}

/* Focus indicators */
*:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Category button states */
.cat {
  transition: all 0.2s ease;
}

.cat:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cat[aria-selected="true"] {
  background-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cat[aria-selected="true"] .lbl,
.cat[aria-selected="true"] .ic {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cat:focus .lbl,
.cat:focus .ic,
.cat[aria-selected="true"]:focus .lbl,
.cat[aria-selected="true"]:focus .ic {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.cat:hover:not([aria-selected="true"]) {
  background-color: color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-1px);
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Search result highlighting */
.card[data-selected="true"] {
  background: linear-gradient(135deg, var(--accent), var(--price-color));
  color: white;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.card[data-selected="true"] .name,
.card[data-selected="true"] .description,
.card[data-selected="true"] .price {
  color: white;
}

/* Modal focus trapping */
.modal[aria-hidden="false"] {
  pointer-events: auto;
}

.modal[aria-hidden="true"] {
  pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus {
    outline: 3px solid;
    outline-offset: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card:focus,
  .card[data-selected="true"] {
    transform: none;
    transition: none;
  }
  
  .skip-link {
    transition: none;
  }
}

/* Focus management for specific elements */
#q:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.orderBtn:focus,
#orderBtn:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Keyboard navigation hints */
.keyboard-hint {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 4px;
}

/* Live announcer for screen readers */
#live-announcer {
  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;
}

/* Help Modal Styles */
.help-content {
  max-height: 60vh;
  overflow-y: auto;
}

.help-section {
  margin-bottom: 1.5rem;
}

.help-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-list li:last-child {
  border-bottom: none;
}

.help-list kbd {
  background: var(--accent);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: bold;
  min-width: 80px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.help-list span {
  flex: 1;
  font-size: 0.9rem;
}

/* RTL support for help modal */
[dir="rtl"] .help-list li {
  flex-direction: row-reverse;
}

[dir="rtl"] .help-list kbd {
  text-align: center;
}

/* Utility Classes */
.hidden { display: none !important; }
.visible { display: block !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Poll Questions Layout */
.poll-questions { 
  display: grid; 
  gap: 18px; 
  margin-top: 8px; 
}

/* Poll Actions Layout */
.poll-actions { 
  margin-top: 12px; 
  display: flex; 
  gap: 8px; 
  justify-content: flex-end; 
}

/* Form Validation Styles */
.form-field {
  position: relative;
  margin-bottom: 16px;
}

.form-field.error input,
.form-field.error select {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-field .error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.form-field.error .error-message {
  display: block;
}

.form-field .success-message {
  color: #10b981;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.form-field.success .success-message {
  display: block;
}

/* Loading states */
.loading {
  pointer-events: none;
  opacity: 0.6;
}

.btn.loading {
  position: relative;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}