:root{
  --bg: #0F3A2C;
  --bg-deep: #0B2E23;
  --card: #154736;
  --card-hover: #1A5341;
  --line: rgba(246,241,228,0.14);
  --text: #F6F1E4;
  --text-muted: #AFC2B7;
  --accent: #D19A4C;
  --accent-light: #E8BD82;
  --accent-deep: #B87F33;
  --danger: #D16B4C;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-tap-highlight-color: transparent; }
body{
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Tajawal', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 40px;
}
h1, h2, h3, .display{ font-family: 'El Messiri', sans-serif; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
img{ max-width:100%; display:block; }

/* ===== Top bar ===== */
.topbar{
  position: sticky; top:0; z-index: 50;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.topbar .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logo{ height:30px; width:auto; flex-shrink:0; display:block; }
.admin-topbar-label{ font-size:15px; font-weight:600; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.back-btn{
  background:none; border:none; color: var(--accent-light);
  font-family:'Tajawal'; font-size:15px; font-weight:500;
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding: 4px 0;
}
.back-btn svg{ width:18px; height:18px; }
.topbar .admin-link{ font-size:13px; color: var(--text-muted); flex-shrink:0; background:none; border:none; cursor:pointer; font-family:'Tajawal'; -webkit-appearance:none; appearance:none; padding:0; }

/* ===== Hero ===== */
.hero{ padding: 28px 20px 18px; max-width: 640px; margin:0 auto; text-align:center; }
.hero h1{ font-size: 27px; font-weight:700; line-height:1.35; margin-bottom:10px; }
.hero p{ color: var(--text-muted); font-size: 15px; max-width: 46ch; margin:0 auto; }

/* ===== Search ===== */
.search-wrap{ padding: 4px 20px 14px; }
.search-box{ position:relative; }
.search-box input{
  width:100%; padding: 13px 44px 13px 16px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text);
  font-family:'Tajawal'; font-size: 15px;
}
.search-box input::placeholder{ color: var(--text-muted); }
.search-box input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.search-box svg{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color: var(--text-muted); pointer-events:none;
}

/* ===== Filter chips ===== */
.chips{ display:flex; gap:8px; padding: 4px 20px 22px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-muted); font-family:'Tajawal'; font-size: 14px; font-weight:500;
  cursor:pointer; transition: background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.chip.active{ background: var(--accent); border-color: var(--accent); color: var(--bg-deep); font-weight:700; }

/* ===== Restaurant grid ===== */
.grid{ display:flex; flex-direction:column; gap:14px; padding: 0 20px; max-width: 640px; margin:0 auto; }
.rcard{
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; display:flex; gap:14px; align-items:flex-start;
  cursor:pointer; transition: background .15s, transform .1s; text-align:right;
}
.rcard:active{ transform: scale(0.98); }
.rcard:hover{ background: var(--card-hover); }
.ricon{
  flex-shrink:0; width:54px; height:54px; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(155deg, var(--accent-light), var(--accent-deep));
}
.ricon svg{ width:28px; height:28px; color: var(--bg-deep); }
.ricon img{ width:100%; height:100%; object-fit:cover; }
.rinfo{ flex:1; min-width:0; }
.rinfo .rtop{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.rinfo h3{ font-size:17px; font-weight:600; }
.rtype{
  font-size:11px; font-weight:700; color: var(--accent-light);
  border: 1px solid rgba(209,154,76,0.4); border-radius:999px;
  padding: 3px 9px; flex-shrink:0; white-space:nowrap;
}
.rinfo .area{ font-size:13px; color: var(--text-muted); margin-top:3px; }
.rinfo .tagline{ font-size:14px; color: var(--text-muted); margin-top:7px; }

.empty{ padding: 50px 20px; text-align:center; color: var(--text-muted); }

/* ===== Restaurant page header ===== */
.rheader{ padding: 24px 20px 16px; max-width: 640px; margin:0 auto; }
.rheader .rtop-row{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
.rheader .ricon{ width:46px; height:46px; border-radius:12px; }
.rheader .ricon svg{ width:24px; height:24px; }
.rheader h2{ font-size: 22px; font-weight:700; }
.rheader .area{ font-size:13.5px; color: var(--accent-light); margin-top:2px; }
.rheader .tagline{ font-size: 14.5px; color: var(--text-muted); margin-top:10px; }

.hours-badge{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:13px; color: var(--text-muted); }
.hours-badge svg{ width:14px; height:14px; }
.hours-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hours-dot.open{ background:#3FBE6B; }
.hours-dot.closed{ background:#D16B4C; }
.hours-details{ margin-top:10px; font-size:13px; }
.hours-details summary{ color: var(--accent-light); cursor:pointer; font-weight:600; list-style:none; }
.hours-details summary::-webkit-details-marker{ display:none; }
.hours-full-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.hours-full-row{ display:flex; justify-content:space-between; color: var(--text-muted); }
.hours-full-row.today{ color: var(--text); font-weight:700; }
.card-hours-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; margin-top:6px; }
.card-hours-badge .hours-dot{ width:6px; height:6px; }

.rlinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.rlink-btn{
  display:flex; align-items:center; gap:7px; padding: 9px 14px; border-radius: 10px;
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--line);
}
.rlink-btn svg{ width:17px; height:17px; }
.rlink-btn.call{ background: var(--accent); color: var(--bg-deep); border-color:transparent; }
.rlink-btn.whatsapp{ background: #1F8A57; color:#fff; border-color:transparent; }
.rlink-btn.website{ background: var(--card); color: var(--accent-light); }
.rlink-btn.maps{ background: var(--card); color: var(--accent-light); }

/* ===== Tabs ===== */
.tabs{
  position: sticky; top: 57px; z-index: 40;
  background: var(--bg-deep); border-bottom: 1px solid var(--line);
  display:flex; gap:6px; padding: 10px 20px; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex-shrink:0; padding: 8px 16px; border-radius: 10px;
  border:none; background: transparent; color: var(--text-muted);
  font-family:'Tajawal'; font-size:14px; font-weight:600; cursor:pointer;
}
.tab.active{ background: var(--card); color: var(--accent-light); }

.cat-section{ padding: 22px 20px 4px; max-width: 640px; margin:0 auto; }
.cat-section h3{ font-size: 15px; font-weight:700; color: var(--accent-light); margin-bottom: 12px; }
.item{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.item:last-child{ border-bottom:none; }
.item.unavailable{ opacity:0.55; }
.unavailable-badge{ font-size:11.5px; font-weight:700; color: var(--danger); border:1px solid rgba(209,107,76,0.5); border-radius:8px; padding:5px 10px; white-space:nowrap; }
.item .ithumb{ width:50px; height:50px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--card); cursor:pointer; }
.item .imain{ display:flex; gap:12px; flex:1; min-width:0; }
.item .itext{ min-width:0; }
.item .iname{ font-size:15.5px; font-weight:600; }
.item .iname-en{ font-size:12px; color:var(--text-muted); margin-top:1px; font-weight:500; }
.en-tag{ font-size:11px; color:var(--text-muted); font-weight:500; margin-inline-start:3px; }
.addon-chip input:checked + .addon-chip-body .en-tag{ color:var(--bg-deep); }
.item .idesc{ font-size:13px; color: var(--text-muted); margin-top:4px; }
.item .imeta{ font-size:11.5px; color: var(--text-muted); margin-top:5px; opacity:0.85; }
.item .iright{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.item .iprice{ font-family:'El Messiri'; font-weight:700; color: var(--accent-light); font-size:15px; white-space:nowrap; }
.item .iprice .price-original, .item .size-row-label .price-original{ font-weight:600; color: var(--text-muted); text-decoration:line-through; font-size:12.5px; margin-inline-end:6px; }
.item .iprice .price-discounted, .item .size-row-label .price-discounted{ color: var(--danger); }
.item .size-row{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.item .size-row-label{ font-family:'El Messiri'; font-weight:700; color: var(--accent-light); font-size:13px; white-space:nowrap; }
.add-btn{
  display:flex; align-items:center; gap:4px; border:1px solid var(--accent); background:transparent;
  color: var(--accent-light); border-radius:8px; padding:5px 10px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.add-btn svg{ width:13px; height:13px; }
.item .item-extra{ flex-basis:100%; margin-top:-4px; }
.inline-addon-hint{ margin:0 0 4px; font-size:12px; }
.inline-addons{ display:flex; flex-wrap:wrap; gap:8px; }
.addon-chip{ position:relative; cursor:pointer; }
.addon-chip input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.addon-chip-body{ display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:6px 13px; font-size:13px; line-height:1.4; transition:background .15s, border-color .15s; }
.addon-chip-body small{ color:var(--accent-light); font-size:11.5px; font-weight:700; }
.addon-chip input:checked + .addon-chip-body{ background:var(--accent); border-color:var(--accent); color:var(--bg-deep); font-weight:700; }
.addon-chip input:checked + .addon-chip-body::before{ content:"\2713\00a0"; }
.addon-chip input:checked + .addon-chip-body small{ color:var(--bg-deep); }
.addon-chip input:focus-visible + .addon-chip-body{ outline:2px solid var(--accent-light); outline-offset:2px; }
.item-cartlines{ margin-top:8px; }
.cartlines-title{ font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.cartline{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed var(--line); font-size:13px; }
.cartline-label{ flex:1; min-width:0; }
.cartline-price{ color:var(--accent-light); font-family:'El Messiri'; font-weight:700; white-space:nowrap; }
.qty-control{ display:flex; align-items:center; gap:8px; }
.qty-control button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:16px; cursor:pointer; }
.qty-control span{ font-weight:700; min-width:16px; text-align:center; }

#menuBody{ padding-bottom: 100px; }

/* ===== Floating cart ===== */
.cart-bar{
  position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 60;
  max-width: 608px; margin: 0 auto;
  background: var(--accent); color: var(--bg-deep);
  border-radius: 14px; padding: 10px 12px 10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  cursor:pointer;
  /* يجبر Safari يرسمها كطبقة مستقلة، وإلا أحيانًا تنفصل عن أسفل الشاشة وتلتصق بمكانها بالصفحة
     لو تغيّر ارتفاع الصفحة بعد الرسم الأول (مثل تحمّل صورة البانر الإعلاني) */
  transform: translateZ(0);
}
.cart-bar.hidden{ display:none; }
.cart-bar-info{ display:flex; align-items:center; gap:10px; }
.cart-bar .count{ font-weight:700; font-size:15px; }
.cart-bar .total{ font-family:'El Messiri'; font-weight:700; font-size:16px; }
.cart-bar-cta{ font-weight:700; font-size:14.5px; white-space:nowrap; background: var(--bg-deep); color: var(--accent-light); border-radius:10px; padding:9px 18px; }

.sheet-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:70; display:none;
  transform: translateZ(0);
}
.sheet-overlay.open{ display:block; }
.sheet{
  position:fixed; bottom:0; left:0; right:0; z-index:80;
  background: var(--bg); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: 18px 20px 24px;
  max-height: 78vh; overflow-y:auto;
  transform: translateY(100%) translateZ(0); transition: transform .2s ease-out;
}
.sheet.open{ transform: translateY(0) translateZ(0); }
.sheet h3{ font-size:17px; margin-bottom:14px; }
.sheet .crow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.sheet .crow .cname{ font-size:14.5px; font-weight:600; }
.sheet .crow .cprice{ font-size:13px; color:var(--text-muted); margin-top:3px; }
.sheet .remove-btn{ color: var(--danger); background:none; border:none; font-size:13px; cursor:pointer; }
.sheet .ctotal{ display:flex; justify-content:space-between; font-weight:700; padding:16px 0; font-family:'El Messiri'; font-size:17px; }
.consent-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:200; max-width:560px; margin:0 auto;
  background: var(--bg-deep); color: var(--text); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:0 8px 28px rgba(0,0,0,0.45); display:flex; flex-direction:column; gap:10px;
}
.consent-text{ font-size:13px; line-height:1.7; }
.consent-actions{ display:flex; gap:8px; }
.consent-actions button{ flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); font-family:'Tajawal'; font-size:14px; font-weight:700; cursor:pointer; }
.consent-actions .consent-yes{ background: var(--accent); color: var(--bg-deep); border-color:transparent; }
.order-extras-row{ display:flex; gap:10px; margin-top:4px; }
.order-extras-row .field{ flex:1; margin-bottom:8px; min-width:0; }
.order-extras-hint{ margin:0 0 14px; }
#orderTypeBox{ margin-bottom:10px; }
.whatsapp-order-btn{
  width:100%; padding:14px; border-radius:12px; border:none; background:#1F8A57; color:#fff;
  font-family:'Tajawal'; font-size:15.5px; font-weight:700; display:flex; align-items:center;
  justify-content:center; gap:8px; cursor:pointer;
}
.whatsapp-order-btn svg{ width:19px; height:19px; }
.cart-empty-note{ color:var(--text-muted); font-size:14px; padding: 10px 0 4px; }

/* ===== Admin ===== */
.admin-wrap{ max-width: 640px; margin: 0 auto; padding: 20px; }
.login-box{ max-width: 360px; margin: 80px auto; padding: 0 20px; text-align:center; }
.login-logo{ height:52px; width:auto; margin:0 auto 22px; display:block; }
.login-box h2{ font-size:20px; margin-bottom:6px; }
.login-box p{ color:var(--text-muted); font-size:13.5px; margin-bottom:18px; }
.field{ margin-bottom:14px; text-align:right; }
.field label{ display:block; font-size:13px; color: var(--text-muted); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background: var(--card); color:var(--text); font-family:'Tajawal'; font-size:14.5px;
}
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-hint{ font-size:12px; color:var(--text-muted); margin-top:5px; }
.hours-editor{ background: var(--card); border:1px solid var(--line); border-radius:10px; padding:4px 12px; }
.hours-row{ display:flex; flex-direction:column; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.hours-row:last-child{ border-bottom:none; }
.hours-row .hrow-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hours-row .hday{ width:56px; flex-shrink:0; color:var(--text-muted); font-weight:600; }
.hours-row input[type=time]{
  background: var(--bg-deep); border:1px solid var(--line); border-radius:7px;
  color:var(--text); padding:5px 6px; font-size:12px; font-family:'Tajawal'; width:96px;
}
.hours-row input[type=time]:disabled{ opacity:0.4; }
.hours-row .h-sep{ color: var(--text-muted); }
.hours-row .h-toggles{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.hours-row .h-ranges{ display:flex; flex-direction:column; gap:6px; }
.hours-row .h-range{ display:flex; align-items:center; gap:8px; }
.hours-row .add-range-btn{
  background:none; border:1px dashed var(--line); border-radius:7px; color:var(--accent-light);
  font-size:11.5px; padding:4px 10px; cursor:pointer; align-self:flex-start; font-family:'Tajawal';
}
.hours-row .h-closed-label, .hours-row .h-24h-label{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-muted); white-space:nowrap; }
.hours-row .h-closed-label input[type=checkbox], .hours-row .h-24h-label input[type=checkbox]{ width:14px; height:14px; flex-shrink:0; accent-color: var(--accent); }
.branch-overrides summary{ cursor:pointer; font-weight:700; font-size:13.5px; color:var(--accent-light); padding:4px 0; }
.bo-row{ border:1px solid var(--line); background:var(--bg-deep); border-radius:10px; padding:10px 12px; margin-top:8px; }
.bo-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; margin-bottom:6px; }
.bo-head strong{ font-size:13.5px; margin-left:auto; }
.bo-head .checkbox-label{ font-size:12.5px; gap:5px; }
.bo-prices{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.bo-prices label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); margin:0; }
.bo-prices input{ width:84px; padding:6px 8px; font-size:12.5px; }
.bo-row.bo-off .bo-prices{ opacity:0.4; pointer-events:none; }
.type-checks{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.field .checkbox-label{ display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:0; color:var(--text); font-size:14px; }
.checkbox-label input[type=checkbox]{ width:17px; height:17px; flex-shrink:0; accent-color: var(--accent); }
.order-type-toggle{ display:flex; gap:10px; margin-bottom:6px; }
.order-type-btn{
  flex:1; padding:14px; border-radius:10px; border:1px solid var(--line);
  background: var(--card); color:var(--text); font-family:'Tajawal'; font-size:14.5px; font-weight:700; cursor:pointer;
}
.order-type-btn.active{ background: var(--accent); color: var(--bg-deep); border-color:transparent; }
.addons-editor{ display:flex; flex-direction:column; gap:8px; }
.addon-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.addon-row .addon-name-en-input{ flex-basis:100%; font-size:12.5px; direction:ltr; text-align:left; }
.addon-row .addon-name-input{ flex:1; }
.addon-row .addon-price-input{ width:90px; flex-shrink:0; }
.addon-row .size-discount-price-input{ width:90px; flex-shrink:0; }
.addon-option{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; cursor:pointer; }
.addon-option:last-child{ border-bottom:none; }
.addon-option input[type=checkbox], .addon-option input[type=radio]{ width:17px; height:17px; flex-shrink:0; accent-color: var(--accent); }
.addon-option .addon-name{ flex:1; }
.addon-option .addon-price{ color: var(--accent-light); font-size:12.5px; white-space:nowrap; }
.branch-block{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.branch-block .branch-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.branch-block .branch-head span{ font-size:13px; font-weight:700; color: var(--accent-light); }
.branch-block .branch-field{ margin-bottom:8px; }
.branch-block .branch-field label{ display:block; font-size:11.5px; color: var(--text-muted); margin-bottom:4px; }
.branch-block input, .branch-block select{
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
  background: var(--bg-deep); color:var(--text); font-family:'Tajawal'; font-size:13px;
}
.city-areas-list{ display:flex; flex-direction:column; gap:8px; }
.area-row{ display:flex; gap:8px; align-items:center; }
.area-row .area-label-input{ flex:1; }
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:10px;
  border:none; font-family:'Tajawal'; font-size:14.5px; font-weight:700; cursor:pointer;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background: var(--accent); color: var(--bg-deep); }
.btn-secondary{ background: var(--card); color: var(--text); border:1px solid var(--line); }
.btn-danger{ background: transparent; color: var(--danger); border:1px solid rgba(209,107,76,0.5); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:7px 12px; font-size:13px; }

.admin-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:10px;}
.admin-section-title{ font-size:16px; font-weight:700; margin: 22px 0 12px; color: var(--accent-light); }
.admin-list{ display:flex; flex-direction:column; gap:10px; }
.admin-row{ background: var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; }
.admin-row .row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.admin-row h4{ font-size:15px; font-weight:700; }
.admin-row .meta{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.admin-row .row-actions{ display:flex; gap:6px; flex-shrink:0; }
.admin-row.dimmed{ opacity:0.6; }
.admin-row .row-title{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.admin-row .row-title .drag-handle{ margin-top:3px; }
.admin-row .field.vis-hidden{ opacity:0.55; }
.hidden-badge{ font-size:10.5px; font-weight:700; color: var(--danger); border:1px solid rgba(209,107,76,0.5); border-radius:6px; padding:1px 6px; margin-right:6px; vertical-align:middle; }
.admin-row .visibility-select{ font-size:12.5px; }
.link-copy{ display:flex; align-items:center; gap:8px; margin-top:10px; background: var(--bg-deep); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.link-copy input{ flex:1; background:none; border:none; color:var(--text-muted); font-size:12px; font-family:monospace; direction:ltr; text-align:left; }
.link-copy button{ flex-shrink:0; background:none; border:none; color:var(--accent-light); font-size:12.5px; font-weight:700; cursor:pointer; }
.link-copy .renew-link-btn{ color:var(--danger); font-weight:600; border-right:1px solid var(--line); padding-right:8px; }
.item-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.item-row.dimmed{ opacity:0.6; }
.item-row:last-child{ border-bottom:none; }
.item-row .info{ display:flex; gap:10px; align-items:center; min-width:0; flex:1; }
.item-row img{ width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.item-row .name{ font-size:14px; font-weight:600; }
.item-row .price{ font-size:12.5px; color: var(--accent-light); }
.item-row .acts{ display:flex; gap:6px; flex-shrink:0; }
.icon-btn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--bg-deep); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn svg{ width:14px; height:14px; }
.icon-btn.danger{ color: var(--danger); }
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:90; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding: 30px 16px; }
.modal-overlay.open{ display:flex; }
.modal-box{ background: var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px; width:100%; max-width:440px; }
.modal-box h3{ font-size:17px; margin-bottom:16px; }
.image-preview{ width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--card); margin-bottom:8px; }
.banner-preview{ display:none; width:100%; max-height:120px; object-fit:cover; border-radius:10px; margin-bottom:8px; background:var(--card); }
.ad-banner{ display:none; max-width:640px; margin:14px auto 0; padding:0 20px; box-sizing:border-box; }
.ad-banner.show{ display:block; }
.ad-banner.home-banner{ margin: 0 auto 14px; }
.ad-banner img{ width:100%; display:block; border-radius:14px; object-fit:cover; max-height:320px; }
.ad-slider-box{ position:relative; aspect-ratio: var(--ad-ratio, 3); max-height:320px; }
.ad-slider{ display:flex; gap:12px; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ad-slider::-webkit-scrollbar{ display:none; }
.ad-slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; }
.ad-slide a{ display:block; height:100%; }
.ad-slide img{ height:100%; max-height:none; border-radius:14px; }
.ad-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.ad-dot{ pointer-events:auto; width:7px; height:7px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,0.55); box-shadow:0 0 0 1px rgba(0,0,0,0.25); cursor:pointer; transition:width .2s, background .2s; }
.ad-dot.active{ width:18px; background:var(--accent); }

/* ===== Ticker bar (شريط إعلاني متحرك) ===== */
.ticker-bar{ display:none; overflow:hidden; background: var(--accent); direction:ltr; }
.ticker-bar.show{ display:block; }
.ticker-track{ display:inline-flex; white-space:nowrap; animation: ticker-scroll 16s linear infinite; }
.ticker-track span{ padding: 9px 36px; font-size:13.5px; font-weight:700; color: var(--bg-deep); white-space:nowrap; }
@keyframes ticker-scroll{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }
.category-block{ margin-bottom:18px; border:1px solid var(--line); border-radius:12px; padding:14px; }
.category-block .cat-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.category-block .cat-head h4{ font-size:14.5px; font-weight:700; color:var(--accent-light); }
.cat-head-title{ display:flex; align-items:center; gap:8px; min-width:0; }
.drag-handle{ cursor:grab; color:var(--text-muted); flex-shrink:0; display:flex; align-items:center; touch-action:none; }
.drag-handle svg{ width:16px; height:16px; }
.drag-handle:active{ cursor:grabbing; }
.category-block.sortable-ghost, .item-row.sortable-ghost{ opacity:0.4; }
.category-block.sortable-chosen{ background: var(--card-hover); }
.small-note{ font-size:12.5px; color:var(--text-muted); margin-top:18px; text-align:center; }
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200;
  background: var(--accent); color: var(--bg-deep); padding:10px 18px; border-radius:10px;
  font-size:13.5px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,0.3);
  opacity:0; pointer-events:none; transition: opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

.orders-nav-btn{
  position:relative; background: var(--card); color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:7px 14px; font-family:'Tajawal'; font-size:13.5px; font-weight:700; cursor:pointer;
}
.orders-badge{
  position:absolute; top:-7px; left:-7px;
  background: var(--danger); color:#fff; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.order-card{ background: var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; position:relative; }
.order-card.unseen{ border-color: var(--accent); }
.new-order-badge{
  display:inline-block; font-size:11px; font-weight:700; color: var(--bg-deep);
  background: var(--accent); border-radius:6px; padding:2px 8px; white-space:nowrap; flex-shrink:0;
}
.order-card .order-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px; }
.order-card .order-restaurant{ font-size:15px; font-weight:700; }
.order-card .order-time{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.order-card .order-type-tag{ display:inline-block; font-size:11.5px; font-weight:700; color: var(--accent-light); background: var(--bg-deep); border-radius:6px; padding:2px 8px; margin-bottom:8px; margin-left:6px; }
.order-status{ display:inline-block; font-size:11.5px; font-weight:700; border-radius:6px; padding:2px 8px; margin-bottom:8px; }
.order-status.paid{ color:#3FBE6B; background: rgba(63,190,107,0.12); }
.order-status.pending{ color: var(--text-muted); background: var(--bg-deep); }
.order-status.not_received{ color: var(--danger); background: rgba(209,107,76,0.12); }
.edit-status-link{
  background:none; border:none; color: var(--accent-light); font-family:'Tajawal';
  font-size:11px; font-weight:600; text-decoration:underline; cursor:pointer;
  padding:0; margin-inline-start:8px; vertical-align:middle;
}
.order-customer-name{ font-size:13.5px; font-weight:700; margin-bottom:4px; }
.order-customer-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.order-customer-link{
  display:flex; align-items:center; gap:6px; width:fit-content;
  font-size:12.5px; font-weight:600; text-decoration:none;
}
.order-customer-link.whatsapp{ color:#1F8A57; }
.order-customer-link.call{ color: var(--accent-light); }
.order-customer-link svg{ width:14px; height:14px; }
.order-ready-link{
  display:inline-flex; align-items:center; gap:6px; width:fit-content; margin-bottom:8px;
  padding:6px 12px; border-radius:8px; background: rgba(209,154,76,0.12); color: var(--accent-light);
  font-size:12.5px; font-weight:700; text-decoration:none;
}
.order-ready-link svg{ width:14px; height:14px; }
.order-actions.two{ display:flex; gap:8px; }
.mark-paid-btn, .mark-not-received-btn{
  flex:1; padding:10px; border-radius:10px; cursor:pointer;
  font-family:'Tajawal'; font-size:13.5px; font-weight:700;
  background:transparent; border:1px solid var(--line); color: var(--text-muted);
}
.mark-paid-btn.active{ background: var(--accent); color: var(--bg-deep); border-color:transparent; }
.mark-not-received-btn.active{ background: rgba(209,107,76,0.12); color: var(--danger); border-color: rgba(209,107,76,0.5); }
.order-card .order-items-list{ font-size:13px; margin-bottom:8px; }
.order-card .order-item-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); }
.order-card .order-item-row:last-child{ border-bottom:none; }
.order-card .order-item-addons{ font-size:11.5px; color:var(--text-muted); }
.order-card .order-total-row{ display:flex; justify-content:space-between; font-weight:700; color: var(--accent-light); font-size:14px; padding-top:6px; border-top:1px solid var(--line); }
.order-card .order-actions{ text-align:left; margin-top:8px; }
.remove-order-btn{ background:none; border:none; color: var(--danger); font-size:12.5px; font-weight:700; cursor:pointer; }
.orders-toolbar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.orders-filter-select{
  flex:1; min-width:160px; padding:9px 12px; border-radius:9px; border:1px solid var(--line);
  background: var(--card); color:var(--text); font-family:'Tajawal'; font-size:13.5px;
}
.orders-date-field{ display:flex; align-items:center; gap:6px; flex:1; min-width:150px; }
.orders-date-field label{ font-size:12px; color:var(--text-muted); white-space:nowrap; }
.orders-date-field input{
  flex:1; padding:8px 10px; border-radius:9px; border:1px solid var(--line);
  background: var(--card); color:var(--text); font-family:'Tajawal'; font-size:13px;
}
.orders-summary{
  background: var(--card); border:1px solid var(--accent); border-radius:12px; padding:14px;
  margin-bottom:14px; font-size:13.5px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.orders-summary b{ color: var(--accent-light); font-size:15px; }

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:120;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width:100%; max-height:88vh; border-radius:14px; object-fit:contain; }

@media (min-width: 480px){ .hero h1{ font-size: 31px; } }

/* ===== لوحة طلبات صاحب المحل ===== */
.invalid-token-box{ padding: 60px 20px; text-align:center; color: var(--text-muted); max-width:400px; margin:0 auto; }