@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0D2B27;
  --ink-2:#153B36;
  --ink-3:#1C4842;
  --cream:#FBF2DE;
  --cream-2:#EFE0BC;
  --gold:#C89A4A;
  --gold-2:#E3C077;
  --terracotta:#C1573A;
  --muted:#9FB3AA;
  --line: rgba(227,192,119,0.16);
  --shadow: 0 12px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box; touch-action:manipulation;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  font-family:'Tajawal','Vazirmatn', Tahoma, Arial, sans-serif;
  background:var(--ink);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}
h1,h2{font-family:'Cairo','Tajawal',sans-serif;}

/* ---------- public menu ---------- */
.wrap{max-width:640px; margin:0 auto; padding:0 0 60px;}
.top{
  padding:38px 20px 30px; text-align:center; position:relative;
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(227,192,119,0.28) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink-3) 0%, var(--ink) 100%);
  border-bottom:1px solid var(--gold);
}
.top::after{
  content:"";
  position:absolute; bottom:-1px; left:50%; transform:translateX(-50%);
  width:64px; height:3px; background:var(--gold-2); border-radius:3px;
}
.top h1{font-size:25px; font-weight:800; margin:0 0 8px; color:var(--gold-2); letter-spacing:.3px;}
.top .sub{color:var(--muted); font-size:12.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;}
.hidden-notice{text-align:center; padding:80px 20px; color:var(--muted); font-size:15px;}
.hidden-notice .big{font-size:44px; display:block; margin-bottom:14px;}

.cat{margin:14px 16px;}
.cat-title-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; background:var(--ink-2); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; user-select:none;
}
.cat.open > .cat-title-row{border-color:var(--gold);}
.cat-title-row .name{font-weight:800; font-size:16.5px; font-family:'Cairo',sans-serif; color:var(--gold-2);}
.cat-plus{font-size:19px; color:var(--gold); font-weight:700; width:20px; text-align:center; transition:transform .2s ease;}
.cat.open .cat-plus{transform:rotate(45deg);}
.cat-body{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.cat.open > .cat-body{max-height:none; padding-top:10px;}
.cat.sub{margin:10px 0 10px 10px;}
.cat.sub .cat-title-row{background:transparent; border-color:var(--line);}
.cat.sub .cat-title-row .name{color:var(--cream); font-size:14.5px;}

.dish{
  display:flex; gap:12px; background:var(--cream); color:var(--ink);
  border-radius:14px; padding:10px; margin-bottom:10px; box-shadow:var(--shadow);
  align-items:center; border:1px solid rgba(200,154,74,0.35);
}
.dish img{width:96px; height:96px; border-radius:11px; object-fit:cover; flex-shrink:0; background:var(--cream-2);}
.dish-main{flex:1; min-width:0;}
.dish-name{font-weight:800; font-size:15.5px; font-family:'Cairo',sans-serif;}
.dish-desc{font-size:12.5px; color:#6E6248; margin-top:4px; line-height:1.55;}
.dish-price{font-weight:800; color:var(--terracotta); font-size:14px; margin-top:7px;}

.powered-by{text-align:center; color:var(--muted); font-size:11px; padding:22px; opacity:.65; letter-spacing:.5px;}

/* ---------- admin ---------- */
.admin-wrap{max-width:760px; margin:0 auto; padding:20px 16px 80px;}
.admin-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.admin-header h1{font-size:19px; margin:0; color:var(--gold-2);}
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px;}
.card h2{font-size:15px; margin:0 0 12px; color:var(--gold-2);}
.field{margin-bottom:10px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-weight:600;}
.field input[type=text], .field input[type=number], .field textarea, .field select, .field input[type=password]{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--ink); color:var(--cream); font-family:inherit; font-size:14px;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--gold);}
.field textarea{resize:vertical; min-height:60px;}
.row{display:flex; gap:10px;}
.row > .field{flex:1;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; margin:10px 0;}
.btn{border:none; cursor:pointer; border-radius:10px; padding:11px 16px; font-size:13.5px; font-weight:700;}
.btn-amber{background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#25190A;}
.btn-ghost{background:transparent; color:var(--cream); border:1px solid var(--line);}
.btn-rust{background:var(--terracotta); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:default;}

.item-row{display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px;}
.item-row img{width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--cream-2); flex-shrink:0;}
.item-row .meta{flex:1; min-width:0;}
.item-row .meta .n{font-weight:700; font-size:13.5px;}
.item-row .meta .n2{font-size:11.5px; color:var(--muted); margin-top:2px;}
.item-row .actions{display:flex; gap:6px; flex-wrap:wrap;}
.item-row.unavailable{opacity:.5;}

.cat-block{border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:12px;}
.cat-block-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.cat-block-head .n{font-weight:800; font-size:14.5px; color:var(--gold-2);}
.cat-block .sub-wrap{margin-right:14px; border-right:2px dashed var(--line); padding-right:12px; margin-top:10px;}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; z-index:200; border:1px solid var(--gold);}
.login-box{max-width:340px; margin:80px auto; text-align:center;}
.login-box h1{font-size:18px; margin-bottom:18px; color:var(--gold-2);}
.small-note{font-size:11.5px; color:var(--muted); margin-top:4px;}
.qr-box{text-align:center;}
.qr-box img{max-width:220px; border-radius:12px; background:#fff; padding:10px; border:1px solid var(--gold);}
.url-box{background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; word-break:break-all; margin-top:8px;}