:root {
  --bg: #f8fafc; --bg2: #ffffff; --bg3: #f1f5f9; --card: #ffffff;
  --border: rgba(0,0,0,0.1); --border2: rgba(0,0,0,0.15);
  --primary: #f97316; --primary-glow: rgba(249,115,22,0.25);
  --green: #22c55e; --green-glow: rgba(34,197,94,0.2);
  --blue: #3b82f6; --blue-glow: rgba(59,130,246,0.2);
  --yellow: #eab308; --red: #ef4444; --purple: #a855f7;
  --gold: #f59e0b;
  --text: #0f172a; --muted: #64748b; --muted2: #475569;
  --font: 'Cairo', sans-serif;
}

body.dark-mode {
  --bg: #18191a; --bg2: #242526; --bg3: #3a3b3c; --card: #242526; --primary: #f97316;
  --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.15);
  --text: #f3f4f6; --muted: #9ca3af; --muted2: #d1d5db;
}
/* تحويل لون الكتابة (النصوص) من البرتقالي للرمادي الفاتح جداً في الوضع الليلي */
body.dark-mode .item-price,
body.dark-mode .item-rest-badge,
body.dark-mode .text-primary,
body.dark-mode [style*="color:var(--primary)"],
body.dark-mode [style*="color: var(--primary)"]:not(.view-tab.active):not(.progress-step.active span):not(.toggle-switch-btn.active) {
  color: var(--text) !important;
}
body:not(.dark-mode) .login-input { background: #f0f2f5; color: var(--text); border-color: rgba(0,0,0,0.08); }
/* خانات صفحة تسجيل الدخول - رمادي فاتح جداً يبرز على الخلفية البيضاء */
.auth-card .login-input { background: #f8f9fa !important; border-color: rgba(0,0,0,0.07) !important; }
body.dark-mode .login-input { background: var(--bg3); border-color: var(--border); color: var(--text); }
body.dark-mode .login-input::placeholder { color: var(--muted); }
body.dark-mode .auth-card .login-input { background: var(--bg3) !important; border-color: var(--border) !important; }
body:not(.dark-mode) .stat-card.secondary { background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
button:focus, a:focus { outline: none !important; }
button, a, .role-btn, .confirm-btn, .act-btn, .view-tab, .nav-item, .fav-btn, .float-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    /* ✅ [تحسين] إضافة تأثير تفاعلي عند النقر على جميع الأزرار */
    transition: transform 0.1s ease;
}
button:active, a:active, .role-btn:active, .confirm-btn:active, .act-btn:active, .view-tab:active, .nav-item:active, .fav-btn:active, .float-btn:active {
    transform: scale(0.97);
}
#headerProfileBtn:focus { outline: none !important; box-shadow: none !important; }
#headerProfileBtn::-moz-focus-inner, #headerProfileBtn::-webkit-focus-ring { border: 0 !important; }
html { scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); direction: rtl; min-height: 100vh; display: flex; justify-content: center; transition: background 0.3s, color 0.3s; }
body, body * {
  text-decoration: none;
  -webkit-text-decoration: none;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  letter-spacing: normal;
}

.icon {
    width: 1.2em;
    height: 1.2em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: -0.2em;
    display: inline-block;
}
.spin { animation: spin 1.5s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shakeBell {
  0% { transform: rotate(0); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0); }
}
@keyframes pulse-dot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.modern-notif-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--red); border-radius: 50%; margin-right: 6px; margin-left: 2px; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); animation: pulse-dot 1.5s infinite; vertical-align: middle; }
.modern-notif-dot-mobile { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background-color: var(--red); border-radius: 50%; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); animation: pulse-dot 1.5s infinite; border: 2px solid var(--bg2); }

