:root{
    --blue-deep:#0d3a5c;
    --blue:#1f6ea3;
    --blue-light:#2f8fc0;
    --green-deep:#1f7a2e;
    --green:#3fa73f;
    --green-light:#6cc24a;
    --gold:#ffd23f;
    --red:#e2231a;
    --cream:#fff8e9;
    --ink:#0a2b3d;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Tajawal','Cairo',sans-serif;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.08), transparent 60%),
      linear-gradient(150deg, var(--blue-deep) 0%, var(--blue) 32%, var(--blue-light) 52%, var(--green) 76%, var(--green-deep) 100%);
    background-attachment:fixed;
    color:#fff;
    min-height:100vh;
    padding-bottom:60px;
  }
  .lang-en body{font-family:'Cairo','Tajawal',sans-serif;}

  /* ---------- Top bar / lang toggle ---------- */
  .topbar{
    position:sticky; top:0; z-index:60;
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 18px;
    background:rgba(9,35,54,0.72);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .brandmini{display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px;}
  .brandmini .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);}
  .topbar-logo{
    height:22px; width:auto;
    filter: brightness(0) invert(1);
  }
  .langbtn{
    background:linear-gradient(135deg,var(--green-light),var(--green-deep));
    border:1px solid rgba(255,255,255,0.4);
    color:#fff; font-weight:700; font-size:13px;
    padding:7px 16px; border-radius:999px; cursor:pointer;
    letter-spacing:.5px;
    transition:transform .15s ease;
  }
  .langbtn:active{transform:scale(.95);}
  .langbtn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:38px 20px 26px;
    text-align:center;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 22px);
    pointer-events:none;
  }
  .leaf{
    position:absolute; font-size:26px; opacity:.35; filter:saturate(1.4);
  }
  .logo-img{
    max-width:280px; max-height:170px; width:auto; height:auto;
    filter: brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(255,255,255,0.25));
    margin-bottom:2px;
  }
  .logo-ar{
    font-family:'Marck Script','Amiri',cursive;
    color:var(--red);
    font-size:clamp(48px,12vw,78px);
    text-shadow:0 3px 0 rgba(255,255,255,0.5), 0 6px 14px rgba(0,0,0,0.35);
    line-height:1;
  }
  .logo-en{
    font-family:'Amiri',serif; font-style:italic;
    color:var(--red);
    font-size:clamp(18px,4vw,26px);
    margin-top:6px;
    text-shadow:0 2px 6px rgba(0,0,0,0.3);
  }
  .tagline{
    margin-top:16px; font-weight:700; font-size:clamp(15px,3.6vw,19px);
    color:#fff;
  }
  .tagline .accent{color:var(--gold);}
  .info-strip{
    margin-top:20px;
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  }
  .chip{
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.35);
    padding:7px 14px; border-radius:999px;
    font-size:12.5px; font-weight:600;
    display:flex; align-items:center; gap:6px;
    backdrop-filter:blur(4px);
    color:#fff; text-decoration:none;
    transition:background .2s, transform .15s;
  }
  a.chip:hover, a.chip:focus-visible{background:rgba(255,255,255,0.24); transform:translateY(-1px);}
  .ltr-num{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
  .whatsapp-chip{background:rgba(37,211,102,0.28); border-color:rgba(37,211,102,0.6);}
  .whatsapp-chip:hover{background:rgba(37,211,102,0.42);}

  /* ---------- Sticky category nav ---------- */
  .catnav-wrap{
    position:sticky; top:47px; z-index:50;
    background:rgba(9,35,54,0.55);
    backdrop-filter:blur(6px);
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .catnav{
    display:flex; gap:8px; overflow-x:auto;
    padding:0 14px;
    scrollbar-width:none;
  }
  .catnav::-webkit-scrollbar{display:none;}
  .catnav a{
    flex:0 0 auto;
    color:#fff; text-decoration:none;
    font-size:12.5px; font-weight:700;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.25);
    padding:8px 14px; border-radius:999px;
    white-space:nowrap;
    transition:background .2s;
  }
  .catnav a:hover, .catnav a:focus-visible{background:var(--green); outline:none;}

  /* ---------- Category section ---------- */
  .menu-wrap{max-width:880px; margin:0 auto; padding:22px 14px 0;}
  section.category{margin-bottom:34px; scroll-margin-top:150px;}

  .cat-header{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg, var(--green-light), var(--green) 55%, var(--green-deep));
    border-radius:999px;
    padding:10px 20px;
    box-shadow:0 6px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
    margin-bottom:16px;
    position:relative;
    overflow:hidden;
  }
  .cat-icon{
    font-size:24px; flex:0 0 auto;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
  }
  .cat-titles{flex:1; min-width:0;}
  .cat-title-ar{font-weight:900; font-size:clamp(17px,4vw,21px); line-height:1.15;}
  .cat-title-en{font-size:11.5px; font-weight:600; opacity:.9; letter-spacing:.3px; text-transform:uppercase;}
  .lang-en .cat-title-en{display:block;}

  .size-legend{
    display:flex; gap:14px; justify-content:flex-end;
    font-size:11px; font-weight:700; color:var(--gold);
    padding:0 10px 8px;
    opacity:.9;
  }

  .item{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:9px;
    display:flex; align-items:center; gap:12px;
    transition:background .2s, transform .15s;
  }
  .item:hover{background:rgba(255,255,255,0.13);}
  .item-main{flex:1; min-width:0;}
  .item-name-row{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;}
  .item-name-ar{font-weight:800; font-size:15.5px;}
  .item-name-en{font-size:11.5px; color:var(--gold); font-weight:600; display:none;}
  .lang-en .item-name-en{display:inline;}
  .lang-en .item-name-ar{font-size:13px; opacity:.85; font-weight:600;}
  .lang-en .item-name-en{font-size:15.5px; color:#fff; font-weight:800; order:-1;}
  .spicy{color:var(--red); font-size:13px; margin-inline-start:2px;}
  .item-desc{font-size:11.5px; color:rgba(255,255,255,0.75); margin-top:3px; line-height:1.5;}
  .item-weight{font-size:10.5px; color:var(--gold); font-weight:700; margin-inline-start:6px;}
  .bread-tag{
    display:inline-block; margin-top:6px;
    font-size:10.5px; font-weight:700; color:#fff;
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3);
    padding:3px 9px; border-radius:999px;
  }

  .item-prices{flex:0 0 auto; display:flex; gap:8px; align-items:center;}
  .price-pill{
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.25);
    border-radius:10px;
    padding:6px 10px;
    text-align:center;
    min-width:52px;
  }
  .price-pill .amt{font-weight:900; font-size:15px; color:#fff;}
  .price-pill .lbl{font-size:8.5px; color:var(--gold); font-weight:700; display:block; margin-top:1px;}

  .promo-note{
    background:linear-gradient(135deg, rgba(255,210,63,0.18), rgba(255,210,63,0.05));
    border:1px dashed var(--gold);
    color:var(--gold);
    font-weight:700; font-size:12.5px;
    text-align:center;
    border-radius:12px;
    padding:10px 14px;
    margin:14px 0;
  }

  /* ---------- Footer ---------- */
  footer{
    max-width:880px; margin:30px auto 0; padding:24px 18px;
    text-align:center;
  }
  .footer-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:20px;
    padding:22px;
  }
  .footer-card .logo-ar{font-size:32px;}
  .footer-logo{
    height:44px; width:auto;
    filter: brightness(0) invert(1);
  }
  .footer-line{font-size:13px; margin-top:8px; line-height:1.8;}
  .footer-line b{color:var(--gold);}
  .phones{
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px;
  }
  .phones a{
    color:#fff; text-decoration:none; font-weight:800; font-size:14px;
    background:var(--red); padding:8px 16px; border-radius:999px;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
    display:inline-flex; align-items:center; gap:6px;
  }
  .phones a.wa-phone-btn{background:#25d366;}
  .maps-link{color:var(--gold); font-weight:700; text-decoration:underline;}

  /* ---------- Back to top ---------- */
  .totop{
    position:fixed; bottom:18px; inset-inline-end:18px; z-index:70;
    width:44px; height:44px; border-radius:50%;
    background:var(--gold); color:var(--ink);
    border:none; font-size:18px; font-weight:900;
    box-shadow:0 6px 16px rgba(0,0,0,0.35);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .25s;
  }
  .totop.show{opacity:1; pointer-events:auto;}
  .totop:focus-visible{outline:3px solid #fff;}

  @media (max-width:420px){
    .item{flex-direction:column; align-items:stretch;}
    .item-prices{justify-content:flex-end;}
  }