:root{
      --bg:#fff;
      --brand:#d7261e; /* strong red like KFC brand */
      --accent:#c59d00; /* gold accent kept for Silver Star identity */
      --muted:#f7f7f8;
      --text:#111;
      --card-shadow: 0 10px 30px rgba(17,17,17,0.08);
      --radius:12px;
      --max-width:1200px;
      --transition:220ms cubic-bezier(.2,.8,.2,1);
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--muted),#fff);color:var(--text);-webkit-font-smoothing:antialiased}
    a{color:inherit}
    .app{max-width:var(--max-width);margin:18px auto;padding:18px}

    /* header */
    header{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .brand{display:flex;align-items:center;gap:12px}
    .logo a img{
  width: 60px;
  height: 60px;
  object-fit: cover;
}
    .brand h1{margin:0;font-size:20px}
    nav{display:flex;gap:10px;align-items:center}
    .btn{background:var(--brand);color:#fff;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;transition:all var(--transition)}
    .btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}
    .lang-toggle{display:flex;gap:6px}

    /* layout */
    .top-row{display:flex;gap:18px;margin-top:14px}
    .left{flex:1}
    .right{width:380px}

    /* search & categories */
    .hero{display:flex;gap:12px;align-items:center;margin-bottom:12px}
    .search{flex:1;display:flex;align-items:center;background:#fff;padding:10px;border-radius:12px;box-shadow:var(--card-shadow)}
    .search input{border:0;outline:0;font-size:15px;padding:6px;width:100%}
    .categories{display:flex;gap:8px;padding:10px 0;overflow:auto}
    .cat{padding:8px 12px;border-radius:20px;background:#fff;border:1px solid rgba(0,0,0,0.04);cursor:pointer;white-space:nowrap}
    .cat.active{background:var(--brand);color:#fff}

    /* menu grid */
    .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
    .card{background:#fff;border-radius:12px;padding:12px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:10px;transition:transform var(--transition),box-shadow var(--transition)}
    .card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(17,17,17,0.12)}
    .card img{height:150px;width:100%;object-fit:cover;border-radius:8px}
    .card h3{margin:0;font-size:16px}
    .muted{color:#666;font-size:13px}
    .price-row{display:flex;justify-content:space-between;align-items:center}

    /* cart (right) */
    .cart{position:sticky;top:18px;background:#fff;padding:14px;border-radius:12px;box-shadow:var(--card-shadow)}
    .cart h4{margin:0 0 8px 0}
    .cart-items{max-height:300px;overflow:auto;padding:6px 0;display:flex;flex-direction:column;gap:8px}
    .cart-item{display:flex;gap:8px;align-items:center}
    .cart-item img{width:60px;height:48px;border-radius:8px;object-fit:cover}

    /* delivery zone */
    .zone{display:flex;gap:8px;align-items:center;margin:10px 0}
    select{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);outline:none}

    /* modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px}
    .modal.show{display:flex}
    .dialog{width:100%;max-width:960px;background:#fff;padding:18px;border-radius:12px;box-shadow:0 30px 70px rgba(17,17,17,0.18);display:flex;gap:18px}
    .dialog img{width:48%;height:360px;object-fit:cover;border-radius:10px}
    .dialog .info{flex:1}

    /* micro-interactions */
    .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--muted);font-weight:700}
    .badge{background:var(--brand);color:#fff;padding:4px 8px;border-radius:999px;font-size:13px}

    footer{margin-top:22px;padding:10px;border-radius:12px;text-align:center;color:#666}

    /* responsiveness */
    @media (max-width:980px){
      .top-row{flex-direction:column}
      .right{width:100%}
      .dialog{flex-direction:column}
      .dialog img{width:100%;height:220px}
    }

    /* RTL tweaks when dir="rtl" on html */
    :root[dir='rtl'] .card{direction:rtl}