@keyframes pulse-btn-red {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); }
  70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.support-btn-unread { background: linear-gradient(135deg, var(--red), #dc2626) !important; animation: pulse-btn-red 1.5s infinite !important; }

.global-alert { background: var(--red); color: white; text-align: center; padding: 12px 20px; font-weight: 900; font-size: 14px; position: sticky; top: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 15px rgba(239,68,68,0.4); animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.app-container { width: 100%; max-width: 1200px; margin: 0 auto; background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; box-shadow: 0 0 50px rgba(0,0,0,0.1); position: relative; transition: background 0.3s; }
.brand-logo img { display: block; margin: 0 auto; transition: transform 0.3s ease; max-height: 72px; width: auto; object-fit: contain; }
.brand-logo img:hover { transform: scale(1.05); }

.pass-wrapper { position: relative; width: 100%; margin-bottom: 15px; }
.pass-wrapper input { margin-bottom: 0; }
.eye-btn { position: absolute; right: 15px; top: 12px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none; }
.eye-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.eye-btn:hover svg { stroke: var(--text); }

.auth-screen { flex:1; display:flex; align-items:center; justify-content:center; padding:12px; overflow-y:auto; }
.auth-card { background:var(--bg2); padding:22px 20px 20px; border-radius:20px; width:100%; max-width:400px; text-align:center; border:1px solid var(--border); box-shadow:0 15px 50px rgba(0,0,0,0.1); transition: background 0.3s; overflow:visible; max-height:none; }
.auth-card.auth-card-scrollable { overflow-y:auto; overflow-x:hidden; max-height:min(94vh, 760px); overscroll-behavior:contain; }
.auth-title { font-size:32px; margin-bottom:8px; }
.auth-sub { font-size:14px; color:var(--muted); margin-bottom:16px; line-height:1.6; }
.auth-terms-block { margin: 8px 0 6px; }
.auth-terms-block button { margin-bottom: 6px; }

/* تنسيق خاص بقائمة اللغة في شاشة الدخول */
#authLangSelector {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.role-btn { width:100%; padding:15px; margin-bottom:10px; border-radius:12px; cursor:pointer; font-weight:800; border:1px solid var(--border); background:var(--bg3); color:var(--text); transition:0.2s; font-family: var(--font); }
.role-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.login-input-group { margin-bottom:15px; text-align:right; }
.login-input-group label { display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--muted2); }
.login-input { width:100%; padding:12px 14px; margin-bottom:10px; background:#f0f2f5; border:1px solid rgba(0,0,0,0.08); border-radius:10px; color:var(--text); font-family:var(--font); font-size:14px; outline:none; transition:0.3s; }

/* ✅ [تحسين احترافي] محاذاة النص تلقائياً بناءً على اتجاه الكتابة */
.login-input, textarea.login-input {
  text-align: start;
}

.login-input:focus, textarea.login-input:focus { border-color:var(--border2); box-shadow: 0 4px 15px rgba(0,0,0,0.08); transform: translateY(-1px); }

.login-input.error { border-color: var(--red); box-shadow: 0 0 10px rgba(239,68,68,0.25); }
.input-error-message { font-size: 11px; color: var(--red); margin-top: -8px; margin-bottom: 10px; text-align: right; display: block; }
.login-input-group.has-error .input-error-message { display: block; }
.login-input-group .input-error-message { display: none; }

.confirm-btn { width:100%; padding:15px; background:var(--primary); color:white; border:none; border-radius:12px; font-weight:bold; cursor:pointer; font-family: var(--font); font-size:15px; transition:0.2s; box-shadow:0 5px 20px var(--primary-glow); margin-top:10px; line-height: 1.4; white-space: normal; height: auto; text-align: center; }
.confirm-btn:hover:not(:disabled) { transform:translateY(-2px); }
.confirm-btn:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none; filter: grayscale(100%); }
.modern-load-more-btn { background: transparent; border: none; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: stretch; justify-content: center; transition: all 0.3s ease; width: auto; margin: 10px auto; padding: 0; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.modern-load-more-btn:hover, .confirm-btn:hover:not(:disabled) { transform: translateY(-2px); }
.modern-load-more-btn:active, .confirm-btn:active:not(:disabled) { transform: translateY(0px) scale(0.98); transition-duration: 0.1s; }
.mlmb-text { background: var(--primary); color: white; padding: 6px 14px; display: flex; align-items: center; justify-content: center; }
.mlmb-icon { background: var(--bg2); color: var(--primary); padding: 6px 10px; display: flex; align-items: center; justify-content: center; }
body.dark-mode .mlmb-icon { color: #ffffff; background: var(--bg3); }
.back-link { display:inline-block; margin-top:15px; color:var(--muted); cursor:pointer; font-size:13px; text-decoration:none; border-bottom: 1px dashed var(--muted); }
.geo-row { display:flex; gap:10px; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.geo-row .login-input-group { flex:1; min-width: 120px; max-width: 100%; }

/* أزرار المرحلة الثالثة */
.google-btn { background: #ffffff; color: #333; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #ddd; box-shadow: none; font-size: 14px; }
.google-btn:hover:not(:disabled) { box-shadow: 0 4px 10px rgba(0,0,0,0.1); background: #f9f9f9; }
.google-btn img { width: 20px; }
.fav-btn { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; z-index: 10; border: none; backdrop-filter: blur(4px); transition: 0.3s; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding:0; }
.fav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: 0.3s; margin-top:1px; pointer-events: none; }
.fav-btn.active { color: var(--red); background: white; }
.fav-btn.active svg { fill: var(--red); stroke: var(--red); }
.address-chip { background: var(--bg2); border: 1px solid var(--border); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; margin-left: 8px; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.address-chip:hover { transform: translateY(-2px); color: var(--text); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.address-chip:active { transform: scale(0.95); }

.toggle-switch-container { display: flex; background: var(--bg3); border: 1px solid var(--border); border-radius: 30px; padding: 5px; width: fit-content; margin: 0 auto 20px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); }
.toggle-switch-btn { padding: 10px 24px; font-size: 14px; font-weight: 900; font-family: var(--font); border-radius: 25px; border: none; background: transparent; color: var(--muted2); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; }
.toggle-switch-btn:hover:not(.active) { color: var(--text); }

.app-shell { display:none; flex-direction:column; flex:1; height: 100vh; height: 100dvh; }
.app-header { background: #18191a !important; color: #ffffff; padding:0 15px; height:70px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; transition: background 0.3s; position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; gap: 10px; }
.app-header > img { max-width: 90px; object-fit: contain; }
.app-beta-badge { display:inline-flex; align-items:center; justify-content:center; margin-left:8px; padding:4px 10px; border-radius:999px; border:1px solid rgba(245,158,11,0.35); background:rgba(245,158,11,0.12); color:var(--yellow); font-size:11px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase; white-space: nowrap; flex-shrink: 0; min-width: auto; overflow: visible; }
/* ✅ [إصلاح] إزالة تصميم الزر من شارة نوع الحساب في الهيدر */
.header-center { 
    display:flex; align-items:center; gap:8px; 
    font-size:12px; font-weight:600; color: #ffffff; text-align: center; justify-content: center; max-width: 180px; flex: 1 1 auto; min-width: 0;
}
.header-center span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; min-width: 0; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:blink 1.4s infinite; flex-shrink: 0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.logout-btn { background:rgba(239,68,68,0.2); border:1px solid rgba(239,68,68,0.3); color:#ff6b6b; padding:0 15px; border-radius:10px; cursor:pointer; font-family:var(--font); font-weight:700; font-size:12px; transition:0.2s; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.logout-btn, .header-action-btn { outline: none !important; box-shadow: none !important; } /* ✅ [إصلاح] إزالة الإطار عند التركيز */
.logout-btn:hover { background:var(--red); color:white; }
.logout-btn:focus, .logout-btn:focus-visible, .logout-btn:focus-within { outline: none !important; box-shadow: none !important; border-color: rgba(239,68,68,0.3) !important; }
#headerProfileBtn:focus, #headerProfileBtn:focus-visible, #headerProfileBtn:focus-within { outline: none !important; box-shadow: none !important; border-color: transparent !important; }

/* ✅ [تحسين] فئة جديدة لتوحيد تصميم وارتفاع أزرار الهيدر (تسجيل الدخول والتثبيت) */
.header-action-btn {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  height: 38px;
  transition: background 0.2s ease !important;
  outline: none !important;
}

/* ✅ [إضافة] تصميم زر تثبيت التطبيق التفاعلي في الشريط العلوي */
.pwa-install-header-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  display: none; /* يظهر فقط عند توفر التثبيت */
  transition: all 0.25s ease;
  align-items: center; /* ✅ لضمان محاذاة الأيقونة والنص */
  gap: 8px; /* ✅ مسافة بين الأيقونة والنص */
  box-shadow: 0 4px 15px var(--green-glow);
  height: 38px; /* ✅ توحيد الارتفاع */
}
.pwa-install-header-btn:hover {
  transform: translateY(-2px);
  background: #16a34a;
}
.pwa-install-header-btn:active, .header-action-btn:active, .logout-btn:active {
  box-shadow: none !important; /* ✅ [إصلاح] إزالة الظل عند الضغط */
  transform: scale(0.97) !important; /* ✅ [إضافة] الحفاظ على التأثير التفاعلي عند النقر */
}

.panels { display:flex; flex:1; height: 100%; margin-top: 70px; }
.panel { display:none; flex:1; position:relative; height: 100%; }
.panel.active { display:flex; flex-direction:column; animation:fadeSlide 0.25s ease-in-out; height: 100%; }
@keyframes fadeSlide { from{opacity:0; transform: translateX(8px);} to{opacity:1; transform: translateX(0);} }
.panel-body { padding:15px; padding-bottom:120px; overflow-y:auto; overflow-x:hidden; width: 100%; max-width: 100%; margin: 0 auto; flex:1; -webkit-overflow-scrolling: touch; }
.panel-body { padding-bottom: 100px; /* تقليل الحشوة السفلية لتناسب شريط التنقل بشكل أفضل */ }
.section-label { color:var(--muted2); font-size:12px; font-weight:800; margin:25px 0 15px; display:flex; align-items:center; gap:10px; text-transform:uppercase; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }

.visual-cat-container { display:flex; gap:12px; overflow-x:auto; padding-top:10px; padding-bottom:15px; margin-bottom:10px; flex-wrap: nowrap; scrollbar-width: none; }
.visual-cat-container::-webkit-scrollbar { display: none; }

/* التصنيفات الجديدة (الصورة فوق والنص تحت) */
.visual-cat-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; min-width: 75px; max-width: 90px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.visual-cat-wrapper:hover { transform: translateY(-3px); }
.visual-cat-wrapper.active { transform: scale(1.05); }
.visual-cat-img { width: 70px; height: 70px; border-radius: 16px; aspect-ratio: 1 / 1; overflow: hidden; background-size: cover; background-position: center; border: 2px solid transparent; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.08); background-color: var(--bg2); }
.visual-cat-wrapper.active .visual-cat-img { border-color: var(--primary); box-shadow: 0 5px 15px var(--primary-glow); }
.visual-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.visual-cat-title { font-size: 13px; font-weight: 800; color: var(--text); text-align: center; transition: 0.3s; line-height: 1.3; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.visual-cat-wrapper.active .visual-cat-title { color: var(--primary); font-weight: 900; }

/* تبويب زر "الكل" الخاص بالتصنيفات */
.visual-cat-tab { min-width:70px; height:90px; border-radius:16px; background:var(--bg2); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:var(--muted); cursor:pointer; transition:0.3s; flex-shrink:0; box-shadow:0 4px 10px rgba(0,0,0,0.02); }
.visual-cat-tab:hover { color:var(--text); transform:translateY(-3px); box-shadow:0 6px 15px rgba(0,0,0,0.08); }
.visual-cat-tab.active { background:var(--primary); color:white; border-color:var(--primary); box-shadow:0 5px 15px var(--primary-glow); transform:scale(1.05); }

.restaurants-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:15px; margin-bottom:20px; align-items: stretch; justify-content: center; }
.rest-icon-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:15px 10px; text-align:center; cursor:pointer; transition:0.3s; position:relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.rest-icon-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.rest-icon-card.selected { border-color:var(--primary); background:rgba(249,115,22,0.08); box-shadow:0 0 15px var(--primary-glow); }
.rest-icon-card.closed-rest { opacity:0.6; filter:grayscale(100%); }
.rest-icon-img { width:60px; height:60px; border-radius:50%; margin:0 auto 10px; border:2px solid var(--border2); background:var(--bg2); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:28px;}
.rest-icon-img img { width:100%; height:100%; object-fit:cover; }
.rest-icon-name { font-size:12px; font-weight:900; color:var(--text); margin-bottom:4px; }

/* -------------------------------------
   تعديلات غلاف المطعم (أعرض ومتمركز)
-------------------------------------- */
.restaurant-cover-header { 
    background-color: var(--bg3);
    background-size: cover !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important;
    padding: 20px;
    height: 170px; /* ارتفاع مناسب للموبايل */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 15px; 
    position: relative; 
    text-align: center; 
    margin-bottom: 60px; 
    margin-top: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    width: 100%; 
}
.restaurant-cover-logo { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    border: 4px solid var(--bg); 
    position: absolute; 
    bottom: -50px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: var(--bg2); 
    object-fit: cover; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    z-index: 2; 
}
.rest-open-status-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    color: white;
    background: linear-gradient(135deg, #16a34a, #4ade80);
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 5;
}
.rest-open-status-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(22, 163, 74, 0.3);
}
.rest-open-status-btn.closed {
    background: linear-gradient(135deg, #dc2626, #f87171);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.25);
}
.rest-open-status-btn.closed svg { fill: white; stroke: white; }
.rest-open-status-btn svg { width: 16px; height: 16px; stroke-width: 2.5; stroke: white; fill: none; }
@media (max-width: 768px) {
    .rest-open-status-btn {
        right: 14px;
        top: 14px;
        padding: 9px 14px;
        font-size: 12px;
    }
    /* ✅ [إصلاح] تكديس شريط تعيين السائق عمودياً على الهاتف حتى لا ينضغط نص الزر ويتقطع فوق بعضه */
    #batchAssignBar { flex-direction: column; }
    #batchAssignBar select#batchDriverSelect,
    #batchAssignBar button { flex: none !important; width: 100%; white-space: nowrap; }
}
.restaurant-cover-name { 
    font-size: 24px; 
    font-weight: 900; 
    color: white; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.8); 
    margin-bottom: 5px; 
    background: rgba(0,0,0,0.4); 
    display: inline-block; 
    padding: 5px 15px; 
    border-radius: 10px; 
    backdrop-filter: blur(5px); 
}
.phone-link { display: inline-block; background: rgba(255,255,255,0.2); color: white; padding: 6px 16px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: bold; backdrop-filter: blur(5px); transition: 0.3s; margin-top: 10px; }
.phone-link:hover { background: rgba(255,255,255,0.4); transform: translateY(-2px); }

.menu-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:15px; margin-top:10px; align-items: stretch; justify-content: center; }
.menu-item { background:var(--card); border-radius:16px; overflow:hidden; border:none; transition:0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display:flex; flex-direction:column; position:relative; box-shadow:0 4px 15px rgba(0,0,0,0.06); cursor:pointer; height: 100%; }
.menu-item:hover { transform:translateY(-4px); box-shadow:0 12px 25px rgba(0,0,0,0.12); }
.menu-item.closed { opacity:0.5; filter:grayscale(80%); pointer-events:none; }
.closed-badge { position:absolute; top:10px; right:10px; background:var(--red); color:white; font-size:10px; font-weight:bold; padding:4px 8px; border-radius:8px; z-index:5; }
.offer-badge { position:absolute; top:10px; left:0px; background:linear-gradient(135deg,var(--yellow),var(--primary)); color:#000; font-size:11px; font-weight:900; padding:5px 12px; border-radius:0 20px 20px 0; z-index:5; box-shadow: 0 4px 10px rgba(234, 179, 8, 0.4); animation: pulseOffer 2s infinite; }
@keyframes pulseOffer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.special-offer-img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80%; max-width:140px; height:auto; z-index:10; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); animation: pulseOfferCenter 2.5s infinite ease-in-out; pointer-events: none; object-fit:contain; }
@keyframes pulseOfferCenter { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }

.item-img-container { width:100%; aspect-ratio: 1 / 1; position:relative; background:var(--bg3); overflow:hidden; display:block; flex-shrink: 0; }
.item-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease, filter 0.4s ease; }
.menu-item:hover .item-img { transform: scale(1.03); filter: brightness(0.95); }
.item-img { z-index: 1; /* ضمان عدم تغطية الصورة بعناصر أخرى بالخطأ */ }
.item-content { padding:14px; display:flex; flex-direction:column; flex:1; }
.item-name { font-size:14px; font-weight:900; margin-bottom:4px; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; line-height:1.3; overflow-wrap: anywhere; word-break: normal; }
.item-ingredients { font-size: 11px; color: var(--muted2); margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: normal; }
.item-rest-badge { font-size:11px; color:var(--primary); margin-bottom:8px; font-weight:bold; }
.item-price { color:var(--primary); font-weight:900; font-size:16px; }
.item-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--border); padding-top:12px; gap:8px; flex-wrap:wrap; }

.modern-details-btn { background: var(--primary); border: none; color: white; font-family: var(--font); font-size: 12px; font-weight: 900; padding: 7px 15px; border-radius: 20px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-width: max-content; }
.modern-details-btn:hover { background: #ea580c; color: white; transform: translateY(-2px); box-shadow: 0 5px 12px var(--primary-glow); }
body.dark-mode .modern-details-btn { background: var(--primary); color: white; border: none; }
body.dark-mode .modern-details-btn:hover { background: #ea580c; color: white; box-shadow: 0 5px 12px rgba(234, 88, 12, 0.4); }
.file-upload-btn { display:block; padding:15px; text-align:center; background:rgba(59,130,246,0.1); border:2px dashed var(--blue); border-radius:12px; margin:10px 0; color:var(--blue); cursor:pointer; transition:0.3s; font-weight:bold; }

.presets-container { display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; margin-bottom:10px; width: 100%; box-sizing: border-box; }
.preset-chip { background:var(--bg3); border:1px solid var(--border); padding:6px 12px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; color:var(--muted2); transition:0.2s; user-select:none; display: inline-flex; align-items: center; justify-content: center; text-align: center; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.4; height: auto; }
.preset-chip:hover { color: var(--text); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.preset-chip.active { background:var(--primary); color:white; border-color:var(--primary); box-shadow:0 0 10px var(--primary-glow); }
.paid-addon-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.paid-addon-item { display:flex; justify-content:space-between; align-items:center; background:var(--bg3); padding:8px 12px; border-radius:8px; border:1px solid var(--border); font-size:12px; }
.del-addon-btn { background:none; border:none; color:var(--red); cursor:pointer; font-size:14px; }
.addon-badge { background:rgba(128,128,128,0.1); border:1px solid var(--border2); color:var(--text); font-size:10px; padding:4px 8px; border-radius:6px; display:inline-block; font-weight:bold; }

.notif-overlay { position:fixed; top:20px; left:20px; z-index:10005; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.notif { pointer-events:all; background:var(--bg2); border:1px solid var(--border2); padding:15px; border-radius:12px; width:280px; box-shadow:0 10px 30px rgba(0,0,0,0.2); border-right:4px solid var(--primary); animation:slideIn 0.3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
.error-msg { color:var(--red); font-size:13px; font-weight:bold; margin-bottom:15px; display:none; background:rgba(239,68,68,0.15); padding:10px; border-radius:10px; text-align:center; animation:fadeIn 0.3s ease; }

.image-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:10001; display:none; justify-content:center; align-items:center; backdrop-filter: blur(8px); }
.image-modal-content { position: relative; max-width: 90%; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.close-img-btn { position: absolute; top: -40px; right: 0; background: var(--red); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-weight: bold; }

.modal-overlay { position:fixed !important; top:0; left:0; width:100vw !important; height:100vh !important; min-height:100dvh !important; background:rgba(0,0,0,0.72) !important; z-index:100000 !important; display:none; justify-content:center; align-items:center; padding:20px; overflow-y:auto; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.modal-overlay.is-open { display:flex !important; }
#termsModal { z-index:100001 !important; position:fixed !important; top:0; left:0; width:100vw !important; height:100vh !important; min-height:100dvh !important; }
body:not(.dark-mode) .modal-overlay, body:not(.dark-mode) .image-modal-overlay { background: rgba(0,0,0,0.42) !important; }
.modal-content { background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,250,252,0.9)); color: #111827; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding:18px; border-radius:24px; width:100%; max-width:560px; border:1px solid rgba(255,255,255,0.7); box-shadow:0 24px 60px rgba(0,0,0,0.18); animation: modalIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position:relative; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
/* ✅ [إصلاح] نافذة معلومات الحساب وكل النوافذ المنبثقة الأخرى كانت بخلفية ونص بلون ثابت (لا تستخدم متغيرات الثيم)، فلا تتحول للوضع الليلي */
body.dark-mode .modal-content { background: linear-gradient(145deg, rgba(36,37,38,0.94), rgba(24,25,26,0.92)); color: var(--text); border-color: rgba(255,255,255,0.08); }
#authScreen { z-index: 1; position: relative; }
.modal-content::-webkit-scrollbar { display: none; }
.modal-content.no-pad { padding:0; }
.terms-modal-text { font-size: 14px; color: #374151; line-height: 1.75; max-height: 48vh; overflow-y: auto; padding: 14px 16px; background: rgba(255,255,255,0.78); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 16px; margin-top: 10px; }
.terms-modal-text::-webkit-scrollbar { width: 6px; }
.terms-modal-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }
.terms-modal-text p { margin: 0 0 12px; }
.terms-modal-text ul { padding-right: 16px; margin: 0; }
.terms-modal-text li { margin-bottom: 8px; }
.terms-modal-text[dir="ltr"], .checkbox-label[dir="ltr"], .terms-modal-actions[dir="ltr"], .auth-terms-block[dir="ltr"] { direction: ltr; text-align: left; }
.terms-modal-text[dir="ltr"] ul { padding-left: 16px; padding-right: 0; }
.terms-modal-text[dir="ltr"] p,
.terms-modal-text[dir="ltr"] li { text-align: left; }
.checkbox-label { display:flex; align-items:center; gap:10px; margin-top:18px; padding:13px 14px; background: rgba(255,255,255,0.8); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; }
.checkbox-label input { width:18px; height:18px; accent-color:var(--primary); flex-shrink:0; }
.checkbox-label span { font-size: 14px; color: #111827; font-weight:700; }
.terms-modal-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(15, 23, 42, 0.08); margin-bottom:12px; }
.terms-modal-title-wrap { display:flex; align-items:center; gap:10px; }
.terms-modal-icon { width:44px; height:44px; border-radius:16px; display:grid; place-items:center; background: linear-gradient(135deg, var(--primary), #fb923c); color:white; box-shadow: 0 10px 24px rgba(249,115,22,0.25); }
.terms-modal-title { margin:0; font-size:18px; font-weight:900; color:#111827; }
.terms-modal-subtitle { margin:4px 0 0; font-size:12px; color:#6b7280; }
.terms-modal-actions { display:flex; gap:10px; margin-top:16px; }
.terms-modal-actions .confirm-btn { flex:1; justify-content:center; border-radius:14px; padding:12px 14px; }
.terms-modal-close-btn { border:none; background:transparent; color:var(--muted); font-size:22px; cursor:pointer; padding:4px; }
 

.addon-modal-content { display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important; }
.addon-modal-scrollable { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.addon-modal-scrollable::-webkit-scrollbar { display: none; }
.addon-modal-footer { padding: 15px; border-top: 1px solid var(--border); background: var(--bg2); border-radius: 0 0 20px 20px; flex-shrink: 0; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); }
@keyframes modalIn { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

.addon-checkbox-row { display:flex; justify-content:space-between; align-items:center; padding:10px; background:var(--bg3); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; transition:0.2s; gap:8px; width: 100%; box-sizing: border-box; flex-wrap: nowrap; }
.addon-checkbox-row > div:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.addon-checkbox-row > div:last-child { flex-shrink: 0; }
.addon-checkbox-row:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.smooth-scroll-list {
    margin-bottom: 20px;
    max-height: none;
    overflow-y: visible;
    padding-bottom: 20px;
    padding-right: 5px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}
.addon-checkbox-row input[type="checkbox"] { accent-color:var(--primary); width:18px; height:18px; cursor:pointer; }
.addon-qty-controls { display: flex; align-items: center; gap: 5px; background: var(--bg2); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.addon-qty-btn { background: transparent; border: none; color: var(--text); font-size: 16px; cursor: pointer; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: 0.2s; }
.addon-qty-btn:hover { background: var(--border); }
.addon-qty-val { font-size: 13px; font-weight: bold; width: 20px; text-align: center; }

.cart-section { background:var(--bg3); border:1px solid var(--border); border-radius:14px; padding:20px; margin-top:20px; transition: background 0.3s; }
.cart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-weight:900; border-bottom: 1px solid var(--border); padding-bottom: 10px;}
.cart-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--border); font-size:13px; gap: 10px; width: 100%; box-sizing: border-box; }
.cart-item > div:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.cart-qty-controls { display:flex; align-items:center; gap:8px; background:var(--bg2); border-radius:8px; padding:2px; border:1px solid var(--border); }
.qty-btn { background:transparent; border:none; color:var(--text); font-size:16px; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius: 6px; transition: 0.2s;}
.qty-btn:hover { background: var(--border); }
.cart-total { display:flex; justify-content:space-between; font-weight:900; margin-top:15px; padding-top:15px; border-top:2px solid var(--border); }
.company-select-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:15px; }
.company-opt { background:var(--bg3); border:1px solid var(--border); padding:12px; border-radius:10px; text-align:center; cursor:pointer; transition:0.3s; display:flex; flex-direction:column; align-items:center; }
.company-opt.selected { border-color:var(--green); background:rgba(34,197,94,0.1); box-shadow:0 0 10px var(--green-glow); transform: translateY(-2px); }
.comp-logo-img { width:40px; height:40px; border-radius:50%; object-fit:cover; margin-bottom:8px; border:1px solid var(--border2); background:var(--bg2); }
.order-btn { width:100%; padding:15px; border-radius:12px; background:linear-gradient(135deg,var(--primary),#fb923c); border:none; color:white; font-family:var(--font); font-weight:900; cursor:pointer; margin-top:10px; transition:0.2s; }
.order-btn:disabled { opacity:0.5; cursor:not-allowed; filter:grayscale(100%); }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:20px; }
.stat-card { background:linear-gradient(135deg,var(--primary),#fb923c); padding:20px; border-radius:16px; color:white; box-shadow:0 5px 20px rgba(249,115,22,0.3); position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to bottom right, rgba(255,255,255,0.2), transparent); transform: rotate(45deg); pointer-events: none; }
.stat-card.secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); box-shadow:none; }
.stat-card.secondary::after { display: none; }
.stat-title { font-size:12px; font-weight:700; opacity:0.9; margin-bottom:8px; }
.stat-val { font-size:24px; font-weight:900; }

.incoming-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:15px; padding:15px; transition: 0.2s; animation: cardEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cardEnter { 0% { opacity: 0; transform: translateY(15px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.incoming-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.flex-row { display:flex; gap:10px; margin-top:12px; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; }
.act-btn { flex:1 1 auto; min-width: 120px; padding:12px; border:none; border-radius:8px; font-family:var(--font); font-weight:bold; cursor:pointer; transition:0.2s; font-size: 13px; line-height: 1.4; text-align: center; height: auto; display: inline-flex; align-items: center; justify-content: center; }
.act-btn:hover:not(:disabled) { opacity:0.9; transform:translateY(-2px); }
.act-btn:disabled { opacity:0.5; cursor:not-allowed; box-shadow:none !important; filter: grayscale(100%); transform: none; pointer-events:none; }
.act-accept { background:var(--green); color:white; box-shadow: 0 4px 10px var(--green-glow); }
.act-reject { background:rgba(239,68,68,0.1); color:var(--red); border:1px solid rgba(239,68,68,0.3); box-shadow: none; }
.act-ready { background:var(--yellow); color:var(--bg); box-shadow: 0 4px 10px rgba(234, 179, 8, 0.2); }
.act-orange { background:var(--primary); color:white; display:inline-flex; align-items:center; justify-content:center; gap:5px; margin:0; padding:6px 12px; font-size:12px; }
.act-dark { background:var(--muted2); color:white; display:inline-flex; align-items:center; justify-content:center; gap:5px; margin:0; padding:6px 12px; font-size:12px; border:none; }

.tracker { background:var(--bg2); border:1px solid var(--primary); border-radius:16px; padding:20px; margin-bottom:20px; }
.progress-wrapper { position: relative; margin: 30px 0 10px; direction: rtl; }
.progress-track { position: absolute; top: 15px; left: 15px; right: 15px; height: 4px; background: var(--border2); border-radius: 2px; z-index: 1; }
.progress-fill { position: absolute; top: 0; right: 0; height: 100%; background: var(--green); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; box-shadow: 0 0 10px var(--green-glow);}
.progress-steps { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.progress-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 65px; }
.step-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); border: 3px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: 0.4s; color: var(--muted2); }
.progress-step.done .step-icon { background: var(--green); border-color: var(--green); color: white; }
.progress-step.active .step-icon { border-color: var(--primary); background: var(--primary); animation: pulseRipple 1.5s infinite; color: white; }
@keyframes pulseRipple {
  0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
.progress-step span { font-size: 11px; font-weight: 800; color: var(--muted); text-align: center; transition:0.3s; }
.progress-step.done span { color: var(--green); }
.progress-step.active span { color: var(--primary); }

.rating-stars span { font-size: 24px; color: var(--border2); cursor: pointer; transition: 0.2s; margin-left: 5px; display:inline-block; }
.rating-stars span:hover, .rating-stars span.active { color: var(--gold); text-shadow: 0 0 10px rgba(245,158,11,0.5); transform:scale(1.1); }
.global-rating { font-size:12px; font-weight:bold; color:var(--gold); display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:5px; margin-top:5px; }

.view-mode-tabs { display:flex; gap:8px; margin-bottom:20px; background: var(--bg2); padding: 8px; border-radius: 12px; border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.view-mode-tabs::-webkit-scrollbar { display: none; }
.view-tab { flex: 1 0 auto; min-width: max-content; padding:12px 18px; border-radius:10px; cursor:pointer; font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--muted2); transition:0.3s; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.view-tab svg { width: 16px; height: 16px; stroke-width: 2.2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: 0.3s; }
.view-tab.active { background:var(--primary); color:white; box-shadow: 0 4px 10px var(--primary-glow); }
.view-tab:active:not(.active) { transform: scale(0.97); }

/* Styling for profile tabs (Vertical layout globally to match mobile) */
.profile-tabs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(248,250,252,0.9)); padding: 10px; border: 1px solid var(--border); border-radius: 16px; flex-shrink: 0; transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease, border-color 0.25s ease; overflow: hidden; }
.profile-tabs.is-collapsed { max-height: 0; opacity: 0; padding: 0; margin-bottom: 0; border-color: transparent; pointer-events: none; }
.profile-tabs .view-tab { width: 100%; justify-content: flex-start; padding: 15px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--muted2); transition: 0.25s ease; display: inline-flex; align-items: center; gap: 6px; white-space: normal; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); }
.profile-tabs .view-tab:hover { transform: translateY(-1px); background: var(--bg2); }
.profile-tabs .view-tab.active { background: var(--primary); color: white; box-shadow: 0 8px 20px var(--primary-glow); border-color: var(--primary); }
.profile-tab-summary { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg, var(--bg3), var(--bg2)); color: var(--text); cursor: pointer; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); margin-bottom: 16px; }
.profile-tab-summary.is-open { display: flex; }
.profile-tab-summary .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.profile-tab-summary.is-open .icon { transform: rotate(180deg); }

/* Fixed Layout for Profile Modal to prevent jumping on Desktop & iPad */
#userProfileModal .modal-content { display: flex; flex-direction: column; height: 85vh; max-height: 800px; overflow: hidden; padding-bottom: 20px; }
.prof-tab-content { display: none; flex: 1; overflow-y: auto; padding-right: 5px; margin-bottom: 10px; animation: profilePanelFade 0.25s ease; }
.prof-tab-content.active { display: block; }
@keyframes profilePanelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#userProfileModal .flex-row { flex-shrink: 0; margin-top: auto; padding-bottom: 0; }

/* --- Mobile-First Navigation & Top Area --- */
.desktop-only { display: none; }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background: var(--bg2); border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; padding: 12px 0;
  z-index: 1000; box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav .nav-item {
  flex: 1; /* توزيع المساحة بالتساوي بين الأزرار */
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); cursor: pointer; transition: 0.3s; text-decoration: none;
}
.bottom-nav .nav-item.active { color: var(--primary); }
.bottom-nav .nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .nav-item span { font-size: 10px; font-weight: 700; }
.sticky-top-area {
  position: sticky; top: 69px; /* تم التعديل لتلتصق أسفل الشريط الأسود مباشرة */
  z-index: 150; /* ✅ [إصلاح] رفع الأولوية فوق البنر الإعلاني لمنع تغطية جزء من الأزرار عند التبديل بين التبويبات */
  background: var(--bg); 
  padding-top: 15px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 15px;
}
.horizontal-chips-container {
  display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.horizontal-chips-container::-webkit-scrollbar { display: none; }
.horizontal-chips-container .address-chip { flex: 0 0 auto; margin: 0; }
.app-download-btns { display:flex; gap:10px; margin-top:20px; justify-content:center; }
.app-download-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:8px 15px; border-radius:8px; font-size:11px; font-weight:bold; cursor:not-allowed; display:flex; align-items:center; gap:5px; opacity:0.7; position:relative; overflow:hidden;}
.app-download-btn::after { content:"قريباً"; position:absolute; top:0; right:0; background:var(--primary); color:white; font-size:8px; padding:2px 5px; border-bottom-left-radius:5px; }
.history-toggle-btn { background: var(--bg3); border: 1px dashed var(--border); padding: 15px; border-radius: 12px; width: 100%; text-align: center; font-family: var(--font); font-weight: bold; color: var(--primary); cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.history-toggle-btn:hover { background: rgba(249,115,22,0.1); border-color: var(--primary); }

.price-format { display: inline-flex; align-items: center; gap: 4px; direction: ltr; flex-direction: row-reverse; }

/* --- إصلاحات البنر الإعلاني ليكون متجاوباً --- */
.promo-banner-container { 
    width: 100%; max-width: 100%; margin: 0 auto 20px auto; display: none; border-radius: 12px; overflow: hidden; 
    border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    position: relative; z-index: 1; /* ✅ [إصلاح] البقاء تحت شريط التبويبات اللاصق دائماً */
}
#homeMainContent, #venueTypeTabs, #viewHome { overflow-anchor: none; } /* ✅ [إصلاح] منع المتصفح من إزاحة التمرير تلقائياً عند تغيّر ارتفاع المحتوى بعد التبديل بين التبويبات */
.promo-banner-container::-webkit-scrollbar { display: none; }
.promo-banner-img { 
    width: 100%; max-width: 100%; height: auto; /* نسبة وتناسب مثالية دون قص أو تشوه */
    object-fit: cover;
    display: block;
    flex: 0 0 100%;
    scroll-snap-align: center;
    transition: transform 0.3s ease;
}

/* -------------------------------------
   تعديلات غلاف الضيف (المنيو الرقمي) 
-------------------------------------- */
.guest-shell { background: var(--bg); min-height: 100vh; padding-bottom: 80px; }
.guest-cover-header { 
    background-color: var(--bg3);
    background-size: cover !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important;
    padding: 20px;
    aspect-ratio: 21 / 9;
    min-height: 200px;
    max-height: 450px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 0; 
    position: relative; 
    text-align: center; 
    margin-bottom: 60px; 
    box-shadow: 0 10px 30px var(--primary-glow); 
    width: 100%; 
}
.guest-cover-logo { 
    width: 110px; 
    height: 110px; 
    border-radius: 50%; 
    border: 5px solid var(--bg); 
    position: absolute; 
    bottom: -55px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: var(--bg2); 
    object-fit: cover; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    z-index: 2; 
    transition: border-color 0.3s, background 0.3s; 
}
#guestRestNameTitle {
    text-shadow: 0 2px 8px rgba(0,0,0,0.8); 
    background: rgba(0,0,0,0.4); 
    display: inline-block; 
    padding: 5px 15px; 
    border-radius: 10px; 
    backdrop-filter: blur(5px);
}

.guest-floating-btns { position: fixed; bottom: 132px; right: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 1000; }
.float-btn { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transition: 0.3s; flex-shrink: 0; padding: 0; }
.float-btn:hover { transform: scale(1.05); }
.btn-theme { background: var(--bg2); border: 1px solid var(--border); }
#guestInstallBtn {
    width: auto;
    min-width: 120px;
    height: 44px;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
}
#guestInstallBtn svg { display: none !important; }

/* Guest floating buttons: make theme/lang buttons prominent and consistent */
.guest-shell .guest-floating-btns .float-btn.btn-theme {
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 5px 20px var(--primary-glow);
}

.guest-shell .guest-floating-btns .float-btn.btn-theme svg {
    stroke: white; fill: none;
}
.btn-waiter { background: var(--primary); color: white; box-shadow: 0 5px 20px var(--primary-glow); }
.btn-bill { background: var(--green); color: white; box-shadow: 0 5px 20px var(--green-glow); }

.guest-marketing-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, var(--bg2), var(--card)); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); z-index: 1001; }
.guest-marketing-banner p { font-size: 12px; color: var(--text); font-weight: bold; margin: 0; flex: 1; }
.download-btn { background: var(--primary); color: white; border: none; padding: 8px 15px; border-radius: 8px; font-size: 12px; font-weight: bold; cursor: not-allowed; text-decoration: none; display: inline-block; position:relative;}
.download-btn::after { content:"قريباً"; position:absolute; top:-5px; right:-5px; background:var(--red); color:white; font-size:9px; padding:2px 5px; border-radius:5px;}
.sales-report-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.sales-report-table th, .sales-report-table td { padding: 12px 15px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; word-wrap: break-word; }
.sales-report-table th { font-weight: 900; color: var(--muted2); font-size: 12px; text-transform: uppercase; }

/* توزيع عرض الأعمدة */
.sales-report-table th:nth-child(1), .sales-report-table td:nth-child(1) { width: 50%; } /* حقل الصنف هو الأوسع */
.sales-report-table th:nth-child(2), .sales-report-table td:nth-child(2) { width: 30%; }
.sales-report-table th:nth-child(3), .sales-report-table td:nth-child(3) { width: 20%; text-align: center; }

.sales-report-table td:first-child { font-weight: bold; color: var(--text); }
.sales-report-table td:nth-child(2) { color: var(--green); font-weight: bold; }

@media print {
    @page {
        size: A4; /* حجم الورق */
        margin: 15mm; /* تقليل الهوامش لتوسيع مساحة المحتوى */
    }
    body { margin: 0; padding: 0; background: white !important; }
    /* ✅ [إصلاح] ضمان ظهور حاوية التطبيق الرئيسية عند الطباعة من الموبايل */
    .app-container { visibility: visible !important; }
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .print-area { position: absolute; left: 0; top: 0; width: 100%; background: white; color: black; font-family: 'Cairo', sans-serif; direction: rtl; }
    .print-header { font-weight: bold; font-size: 14px !important; margin-bottom: 5px; border-bottom: 1px dashed black; padding-bottom: 10px; }
    .print-item { display: flex; justify-content: space-between; font-size: 12px !important; margin: 5px 0; }
    .print-total { display: flex; justify-content: space-between; font-weight: bold; font-size: 12px !important; margin-top: 10px; border-top: 1px dashed black; padding-top: 5px; }
    .print-tax { font-size: 12px !important; margin-top: 5px; color: #333; }
    .print-footer { margin-top: 15px; font-size: 12px !important; border-top: 1px dashed black; padding-top: 10px; }
    .print-area table { width: 100%; border-collapse: collapse; font-size: 12px !important; }
    .print-area th, .print-area td { padding: 10px; border: 1px solid #ccc; text-align: right; }
    .print-area th { background-color: #eee; }
    /* --- تعديل خاص بتقرير المبيعات لتقليل ارتفاع الخانات --- */ .print-area .sales-report-table th, .print-area .sales-report-table td { padding: 2px 8px !important; font-size: 9pt !important; }

}

/* --- تنسيقات اللايف شات المباشر --- */
.chat-messages { height: 350px; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); border-radius: 12px; margin-bottom: 15px; border: 1px inset var(--border); scroll-behavior: smooth;}
.chat-msg { max-width: 80%; padding: 10px 15px; border-radius: 15px; position: relative; font-size: 13px; line-height: 1.5; animation: slideInUp 0.2s ease-out; word-wrap: break-word;}
@keyframes slideInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg .sender { font-size: 10px; font-weight: 900; margin-bottom: 4px; opacity: 0.8; }
.chat-msg.me { align-self: flex-start; background: linear-gradient(135deg, var(--purple), #8b5cf6); color: white; border-bottom-right-radius: 4px; }
.chat-msg.other { align-self: flex-end; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-input-area { display: flex; gap: 10px; background: var(--bg2); border-top: 1px solid var(--border); padding-top: 15px;}
.chat-input-area input { flex: 1; margin: 0; border-radius: 20px; padding: 12px 18px; border-color: var(--border); background: var(--bg3);}
.chat-input-area button { width: 45px; height: 45px; border-radius: 50%; background: var(--purple); color: white; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3);}
.chat-input-area button:hover { transform: scale(1.1) rotate(-10deg); }
.act-chat { background: rgba(168, 85, 247, 0.1); color: var(--purple); border: 1px solid rgba(168, 85, 247, 0.3); }
.act-chat:hover { background: var(--purple); color: white; }

/* --- تنسيقات زر الدعم الفني --- */
.support-floating-btn {
    position: fixed; bottom: 30px; left: 30px; background: linear-gradient(135deg, var(--blue), #2563eb);
    color: white; width: 55px; height: 55px; border-radius: 50%;
    box-shadow: none; cursor: pointer; z-index: 8000; overflow: hidden;
    display: flex; align-items: center; justify-content: center; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); padding: 0;
}
.support-floating-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: 0.5s;
}
.support-floating-btn:hover, .support-floating-btn:active { transform: translateX(18px) scale(1.1) rotate(8deg); box-shadow: none; }
.support-floating-btn:hover::after, .support-floating-btn:active::after { left: 100%; }

/* --- تصميم زر التقاط الـ GPS --- */
.gps-capture-btn {
    background: linear-gradient(135deg, var(--blue), #2563eb); color: white; border: none;
    box-shadow: 0 5px 15px rgba(59,130,246,0.3); padding: 15px; font-size: 14px; font-family: var(--font); font-weight: bold;
    display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease;
}
.gps-capture-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,130,246,0.5); }

/* Media Queries: Mobile optimizations */
@media (max-width: 767px) {
  .act-btn, .confirm-btn { padding: 14px 10px; font-size: 14px; width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal; justify-content: center; flex: unset; } /* أزرار كاملة العرض لراحة المستخدم */
  .flex-row { flex-direction: column; flex-wrap: nowrap; gap: 10px; } /* ترتيب عمودي يمنع التداخل نهائياً */
  .incoming-card .flex-row .act-btn { width: 100%; flex: unset; }
  .app-header { padding: 0 10px; gap: 5px; }
  .app-header > div:last-child { gap: 5px; }
  .app-header > img { max-width: 70px; }
  .logout-btn { padding: 6px 8px; font-size: 11px; gap: 3px; }
  .hide-on-mobile { display: none !important; }
  .header-center { padding: 4px 8px; max-width: 140px; font-size: 11px; }
  .header-center span { min-width: 0; }
  .app-beta-badge { padding: 3px 7px; font-size: 10px; margin-left: 4px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* إجبار عرض منتجين بجانب بعض لمنع تداخل أو اختفاء الصور في الشاشات الصغيرة */
  .restaurants-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .item-content { padding: 10px; }
  .item-name { font-size: 13px; }
  .modern-details-btn { padding: 6px 10px; font-size: 11px; }
  .support-floating-btn { bottom: 90px; left: 20px; width: 50px; height: 50px; }
  .addon-modal-content { max-width: 100% !important; height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .addon-modal-footer { border-radius: 0 !important; padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important; }

  /* Full screen profile and addon modals */
  #userProfileModal, #customerAddonModal { padding: 0 !important; background: var(--bg2) !important; backdrop-filter: none !important; }
  #userProfileModal .modal-content, #customerAddonModal .modal-content { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100% !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; animation: none !important; }
  #userProfileModal .flex-row { flex-shrink: 0; padding-bottom: 20px; }
  .modern-load-more-btn { font-size: 12px; margin: 5px auto; }
  .mlmb-text { padding: 6px 10px; }
  .mlmb-icon { padding: 6px 8px; }
  .mlmb-icon svg { width: 14px !important; height: 14px !important; }
}

/* Media Queries: Tablet (768px and up) */
@media (min-width: 768px) {
  .app-header { padding: 0 40px; }
  .panel-body { padding: 25px 35px; padding-bottom:40px; }
  .desktop-only { display: flex; }
  .bottom-nav { display: none; }
  .sticky-top-area { top: 69px; margin-top: 0; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
  .restaurants-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .visual-cat-wrapper { min-width: 90px; max-width: 110px; }
  .visual-cat-img { width: 85px; height: 85px; }
  .cart-section { max-width: 700px; margin: 30px auto; border-radius: 20px; padding: 25px; }
  .modal-content { max-width: 500px; padding: 35px; }
  
  .horizontal-chips-container { 
      flex-wrap: wrap; 
      overflow-x: visible; 
      justify-content: flex-start;
  }
  .visual-cat-container { flex-wrap: wrap; overflow-x: visible; }
  .restaurant-cover-header, .guest-cover-header {
    height: auto; aspect-ratio: 21 / 9; min-height: 250px; max-height: 450px;
  }
}

/* Media Queries: Desktop (1024px and up) */
@media (min-width: 1024px) {
  /* --- تم التعديل لجعل الشريط العلوي يظل في الأعلى على الشاشات الكبيرة --- */
  .app-container { max-width: 1400px; }
  .panel-body { padding: 40px 50px; padding-bottom: 50px; }
  .sticky-top-area { top: 69px; margin-top: 0; }
  
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
  .restaurants-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  
  .view-mode-tabs.desktop-only { 
      margin-top: 0 !important; background: transparent; border: none; border-bottom: 2px solid var(--border); border-radius: 0; padding: 0 0 15px 0; gap: 15px;
  }
  .view-tab { font-size: 15px; padding: 12px 20px; }
  .view-mode-tabs:not(.desktop-only) { background: transparent; border: none; padding: 0; gap: 15px; margin-bottom: 30px; }
  .view-mode-tabs:not(.desktop-only) .view-tab { background: var(--bg3); border: 1px solid var(--border); }
  .view-mode-tabs:not(.desktop-only) .view-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
}
/* --- Base & Structural Layout (Moved from HTML) --- */
body, html { max-width: 100vw; overflow-x: hidden; }
.app-container, .app-shell, .panels, .panel, .panel-body, #customerMenuArea, #viewHome, #viewOffers, #viewFavorites, #viewOrders, #viewCustom {
    min-width: 0;
    max-width: 100%;
    min-height: 100vh;
}
.menu-grid, .restaurants-grid { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 65vh; align-content: flex-start; }
.promo-banner-container { width: 100%; max-width: 100%; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; border-radius: 15px; margin-bottom: 20px; box-sizing: border-box; gap: 0; scrollbar-width: none; overflow-anchor: none; contain: layout; overflow: hidden; }
.promo-banner-container::-webkit-scrollbar { display: none; }
.promo-banner-img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: cover; display: block; scroll-snap-align: start; flex: 0 0 100%; border-radius: 0 !important; transform: translateZ(0); }
.item-img-container { width: 100%; max-width: 100% !important; overflow: hidden; box-sizing: border-box; aspect-ratio: 1 / 1; position: relative; }
.item-img { width: 100% !important; max-width: 100% !important; height: 100% !important; object-fit: cover; position: absolute; top: 0; left: 0; }
.menu-item { max-width: 100% !important; overflow: hidden; box-sizing: border-box; }
.rest-icon-card { max-width: 100% !important; overflow: hidden; box-sizing: border-box; }
.rest-icon-img img { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }

/* --- Utility Classes for Clean HTML --- */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted); }
.text-blue { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-gold { color: var(--gold); }
.text-purple { color: var(--purple); }

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.pb-10 { padding-bottom: 10px; }
.pt-20 { padding-top: 20px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-50 { font-size: 50px; }

.fw-bold { font-weight: bold; }
.fw-900 { font-weight: 900; }

.flex-center { display: flex; align-items: center; justify-content: center; }
.align-center { display: flex; align-items: center; }
.gap-5 { gap: 5px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }

.w-100 { width: 100%; }
.w-fit { width: fit-content; }
.mx-auto { margin-left: auto; margin-right: auto; }
.d-flex { display: flex; }

.bg-bg3 { background: var(--bg3); }
.border-primary { border: 1px solid var(--primary); }
.border-dashed { border-style: dashed; }
.rounded-10 { border-radius: 10px; }
.p-15 { padding: 15px; }
.p-10-15 { padding: 10px 15px; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.cursor-pointer { cursor: pointer; }

/* نص الخيار المختار في الـ trigger - محاذاة لجهة الكتابة */
.cs-label {
    flex: 1;
    text-align: right;
    direction: rtl;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-select-options {
    text-align: right;
    direction: rtl;
}

/* إخفاء مؤشر "جاري الاتصال" */
#loadingIndicator { display: none !important; }

/* ===== Custom Select Dropdown ===== */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    font-family: var(--font);
}
.custom-select-wrapper select {
    display: none !important;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    direction: rtl;
    padding: 12px 14px;
    background: #f0f2f5;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    gap: 8px;
    min-height: 45px;
    text-align: right;
    direction: rtl;
}
body.dark-mode .custom-select-trigger {
    background: var(--bg3);
    border-color: var(--border);
    color: var(--text);
}
.custom-select-trigger:hover {
    border-color: rgba(0,0,0,0.2);
    background: #f1f5f9;
}
body.dark-mode .custom-select-trigger:hover {
    background: var(--bg2);
}
.custom-select-trigger.open {
    border-color: var(--border2);
    background: #f8fafc;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
body.dark-mode .custom-select-trigger.open {
    background: var(--bg3);
}
.custom-select-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.custom-select-trigger.open .custom-select-arrow {
    transform: rotate(180deg);
}
.custom-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 9000;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
    opacity: 0;
    transform: translateY(-6px) scaleY(0.97);
    transform-origin: top;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark-mode .custom-select-options {
    background: var(--bg3);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.custom-select-options.open {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    pointer-events: all;
}
.custom-select-option {
    padding: 11px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s ease;
    border-radius: 0;
    text-align: right;
    direction: rtl;
}
.custom-select-option:first-child { border-radius: 10px 10px 0 0; }
.custom-select-option:last-child { border-radius: 0 0 10px 10px; }
.custom-select-option:only-child { border-radius: 10px; }
.custom-select-option:hover {
    background: #e8edf2;
}
body.dark-mode .custom-select-option:hover {
    background: var(--bg2);
}
.custom-select-option.selected {
    background: #edf2f7;
    font-weight: 700;
    color: var(--text);
}
body.dark-mode .custom-select-option.selected {
    background: var(--bg2);
}
.custom-select-option[disabled] {
    color: var(--muted);
    cursor: default;
    font-size: 12px;
}
.custom-select-option[disabled]:hover { background: transparent; }

/* إخفاء الـ select الأصلية التي ستُغلَّف */
.login-input[data-custom-select] { display: none !important; }

/* محاذاة نص الخيارات لجهة الكتابة (يمين للعربية) */
.custom-select-option {
    text-align: right !important;
    direction: rtl !important;
}
.custom-select-trigger .cs-label {
    text-align: right;
    direction: rtl;
    flex: 1;
}

/* زر تثبيت التطبيق في الهيدر (تحسينات إضافية) */
.pwa-install-header-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--green) !important;
    color: white !important;
    border: none !important;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    height: 38px;
}
.pwa-install-header-btn:hover { background: #16a34a !important; transform: translateY(-1px); }
.pwa-install-header-btn .icon { width:18px; height:18px; }

/* شريط أسفل منيو الضيف */
#guestFooterBar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 14px;
    border-top:1px solid var(--border);
    background:var(--bg2);
    color:var(--muted);
    font-size:14px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1005;
    box-shadow:0 -3px 16px rgba(0,0,0,0.08);
}
#guestFooterBar.guest-footer-no-action {
    justify-content:center;
    padding:8px 14px;
}
#guestFooterBar.guest-footer-no-action .guest-footer-text {
    width:100%;
    text-align:center;
}
#guestFooterBar.guest-footer-no-action .confirm-btn {
    display:none;
}
#guestFooterBar .guest-footer-text {
    flex:1 1 auto;
    min-width:0;
    white-space:normal;
    line-height:1.4;
}
#guestFooterBar .confirm-btn {
    padding:8px 12px;
    font-size:14px;
    min-width:120px;
    border-radius:10px;
}

.guest-shell {
    padding-bottom: 110px;
}

#guestInstallBtn {
    width: auto;
    min-width: 120px;
    height: 44px;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
}

#guestInstallBtn svg { display: none !important; }

/* تحسينات ريسبونسيف */
@media (max-width:640px) {
    .pwa-install-header-btn .hide-on-mobile { display:none; }
    #guestFooterBar { flex-direction:column; gap:8px; align-items:stretch; text-align:center; }
    #guestFooterBar .confirm-btn { width:100%; }
}