/* الترويسة بنقش هندسي تونسي خفيف */
.app-header{position:sticky;top:0;z-index:20;color:#fff;background-color:var(--emerald-700);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='white' stroke-opacity='.09'%3E%3Crect x='10' y='10' width='28' height='28'/%3E%3Crect x='10' y='10' width='28' height='28' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E");
  padding:var(--s3) var(--s4);padding-top:calc(var(--s3) + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-head);font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.brand img{width:34px;height:34px;border-radius:10px}
.loc-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-sm)}
.hero{background:var(--emerald-700);color:#fff;padding:var(--s3) var(--s4) var(--s6);border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}
.hero h1{font-size:1.7rem;margin-block-end:var(--s2)} .hero p{opacity:.9}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border:0;border-radius:var(--r-pill);font-weight:600;transition:transform .12s,background .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)}
.btn-warm{background:var(--saffron);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* حقول */
.input{width:100%;min-height:48px;padding:0 var(--s4);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md)}
.input:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 3px var(--emerald-100)}

/* شرائح وشارات */
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-block:var(--s1);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 16px;border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);font-size:var(--fs-sm);font-weight:500}
.chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.badge{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--emerald-100);color:var(--emerald-800)}
.badge-warm{background:var(--saffron-100);color:#7A4B00}
.badge-danger{background:var(--harissa-100);color:#8E2A18}

/* بطاقة مطعم */
.rest-card{display:block;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.rest-card .cover{aspect-ratio:16/9;background:linear-gradient(135deg,var(--emerald-100),var(--saffron-100));display:grid;place-items:center;font-size:3rem}
.rest-card .cover img{width:100%;height:100%;object-fit:cover}
.rest-card .body{padding:var(--s3) var(--s4) var(--s4)}
.rest-meta{display:flex;gap:var(--s3);color:var(--ink-2);font-size:var(--fs-sm);margin-block-start:var(--s1)}

/* صف طبق */
.dish{display:flex;gap:var(--s3);background:var(--surface);padding:var(--s3);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.dish .thumb{width:88px;height:88px;border-radius:var(--r-sm);flex:none;background:var(--saffron-100);display:grid;place-items:center;font-size:2rem;overflow:hidden}
.dish .thumb img{width:100%;height:100%;object-fit:cover}
.price{font-family:var(--font-head);font-weight:800;color:var(--harissa)}
.price small{font-weight:600;font-size:.7em;margin-inline-start:3px;color:var(--ink-2)}

/* عداد الكمية */
.qty{display:inline-flex;align-items:center;background:var(--emerald-50);border-radius:var(--r-pill)}
.qty button{width:40px;height:40px;border:0;background:transparent;font-size:1.3rem;color:var(--primary);border-radius:50%}
.qty output{min-width:28px;text-align:center;font-weight:700}

/* حالات */
.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--ink-2)}
.empty h3{color:var(--ink);margin-block-end:var(--s2)}
.skeleton{background:linear-gradient(90deg,#e9eeeb 25%,#f4f7f5 50%,#e9eeeb 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-md)}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;inset-inline:var(--s4);bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));max-width:488px;margin-inline:auto;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:50}

/* شريط التنقل السفلي */
.bottom-nav{position:fixed;bottom:0;inset-inline:0;z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);box-shadow:0 -2px 16px rgba(20,35,29,.08);display:flex;max-width:520px;margin-inline:auto}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-3);font-size:var(--fs-xs);font-weight:600;position:relative}
.bottom-nav a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav a[aria-current="page"]{color:var(--primary)}
.nav-badge{position:absolute;top:6px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--harissa);color:#fff;font-size:11px;line-height:18px;text-align:center}
.nav-badge[hidden]{display:none}

/* ===== المرحلة 2: لمعان وحركات + عناصر جديدة ===== */
body{background:radial-gradient(1200px 500px at 50% -10%,#0d2a21 0,var(--bg) 60%) fixed,var(--bg)}
.app-header{background-color:#07110d;border-bottom:1px solid rgba(217,164,65,.35)}
.hero{background:linear-gradient(135deg,#0A6650,#07110d 70%);border:1px solid rgba(217,164,65,.25)}
.hero h1{background:linear-gradient(90deg,var(--gold),var(--orange),var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--gold));color:#1a1206;box-shadow:0 4px 16px rgba(255,138,31,.35)}
.btn-primary:hover{background:linear-gradient(135deg,var(--gold),var(--orange))}
.btn-ghost{color:var(--gold);border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#1a1206}
.rest-card,.dish{border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;animation:rise .4s both}
.rest-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 28px rgba(217,164,65,.22)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.skeleton{background:linear-gradient(90deg,#141a18 25%,#1d2522 50%,#141a18 75%);background-size:200% 100%}
.lang-sel{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(217,164,65,.5);border-radius:999px;min-height:36px;padding:0 10px;font:inherit;margin-inline-start:8px}
.lang-sel option{color:#000}
.price{color:var(--gold)}.toast{background:var(--gold);color:#1a1206}
.sumrow{display:flex;justify-content:space-between;padding:6px 0;color:var(--ink-2)}.sumrow.tot{color:var(--gold);font-weight:800;font-size:1.15rem;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.emo{font-size:2.4rem;display:grid;place-items:center;width:100%;height:100%}
.prog{display:flex;gap:4px;margin:8px 0}.prog i{flex:1;height:6px;border-radius:3px;background:var(--line)}.prog i.on{background:var(--orange)}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px}