@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@supports(padding:max(0px)){body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}}
:root{--teal:#38bdf8;--teal-dark:#0284c7;--teal-light:#e6f6fe;--amber:#f59e0b;--amber-light:#fef3c7;--bg:#f8fafc;--card:#ffffff;--text:#0f172a;--muted:#475569;--border:#e2e8f0;--danger:#e5484d;--wa:#25d366;--call:#e5484d;--green:#16a34a;--sold:#6b7280;--wanted:#f97316;--restaurant:#e5484d;--purple:#8b5cf6;--pink:#ec4899}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button, a, input, select, textarea, optgroup { touch-action: manipulation; font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', Arial, sans-serif; }
@media screen and (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
body{margin:0;font-family:'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Arabic', Arial, sans-serif;background:var(--bg);color:var(--text);padding-top:env(safe-area-inset-top,0);padding-bottom:calc(70px + env(safe-area-inset-bottom,0));width:100%;max-width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.topbar{position:sticky;top:0;z-index:20;background:var(--teal);color:#fff;padding:14px 16px calc(14px + env(safe-area-inset-top,0));display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar.scrollAway{position:relative}
.topbarActions{display:flex;align-items:center;gap:6px}
.bellBtn{width:34px;height:34px;border-radius:12px;border:none;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;position:relative;transition:all .2s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:16px}
.bellBtn:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.bellBtn:active{transform:scale(.92)}
.bellBtn i,.bellBtn svg{width:18px !important;height:18px !important;stroke-width:2.2}
.bellBtnSmall{font-size:15px;background:rgba(255,255,255,.1)}
.bellBtnSmall:hover{background:rgba(255,255,255,.2)}
.bellBtn .pointsBadge{position:absolute;bottom:-4px;right:-4px;background:#f59e0b;color:#fff;font-size:9px;font-weight:800;padding:2px 5px;border-radius:6px;border:1.5px solid var(--teal);display:none;min-width:16px;text-align:center;line-height:1}.cartBadge{position:absolute;top:-5px;left:-5px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--teal);z-index:2}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;flex:1;justify-content:flex-end}
.topbar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.iconBtn{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.adminChip{position:absolute;top:-4px;left:-4px;background:var(--amber);color:#3a2500;font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px}
.searchWrap{padding:14px 16px 4px;display:flex;gap:8px;position:relative;z-index:15}
#categoriesScreen .searchWrap{position:sticky;top:66px;z-index:19;background:var(--bg)}
.searchWrap .searchBox{flex:1;min-width:0}
.cityFilter{flex:0 0 auto;max-width:118px;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:0 8px;font-family:inherit;font-size:13px;font-weight:700}
.cityLine{font-size:11.5px;color:var(--muted)}
.searchBox{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:11px 14px;position:relative}
.searchBox input{border:none;outline:none;flex:1;font-family:inherit;font-size:16px;background:transparent;min-width:0}
.searchBox .ic{color:var(--muted)}
.clearSearchBtn{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:none;background:#e5e7eb;color:#4b5563;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit}
.voiceSearchBtn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;background:rgba(2,132,199,0.09);color:#0284c7;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s ease;font-family:inherit}
.voiceSearchBtn:active{transform:scale(.92);background:rgba(2,132,199,0.2)}
.voiceSearchBtn.recording{background:#fee2e2!important;color:#ef4444!important;animation:pulseMic .9s infinite alternate}
@keyframes pulseMic{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,0.4)}100%{transform:scale(1.15);box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.searchDropdown{position:absolute;top:calc(100% + 6px);right:0;left:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.15);max-height:340px;overflow-y:auto;z-index:45;padding:6px 0}
.searchDropdown.hidden{display:none!important}
.sdSection{padding:6px 14px 4px;font-size:11px;font-weight:800;color:var(--muted)}
.sdItem{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:14px;font-family:inherit}
.sdItem .sdIcon{font-size:16px;opacity:.7}
.sdItem .sdText{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdItem .sdRemove{flex:0 0 auto;background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 4px;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.sdClearAll{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;font-size:12.5px;color:var(--danger);font-weight:700;cursor:pointer;border-top:1px solid var(--border);margin-top:4px;font-family:inherit}
.catsRow{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px;scrollbar-width:none}
.catsRow::-webkit-scrollbar{display:none}
.catsRow.hidden{display:none!important}
.catChip{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.catChip.active{background:var(--teal);border-color:var(--teal);color:#fff}
.storeChip{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;border-color:#f59e0b!important;color:#3a2500!important;font-weight:800!important}
.storeChip.active{background:linear-gradient(135deg,#d97706,#f59e0b)!important;color:#fff!important}
.subCatsRow{display:flex;gap:8px;overflow-x:auto;padding:8px 16px 4px;scrollbar-width:none;background:#fffbf0;border-top:1px solid #fde68a;border-bottom:1px solid #fde68a;margin-top:6px}
.subCatsRow.hidden{display:none!important}
.subCatChip{flex:0 0 auto;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid #fde68a;color:#92400e;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.subCatChip.active{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b;color:#fff}
.subCatTitle{flex:0 0 auto;padding:7px 4px;font-size:12px;font-weight:800;color:#92400e}
.sectionTitle{padding:16px 16px 6px;font-weight:800;font-size:15px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 16px 20px}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 24px 24px}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;padding:8px 40px 24px}}
.card {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.card .imgWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  min-height: 170px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.card .imgWrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #f1f5f9;
}
.card .body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px}
.card h4{margin:0;font-size:14.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.card .price{color:var(--teal-dark);font-weight:800;font-size:16.5px}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.card .catTag{font-size:11px;color:var(--muted);background:var(--bg);padding:3px 9px;border-radius:7px}
.card .brandTag{font-size:11px;color:#92400e;background:#fef3c7;padding:3px 9px;border-radius:7px;font-weight:700}
.card .time{font-size:11px;color:var(--muted)}
.card .cardViews{font-size:11.5px;color:var(--teal-dark);font-weight:700;margin-top:2px}
.card .actions{display:flex;gap:6px;margin-top:8px;align-items:center;flex-wrap:wrap}
.waBtn{flex:1 1 auto;border:none;border-radius:9px;padding:7px 0;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;text-align:center;background:var(--wa);color:#fff}
.callBtn{flex:1 1 auto;border:none;border-radius:9px;padding:7px 0;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;text-align:center;background:var(--call);color:#fff}
.cartAddBtn{flex:1 1 auto;border:none;border-radius:9px;padding:8px 0;font-size:12.5px;font-weight:800;font-family:inherit;cursor:pointer;text-align:center;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500;display:flex;align-items:center;justify-content:center;gap:5px}
.cartAddBtn.added{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}
.iconBtn2{width:32px;height:32px;flex:0 0 auto;border:none;border-radius:9px;cursor:pointer;font-size:14.5px;display:flex;align-items:center;justify-content:center}
.editBtn{background:#eef2ff}
.delBtn{background:#fdeceb}
.featBtn{background:var(--amber-light);color:#92400e}
.featBtn.on{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500}
.renewBtn{background:#e0f2fe;color:#0369a1}
.soldBtn{background:#f3f4f6;color:#4b5563}
.reportOnImg{position:absolute;top:8px;left:8px;z-index:2;width:28px;height:28px;border:none;border-radius:50%;background:var(--danger);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reportOnImg.right{left:auto;right:10px;top:10px;width:32px;height:32px;font-size:15px}
.closeOnImg{position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border:none;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0}
.favBtn{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.92);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.favBtn.active{background:#fff}
.dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;pointer-events:none;direction:ltr}
.dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.dots .dot.active{width:8px;height:8px;background:#fff}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 20px;font-size:14px}

/* ✅ NEW: الصفحة الفارغة الأنيقة */
.emptyState{grid-column:1/-1;text-align:center;padding:50px 20px;animation:fadeIn .35s ease-out}
.emptyState .esIcon{font-size:72px;margin-bottom:18px;opacity:.75;line-height:1;display:block;animation:esBounce 2.2s ease-in-out infinite}
@keyframes esBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.emptyState .esTitle{font-size:18px;font-weight:800;color:var(--text);margin-bottom:10px}
.emptyState .esDesc{font-size:13.5px;color:var(--muted);margin-bottom:22px;line-height:1.8;max-width:340px;margin-left:auto;margin-right:auto}
.emptyState .esBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border:none;border-radius:14px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0284c7,#38bdf8);cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(2,132,199,.35);transition:transform .15s ease,box-shadow .2s}
.emptyState .esBtn:hover{box-shadow:0 8px 26px rgba(2,132,199,.5)}
.emptyState .esBtn:active{transform:scale(.95)}
.emptyState .esBtn.esBtnSecondary{background:transparent;color:var(--teal-dark);box-shadow:none;border:2px solid var(--teal);font-size:14px;padding:11px 22px}

.card.featured{border:2px solid #f59e0b}
.card.featured::before{content:"⭐ مميز";position:absolute;top:0;right:0;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500;font-size:11px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.card.pending{border:2px dashed #f59e0b;opacity:.9}
.card.pending::before{content:"⏳ قيد المراجعة";position:absolute;top:0;right:0;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.card.rejected{border:2px solid var(--danger);opacity:.8}
.card.rejected::before{content:"❌ مرفوض";position:absolute;top:0;right:0;background:linear-gradient(135deg,#e5484d,#b91c1c);color:#fff;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.card.expired{border:2px solid #8a93a3;opacity:.7;filter:grayscale(.5)}
.card.expired::before{content:"⏰ منتهي";position:absolute;top:0;right:0;background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.card.sold{border:2px solid #6b7280;opacity:.85;filter:grayscale(.3)}
.card.sold::before{content:"✅ تم البيع";position:absolute;top:0;right:0;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.card.wanted{border:2px solid var(--wanted)}
.card.wanted::before{content:"🎯 مطلوب";position:absolute;top:0;right:0;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:0 14px 0 12px;z-index:5}
.featBadge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px}
.featBadgeOwner{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px;border:1px solid #f59e0b}
.statusBadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px}
.statusBadge.pending{background:#fef3c7;color:#92400e;border:1px solid #f59e0b}
.statusBadge.rejected{background:#fdeceb;color:#b91c1c;border:1px solid var(--danger)}
.statusBadge.approved{background:#dcfce7;color:#166534;border:1px solid var(--green)}
.soldBadge{display:inline-flex;align-items:center;gap:5px;background:#dcfce7;color:#166534;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px;border:1px solid #16a34a}
.expiryBadge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px}
.upgradeBtn{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#3a2500;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.renewBtnBig{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0284c7,#38bdf8);cursor:pointer;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.soldBtnBig{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,#16a34a,#15803d);cursor:pointer;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.unsoldBtnBig{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8a93a3,#6b7280);cursor:pointer;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.planCard{border:2px solid var(--border);border-radius:14px;padding:16px 14px;margin-bottom:12px;cursor:pointer;background:#fff;position:relative}
.planCard.best{border-color:#f59e0b;background:linear-gradient(135deg,#fffbf0,#fef3c7)}
.planCard .planTitle{display:flex;justify-content:space-between;margin-bottom:6px}
.planCard .planDays{font-size:17px;font-weight:800}
.planCard .planPrice{font-size:20px;font-weight:900;color:#92400e}
.planCard .planDesc{font-size:12px;color:var(--muted);line-height:1.6}
.planCard .bestBadge{position:absolute;top:10px;left:10px;background:#f59e0b;color:#3a2500;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.adminPlans{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.adminPlans button{padding:10px 4px;border:1px solid #f59e0b;border-radius:10px;background:#fffbf0;color:#92400e;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.adminPlans button.cancel{grid-column:1/-1;background:#fdeceb;border-color:var(--danger);color:var(--danger)}
.reviewBox{background:#eff6ff;border:1px solid #3b82f6;border-radius:12px;padding:12px;margin-top:8px}
.reviewBox .rbTitle{font-weight:800;color:#1e40af;margin-bottom:8px;font-size:13px}
.reviewBox .rbBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reviewBox .rbBtns button{padding:10px 4px;border:none;border-radius:10px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
.reviewBox .rbBtns .approve{background:#16a34a;color:#fff}
.reviewBox .rbBtns .reject{background:#e5484d;color:#fff}

.bottomNav{position:fixed;bottom:10px;right:12px;left:12px;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);border-radius:22px;box-shadow:0 8px 30px rgba(0,0,0,.12);display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0))}
html.dark-mode .bottomNav{background:rgba(19,26,40,.92);border-color:rgba(42,52,70,.6);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.navItem{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;flex:1;padding:4px 0;min-width:0;position:relative;transition:color .2s ease}
.navItem .navIcon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;position:relative;transition:transform .18s ease}
.navItem .navIcon svg,.navItem [data-lucide],.navItem svg[data-lucide]{width:22px!important;height:22px!important;stroke-width:2.2;transition:transform .18s ease, stroke-width .18s ease}
.navItem.active{color:var(--teal)}
.navItem.active .navIcon svg,.navItem.active [data-lucide]{stroke-width:2.8;transform:translateY(-1px)}
.navItem.active::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 6px 6px;background:var(--teal);animation:navDotIn .25s ease-out}
@keyframes navDotIn{from{width:0;opacity:0}to{width:28px;opacity:1}}
.navItem:active .navIcon svg,.navItem:active [data-lucide]{transform:scale(.85)}
.navItem>span:not(.navIcon){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 2px}
html.dark-mode .navItem.active{color:var(--teal)}
.fabWrap{flex:1;display:flex;justify-content:center;margin-top:-26px}
.fab{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500;border:5px solid var(--bg);font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(245,158,11,.45);transition:transform .15s ease}
.fab:active{transform:scale(.9)}
.fab svg{width:26px!important;height:26px!important;stroke-width:2.5}
html.dark-mode .fab{border-color:var(--bg)}

.screen{background:var(--bg);min-height:100%}
.screenHeader{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:15}
.screenHeader .back{width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;background:var(--card)!important;border:1.5px solid var(--border)!important;color:var(--text)!important;font-size:20px!important;font-weight:900!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;transition:all .18s ease!important;box-shadow:0 2px 6px rgba(15,23,42,0.08)!important;flex-shrink:0!important;padding:0!important;text-decoration:none!important}
.screenHeader .back:active{transform:scale(0.92)!important;background:var(--bg)!important}
.screenHeader h3{margin:0;font-size:16px;font-weight:800}
.formArea{padding:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);font-family:inherit;font-size:16px;background:var(--card)}
.field input:read-only{background:#f3f4f6;color:#6b7280;cursor:not-allowed}
.field textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);font-family:inherit;font-size:16px;background:var(--card);resize:vertical;min-height:120px;box-sizing:border-box}
.imgThumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.imgThumb{position:relative;width:70px;height:70px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.imgThumb img{width:100%;height:100%;object-fit:cover}
.imgThumb .rm{position:absolute;top:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer;font-family:inherit}
.imgAddTile{border:2px dashed var(--border);border-radius:12px;padding:14px;text-align:center;color:var(--muted);font-size:13.5px;cursor:pointer;background:var(--card)}
.imgAddTile.hidden{display:none}
.btnMain{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:var(--teal);cursor:pointer;font-family:inherit}
.btnGhost{width:100%;padding:13px;border:none;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--teal-dark);background:var(--teal-light);cursor:pointer;margin-top:8px;font-family:inherit}
.btnGhost.accountBtn{background:#0284c7;color:#fff}
.btnGhost.accountBtn:hover{background:#0369a1}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.overlay.fullscreen{background:var(--bg);align-items:stretch;overflow-y:auto}
#postOverlay{z-index:5500 !important}
.overlay.fullscreen .sheet{max-width:none;border-radius:0;max-height:none;padding:0;overflow-y:visible;display:flex;flex-direction:column;min-height:100%}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0));max-height:88vh;overflow-y:auto}
.sheet h3{margin:0 0 14px;font-size:17px;font-weight:800}
.sheet .accountEmail{font-size:14px;color:var(--muted);margin-bottom:16px;word-break:break-all}
.sheet textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);font-family:inherit;font-size:16px;resize:none;margin-bottom:10px;box-sizing:border-box}
.reportItem{border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;background:#fff}
.reportItem .rTitle{font-weight:800;font-size:14px;margin-bottom:4px}
.reportItem .rMeta{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.7}
.reportItem .rActions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.reportItem .rActions button{border:none;border-radius:9px;padding:8px 4px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rDelete{background:#fdeceb;color:var(--danger)}
.rDismiss{background:var(--bg);color:var(--muted)}
.reportsEmpty{text-align:center;color:var(--muted);padding:30px 20px;font-size:14px;line-height:1.7}
.warnBanner{margin:10px 16px 0;padding:9px 12px;background:#fff8e1;border:1px solid #ffe08a;border-radius:12px;font-size:12.5px;color:#7a5c00;line-height:1.6}
.sellerLine{font-size:11.5px;color:var(--teal-dark);font-weight:700;cursor:pointer}
.termsBox{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;line-height:1.8}
.termsBox .termsTitle{font-weight:800;margin-bottom:4px}
.termsBox ul{margin:0 0 8px;padding:0 18px 0 0}
.termsCheck{display:flex;align-items:flex-start;gap:8px;font-weight:700;cursor:pointer;margin-top:6px}
.termsCheck input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.sHead{text-align:center;margin-bottom:10px}
.sName{font-size:18px;font-weight:800}
.sStats{display:flex;gap:8px;margin:10px 0 14px}
.sStat{flex:1;background:var(--bg);border-radius:12px;padding:8px 4px;text-align:center}
.sStat b{display:block;font-size:13.5px}
.sStat span{font-size:11px;color:var(--muted)}
.starsRow{color:#f5a623;letter-spacing:1px}
.reviewItem{border-top:1px solid var(--border);padding:10px 0}
.reviewItem .rvTop{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;gap:8px}
.reviewItem .rvText{font-size:13px;margin-top:4px;word-break:break-word}
.rvDel{background:none;border:none;color:var(--danger);font-size:12px;cursor:pointer;font-family:inherit}
.starPick{display:flex;gap:6px;justify-content:center;margin:6px 0 10px;direction:ltr}
.starPick button{background:none;border:none;font-size:32px;color:#cfd4dc;cursor:pointer;padding:0}
.starPick button.on{color:#f5a623}
.warnBox{background:#fff8e1;border:1px solid #ffe08a;border-radius:12px;padding:12px;font-size:14px;line-height:1.8;color:#7a5c00;margin-bottom:14px}
.carousel{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;direction:ltr;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.pImg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 230px;
  border-radius: 16px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.pTitle{font-size:18px;font-weight:800;line-height:1.5;margin-bottom:2px}
.pMeta{font-size:12.5px;color:var(--muted);margin-top:2px}
.pDesc{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.9}
.pViewsBadge{display:inline-flex;align-items:center;gap:5px;background:var(--teal-light);color:var(--teal-dark);font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;margin-top:6px}
.brandBadge{display:inline-flex;align-items:center;gap:5px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9px;margin-top:6px;margin-left:6px;border:1px solid #f59e0b}
.charCount{font-size:11.5px;color:var(--muted);text-align:left;margin-top:4px;direction:ltr}
.hidden{display:none!important}
.adPopup{position:fixed;inset:0;background:rgba(15,23,42,.85);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.adPopupInner{position:relative;max-width:92vw;max-height:85vh}
.adPopupInner img{max-width:100%;max-height:85vh;border-radius:14px;display:block}
.adClose{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);color:#1f2937;border:none;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;font-family:inherit;padding:0}
.authOption{width:100%;padding:14px;border:1px solid var(--border);border-radius:12px;background:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px}
.authOption .icon{font-size:20px}
.authOption.disabled{opacity:.6;cursor:not-allowed;background:#f9fafb;position:relative}
.authOption.disabled .soonBadge{position:absolute;top:-8px;left:10px;background:var(--amber);color:#3a2500;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.memberNoBadge{display:inline-flex;align-items:center;gap:5px;background:var(--teal-light);color:var(--teal-dark);font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;border:1px solid #bae6fd}
.usernameBadge{display:inline-flex;align-items:center;gap:3px;background:#f0fdf4;color:#166534;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;border:1px solid #bbf7d0;direction:ltr}
.usernameInput{direction:ltr;text-align:left;font-family:monospace}
.phoneInput{direction:ltr;text-align:left;font-family:monospace}
.phoneBadge{display:inline-flex;align-items:center;gap:3px;background:#eff6ff;color:#1e40af;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;border:1px solid #bfdbfe;direction:ltr}
.storeBadge{display:inline-flex;align-items:center;gap:3px;background:#fff7e6;color:#92400e;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;border:1px solid #f59e0b}
.restaurantBadge{display:inline-flex;align-items:center;gap:3px;background:#fdeceb;color:#b91c1c;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;border:1px solid #e5484d}
.storeCard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer;display:flex;gap:12px;align-items:center}
.storeCard:active{background:#f9fafb}
.storeCard .storeLogo{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--teal-light);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;border:1px solid var(--border)}
.storeCard .storeLogo img{width:100%;height:100%;object-fit:cover}
.storeCard .storeInfo{flex:1;min-width:0}
.storeCard .storeName{font-weight:800;font-size:16px;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.storeCard .storeMeta{font-size:12px;color:var(--muted);margin-bottom:3px}
.storeCard .storeStats{font-size:12px;color:var(--teal-dark);font-weight:700}
.storeHeader{position:relative;margin-bottom:44px}
.storeHeader .cover{width:100%;aspect-ratio:3/1;border-radius:14px;overflow:hidden;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-size:36px;opacity:.6}
.storeHeader .cover img{width:100%;height:100%;object-fit:cover}
.storeHeader .logoWrap{position:absolute;bottom:-34px;right:16px;width:80px;height:80px;border-radius:16px;border:4px solid #fff;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.storeHeader .logoWrap img{width:100%;height:100%;object-fit:cover}
.storeHeader .logoWrap .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--teal-light);font-size:32px}
.storeTitle{font-weight:800;font-size:20px;margin:0 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.storeMetaLine{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.9}
.storeDesc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;font-size:13.5px;line-height:1.9;margin:10px 0;white-space:pre-wrap;word-break:break-word}
.postTypeBtn{width:100%;padding:16px;border:2px solid var(--border);border-radius:14px;background:#fff;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:12px;margin-bottom:10px;text-align:right;color:var(--text)}
.postTypeBtn:active{border-color:var(--teal);background:#f0f9ff}
.postTypeBtn .ptIcon{font-size:28px}
.postTypeBtn .ptText{flex:1}
.postTypeBtn .ptTitle{display:block;color:var(--text);margin-bottom:2px}
.postTypeBtn .ptDesc{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5}
.postTypeBtn.disabled{opacity:.55;cursor:not-allowed;background:#f9fafb}
.expiryLine{font-size:11px;font-weight:700;margin-top:2px}
.expiryOk{color:#16a34a}
.expirySoon{color:#f59e0b}
.expiryEnded{color:#e5484d}
#categoriesScreen{padding:0 0 100px}
#categoriesScreen .catHeader{padding:18px 16px 10px;font-size:20px;font-weight:800;color:var(--text)}
#categoriesScreen .catSubtitle{padding:0 16px 14px;font-size:13px;color:var(--muted)}
.categoriesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 360px) {
  .categoriesGrid {
    gap: 6px;
    padding: 0 6px;
  }
}
@media (min-width: 600px) {
  .categoriesGrid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 0 20px;
    max-width: 900px;
    margin: 0 auto;
  }
}
@media (min-width: 1000px) {
  .categoriesGrid {
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    padding: 0 40px;
    max-width: 1100px;
    margin: 0 auto;
  }
}
.catBox {
  background: var(--card, #fff);
  border-radius: 14px;
  padding: 8px 3px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: 112px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  min-width: 0;
  overflow: visible !important;
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}
.catBox:active {
  transform: scale(.94);
  background: #f9fafb;
}
.catBox .catIcon {
  font-size: 26px;
  line-height: 1;
}
.catBox .catIconWrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px rgba(0,0,0,.12);
  transition: transform .15s ease;
  flex: 0 0 46px;
}
.catBox .catIconWrap.catIconImg {
  width: 46px;
  height: 46px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.catBox .catIconWrap.catIconImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  mix-blend-mode: multiply;
}
html.dark-mode .catBox .catIconWrap.catIconImg {
  background: #ffffff;
  border: none;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
html.dark-mode .catBox .catIconWrap.catIconImg img {
  mix-blend-mode: multiply;
}
.catBox:active .catIconWrap {
  transform: scale(.88);
}
.catBox .catIconWrap svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
  color: #fff;
}
.catBox.storeBox .catIconWrap,
.catBox.allBox .catIconWrap {
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.catBox .catName {
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: var(--text);
  line-height: 1.25;
  padding: 0 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catBox.storeBox {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: #f59e0b;
}
.catBox.storeBox .catName {
  color: #3a2500;
}
.catBox.allBox {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border-color: #0284c7;
}
.catBox.allBox .catName {
  color: #fff;
}
.bannerCarousel{margin:14px 16px 8px;position:relative;height:150px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#e6f6fe,#f0f9ff);border:2px solid #38bdf8}
.bannerCarousel.hidden{display:none!important}
.bannerCarousel .bSlides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;direction:ltr;scrollbar-width:none}
.bannerCarousel .bSlides::-webkit-scrollbar{display:none}
.bannerCarousel .bSlide{flex:0 0 100%;height:100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.bannerCarousel .bSlide img{width:100%;height:100%;object-fit:cover}
.bannerCarousel .bDots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;direction:ltr}
.bannerCarousel .bDot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.bannerCarousel .bDot.active{background:#fff;width:10px;height:10px}
.bannerEmpty{margin:14px 16px 8px;height:130px;border-radius:14px;background:linear-gradient(135deg,#e6f6fe,#f0f9ff);border:2px dashed #38bdf8;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--teal-dark);font-size:14px;font-weight:800;text-align:center;padding:10px;gap:4px}
.bannerEmpty .bannerSub{font-size:11.5px;font-weight:600;color:var(--muted)}
.bannerEmpty.hidden{display:none!important}
@media (min-width: 600px) {
  .bannerCarousel, .bannerEmpty {
    height: 190px;
    max-width: 800px;
    margin: 16px auto;
  }
}
.categoryHeader{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.categoryHeader .backBtn{width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;background:var(--card)!important;border:1.5px solid var(--border)!important;color:var(--text)!important;font-size:20px!important;font-weight:900!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;transition:all .18s ease!important;box-shadow:0 2px 6px rgba(15,23,42,0.08)!important;flex-shrink:0!important;padding:0!important;text-decoration:none!important}
.categoryHeader .backBtn:active{transform:scale(0.92)!important;background:var(--bg)!important}
.categoryHeader h3{margin:0;font-size:16px;font-weight:800;flex:1;text-align:center;padding-left:30px}
.filterBar{display:flex;gap:6px;padding:8px 16px 4px;overflow-x:auto;scrollbar-width:none}
.filterBar::-webkit-scrollbar{display:none}
.filterBtn{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--border);font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap}
.filterBtn.active{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.filterBtn.wantedActive{background:var(--wanted);border-color:var(--wanted);color:#fff}
.priceFilterRow{display:none;gap:8px;padding:8px 16px}
.priceFilterRow.open{display:flex}
.priceInputWrap{flex:1;position:relative}
.priceInputWrap input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);font-family:inherit;font-size:13.5px;font-weight:700;background:#fff;text-align:center;direction:ltr}
.priceInputWrap .priceLabel{position:absolute;top:-8px;right:10px;background:#fff;padding:0 6px;font-size:10.5px;font-weight:800;color:var(--teal-dark)}
.priceApplyBtn{flex:0 0 auto;padding:10px 16px;border:none;border-radius:10px;background:var(--teal-dark);color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
.priceClearBtn{flex:0 0 auto;padding:10px 12px;border:none;border-radius:10px;background:#fdeceb;color:var(--danger);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
.recentSection{margin:16px 16px 0;background:linear-gradient(135deg,#e6f6fe,#f0f9ff);border-radius:14px;padding:12px;border:1px solid #bae6fd;display:none}
.recentSection.hasItems{display:block}
.recentSection .recentTitle{font-weight:800;font-size:13.5px;color:var(--teal-dark);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.recentScroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.recentScroll::-webkit-scrollbar{display:none}
.recentItem{flex:0 0 110px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--border);cursor:pointer}
.recentItem .recentThumb{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--teal-light);display:block}
.recentItem .recentInfo{padding:6px 8px}
.recentItem .recentName{font-size:11px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.recentItem .recentPrice{font-size:11.5px;font-weight:800;color:var(--teal-dark);margin-top:2px}

/* ✅ NEW: السلة والمقارنة العائمة بأنيميشن */
.cartFAB{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#3a2500;border:none;padding:12px 22px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(245,158,11,.45);z-index:95;display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:1;transition:opacity .3s ease,transform .3s ease}
.cartFAB.fabOff{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(30px) scale(.6)}
.cartFAB .cartFABcount{background:#3a2500;color:#fbbf24;font-size:12px;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px;font-weight:800}
.cartFAB .cartFABtotal{font-size:12.5px;font-weight:800;background:rgba(58,37,0,0.14);padding:2px 8px;border-radius:999px;margin-right:2px}
.compareFAB{position:fixed;bottom:160px;right:20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;padding:12px 20px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(139,92,246,.5);z-index:45;display:flex;align-items:center;gap:8px;opacity:1;transition:opacity .3s ease,transform .3s ease}
.compareFAB.fabOff{opacity:0;pointer-events:none;transform:translateY(30px) scale(.6)}

.cartSheetBody{padding:0;max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cartItemRow{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center}
.cartItemRow:last-child{border-bottom:none}
.cartItemRow .cImg{width:70px;height:70px;border-radius:10px;object-fit:contain;flex:0 0 auto;background:var(--teal-light);padding:2px}
.cartItemRow .cInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cartItemRow .cTitle{font-size:13.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartItemRow .cPrice{font-size:13px;font-weight:800;color:var(--teal-dark)}
.cartQtyRow{display:flex;align-items:center;gap:8px;margin-top:2px}
.qtyBtn{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--teal-dark);background:#fff;color:var(--teal-dark);font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;line-height:1}
.qtyBtn:disabled{opacity:.4;cursor:not-allowed}
.qtyVal{min-width:28px;text-align:center;font-size:15px;font-weight:800;color:var(--text)}
.cartItemRow .cRemove{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;background:#fdeceb;color:var(--danger);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;align-self:flex-start}
.cartTotalBox{display:flex;justify-content:space-between;align-items:center;padding:16px 0 12px;border-top:2px dashed var(--border);margin-top:12px;font-size:15px;font-weight:800}
.cartTotalBox .totalPrice{color:var(--teal-dark);font-size:22px}
.cartItemsCount{font-size:12px;color:var(--muted);font-weight:700}
.cartStoreLine{background:#fff7e6;border:1px solid #f59e0b;border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:13px;font-weight:800;color:#92400e;display:flex;align-items:center;gap:6px}
.cartStoreLine.restaurant{background:#fdeceb;border-color:#e5484d;color:#b91c1c}
.btnWhatsBig{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:var(--wa);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.btnCallBig{width:100%;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:800;color:#fff;background:var(--call);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.btnClearCart{width:100%;padding:12px;border:none;border-radius:12px;font-size:14px;font-weight:700;color:var(--danger);background:#fdeceb;cursor:pointer;font-family:inherit}
.cartEmptyBox{text-align:center;padding:50px 20px;color:var(--muted)}
.cartEmptyBox .icon{font-size:60px;margin-bottom:10px;opacity:.5}
.siteFooter{margin-top:30px;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0));background:#1f2937;color:#cbd5e1;font-size:12px;line-height:1.9;text-align:center}
.siteFooter .fBrand{font-size:15px;font-weight:800;color:#fff;margin-bottom:6px}
.siteFooter .fDisclaimer{background:#111827;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:11.5px;color:#94a3b8;line-height:1.8}
.siteFooter .fLinks{display:flex;justify-content:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.siteFooter .fLinks button{background:none;border:none;color:#38bdf8;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.siteFooter .fCopy{margin-top:10px;font-size:11px;color:#64748b}
.legalBody{padding:0;font-size:13.5px;line-height:1.9;color:var(--text)}
.legalBody h2{font-size:16px;font-weight:800;margin:16px 0 8px;color:var(--teal-dark)}
.legalBody h3{font-size:14px;font-weight:800;margin:12px 0 6px;color:var(--text)}
.legalBody p{margin:0 0 10px}
.legalBody ul{margin:0 0 10px;padding:0 18px 0 0}
.legalBody li{margin-bottom:4px}
.legalBody .updated{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:14px}
.followBtn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;background:var(--teal);color:#fff;border:none;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;margin-top:6px}
.followBtn.following{background:#e5e7eb;color:#4b5563}
.followStats{display:flex;gap:12px;justify-content:center;font-size:12.5px;color:var(--muted);margin-top:6px}
.followStats b{color:var(--text);font-weight:800}
.openBadgeGreen{background:#dcfce7;color:#166534;font-weight:800;padding:3px 9px;border-radius:7px;font-size:11px;border:1px solid #16a34a;display:inline-block}
.openBadgeRed{background:#fdeceb;color:#b91c1c;font-weight:800;padding:3px 9px;border-radius:7px;font-size:11px;border:1px solid #e5484d;display:inline-block}
.storeRatingStars{color:#f5a623;font-size:13px;letter-spacing:1px}
.storeRatingBadge{display:inline-flex;align-items:center;gap:4px;background:#fef3c7;color:#92400e;font-weight:800;padding:3px 9px;border-radius:7px;font-size:11px;border:1px solid #f59e0b}
.discountBadge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#e5484d,#dc2626);color:#fff;font-weight:800;padding:4px 10px;border-radius:8px;font-size:12px;z-index:3;box-shadow:0 2px 8px rgba(229,72,77,.4)}
.originalPrice{color:var(--muted);text-decoration:line-through;font-size:13px;margin-right:6px;font-weight:700}
.discountPrice{color:var(--green);font-weight:800;font-size:16.5px}
.storeQRBox{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;margin-top:12px}
.storeQRBox canvas,.storeQRBox img{max-width:200px;margin:8px auto;display:block}
.storeQRBtn{background:#0ea5e9;color:#fff;border:none;padding:10px 16px;border-radius:10px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.storeRatingSection{margin-top:16px;padding-top:16px;border-top:2px dashed var(--border)}
.storeRatingSection h4{font-size:14px;font-weight:800;margin:0 0 10px}
.verifiedBadge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#1877F2;color:#fff;font-size:10px;font-weight:900;margin-right:5px;vertical-align:middle;flex:0 0 auto;line-height:1;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.verifiedBadge::before{content:"✓";font-weight:900;transform:translateY(-.5px);line-height:1}
.verifiedBadgeLg{width:22px;height:22px;font-size:14px;margin-right:8px}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:12px 22px;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:800;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:85vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:linear-gradient(135deg,#16a34a,#15803d)}
.toast.error{background:linear-gradient(135deg,#e5484d,#b91c1c)}
.toast.info{background:linear-gradient(135deg,#0284c7,#0ea5e9)}
.toast.warn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#3a2500}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardAppear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.overlay:not(.hidden){animation:fadeIn .2s ease-out}
.overlay:not(.hidden):not(.fullscreen) .sheet{animation:slideUp .3s cubic-bezier(.22,1,.36,1)}
.card{animation:cardAppear .35s ease-out backwards}
.card:nth-child(1){animation-delay:0s}
.card:nth-child(2){animation-delay:.03s}
.card:nth-child(3){animation-delay:.06s}
.card:nth-child(4){animation-delay:.09s}
.card:nth-child(5){animation-delay:.12s}
.card:nth-child(6){animation-delay:.15s}
.card:nth-child(n+7){animation-delay:.18s}
.screen:not(.hidden){animation:fadeIn .25s ease-out}
.searchDropdown:not(.hidden){animation:slideDown .2s ease-out}
.btnMain,.btnGhost,.iconBtn2,.waBtn,.callBtn,.cartAddBtn{transition:transform .12s ease,opacity .2s}
.btnMain:active,.btnGhost:active,.iconBtn2:active,.waBtn:active,.callBtn:active,.cartAddBtn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:99998;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease-out}
.lightbox img{max-width:100%;max-height:90vh;border-radius:12px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lbClose{position:absolute;top:20px;left:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);color:#1f2937;border:none;font-size:20px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;padding:0;z-index:10}
.lbClose:active{transform:scale(.92)}
.skeleton-card{background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.skeleton-img{width:100%;aspect-ratio:1/1;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.skeleton-line{height:14px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
.skeleton-line.short{width:60%}
.skeleton-line.medium{width:80%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
html.dark-mode .skeleton-img,html.dark-mode .skeleton-line{background:linear-gradient(90deg,#1a2233 25%,#232d42 50%,#1a2233 75%);background-size:200% 100%}
.thumbsRow{display:flex;gap:6px;margin-top:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.thumbsRow::-webkit-scrollbar{display:none}
.thumbItem{flex:0 0 62px;width:62px;height:62px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s}
.thumbItem:active{transform:scale(.94)}
.thumbItem.active{border-color:var(--teal)}
.thumbItem img{width:100%;height:100%;object-fit:cover}
.gpsBtn{background:#dcfce7;color:#166534;border:1px solid #16a34a;border-radius:10px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.gpsBtn:active{transform:scale(.96)}
.compareCheckbox{position:absolute;top:8px;left:8px;z-index:4;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;font-weight:800;padding:0;font-family:inherit;transition:transform .15s}
.compareCheckbox:active{transform:scale(.9)}
.compareCheckbox.active{background:var(--teal);border-color:#fff}
.compareCol{background:var(--card);border-radius:14px;padding:12px;border:1px solid var(--border)}
.compareCol img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:8px}
.compareCol h4{font-size:13.5px;font-weight:800;margin:0 0 6px;line-height:1.4}
.compareCol .comparePrice{color:var(--teal-dark);font-weight:800;font-size:16px;margin-bottom:8px}
.compareCol .compareRow{font-size:12px;color:var(--muted);margin-bottom:5px;line-height:1.5}
.compareCol .compareRow b{color:var(--text)}
.analyticsBox{background:#f0f9ff;border:1px solid #0ea5e9;border-radius:12px;padding:12px;margin-top:12px}
html.dark-mode .analyticsBox{background:#0c2942;border-color:#1c3a5c}
.analyticsTitle{font-weight:800;color:#0284c7;font-size:13.5px;margin-bottom:10px}
.analyticsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.analyticsCard{background:#fff;border-radius:10px;padding:12px 6px;text-align:center;border:1px solid var(--border)}
html.dark-mode .analyticsCard{background:#131a28}
.analyticsCard .anVal{font-size:22px;font-weight:900;color:var(--teal-dark);line-height:1}
.analyticsCard .anLbl{font-size:10.5px;color:var(--muted);font-weight:700;margin-top:6px}
.dashboardGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.dashboardCard{background:linear-gradient(135deg,#e6f6fe,#f0f9ff);border:1px solid #bae6fd;border-radius:14px;padding:14px 10px;text-align:center}
html.dark-mode .dashboardCard{background:linear-gradient(135deg,#0c2942,#131a28);border-color:#1c3a5c}
.dashboardCard .dVal{font-size:26px;font-weight:900;color:var(--teal-dark);line-height:1}
.dashboardCard .dLbl{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:6px}
.dashList{display:flex;justify-content:space-between;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:6px;font-size:13px}
.dashList b{color:var(--teal-dark)}
.sellerTier{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px;border:1px solid;margin-left:6px}
.sellerTier.bronze{background:#fef3c7;color:#92400e;border-color:#f59e0b}
.sellerTier.silver{background:#f1f5f9;color:#475569;border-color:#94a3b8}
.sellerTier.gold{background:#fef9c3;color:#854d0e;border-color:#eab308}
.sellerTier.diamond{background:#e0e7ff;color:#3730a3;border-color:#6366f1}
html.dark-mode .sellerTier.bronze{background:#3a2f11;color:#f0d28a}
html.dark-mode .sellerTier.silver{background:#232d42;color:#cbd5e1}
html.dark-mode .sellerTier.gold{background:#3a2f11;color:#fde047}
html.dark-mode .sellerTier.diamond{background:#1e1b4b;color:#a5b4fc}
html.dark-mode{--bg:#090d16;--card:#131b2e;--text:#f8fafc;--muted:#94a3b8;--border:#1e293b;--teal-light:#0c2942;--amber-light:#3a2f11}
html.dark-mode body{background:var(--bg);color:var(--text)}
html.dark-mode .topbar{background:#0c2942}
html.dark-mode .searchBox{background:var(--card);border-color:var(--border)}
html.dark-mode .searchBox input{color:var(--text);background:transparent}
html.dark-mode .voiceSearchBtn{background:#1e293b;color:#38bdf8}
html.dark-mode .voiceSearchBtn.recording{background:#450a0a!important;color:#f87171!important}
html.dark-mode .searchDropdown{background:var(--card);color:var(--text)}
html.dark-mode .sdItem{color:var(--text)}
html.dark-mode .sdItem:hover{background:#232d42}
html.dark-mode .sdClearAll{border-top-color:var(--border)}
html.dark-mode .catChip{background:var(--card);border-color:var(--border);color:var(--text)}
html.dark-mode .catChip.active{background:var(--teal);color:#0f1420}
html.dark-mode .catBox{background:var(--card);border-color:var(--border)}
html.dark-mode .catBox .catName{color:var(--text)}
html.dark-mode .catBox:active{background:#232d42}
html.dark-mode .card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.dark-mode .card .imgWrap {
  background: #151d2e !important;
  border-bottom-color: #232f46 !important;
}
html.dark-mode .card .imgWrap img {
  background: #151d2e !important;
}
html.dark-mode .pImg {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
}
html.dark-mode .slide img {
  background: #0f172a !important;
}
html.dark-mode .card .catTag {
  background: #232d42;
  color: var(--muted);
}
html.dark-mode .navItem{color:var(--muted)}
html.dark-mode .navItem.active{color:var(--teal)}
html.dark-mode .screenHeader{background:var(--card);border-bottom-color:var(--border)}
html.dark-mode .categoryHeader{background:var(--card);border-bottom-color:var(--border)}
html.dark-mode .filterBtn{background:var(--card);border-color:var(--border);color:var(--text)}
html.dark-mode .filterBtn.active{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}
html.dark-mode .field input,html.dark-mode .field select,html.dark-mode .field textarea{background:#131a28;border-color:var(--border);color:var(--text)}
html.dark-mode .sheet{background:var(--card);color:var(--text)}
html.dark-mode .sheet h3{color:var(--text)}
html.dark-mode .authOption{background:var(--card);border-color:var(--border);color:var(--text)}
html.dark-mode .reportItem{background:#131a28;border-color:var(--border)}
html.dark-mode .termsBox{background:var(--card);border-color:var(--border)}
html.dark-mode .warnBanner{background:#3a2f11;border-color:#5a4a1a;color:#f0d28a}
html.dark-mode .recentSection{background:linear-gradient(135deg,#0c2942,#131a28);border-color:#1c3a5c}
html.dark-mode .recentItem{background:var(--card);border-color:var(--border)}
html.dark-mode .recentItem .recentName{color:var(--text)}
html.dark-mode .subCatsRow{background:#1f1c10;border-top-color:#3a2f11;border-bottom-color:#3a2f11}
html.dark-mode .subCatChip{background:#232d42;border-color:#3a2f11;color:#d4a94a}
html.dark-mode .subCatTitle{color:#d4a94a}
html.dark-mode .planCard{background:#131a28;border-color:var(--border)}
html.dark-mode .planCard.best{background:linear-gradient(135deg,#2a2210,#3a2f11)}
html.dark-mode .storeCard{background:var(--card);border-color:var(--border)}
html.dark-mode .storeCard:active{background:#232d42}
html.dark-mode .storeDesc{background:var(--card);border-color:var(--border)}
html.dark-mode .cartStoreLine{background:#3a2f11;color:#f0d28a;border-color:#5a4a1a}
html.dark-mode .cartStoreLine.restaurant{background:#3a1a1a;color:#f0a0a0;border-color:#5a1a1a}
html.dark-mode .qtyBtn{background:#131a28;color:var(--teal)}
html.dark-mode .qtyVal{color:var(--text)}
html.dark-mode .reviewBox{background:#0c2942;border-color:#1c3a5c;color:#b0d4f0}
html.dark-mode .reviewBox .rbTitle{color:#7cc0f0}
html.dark-mode .pDesc{color:var(--text)}
html.dark-mode .pTitle{color:var(--text)}
html.dark-mode .price{color:var(--teal)}
html.dark-mode .cardViews{color:var(--teal)}
html.dark-mode .empty{color:var(--muted)}
html.dark-mode .emptyState .esTitle{color:var(--text)}
html.dark-mode .emptyState .esBtn{box-shadow:0 6px 20px rgba(2,132,199,.25)}
html.dark-mode .searchBox input::placeholder{color:#5a6478}
html.dark-mode .field input::placeholder,html.dark-mode .field textarea::placeholder{color:#5a6478}
html.dark-mode .cityFilter{background:var(--card);color:var(--text);border-color:var(--border)}
html.dark-mode .cityFilter option{background:var(--card);color:var(--text)}
html.dark-mode .field select option{background:var(--card);color:var(--text)}
html.dark-mode .followBtn{background:var(--teal);color:#0f1420}
html.dark-mode .followBtn.following{background:#232d42;color:#8b95a7}
html.dark-mode .bannerEmpty{background:linear-gradient(135deg,#0c2942,#131a28);color:#7cc0f0}
html.dark-mode .bannerCarousel{background:#0c2942;border-color:#1c3a5c}
html.dark-mode .overlay.fullscreen{background:var(--bg)}
html.dark-mode .overlay.fullscreen .screenHeader{background:var(--card);border-bottom-color:var(--border)}
#aiChatBtn{touch-action:none;user-select:none;}
#aiChatBtn:active{transform:scale(.92);}
.wheel-wrap{position:relative;width:280px;height:280px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:36px;color:#ef4444;z-index:5;text-shadow:0 2px 4px rgba(0,0,0,.3);filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.wheel-disc{width:280px;height:280px;border-radius:50%;position:relative;transition:transform 4s cubic-bezier(.17,.67,.2,1);box-shadow:0 0 0 6px #fff, 0 0 0 10px #f59e0b, 0 8px 30px rgba(0,0,0,.25);overflow:hidden}
.wheel-segment{position:absolute;inset:0;clip-path:polygon(50% 50%, 50% 0%, calc(50% + 50% * tan(22.5deg)) 0%, 50% 50%);transform:rotate(calc(var(--i) * 45deg));transform-origin:50% 50%}
.wheel-segment:nth-child(1){background:#ef4444}
.wheel-segment:nth-child(2){background:#f59e0b}
.wheel-segment:nth-child(3){background:#10b981}
.wheel-segment:nth-child(4){background:#3b82f6}
.wheel-segment:nth-child(5){background:#8b5cf6}
.wheel-segment:nth-child(6){background:#ec4899}
.wheel-segment:nth-child(7){background:#14b8a6}
.wheel-segment:nth-child(8){background:#f97316}
.wheel-label{position:absolute;top:50%;left:50%;font-size:15px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;transform:translate(-50%,-50%) rotate(calc(var(--i) * 45deg + 22.5deg)) translateY(-95px) rotate(calc(var(--i) * -45deg - 22.5deg));white-space:nowrap}
.wheel-center-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff;border:5px solid #fff;font-size:28px;cursor:pointer;box-shadow:0 4px 15px rgba(245,158,11,.5);z-index:4;transition:transform .15s}
.wheel-center-btn:active{transform:translate(-50%,-50%) scale(.9)}
.wheel-center-btn:disabled{opacity:.6;cursor:not-allowed}
@keyframes wheelPopIn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.3) rotate(20deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* ============================================
   نافذة توليد صورة الستوري (Story Card Maker)
   ============================================ */
#storyModalOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#storyModalOverlay.hidden { display: none !important; }
.storyModalBox {
  background: #111827; color: #fff; width: 100%; max-width: 420px;
  max-height: 94vh; border-radius: 20px; padding: 18px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
  overflow-y: auto;
}
.storyModalHeader {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.storyModalHeader h3 { margin: 0; font-size: 17px; font-weight: 800; color: #38bdf8; }
.storyModalClose {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
}
.storyPreviewImg {
  width: 100%; max-height: 55vh; object-fit: contain; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); margin-bottom: 14px; background: #0b1120;
}
.storyActions {
  width: 100%; display: flex; gap: 8px; flex-direction: column;
}
.btnStoryDownload {
  background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff;
  border: none; padding: 12px; border-radius: 12px; font-weight: 800; font-size: 15px;
  cursor: pointer; font-family: 'Cairo', sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btnStoryShare {
  background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff;
  border: none; padding: 12px; border-radius: 12px; font-weight: 800; font-size: 15px;
  cursor: pointer; font-family: 'Cairo', sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* ============================================
   بطاقة برنامج الإحالة والمكافآت (Referral Program)
   ============================================ */
.referralCardBox {
  background: linear-gradient(135deg, #0284c7, #38bdf8); color: #fff;
  padding: 16px; border-radius: 16px; margin: 14px 0; text-align: center;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}
.referralCardBox h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.referralCardBox p { margin: 0 0 10px; font-size: 12.5px; opacity: 0.95; line-height: 1.5; }
.referralLinkDisplay {
  background: rgba(255,255,255,0.22); padding: 8px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 700; word-break: break-all; margin-bottom: 10px;
  direction: ltr; border: 1px dashed rgba(255,255,255,0.4);
}
.referralBtnsRow { display: flex; gap: 8px; justify-content: center; }
.referralBtnsRow button {
  flex: 1; border: none; padding: 9px 12px; border-radius: 10px;
  font-weight: 800; font-size: 13px; cursor: pointer; font-family: 'Cairo', sans-serif;
}

/* ============================================
   🍔 بريستو - تصنيفات المتاجر وقوائم المطاعم (Presto Style)
   ============================================ */
.popularSection {
  margin: 14px 0 16px;
}
.popularTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.popularScroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.popularScroll::-webkit-scrollbar {
  display: none;
}
.popularCard {
  flex: 0 0 110px;
  max-width: 110px;
  scroll-snap-align: start;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.popularImgWrap {
  width: 110px;
  height: 110px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #fef08a;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.popularImgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foodAddBtn {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #ef4444;
  color: #ef4444;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .15s, background .15s;
  padding: 0;
  z-index: 2;
}
.foodAddBtn:active {
  transform: scale(.88);
  background: #fdeceb;
}
.foodAddBtn.inCart {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  font-size: 14px;
}
.popularName {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.popularPrice {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-top: 2px;
  text-align: right;
}

/* شريط تبويبات المطعم */
.restaurantTabsBar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin: 12px 0 16px;
  scrollbar-width: none;
}
.restaurantTabsBar::-webkit-scrollbar {
  display: none;
}
.restaurantTabItem {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border: none;
  background: none;
  font-family: inherit;
  transition: color .2s;
}
.restaurantTabItem.active {
  color: #ea580c;
  font-weight: 800;
}
.restaurantTabItem.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 0;
  left: 0;
  height: 3px;
  background: #ea580c;
  border-radius: 3px 3px 0 0;
}

/* بطاقة الوجبة في المطعم بنمط بريستو */
.foodSectionTitle {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 20px 0 10px;
  padding-bottom: 4px;
}
.prestoFoodItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.prestoFoodItem:last-child {
  border-bottom: none;
}
.prestoFoodItem .foodInfo {
  flex: 1;
  min-width: 0;
}
.prestoFoodItem .foodTitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.35;
}
.prestoFoodItem .foodDesc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prestoFoodItem .foodPrice {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
}
.prestoFoodItem .foodImgWrap {
  width: 90px;
  height: 90px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  flex: 0 0 90px;
  background: #fef08a;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.prestoFoodItem .foodImgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foodImgPlaceholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  opacity: .7;
}

/* شبكة تصنيفات المتجر (تصفح حسب الفئة) بنمط بريستو */
.storeSectionTitle {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  margin: 16px 0 12px;
}
.storeCatGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 360px) {
  .storeCatGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
.storeCatTileWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 0;
}
.storeCatTile {
  width: 100%;
  aspect-ratio: 1/1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
  transition: transform .15s, border-color .15s, background .15s;
}
.storeCatTile:active, .storeCatTileWrap:active .storeCatTile {
  transform: scale(.93);
  background: #f9fafb;
}
.storeCatTile.active {
  border: 2px solid #ea580c;
  background: #fff7ed;
  box-shadow: 0 3px 10px rgba(234,88,12,.18);
}
.storeCatName {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-top: 6px;
  line-height: 1.3;
  word-break: break-word;
}
.storeCatName.active {
  color: #ea580c;
  font-weight: 800;
}

html.dark-mode .popularImgWrap,
html.dark-mode .prestoFoodItem .foodImgWrap {
  background: #2a2d3d;
}
html.dark-mode .foodAddBtn {
  background: #1e2130;
  border-color: #ef4444;
}
html.dark-mode .storeCatTile {
  background: #1e2130;
  border-color: #374151;
}
html.dark-mode .storeCatTile.active {
  background: #3a2215;
  border-color: #ea580c;
}

/* =====================================================
   KSH Restaurant Theme Styles (نموذج متجر KSH بشكل مطعم)
   ===================================================== */
.kshCover {
  height: 180px;
  background: linear-gradient(135deg, #ffc20e, #ff8a00);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}
.kshCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kshCoverEmojis {
  font-size: 52px;
  letter-spacing: 8px;
  padding-bottom: 30px;
}
.kshInfo {
  background: var(--card);
  margin: -36px 12px 0;
  border-radius: 18px;
  padding: 14px;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  z-index: 2;
}
.kshHead {
  display: flex;
  gap: 12px;
  align-items: center;
}
.kshLogo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #ffc20e;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #1c1c1c;
  flex: none;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.kshLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kshHeadText {
  flex: 1;
  min-width: 0;
}
.kshHeadText h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.kshHeadText p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.kshStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  text-align: center;
}
.kshStats small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 2px;
}
.kshStats b {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 800;
}
.kshNav {
  position: sticky;
  top: 54px;
  z-index: 20;
  background: var(--bg);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 12px;
  margin-top: 8px;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.kshNav::-webkit-scrollbar { display: none; }
.kshNav button {
  flex: none;
  border: 1px solid var(--border);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s;
}
.kshNav button.on {
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  border-color: var(--text);
}
.kshItem {
  display: flex;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  align-items: center;
  transition: transform .12s, box-shadow .12s;
}
.kshItem:active {
  transform: scale(.98);
}
.kshPic {
  width: 90px;
  height: 90px;
  border-radius: 14px;
  background: #fef9c3;
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  overflow: hidden;
}
html.dark-mode .kshPic {
  background: #2a2d3d;
}
.kshPic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kshPicEmoji {
  font-size: 38px;
}
.kshAdd {
  position: absolute;
  inset-inline-start: 4px;
  bottom: 4px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: #dc2626;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .1s;
}
.kshAdd:active {
  transform: scale(.9);
}
.kshAddBadge {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  line-height: 1;
  pointer-events: none;
}
.kshTxt {
  flex: 1;
  min-width: 0;
}
.kshTxt h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.kshTxt .kshDesc {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kshTxt .opts {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.opts span {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: 1px 8px;
  font-weight: 600;
}
.kshPrice {
  color: #dc2626;
  font-weight: 800;
  font-size: 16px;
}
.kshBar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  max-width: 560px;
  margin-inline: auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.kshSendBtn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(22,163,74,.3);
  box-sizing: border-box;
}
.kshSendBtn:active {
  transform: scale(.98);
}

/* =====================================================
   Restaurant Structure Cards (هيكل المطاعم: غلاف + شعار + اسم)
   ===================================================== */
.homeRestaurantsContainer {
  padding: 4px 16px 14px;
  box-sizing: border-box;
  width: 100%;
}
@media (min-width: 700px) {
  .homeRestaurantsContainer {
    padding: 6px 24px 18px;
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media (min-width: 1000px) {
  .homeRestaurantsContainer {
    padding: 6px 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
}
.homeRestaurantsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 2px;
}
.homeRestaurantsTitle {
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.homeRestaurantsSeeAll {
  border: none;
  background: none;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.homeRestaurantsSeeAll:hover {
  text-decoration: underline;
}
.homeRestaurantsList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.restaurantStructureCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}
.restaurantStructureCard:active {
  transform: scale(.99);
}
.rscCover {
  height: 125px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.rscCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rscBody {
  padding: 12px 14px 14px;
  position: relative;
}
.rscLogo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #ffc20e;
  border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  margin-top: -38px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #1c1c1c;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.rscLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rscTitleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rscName {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.rscMeta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.logoEditBadge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
}
.coverEditBadge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  z-index: 10;
}
.rscCallBtn {
  margin-top: 10px;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
}

/* ============================================
   حركات السوق المفتوح (OpenSooq Smart Specs & Pills)
   ============================================ */
.specsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 3px;
}
.specPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-light);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(2, 132, 199, 0.18);
  white-space: nowrap;
  letter-spacing: -0.2px;
}
html.dark-mode .specPill {
  background: #0c2942;
  color: #7cc0f0;
  border-color: #1c3a5c;
}

.specsDetailsBox {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.specsDetailsTitle {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.specsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 500px) {
  .specsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.specGridItem {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.specGridItem .specLabel {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.specGridItem .specValue {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
html.dark-mode .specsDetailsBox {
  background: var(--card);
  border-color: var(--border);
}
html.dark-mode .specGridItem {
  background: #131a28;
  border-color: var(--border);
}
html.dark-mode .specGridItem .specValue {
  color: #e8edf5;
}

/* Dynamic Specs Form */
.dynamicSpecsContainer {
  margin-top: 10px;
  margin-bottom: 12px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  animation: fadeIn 0.25s ease;
}
.dynamicSpecsContainer.hidden {
  display: none !important;
}
.specsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.specsHeaderTitle {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.specsSegmented {
  display: flex;
  gap: 6px;
  background: var(--bg);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.specSegBtn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.specSegBtn.active {
  background: var(--card);
  color: var(--teal-dark);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.specFormGroup {
  margin-bottom: 12px;
}
.specFormGroup:last-child {
  margin-bottom: 0;
}
.specFormGroup label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.specChipsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.specFormChip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.specFormChip:hover {
  border-color: var(--teal);
}
.specFormChip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.35);
}
.specInputWrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.specInputWrap input, .specInputWrap select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}
.specInputWrap input:focus, .specInputWrap select:focus {
  border-color: var(--teal);
}
html.dark-mode .dynamicSpecsContainer {
  background: var(--card);
  border-color: var(--border);
}
html.dark-mode .specsSegmented {
  background: #131a28;
}
html.dark-mode .specSegBtn.active {
  background: #232d42;
  color: #7cc0f0;
}
html.dark-mode .specFormChip {
  background: #131a28;
  border-color: var(--border);
  color: #e8edf5;
}
html.dark-mode .specFormChip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #0f1420;
}
html.dark-mode .specInputWrap input, html.dark-mode .specInputWrap select {
  background: #131a28;
  border-color: var(--border);
  color: #e8edf5;
}

/* =====================================================
   Restaurant Live Orders & Customer Tracker System
   ===================================================== */
.activeOrderFloatingPill {
  position: fixed;
  bottom: 82px;
  left: 16px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.45);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 900;
  animation: pillBounce 2.4s infinite ease-in-out;
}
@keyframes pillBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.restaurantOrderCard {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all .2s ease;
}
.restaurantOrderCard.pending {
  border-color: #f59e0b;
  background: #fffbeb;
  animation: pulsePending 2s infinite ease-in-out;
}
html.dark-mode .restaurantOrderCard.pending {
  background: #2a2010;
  border-color: #f59e0b;
}
@keyframes pulsePending {
  0%, 100% { box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
}

.rloItemRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.rloItemRow:last-child {
  border-bottom: none;
}
.rloBtnTime {
  padding: 9px 6px;
  border: none;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.rloBtnTime:active {
  transform: scale(0.97);
}
.rloBtnTime:hover {
  background: #15803d;
}
.rloBtnReject {
  padding: 9px 6px;
  border: none;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.rloCountdownBig {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #16a34a;
  font-family: monospace, sans-serif;
  margin: 12px 0 6px;
  text-align: center;
}

@keyframes liveDotPulse {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.liveDotIndicator {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
  margin-left: 6px;
  vertical-align: middle;
  animation: liveDotPulse 1.8s infinite ease-in-out;
}

/* ============================================ */
/* نظام المحفظة الإلكترونية وكروت الشحن (Wallet System) */
/* ============================================ */
.walletHeaderBtn {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 0 10px !important;
  width: auto !important;
  border-radius: 999px !important;
  background: var(--card);
  border: 1px solid var(--border);
}
.walletBadge {
  font-size: 11px;
  font-weight: 800;
  color: var(--teal-dark);
  background: var(--teal-light);
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
}

/* بطاقة المحفظة في صفحة حسابي */
.userWalletCard {
  background: linear-gradient(135deg, #0c2942 0%, #0369a1 100%);
  color: #fff;
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0 16px;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.userWalletCard::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.uwcTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.uwcBrand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uwcIcon {
  font-size: 24px;
}
.uwcTitle {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.uwcSubtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}
.uwcBadge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 3px 9px;
  border-radius: 999px;
}
.uwcBalanceArea {
  margin: 10px 0 16px;
}
.uwcBalanceLabel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2px;
}
.uwcBalanceNum {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.uwcBalanceNum small {
  font-size: 15px;
  font-weight: 700;
  color: #bae6fd;
}
.uwcButtonsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.uwcBtnRecharge {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.uwcBtnRecharge:active {
  transform: scale(0.97);
  background: #15803d;
}
.uwcBtnHistory {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.15s ease;
}
.uwcBtnHistory:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.28);
}

/* بطاقات حركات السجل المالي */
.walletTxCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.walletTxCard .txLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.walletTxCard .txIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.walletTxCard .txIcon.in {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.walletTxCard .txIcon.out {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.walletTxCard .txDetails {
  min-width: 0;
}
.walletTxCard .txTitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.walletTxCard .txTime {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.walletTxCard .txRight {
  text-align: left;
  flex-shrink: 0;
}
.walletTxCard .txAmount {
  font-size: 14.5px;
  font-weight: 900;
  direction: ltr;
}
.walletTxCard .txAmount.in {
  color: #16a34a;
}
.walletTxCard .txAmount.out {
  color: #dc2626;
}
.walletTxCard .txBalanceAfter {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* كروت الأدمن لقائمة الكروت والسجل */
.admCardRow {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.admCardCode {
  font-family: monospace;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text);
}
html.dark-mode .userWalletCard {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .walletHeaderBtn {
  background: var(--card);
  border-color: var(--border);
}

/* ============================================
   💬 Buyer-Seller Live Chat Styles (دردشة الشاري والبائع)
   ============================================ */
.chatBubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chatBubble.outgoing {
  align-self: flex-start;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.chatBubble.incoming {
  align-self: flex-end;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.chatBubble .chatTime {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 4px;
  display: block;
  text-align: left;
}
.inboxRow {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.inboxRow:hover {
  border-color: var(--teal);
}
.inboxRow:active {
  transform: scale(0.99);
}
.inboxAvatar {
  overflow: hidden;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
  flex: 0 0 auto;
}
.inboxBadge {
  background: #e11d48;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: auto;
}
html.dark-mode .inboxRow {
  background: var(--card);
  border-color: var(--border);
}
html.dark-mode .chatBubble.incoming {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode .chatBubble.incoming * {
  color: #ffffff !important;
}
html.dark-mode .chatBubble.incoming .chatTime {
  color: #94a3b8 !important;
}

/* ========================================================
   🚀 تنسيقات أزرار الشات المتطورة والكبسولات
   ======================================================== */
.chatQuickRepliesBar {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  background: var(--card);
  overflow-x: auto;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.chatQuickRepliesBar::-webkit-scrollbar {
  display: none;
}
.chatQuickChip {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.chatQuickChip:active {
  transform: scale(0.96);
  background: var(--border);
}
.chatHeaderIconBtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.chatHeaderIconBtn:active {
  transform: scale(0.92);
}
.chatHeaderIconBtn.wa {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.chatHeaderIconBtn.warn {
  color: #e11d48;
  border-color: #fecdd3;
  background: #fff1f2;
}
.chatHeaderIconBtn.del {
  color: #ef4444;
  border-color: #fecdd3;
  background: #fff1f2;
}
.chatHeaderIconBtn.del.active {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* علامة قراءة الرسائل في الشات (مثل واتساب وتليجرام) */
.chatCheck {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 4px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -1.5px;
  transition: all 0.25s ease;
  vertical-align: middle;
}
.chatCheck {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -2px;
  transition: all 0.2s ease;
  vertical-align: middle;
}
.chatCheck.sent {
  opacity: 0.65;
  color: rgba(255, 255, 255, 0.75);
}
.chatCheck.read {
  opacity: 1 !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
  font-weight: 900;
}
.chatBubble.incoming .chatCheck.sent {
  color: var(--muted);
}
.chatBubble.incoming .chatCheck.read {
  color: #0284c7 !important;
}

/* وضع تحديد الرسائل والحذف من الطرفين */
.chatSelectMode .chatBubble {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease !important;
}
.chatSelectMode .chatBubble:active {
  transform: scale(0.96) !important;
}
.chatBubble.msgSelected {
  outline: 3px solid #ef4444 !important;
  outline-offset: 3px !important;
  position: relative !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
}
.chatBubble.msgSelected::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 2px solid #fff;
  z-index: 5;
}
.chatAttachBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ========================================================
   🌟 فيسبوك ستايل - بروفايل الملف الشخصي المتطور
   ======================================================== */
.fbProfileCard {
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.fbCoverArea {
  height: 160px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.75) 100%),
              url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=900&q=80') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 16px;
}
.accountProfileHeaderCard:hover {
  transform: translateY(-2px);
  transition: all .2s ease;
  box-shadow: 0 6px 18px rgba(2,132,199,0.4);
}
.fbCoverPattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.15;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 14px 14px;
}
.fbAvatarWrapper {
  position: relative;
  width: 92px;
  height: 92px;
  margin-bottom: -46px;
  border-radius: 50%;
  border: 4px solid var(--card);
  background: #0284c7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 2;
}
.fbAvatarWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fbProfileDetails {
  padding: 54px 16px 16px;
  text-align: right;
}
.fbNameRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.fbUserName {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fbUserBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.fbUsernameTag {
  background: #f0fdf4;
  color: #166534;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fbMemberTag {
  background: #f0f9ff;
  color: #0369a1;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #bae6fd;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fbPhoneTag {
  background: #faf5ff;
  color: #7e22ce;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #e9d5ff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fbStatsBar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.fbStatItem {
  text-align: center;
  flex: 1;
}
.fbStatItem:not(:last-child) {
  border-left: 1px solid var(--border);
}
.fbStatNum {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  display: block;
}
.fbStatLabel {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.fbActionsGrid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fbBtnAction {
  flex: 1;
  min-width: 130px;
  height: 42px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.fbBtnAction.primary {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  box-shadow: 0 3px 10px rgba(2,132,199,0.3);
}
.fbBtnAction.whatsapp {
  background: #25d366;
  color: #fff;
}
.fbBtnAction.chat {
  background: linear-gradient(135deg, #0d9488, #059669);
  color: #fff;
  box-shadow: 0 3px 10px rgba(13,148,136,0.3);
}
.fbBtnAction.edit {
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.fbTabsBar {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 14px;
}
.fbTabBtn {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.fbTabBtn.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
}

/* 👥 تنسيقات كروت المتابعين */
.followerUserRow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .2s ease;
}
.followerUserRow:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.followerAvatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  overflow: hidden !important;
  flex: 0 0 44px !important;
}
.followerAvatar img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.followerInfo {
  flex: 1;
  min-width: 0;
}
.followerName {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.followerUsername {
  font-size: 12px;
  color: #166534;
  font-weight: 700;
  direction: ltr;
  text-align: right;
}

/* ========================================================
   💬 ثيم المحادثات الفاخر بتصميم Instagram & Messenger
   ======================================================== */
.inboxRow {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.inboxRow:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2,132,199,0.1);
}
.inboxAvatar {
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  flex: 0 0 auto;
  border: 2px solid var(--border);
  overflow: hidden;
}
.inboxAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* فقاعات الشات الفاخرة مثل إنستغرام */
#chatMessagesBox {
  background: #f8fafc !important;
  padding: 18px 16px !important;
  gap: 12px !important;
}
.chatBubble {
  max-width: 78% !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.chatBubble.outgoing {
  align-self: flex-start !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
.chatBubble.incoming {
  align-self: flex-end !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-bottom-left-radius: 4px !important;
}
.chatBubble.incoming,
.chatBubble.incoming span,
.chatBubble.incoming div,
.chatBubble.incoming p {
  color: #0f172a !important;
}
.chatBubble.incoming .chatTime {
  color: #64748b !important;
  opacity: 1 !important;
}
.chatBubble .chatTime {
  font-size: 10.5px !important;
  opacity: 0.8 !important;
  margin-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

@keyframes pulseRed {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   📱 تصميم إعلانات البروفايل على نمط فيسبوك الأنيق
   ============================================ */
.fbFeedContainer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;
  margin: 12px auto 30px;
  padding: 0 2px;
}
.fbPostCard {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.fbPostCard:active {
  transform: scale(0.99);
}
.fbPostHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fbPostAuthor {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.fbPostAuthorAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  overflow: hidden;
  flex: 0 0 auto;
}
.fbPostAuthorAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fbPostAuthorName {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fbPostMemberTag {
  font-size: 10.5px;
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 800;
}
.fbPostMetaTime {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.fbPostPriceBadge {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
html.dark-mode .fbPostPriceBadge {
  background: #064e3b;
  color: #6ee7b7;
  border-color: #047857;
}
.fbPostText {
  margin-bottom: 10px;
}
.fbPostTitle {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.fbPostDesc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.fbPostMediaWrap {
  width: 100%;
  height: 260px;
  max-height: 290px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  position: relative;
  margin-bottom: 12px;
}
@media (min-width: 600px) {
  .fbPostMediaWrap {
    height: 330px;
    max-height: 370px;
  }
}
html.dark-mode .fbPostMediaWrap {
  background: #0b1120 !important;
}
.fbPostMediaWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fbPostImgCount {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.fbPostActions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.fbPostActBtn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.fbPostActBtn.primary {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.fbPostActBtn.wa {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.fbPostActBtn.chat {
  background: #f8fafc;
  color: var(--text);
  border: 1px solid var(--border);
}
.fbPostActBtn:hover {
  filter: brightness(0.96);
}
html.dark-mode .fbPostActBtn.primary {
  background: #082f49;
  color: #38bdf8;
  border-color: #0369a1;
}
html.dark-mode .fbPostActBtn.wa {
  background: #052e16;
  color: #4ade80;
  border-color: #15803d;
}
html.dark-mode .fbPostActBtn.chat {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

/* ============================================
   👤 بطاقات البحث عن الأشخاص والحسابات
   ============================================ */
.searchUsersBanner {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.searchUsersBanner .subTitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.searchUserCard {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
}
.searchUserCard:last-child {
  margin-bottom: 0;
}
.searchUserCard:hover {
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56,189,248,0.12);
}
.sucAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  flex: 0 0 auto;
  overflow: hidden;
}
.sucAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sucDetails {
  flex: 1;
  min-width: 0;
}
.sucName {
  font-weight: 900;
  font-size: 14.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sucMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.sucMeta span:first-child {
  color: #0284c7;
  font-weight: 700;
}
.sucBtn {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
  transition: all 0.15s ease;
  font-family: inherit;
}
.searchUserCard:hover .sucBtn {
  background: #0284c7;
  color: #fff;
}
html.dark-mode .searchUserCard {
  background: var(--card);
}
html.dark-mode .sucBtn {
  background: #0c2942;
  color: #38bdf8;
  border-color: #1c3a5c;
}
html.dark-mode .searchUserCard:hover .sucBtn {
  background: #38bdf8;
  color: #0c2942;
}

/* ============================================
   🌄 غلاف الملف الشخصي والأيقونات التفاعلية
   ============================================ */
.fbCoverImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.fbCoverEditBtn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .2s ease;
  font-family: inherit;
}
.fbCoverEditBtn:hover {
  background: rgba(2, 132, 199, 0.9);
  border-color: #38bdf8;
}
.fbAvatarEditBadge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0284c7;
  color: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 4;
}


/* 🔒 تثبيت لون الخط الأسود والخلفية البيضاء في الشات لمنع أي شفافية على كل الهواتف */
#chatMessageInput {
  background: #ffffff !important;
  color: #0f172a !important;
}
#chatMessageInput::placeholder {
  color: #94a3b8 !important;
}


/* ========================================================
   💎 تصميم الشات الفاخر والعصري (Luxury Modern Chat UI)
   ======================================================== */
.chatAttachBtn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
.chatAttachBtn:active {
  transform: scale(0.92) !important;
}
.chatAttachBtn.luxuryCam {
  background: #f0f9ff !important;
  border: 1.5px solid #bae6fd !important;
  color: #0284c7 !important;
}
.chatAttachBtn.luxuryCam:hover {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 4px 12px rgba(2,132,199,0.18) !important;
}
.chatAttachBtn.luxuryPhone {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  color: #16a34a !important;
}
.chatAttachBtn.luxuryPhone:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  box-shadow: 0 4px 12px rgba(22,163,74,0.18) !important;
}

.chatHeaderIconBtn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
.chatHeaderIconBtn:active {
  transform: scale(0.92) !important;
}
.chatHeaderIconBtn.call {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border-color: #bbf7d0 !important;
}
.chatHeaderIconBtn.call:hover {
  background: #dcfce7 !important;
  box-shadow: 0 4px 10px rgba(22,163,74,0.15) !important;
}
.chatHeaderIconBtn.del {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border-color: #fecdd3 !important;
}
.chatHeaderIconBtn.del:hover {
  background: #fee2e2 !important;
  box-shadow: 0 4px 10px rgba(239,68,68,0.15) !important;
}
.chatHeaderIconBtn.del.active {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}
.chatHeaderIconBtn.warn {
  background: #fffbeb !important;
  color: #f59e0b !important;
  border-color: #fde68a !important;
}
.chatHeaderIconBtn.warn:hover {
  background: #fef3c7 !important;
}

#chatMessageInput:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

#userChatOverlay {
  z-index: 6000 !important;
}

#authOverlay {
  z-index: 7000 !important;
}

.fbPostActBtn * {
  pointer-events: none;
}

.fbBtnAction * {
  pointer-events: none;
}


/* ==========================================================================
   🌙 الوضع الليلي الفائق: توحيد الخط الأبيض الفاتح النقي في كل أرجاء المنصة
   ========================================================================== */

html.dark-mode {
  --bg: #0b0f19 !important;
  --card: #151d2e !important;
  --text: #ffffff !important;
  --muted: #cbd5e1 !important;
  --border: #232f46 !important;
  --teal-light: #0e2a47 !important;
  --amber-light: #3a2f11 !important;
}

html.dark-mode,
html.dark-mode body {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
}

/* 🌟 نصوص وعناوين بيضاء ناصعة 100% ومريحة للعين */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode strong,
html.dark-mode b,
html.dark-mode label,
html.dark-mode .screenHeader h3,
html.dark-mode .sectionTitle,
html.dark-mode .sheet h3,
html.dark-mode .screenTitle {
  color: #ffffff !important;
}

/* نصوص الشروحات والتواريخ أبيض فضي فاتح ومقروء جداً */
html.dark-mode .muted,
html.dark-mode small,
html.dark-mode .charCount,
html.dark-mode .meta,
html.dark-mode .time,
html.dark-mode .storeMeta,
html.dark-mode .storeMetaLine,
html.dark-mode .card .meta,
html.dark-mode .card .time,
html.dark-mode .fbPostMetaTime,
html.dark-mode .fbPostDesc,
html.dark-mode .fbStatLabel {
  color: #cbd5e1 !important;
}

/* 💬 1. الشات والرسائل في الوضع الليلي */
html.dark-mode #userChatOverlay {
  background: #0b0f19 !important;
}
html.dark-mode #chatMessagesBox {
  background: #0b0f19 !important;
}
html.dark-mode #chatHeaderBar {
  background: #151d2e !important;
  border-bottom: 1.5px solid #232f46 !important;
}
html.dark-mode #chatTargetName {
  color: #ffffff !important;
}
html.dark-mode .chatBubble.incoming {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode .chatBubble.incoming * {
  color: #ffffff !important;
}
html.dark-mode .chatBubble.incoming .chatTime {
  color: #94a3b8 !important;
}
html.dark-mode .chatBubble.incoming a {
  color: #38bdf8 !important;
}
html.dark-mode .chatBubble.outgoing {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
}
html.dark-mode .chatBubble.outgoing * {
  color: #ffffff !important;
}
html.dark-mode .chatBubble.outgoing .chatTime {
  color: #e0f2fe !important;
}
html.dark-mode #chatInputArea {
  background: #151d2e !important;
  border-top: 1.5px solid #232f46 !important;
}
html.dark-mode #chatMessageInput {
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.dark-mode #chatMessageInput::placeholder {
  color: #94a3b8 !important;
}
html.dark-mode #btnChatVoiceRecord {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode .chatAttachBtn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}
html.dark-mode .chatQuickRepliesBar {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .chatQuickChip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.dark-mode #chatPostContextBar {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode #chatContextTitle {
  color: #ffffff !important;
}
html.dark-mode #chatContextPrice {
  color: #38bdf8 !important;
}

/* 🏦 2. التحويل المصرفي وشحن الرصيد والمحفظة والدفع المصرفي في الوضع الليلي */
html.dark-mode #rechargeWalletOverlay .sheet,
html.dark-mode #myWalletHistoryOverlay .sheet {
  background: #151d2e !important;
  color: #ffffff !important;
  border: 1.5px solid #232f46 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

/* عناوين ونصوص نافذة الشحن والمحفظة */
html.dark-mode #rechargeWalletOverlay h3,
html.dark-mode #rechargeWalletOverlay label,
html.dark-mode #myWalletHistoryOverlay h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* تبويبات طرق الشحن في الوضع الليلي */
html.dark-mode .walletTabNav .filterBtn {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1.5px solid #334155 !important;
  font-weight: 800 !important;
}
html.dark-mode .walletTabNav .filterBtn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45) !important;
}

/* بطاقة التحويل المصرفي الإرشادية الخضراء */
html.dark-mode #rechargeTabCardBox > div:first-child,
html.dark-mode #rechargeTabTransferBox > div:first-child,
html.dark-mode .rechargeTransferBanner {
  background: #064e3b !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 14px !important;
}
html.dark-mode #rechargeTabCardBox > div:first-child *,
html.dark-mode #rechargeTabTransferBox > div:first-child *,
html.dark-mode .rechargeTransferBanner * {
  color: #ffffff !important;
}
html.dark-mode .rechargeTransferBannerTitle {
  color: #4ade80 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}
html.dark-mode .rechargeTransferBannerDesc,
html.dark-mode .rechargeTransferBannerDesc b {
  color: #ffffff !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}

/* بطاقة رقم واتساب الإدارة للشحن */
html.dark-mode .rechargeTransferCard,
html.dark-mode #rechargeTabTransferBox [style*="background:var(--card)"],
html.dark-mode #rechargeTabTransferBox [style*="background: var(--card)"] {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  border-radius: 12px !important;
}
html.dark-mode .rechargeTransferLabel,
html.dark-mode #rechargeTabTransferBox [style*="color:var(--muted)"],
html.dark-mode #rechargeTabCardBox [style*="color:var(--muted)"] {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
html.dark-mode #adminWhatsappNumberText,
html.dark-mode .rechargeTransferNumber {
  color: #4ade80 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
html.dark-mode .rechargeCopyBtn,
html.dark-mode #rechargeTabTransferBox .btnGhost {
  background: #0f172a !important;
  border: 1.5px solid #475569 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
html.dark-mode .rechargeCopyBtn:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}
html.dark-mode .rechargeCloseBtn,
html.dark-mode #rechargeWalletOverlay .btnGhost[onclick*="closeRechargeModal"],
html.dark-mode #myWalletHistoryOverlay .btnGhost[onclick*="closeMyWalletHistory"] {
  color: #e2e8f0 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* حقل كود كارت الشحن */
html.dark-mode #walletCardCodeInput {
  background: #0f172a !important;
  border: 2px solid #3b82f6 !important;
  color: #ffffff !important;
}

/* بطاقة المحفظة للمستخدم */
html.dark-mode .userWalletCard {
  background: linear-gradient(135deg, #0c2942, #131a28) !important;
  border: 1.5px solid #1c3a5c !important;
  color: #ffffff !important;
}
html.dark-mode .userWalletCard .uwcTitle,
html.dark-mode .userWalletCard .uwcNum {
  color: #ffffff !important;
}
html.dark-mode .userWalletCard .uwcSubtitle,
html.dark-mode .userWalletCard .uwcLabel {
  color: #cbd5e1 !important;
}
html.dark-mode .historyTxItem {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}
html.dark-mode .historyTxItem * {
  color: #f8fafc !important;
}

/* 💳 2.2 بيانات الدفع والتحويل المصرفي في صفحة المتجر والإعلانات */
html.dark-mode .storeBankInfoCard,
html.dark-mode [style*="linear-gradient(135deg,#f0f9ff,#e0f2fe)"],
html.dark-mode [style*="linear-gradient(135deg, #f0f9ff, #e0f2fe)"] {
  background: #0f172a !important;
  border: 2px solid #0284c7 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
}
html.dark-mode .storeBankTitle,
html.dark-mode [style*="color:#0369a1;font-size:14px"] {
  color: #38bdf8 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
html.dark-mode .storeBankSubtitle,
html.dark-mode [style*="color:#0369a1;margin-bottom:12px"],
html.dark-mode [style*="color: #0369a1; margin-bottom: 12px"] {
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
}
html.dark-mode .storeBankRow,
html.dark-mode .storeBankInfoCard > div[style*="background:#fff"],
html.dark-mode .storeBankInfoCard > div[style*="background: #fff"],
html.dark-mode [style*="linear-gradient(135deg,#f0f9ff,#e0f2fe)"] > div[style*="background:#fff"],
html.dark-mode [style*="linear-gradient(135deg,#f0f9ff,#e0f2fe)"] > div[style*="background: #fff"] {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
}
html.dark-mode .storeBankLabel,
html.dark-mode .storeBankInfoCard .storeBankLabel,
html.dark-mode [style*="linear-gradient(135deg,#f0f9ff,#e0f2fe)"] [style*="color:var(--muted)"] {
  color: #cbd5e1 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
html.dark-mode .storeBankVal {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
}
html.dark-mode .storeBankIban,
html.dark-mode .storeBankAcc {
  color: #38bdf8 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}
html.dark-mode .storeBankCopyBtn {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* أزرار واصل التحويل المصرفي في المطاعم والإعلانات */
html.dark-mode .receiptWaBtn,
html.dark-mode button[onclick*="sendReceiptToSeller"] {
  background: #0c4a6e !important;
  border: 1.5px dashed #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
html.dark-mode .receiptWaBtn:hover,
html.dark-mode button[onclick*="sendReceiptToSeller"]:hover {
  background: #075985 !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
}

/* حقول بيانات المصرف عند إنشاء أو تعديل متجر */
html.dark-mode #openStoreOverlay [style*="background:#f0f9ff"],
html.dark-mode #editStoreOverlay [style*="background:#f0f9ff"] {
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode #openStoreOverlay [style*="background:#f0f9ff"] > div > div,
html.dark-mode #editStoreOverlay [style*="background:#f0f9ff"] > div > div {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* 🏪 3. صفحة المتاجر في الوضع الليلي */
html.dark-mode #storesScreen,
html.dark-mode #storeScreen {
  background: #0b0f19 !important;
  color: #ffffff !important;
}
html.dark-mode #storesScreenTitle,
html.dark-mode #storeScreenTitle {
  color: #ffffff !important;
}
html.dark-mode #storeSearch {
  background: #151d2e !important;
  border: 1.5px solid #232f46 !important;
  color: #ffffff !important;
}
html.dark-mode #storeSearch::placeholder {
  color: #94a3b8 !important;
}
html.dark-mode .storeCard {
  background: #151d2e !important;
  border: 1.5px solid #232f46 !important;
}
html.dark-mode .storeCard .storeName {
  color: #ffffff !important;
}
html.dark-mode .storeCard .storeMeta {
  color: #cbd5e1 !important;
}
html.dark-mode .storeCard .storeStats {
  color: #38bdf8 !important;
}
html.dark-mode .storeTitle {
  color: #ffffff !important;
}
html.dark-mode .storeMetaLine {
  color: #cbd5e1 !important;
}
html.dark-mode .storeDesc {
  background: #151d2e !important;
  border: 1.5px solid #232f46 !important;
  color: #f8fafc !important;
}
html.dark-mode .storeHeader .logoWrap {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode #storeSubCategoryTags button {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode #openStoreOverlay .sheet {
  background: #151d2e !important;
  color: #ffffff !important;
}
html.dark-mode #openStoreRegularNotice {
  background: #064e3b !important;
  color: #ffffff !important;
}
html.dark-mode #adminStoreCreationNotice {
  background: #3a2f11 !important;
  color: #fde047 !important;
  border-color: #5a4a1a !important;
}

/* 👤 4. الملف الشخصي في الوضع الليلي */
html.dark-mode .fbProfileCard {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .fbUserName {
  color: #ffffff !important;
}
html.dark-mode .fbUsernameTag,
html.dark-mode .fbMemberTag {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
html.dark-mode .fbStatNum {
  color: #ffffff !important;
}
html.dark-mode .fbStatLabel {
  color: #cbd5e1 !important;
}
html.dark-mode .fbPostCard {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .fbPostAuthorName {
  color: #ffffff !important;
}
html.dark-mode .fbPostTitle {
  color: #ffffff !important;
}
html.dark-mode .fbPostDesc {
  color: #cbd5e1 !important;
}
html.dark-mode .fbPostMetaTime {
  color: #94a3b8 !important;
}
html.dark-mode .fbPostPriceBadge {
  background: #0e2a47 !important;
  color: #38bdf8 !important;
}
html.dark-mode .fbPostActBtn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* 📑 5. حقول الإدخال والاختيار في كل مكان */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode textarea,
html.dark-mode select {
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  color: #ffffff !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

/* 👤 تنسيق خانات البحث عن الأشخاص في القائمة المنسدلة */
.sdUserItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
.sdUserItem:hover {
  background: var(--bg);
}
.sdUserAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex: 0 0 36px;
  overflow: hidden;
}
.sdUserAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdUserTag {
  font-size: 12px;
  color: #0284c7;
  font-weight: 700;
  margin-right: 6px;
  direction: ltr;
  display: inline-block;
}
.sdMemberTag {
  font-size: 10.5px;
  background: #f1f5f9;
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 700;
}
.sdUserBadge {
  font-size: 11px;
  color: #0284c7;
  background: #e0f2fe;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}
.sdUserAction {
  font-size: 11.5px;
  color: #0284c7;
  font-weight: 800;
  white-space: nowrap;
}

/* الوضع الليلي لخانات الأشخاص في البحث */
html.dark-mode .sdUserItem:hover {
  background: #1e293b !important;
}
html.dark-mode .sdUserTag {
  color: #38bdf8 !important;
}
html.dark-mode .sdMemberTag {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
html.dark-mode .sdUserBadge {
  background: #0c4a6e !important;
  color: #38bdf8 !important;
}
html.dark-mode .sdUserAction {
  color: #38bdf8 !important;
}

/* ==========================================================================
   📸 شريط الستوريات (Stories Bar)
   ========================================================================== */
.storiesBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 12px;
}
.storiesBar::-webkit-scrollbar {
  display: none;
}
.storyBubble {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex: 0 0 auto;
  user-select: none;
}
.storyRing {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #0284c7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.storyBubble:hover .storyRing {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.storyRing.myStoryRing {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}
.storyAvatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid var(--card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.storyAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storyAddBadge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: #0284c7;
  color: #fff;
  border-radius: 50%;
  border: 2px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.45);
}
.storyName {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* زر إضافة فيديو في شاشة إضافة إعلان */
.videoAddTile {
  background: #f0fdf4;
  border: 2px dashed #22c55e;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #166534;
  transition: all 0.2s ease;
  text-align: center;
}
.videoAddTile:hover {
  background: #dcfce7;
  border-color: #16a34a;
}
html.dark-mode .videoAddTile {
  background: #064e3b !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   🎥 مشغل الريلز والستوري (Reels Viewer Overlay)
   ========================================================================== */
.reelsOverlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reelsOverlay.hidden {
  display: none !important;
}
.reelsContainer {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.reelsVideoWrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  cursor: pointer;
}
.reelsMainVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reelsPlayPauseNotice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: popIn 0.2s ease;
}
.reelsDoubleTapHeart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  font-size: 80px;
  pointer-events: none;
  animation: heartBurst 0.6s ease forwards;
}
@keyframes heartBurst {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* الشريط العلوي */
.reelsTopBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index: 10;
}
.reelsTopBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.reelsTopBtn:hover {
  transform: scale(1.08);
}
.reelsHeaderTitle {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* شارة الانتقال التلقائي بين الحسابات */
.reelsAccountSwitchNotice {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(2, 132, 199, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  z-index: 15;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
  animation: fadeInDown 0.3s ease;
}

/* أزرار التفاعل الجانبية (TikTok Style) */
.reelsSideActions {
  position: absolute;
  bottom: 120px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 10;
}
.reelsProfileWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}
.reelsAvatarRing {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  cursor: pointer;
  background: #1e293b;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.reelsAvatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.reelsAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* زر المتابعة الموجب (+) أسفل الأفاتار */
.reelsFollowPlusBtn {
  position: absolute;
  bottom: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.6);
}
.reelsFollowPlusBtn.following {
  background: #22c55e;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.6);
  transform: scale(0.9);
}

.reelsActionBtn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: #fff;
  padding: 0;
}
.reelsActionIcon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.reelsActionBtn:hover .reelsActionIcon {
  transform: scale(1.1);
}
.reelsActionCount {
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.reelsWaBtn .reelsActionIcon {
  background: rgba(37, 211, 102, 0.7);
  border-color: #25d366;
}

/* الكرت السفلي الشفاف للإعلان */
.reelsBottomCard {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
  color: #fff;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reelsSellerInfo {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.reelsSellerName {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}
.reelsSellerBadge {
  font-size: 10.5px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid #38bdf8;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 800;
}
.reelsPostTitle {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.reelsPriceAndCity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reelsPriceTag {
  font-size: 16px;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.reelsCityTag {
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.reelsCardActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.reelsMainCTA {
  flex: 1;
  background: #25d366;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: transform 0.15s ease;
}
.reelsMainCTA:hover {
  transform: translateY(-1px);
}
.reelsSecondaryCTA {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
}

/* أسهم التنقل على أجهزة الكمبيوتر */
.reelsNavArrows {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.reelsArrowBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reelsArrowBtn:hover {
  background: #0284c7;
  border-color: #38bdf8;
  transform: scale(1.1);
}

/* درج التعليقات السريع المنبثق للريلز والستوري */
.reelsCommentsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 24;
  animation: fadeIn 0.2s ease;
}
.reelsCommentsBackdrop.hidden {
  display: none !important;
}

.reelsCommentsSheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  max-height: 80vh;
  background: var(--card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.65);
  animation: slideUp 0.25s ease;
  overflow: hidden;
}
.reelsCommentsSheet.hidden {
  display: none !important;
}
.reelsCommentsHeader {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--card);
}
.reelsCommentsList {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reelsCommentItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.reelsCommentAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 36px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.reelsCommentAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reelsCommentContent {
  flex: 1;
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  min-width: 0;
}
.reelsCommentHeaderLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
  gap: 6px;
}
.reelsCommentAuthor {
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.reelsCommentTime {
  font-size: 10.5px;
  font-weight: normal;
  color: var(--muted);
  flex-shrink: 0;
}
.reelsCommentDelBtn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1;
}
.reelsCommentDelBtn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}
.reelsCommentText {
  color: var(--text);
  line-height: 1.45;
  font-size: 13px;
  word-break: break-word;
  white-space: pre-wrap;
}
.reelsCommentInputBox {
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--card);
  flex-shrink: 0;
}
.reelsCommentInputBox input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}
.reelsCommentInputBox input:focus {
  border-color: var(--teal);
}

/* ==========================================================================
   🔔 مركز الإشعارات وقائمة المتابعين
   ========================================================================== */
.notifItem {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.notifItem:hover {
  background: var(--bg);
  border-color: #38bdf8;
  transform: translateY(-1px);
}
.notifItem.unread {
  background: rgba(2, 132, 199, 0.05);
  border-color: rgba(2, 132, 199, 0.3);
}
.notifIconWrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 42px;
  background: #f0f9ff;
  color: #0284c7;
}
.notifIconWrap.follow {
  background: #eff6ff;
  color: #2563eb;
}
.notifIconWrap.like {
  background: #fdf2f8;
  color: #ec4899;
}
.notifIconWrap.comment {
  background: #f0fdf4;
  color: #16a34a;
}
.notifBody {
  flex: 1;
  min-width: 0;
}
.notifTitle {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.notifText {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}
.notifTime {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.notifUnreadDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  position: absolute;
  top: 14px;
  left: 14px;
}

/* تنسيق قائمة المتابعين */
.followerUserRow {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}
.followerUserRow:hover {
  border-color: #0284c7;
}
.followerAvatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden !important;
  flex: 0 0 44px !important;
}
.followerAvatar img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.followerInfo {
  flex: 1;
  min-width: 0;
}
.followerName {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.followerUsername {
  font-size: 11.5px;
  color: #0284c7;
  font-weight: 700;
  direction: ltr;
  text-align: right;
}

/* Dark mode */
html.dark-mode .notifItem {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .notifItem.unread {
  background: #1a2538 !important;
  border-color: #38bdf8 !important;
}
html.dark-mode .notifTitle {
  color: #ffffff !important;
}
html.dark-mode .notifText {
  color: #cbd5e1 !important;
}
html.dark-mode .notifIconWrap {
  background: #1e293b !important;
}
html.dark-mode .followerUserRow {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .followerName {
  color: #ffffff !important;
}

/* بطاقة الإشعارات الخارجية المدمجة داخل مركز الإشعارات */
.externalPushNotifBanner {
  background: linear-gradient(135deg, #f0fdf4, #e0f2fe);
  border: 1.5px solid #38bdf8;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.epnContent {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.epnIcon {
  font-size: 24px;
  flex: 0 0 auto;
}
.epnTextWrap {
  flex: 1;
  min-width: 0;
}
.epnTitle {
  font-size: 13px;
  font-weight: 900;
  color: #0369a1;
  margin-bottom: 2px;
}
.epnDesc {
  font-size: 11.5px;
  color: #0369a1;
  line-height: 1.4;
  opacity: 0.9;
}
.epnActionBtn {
  background: #0284c7;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
  transition: transform 0.15s ease;
}
.epnActionBtn:hover {
  transform: scale(1.04);
}
.epnActionBtn.active {
  background: #16a34a;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

/* Dark mode */
html.dark-mode .externalPushNotifBanner {
  background: #0f172a !important;
  border-color: #0284c7 !important;
}
html.dark-mode .epnTitle {
  color: #38bdf8 !important;
}
html.dark-mode .epnDesc {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   🔄 مؤشر السحب للتحديث للآيفون والأندرويد (Pull to Refresh)
   ========================================================================== */
.pullToRefreshIndicator {
  position: fixed;
  top: -65px;
  left: 0;
  right: 0;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  z-index: 999999;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  opacity: 0;
}
.pullToRefreshIndicator.visible {
  opacity: 1;
}
.ptrIcon {
  font-size: 20px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.ptrText {
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-dark);
}
.pullToRefreshIndicator.refreshing .ptrIcon {
  animation: ptrSpin 0.7s linear infinite;
}
@keyframes ptrSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html.dark-mode .pullToRefreshIndicator {
  background: #151d2e !important;
  border-color: #232f46 !important;
}
html.dark-mode .ptrText {
  color: #38bdf8 !important;
}


/* عداد المنتجات والإعلانات داخل مربعات الأقسام */
.catBox .catCount {
  font-size: 9.5px;
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: -0.2px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.catBox .catCount.zero {
  color: #94a3b8;
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.85;
}
html.dark-mode .catBox .catCount {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}
html.dark-mode .catBox .catCount.zero {
  color: #64748b;
  background: rgba(100, 116, 139, 0.12);
  border-color: rgba(100, 116, 139, 0.2);
}


.catBox.allBox .catCount {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}
.catBox.allBox .catCount.zero {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}


/* قسم الإعلانات المقترحة في الصفحة الرئيسية */
.suggestedCard {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.suggestedCard:active {
  transform: scale(0.97);
}
html.dark-mode .suggestedCard {
  background: var(--card);
  border-color: var(--border);
}


/* شريط الإعلانات المقترحة الأفقي المدمج */
.suggestedScroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px 8px;
}
.suggestedScroll::-webkit-scrollbar {
  display: none;
}
.suggestedItem {
  flex: 0 0 115px;
  max-width: 115px;
  background: var(--card, #fff);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.suggestedItem:active {
  transform: scale(0.96);
}
.suggestedItem .sugThumbWrap {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--bg-light, #f1f5f9);
  overflow: hidden;
  position: relative;
}
.suggestedItem .sugThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.suggestedItem .sugInfo {
  padding: 6px 7px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.suggestedItem .sugTitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.suggestedItem .sugPrice {
  font-size: 11px;
  font-weight: 800;
  color: var(--teal, #0d9488);
}
.suggestedItem .sugCity {
  font-size: 9.5px;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestedItem .sugFeatBadge {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  background: #f59e0b;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
html.dark-mode .suggestedItem {
  background: var(--card);
  border-color: var(--border);
}


/* 📍 أنماط الأشخاص والإعلانات القريبة (GPS) */
.nearbyUsersScroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px 8px;
}
.nearbyUsersScroll::-webkit-scrollbar {
  display: none;
}
.nearbyUserCard {
  flex: 0 0 130px;
  max-width: 130px;
  background: var(--card, #fff);
  border-radius: 14px;
  padding: 12px 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.nearbyUserCard:active {
  transform: scale(0.96);
}
.nearbyUserAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--teal-light, #ccfbf1);
  color: var(--teal-dark, #0f766e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 6px;
  position: relative;
}
.nearbyUserName {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}
.nearbyDistBadge {
  font-size: 9.5px;
  font-weight: 800;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.nearbyUserSub {
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nearbyUserAction {
  margin-top: 6px;
  width: 100%;
  padding: 4px 6px;
  background: var(--primary, #0284c7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.gpsPromptCard {
  margin: 4px 14px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px dashed #38bdf8;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
html.dark-mode .nearbyUserCard {
  background: var(--card);
  border-color: var(--border);
}
html.dark-mode .nearbyUserAvatar {
  border-color: var(--card);
}
html.dark-mode .nearbyDistBadge {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}
html.dark-mode .gpsPromptCard {
  background: linear-gradient(135deg, #0c2942, #131a28);
  border-color: #0284c7;
}

/* خيارات مكان ظهور الفيديو */
.videoPlacementChoice:hover { filter: brightness(0.97); }
.videoPlacementChoice:active { transform: scale(0.97); }
html.dark-mode .videoPlacementChoice { background: var(--card) !important; border-color: var(--border) !important; }
html.dark-mode .videoPlacementChoice.active { border-color: var(--teal) !important; background: rgba(13, 148, 136, 0.18) !important; }

/* 🎬 ستايل زر الستوري النشط والمميز */
.storyRing.activeStoryRing {
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #0284c7) !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
  animation: pulseStoryRing 2.2s infinite;
}
@keyframes pulseStoryRing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}


/* ========================================================
   📱 تحسين تجربة الميكروفون والدردشة الاحترافية على الهواتف
   ======================================================== */
#chatInputArea {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 7px;
  width: 100%;
  box-sizing: border-box;
}

#btnChatVoiceRecord {
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), background .2s, color .2s;
  user-select: none;
  -webkit-user-select: none;
}
#btnChatVoiceRecord:active {
  transform: scale(0.92);
}

#btnSendUserChat {
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}
#btnSendUserChat:active {
  transform: scale(0.92);
}

.voiceRecordingActive {
  animation: pulseRecordingActive 0.9s infinite alternate !important;
}

@keyframes pulseRecordingActive {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  100% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@media screen and (max-width: 480px) {
  #chatInputArea {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 5px !important;
  }
  #chatNormalAttachBtns {
    gap: 4px !important;
  }
  .chatAttachBtn {
    width: 35px !important;
    height: 35px !important;
    font-size: 14.5px !important;
    flex: 0 0 35px !important;
  }
  #chatMessageInput {
    height: 40px !important;
    border-radius: 20px !important;
    padding: 0 12px !important;
    font-size: 14.5px !important;
  }
  #btnChatVoiceRecord, #btnSendUserChat {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    font-size: 17px !important;
  }
  #chatVoiceRecordingBar {
    height: 40px !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    gap: 7px !important;
  }
  .voiceSearchBtn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    flex: 0 0 32px !important;
  }
}

#btnChatAction {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}
#btnChatAction:active {
  transform: scale(0.92);
}
html.dark-mode #btnChatAction {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}


/* ============================================================
   🖨️ PRINT MEDIA STYLES FOR STORE QR STAND
   ============================================================ */
@media print {
  body * {
    visibility: hidden !important;
  }
  #printableStoreQrModalOverlay,
  #printableStoreQrModalOverlay * {
    visibility: visible !important;
  }
  #printableStoreQrModalOverlay {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  #printableQrStandArea {
    box-shadow: none !important;
    border: 2px solid #000000 !important;
    max-width: 480px !important;
    width: 100% !important;
    padding: 30px !important;
  }
  #printableQrStandArea button,
  #printableQrStandArea a {
    display: none !important;
  }
}


/* ============================================================
   🖤 STORE LUXURY DESIGN SYSTEM (LIGHT & DARK ADAPTIVE)
   ============================================================ */
.storeLuxCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.storeLuxCard:active {
  transform: scale(0.985);
}
html.dark-mode .storeLuxCard {
  background: #131b2e;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.storeLuxCoverGrad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(0,0,0,0.2) 100%);
}
html.dark-mode .storeLuxCoverGrad {
  background: linear-gradient(to top, #131b2e 0%, rgba(0,0,0,0.3) 100%);
}

.storeLuxName {
  font-size: 18px;
  font-weight: 900;
  color: var(--text) !important;
  margin-bottom: 5px;
  line-height: 1.35;
}
html.dark-mode .storeLuxName {
  color: #ffffff !important;
}

.storeLuxPill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
html.dark-mode .storeLuxPill {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.12);
}

.storeLuxVisitBtn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s ease;
}
html.dark-mode .storeLuxVisitBtn {
  background: #ffffff;
  color: #000000;
}

.storeLuxStripItem {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
html.dark-mode .storeLuxStripItem {
  background: #1a243a;
  border-color: rgba(255, 255, 255, 0.08);
}

.storeLuxTabsTrack {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px;
  gap: 4px;
  overflow-x: auto;
  margin: 16px 0;
}
html.dark-mode .storeLuxTabsTrack {
  background: #131b2e;
  border-color: rgba(255, 255, 255, 0.1);
}

.storeLuxTabBtn {
  flex: 1;
  min-width: 110px;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
  font-family: inherit;
}
.storeLuxTabBtn.active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}
html.dark-mode .storeLuxTabBtn.active {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.storeLuxPane {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
html.dark-mode .storeLuxPane {
  background: #131b2e;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.storeLuxPaneTitle {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.storeLuxNumberCard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
html.dark-mode .storeLuxNumberCard {
  background: #1a243a;
  border-color: rgba(255, 255, 255, 0.08);
}

.categoryChipLux {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.categoryChipLux.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
html.dark-mode .categoryChipLux {
  background: #131b2e;
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .categoryChipLux.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.storeLuxHeroTitle {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}
html.dark-mode .storeLuxHeroTitle {
  color: #ffffff;
}


/* ============================================================
   📱 SIDE DRAWER MENU SYSTEM (3 BARS MENU)
   ============================================================ */
.sideMenuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
.sideMenuOverlay.open {
  opacity: 1;
  pointer-events: auto;
}
.sideMenuDrawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 320px;
  max-width: 86%;
  background: var(--card);
  color: var(--text);
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}
.sideMenuOverlay.open .sideMenuDrawer {
  transform: translateX(0);
}
.smdHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--card);
  border-bottom: 1.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.smdCloseBtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.smdCloseBtn:active {
  transform: scale(0.9);
}
.smdUserCard {
  margin: 14px 14px 8px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.smdUserCard:active {
  background: var(--card);
}
.smdAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
}
.smdAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smdList {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smdItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.smdItem:hover {
  background: var(--bg);
}
.smdItem:active {
  transform: scale(0.98);
}
.smdIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.smdContent {
  flex: 1;
  min-width: 0;
}
.smdTitle {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.smdDesc {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smdBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.smdArrow {
  font-size: 16px;
  color: var(--muted);
  font-weight: 800;
  margin-right: 2px;
}
.smdSwitch {
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #cbd5e1;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.smdSwitchKnob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 3px;
  right: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
html.dark-mode .smdSwitch {
  background: var(--teal);
}
html.dark-mode .smdSwitchKnob {
  transform: translateX(-18px);
}


/* ============================================
   منظومة طلباتي السابقة وتقييم الوجبات في المطاعم
   ============================================ */
.restTopHistoryCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  margin-bottom: 12px;
  position: relative;
  transition: all 0.2s ease;
}
html.dark-mode .restTopHistoryCard {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.restTopHistoryCard .rthHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
html.dark-mode .restTopHistoryCard .rthHeader {
  border-bottom-color: #334155;
}
.restTopHistoryCard .rthTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.restTopHistoryCard .rthBadge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
}
.restTopHistoryCard .rthTime {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.restTopHistoryCard .rthAllBtn {
  background: transparent;
  border: none;
  color: var(--teal-dark);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 6px;
  font-family: inherit;
}
html.dark-mode .restTopHistoryCard .rthAllBtn {
  color: #38bdf8;
}
.restTopHistoryCard .rthStoreRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.restTopHistoryCard .rthStoreName {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
}
.restTopHistoryCard .rthPrice {
  font-size: 14px;
  font-weight: 900;
  color: #16a34a;
}
.restTopHistoryCard .rthItemsSnippet {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.restTopHistoryCard .rthRatingPreview {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.08);
  padding: 4px 8px;
  border-radius: 8px;
  margin-bottom: 10px;
  color: #f59e0b;
  font-size: 12px;
}
.restTopHistoryCard .rthActionsRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rthBtn {
  padding: 7px 4px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.rthBtn:active {
  transform: scale(0.96);
}
.rthBtn.copy {
  background: var(--bg);
  color: var(--text);
}
.rthBtn.reorder {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}
html.dark-mode .rthBtn.reorder {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.3);
}
.rthBtn.rate {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}
html.dark-mode .rthBtn.rate {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.restTopPillBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.15s ease;
}
.restTopPillBar:active {
  transform: scale(0.98);
}
html.dark-mode .restTopPillBar {
  background: #1e293b;
  border-color: #334155;
}

/* بطاقات سجل الطلبيات داخل المودال */
.foodOrdersListWrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foodOrderCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
html.dark-mode .foodOrderCard {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.foodOrderCard .focHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
html.dark-mode .foodOrderCard .focHeader {
  border-bottom-color: #334155;
}
.foodOrderCard .focStoreName {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
}
.foodOrderCard .focDate {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.foStatusBadge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
}
.foStatusBadge.completed {
  background: #dcfce7;
  color: #166534;
}
html.dark-mode .foStatusBadge.completed {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}
.foStatusBadge.active {
  background: #fef3c7;
  color: #92400e;
}
html.dark-mode .foStatusBadge.active {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.foodOrderCard .focItemsList {
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html.dark-mode .foodOrderCard .focItemsList {
  background: #0f172a;
}
.foodOrderCard .focItemRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.foodOrderCard .focItemTitle {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}
.foodOrderCard .focItemQty {
  font-weight: 800;
  color: var(--teal-dark);
}
html.dark-mode .foodOrderCard .focItemQty {
  color: #38bdf8;
}
.foodOrderCard .focItemNote {
  color: var(--muted);
  font-size: 11px;
}
.foodOrderCard .focItemPrice {
  font-weight: 800;
  color: var(--text);
  margin-right: 8px;
}

.foodOrderCard .focSummaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 10px;
  color: var(--muted);
}
.foodOrderCard .focTotalPrice {
  font-size: 13.5px;
  color: var(--text);
}
.foodOrderCard .focTotalPrice strong {
  color: #16a34a;
  font-size: 15px;
}
html.dark-mode .foodOrderCard .focTotalPrice strong {
  color: #4ade80;
}

.focRatingBox {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 10px;
}
html.dark-mode .focRatingBox {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}
.focRatingBox .focRatingHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.focRatingBox .focRatingStars {
  color: #f59e0b;
  font-size: 13.5px;
  font-weight: 900;
}
.focRatingBox .focEditRatingBtn {
  background: none;
  border: none;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
html.dark-mode .focRatingBox .focEditRatingBtn {
  color: #38bdf8;
}
.focRatingBox .focRatingComment {
  font-size: 12px;
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  margin-top: 3px;
}
.focTagsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.focTagItem {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
}
html.dark-mode .focTagItem {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.25);
}

.foodOrderCard .focActionsRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.focBtn {
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
  transition: all 0.15s ease;
}
.focBtn:active {
  transform: scale(0.96);
}
.focBtnCopy {
  background: var(--bg);
  color: var(--text);
}
.focBtnReorder {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.focBtnReorder:hover {
  background: #15803d;
}
.focBtnRate {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}
.focBtnRate.isRated {
  background: #f8fafc;
  color: #b45309;
  border-color: #e2e8f0;
}
html.dark-mode .focBtnRate {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
html.dark-mode .focBtnRate.isRated {
  background: #0f172a;
  color: #fde68a;
  border-color: #334155;
}

/* نافذة تقييم الطلبية */
.forStoreCard {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
html.dark-mode .forStoreCard {
  background: #0f172a;
  border-color: #334155;
}
.forStoreName {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 2px;
}
.forOrderMeta {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.forItemsSnippet {
  font-size: 11.5px;
  color: var(--text);
  opacity: 0.85;
}
.forSectionTitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.forStarRow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
  direction: ltr;
}
.forStarBtn {
  background: none;
  border: none;
  font-size: 38px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
.forStarBtn:hover,
.forStarBtn.active {
  color: #f59e0b;
  transform: scale(1.15);
}
.forStarLabel {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #d97706;
  margin-bottom: 12px;
  min-height: 20px;
}
html.dark-mode .forStarLabel {
  color: #fbbf24;
}
.forTagsWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.forTagPill {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
html.dark-mode .forTagPill {
  background: #0f172a;
  border-color: #334155;
}
.forTagPill:hover {
  border-color: #f59e0b;
}
.forTagPill.selected {
  background: #fef3c7;
  color: #b45309;
  border-color: #f59e0b;
  font-weight: 800;
}
html.dark-mode .forTagPill.selected {
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
  border-color: #fbbf24;
}
.forTextarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 85px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 10px 12px;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}
html.dark-mode .forTextarea {
  background: #0f172a;
  border-color: #334155;
}
.forTextarea:focus {
  border-color: #16a34a;
}

/* إخفاء رقم النقاط نهائياً من الشريط العلوي الخارجي */
#pointsBadge,
.topbar #pointsBadge,
.topbarActions #pointsBadge,
.topbar .pointsBadge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}