/* ════════════════════════════════════════════════════════════
   🔧 جراحة لونية شاملة (Surgical Color Fix 2026)
   — تضمن توافقاً تاماً مع الوضع المضيء والداكن باستخدام المتغيرات
   ════════════════════════════════════════════════════════════ */

/* ── 0. تحميل خط الأيقونات محلياً لعدم إظهار النصوص الإنجليزية ── */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block; /* يخفي النص الإنجليزي فوراً حتى يتم تحميل الخط */
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ── 1. توحيد البطاقات والحاويات لتعمل بالمتغيرات ── */
.modal,
.modal-content,
.overlay .modal,
.glass-card,
.search-card,
.feature-card,
.auth-form,
.chat-bubble,
.message-input-container,
.profile-menu,
.transactions-list,
.empty-state,
.user-card,
.stat-card,
.ai-chat-input-wrapper,
.ai-chat-inline-section,
.chat-start-notice,
.scroll-container,
.panel,
.modal-body,
.skeleton-card {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── 2. نصوص الترويسات والعناوين ── */
h1, h2, h3, h4, h5, h6,
.section-title,
.section-subtitle {
  color: var(--text-primary) !important;
}

p, span:not(.material-symbols-outlined), label,
.text-primary, .text-secondary, .text-hint,
.header-greeting, .profile-email, .color-hint {
  color: var(--text-main) !important;
}

/* ── 3. الإشعارات والتنبيهات ── */
#notifications-modal .modal,
.notifications-modal .modal {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

#notifications-modal .modal-header,
.notifications-modal .modal-header {
  border-bottom: 1px solid var(--border-subtle) !important;
}

#notifications-list .notif-item-card,
#notifications-list .notification-item {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

#notifications-list .empty-state {
  background: transparent !important;
  color: var(--text-secondary) !important;
}

/* ── 4. تعديل الحساب (edit-profile-modal) ── */
#edit-profile-modal .modal {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

#edit-profile-modal .modal-header,
#edit-profile-modal label,
#edit-profile-modal h3,
#edit-profile-modal h4 {
  color: var(--text-primary) !important;
}

#edit-profile-modal .input-field,
#edit-profile-modal select.input-field {
  background: var(--bg-surface-elevated) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

#edit-profile-modal .input-field::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.6 !important;
}

#edit-profile-modal select.input-field option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── 5. سجل التحويلات والمحفظة ── */
#screen-wallet .transactions-list .transaction-item,
#screen-wallet .transactions-list .transaction-item-card {
  background: var(--bg-container) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

#screen-wallet .section-title,
#screen-wallet .section-subtitle {
  color: var(--text-primary) !important;
}

/* ── 6. الـ Toast ── */
.toast,
#toast {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-modal) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── 7. كروت إحصائيات الحساب وقوائم الحساب ── */
.profile-menu-item {
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.profile-menu-item .text-main,
.profile-menu-item span {
  color: var(--text-primary) !important;
}

/* ── 8. تباين أزرار الإغلاق ── */
.modal-header .btn-icon,
#close-notifications-modal,
#close-edit-profile-modal,
#close-rating-modal {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  cursor: pointer !important;
}

html:not([data-theme="light"]) .modal-header .btn-icon,
html:not([data-theme="light"]) #close-notifications-modal {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── 9. الـ Overlays والـ Modals بهندسة Bottom Sheet العالمية ── */
.overlay:not(.hidden),
.modal-overlay:not(.hidden) {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 100000 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}

@media (min-width: 600px) {
  .overlay:not(.hidden),
  .modal-overlay:not(.hidden) {
    align-items: center !important;
    padding: 20px !important;
  }
}

.overlay:not(.hidden) .modal,
.modal-overlay:not(.hidden) .modal,
.modal {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 500px !important;
  max-height: calc(100dvh - 35px) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: #0F1F1B !important;
  border: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  border-bottom: none !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

@media (min-width: 600px) {
  .overlay:not(.hidden) .modal,
  .modal {
    border-radius: 24px !important;
    border-bottom: 1.5px solid rgba(52, 216, 158, 0.25) !important;
    max-height: 85dvh !important;
  }
}

.modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: #142E26 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
}

.modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  touch-action: pan-y !important;
  scroll-behavior: auto !important;
  max-height: 100% !important;
}

.modal-footer,
#prescription-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 16px)) !important;
  background: #142E26 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}


/* ── 20. Master Surgical Color & Typography Enforcement (100% Compliance) ── */
:root, [data-theme="dark"], body, html {
  --color-primary: #10B981 !important;
  --color-primary-light: #34D89E !important;
  --color-primary-dim: #34D89E !important;
  --color-primary-bg: rgba(16, 185, 129, 0.15) !important;
  --color-secondary: #FFA94D !important;
  --color-secondary-light: #FFA94D !important;
  --bg-page: #0A1F1A !important;
  --bg-body: #0A1F1A !important;
  --bg-card: rgba(16, 185, 129, 0.05) !important;
  --bg-container: rgba(16, 185, 129, 0.08) !important;
  --text-primary: #F8FAFC !important;
  --text-secondary: #9CA3AF !important;
  --border-color: rgba(52, 216, 158, 0.15) !important;
  --border-subtle: rgba(52, 216, 158, 0.1) !important;
}

/* Strict Typography Enforcement */
body, .app-header, .bottom-nav, .modal, .card, .btn, .input-field, .toast, .empty-state, h1, h2, h3, h4, h5, h6, p, span:not(.material-symbols-outlined), label, a {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
}

/* Numbers, Prices, Distances, OTP, Barcodes, Badges */
.new-price, .old-price, .stock-count, .distance-badge, .badge, .amount-btn, .phone-input, .otp-input, code, .price, .number, [class*="price"], [class*="distance"], [class*="number"] {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── البند 1: أزرار الطلب والدردشة ── */
.btn-primary, .order-btn, button[class*="order"], a[class*="order"], .product-quick-btn {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border: 1.5px solid #10B981 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
  border-radius: 12px !important;
}
.btn-primary:hover, .order-btn:hover, button[class*="order"]:hover, a[class*="order"]:hover, .product-quick-btn:hover {
  background: #34D89E !important;
  border-color: #34D89E !important;
  color: #0A1F1A !important;
}

.btn-secondary, .chat-btn, button[class*="chat"], a[class*="chat"] {
  background: transparent !important;
  color: #10B981 !important;
  border: 1.5px solid #10B981 !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}
.btn-secondary:hover, .chat-btn:hover, button[class*="chat"]:hover, a[class*="chat"]:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D89E !important;
  border-color: #34D89E !important;
}

/* ── البند 2: شارة العرض (Ribbon أمبر) ── جراحي: إزالة العرض الثابت وتمكين التمدد مع النص + RTL ── */
.offer-badge, [title*="عرض"], [title*="لحق"], .badge-offer, .discount-badge {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 0 12px 0 12px !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-shadow: 0 2px 8px rgba(255, 169, 77, 0.3) !important;
  z-index: 5 !important;
  direction: rtl !important;
}

/* ── إصلاح شبكة الوصول السريع لتدعم 5 أعمدة على 360dp بدون قص ── */
.quick-services-grid {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.quick-services-grid::-webkit-scrollbar { display: none !important; }
.quick-action-card {
  flex: 0 0 64px !important;
  min-width: 64px !important;
}

/* ── إصلاح بطاقات المنتجات: منع تراكب شريط التحميل البرتقالي فوق السعر/الأزرار ── */
.med-card-world, .product-card {
  overflow: visible !important;
}
.med-card-world .med-badge-tag {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
/* شبكة المنتجات: عمود واحد على الشاشات الضيقة جداً لمنع ضغط البطاقة */
@media (max-width: 400px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 401px) and (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.med-footer-row, .search-result-actions {
  flex-wrap: nowrap !important;
  gap: 6px !important;
  direction: rtl !important;
}
.med-price-display {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.med-actions-flex, .search-result-btns {
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  direction: rtl !important;
}
.pharmacy-info-banner {
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.pharmacy-distance-pill {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* إخفاء الـ shimmer فقط بعد اكتمال تحميل البطاقة — يُدار عبر JS وليس إخفاء عام */
.med-card-world:has(.med-title-text:not(:empty)) .skeleton,
.product-card:has(.med-title-text:not(:empty)) .skeleton {
  display: none !important;
}

/* ── البند 4: تنسيق السعر (Typography) ── */
.new-price, .current-price, .price-now {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #34D89E !important;
}
.old-price, .original-price, .price-before {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #6B7280 !important;
  text-decoration: line-through !important;
  margin-inline-start: 6px !important;
}

/* ── البند 5: وزن الصيدلية بصرياً ── */
.storefront-icon, .pharmacy-logo, .pharmacy-card .material-symbols-outlined, .medicine-card .material-symbols-outlined {
  font-size: 28px !important;
  color: #10B981 !important;
  transform: scale(1.3) !important;
  margin-inline-end: 8px !important;
  display: inline-block !important;
}
.pharmacy-name, .store-name, .order-ph-name {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 600 !important;
  color: #F8FAFC !important;
  font-size: 15px !important;
}

/* ── البند 6: تسمية الرصيد ⭐ ── */
#real-wallet-amount, .wallet-amount {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  color: #34D89E !important;
}
.wallet-label, #wallet-header-btn span[style*="font-size: 10px"], #wallet-header-btn span[style*="font-size: 9px"] {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 11px !important;
  color: #9CA3AF !important;
  font-weight: 600 !important;
}

/* ── البند 7: تصادم الهيدر في الطلبات النشطة ── */
.app-section, #screen-orders, #screen-home .section-header {
  padding-top: 24px !important;
  margin-top: 16px !important;
}
.header-greeting {
  margin-bottom: 12px !important;
}
#active-orders-container, .active-orders-section {
  clear: both !important;
  margin-top: 20px !important;
}
.section-header .btn, .section-header button {
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}

/* ── البند 8: تدرج منطقتك الحالية وإزالة الأزرق ── */
.location-banner, .current-location, [class*="location-banner"], .location-header {
  background: linear-gradient(135deg, #10B981 0%, #34D89E 100%) !important;
  color: #0A1F1A !important;
}
.location-banner *, .current-location *, [class*="location-banner"] * {
  color: #0A1F1A !important;
}

/* ── البند 9: أيقونة الاتجاهات في بطاقات الصيدليات ── */
.map-btn, [id^="directions-btn-"], a[href*="maps/dir"], button[class*="direction"], a[class*="direction"] {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 169, 77, 0.25) !important;
}
.map-btn *, [id^="directions-btn-"] *, a[href*="maps/dir"] *, button[class*="direction"] *, a[class*="direction"] * {
  color: #0A1F1A !important;
}
.map-btn:hover, [id^="directions-btn-"]:hover, a[href*="maps/dir"]:hover {
  background: #34D89E !important;
  color: #0A1F1A !important;
}

/* ── البند 10: أيقونة الصندوق في الحالة الفارغة ── */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 20px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.empty-state .icon, .empty-state .material-symbols-outlined, .empty-state img {
  font-size: 56px !important;
  color: #34D89E !important;
  opacity: 0.6 !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.empty-state h3, .empty-state h4 {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  font-size: 18px !important;
  margin: 0 0 8px 0 !important;
}
.empty-state p {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  color: #9CA3AF !important;
  margin: 0 !important;
  max-width: 280px !important;
  line-height: 1.6 !important;
}

/* ── البند 11: Typography المسافة واسم الصيدلية ── */
.distance-badge, .pharmacy-distance, [class*="distance"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #9CA3AF !important;
}

/* ── البند 12: توحيد نظام المصادقة والمودالات (إزالة أي أزرق/بنفسجي/وردي) ── */
.modal, .modal-content, .auth-card, .auth-form {
  background: #0A1F1A !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(52, 216, 158, 0.2) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
.modal-header {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.modal-header * {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ══ [جراحي] إصلاح شامل وحاسم لشفافية ووضوح نصوص حقول الإدخال ══
   يضمن وضوح كلمة المرور والبريد الإلكتروني 100% في الواجهات (المريض والصيدلي)
   سواء في الوضع المظلم (Dark Mode) أو الوضع المضيء (Light Mode)
   مع معالجة الملء التلقائي (Autofill) وتنسيق نقاط كلمات السر
   ═══════════════════════════════════════════════════════════════════ */

input,
.input-field,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

input[type="password"],
#login-password,
#reg-password,
#ph-password,
#edit-profile-password,
#edit-profile-password-confirm,
#settings-pharmacy-password,
#settings-pharmacy-password-confirm {
  letter-spacing: 2px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
}

/* ── الوضع المظلم (Dark Mode) ── */
html[data-theme="dark"] input,
html[data-theme="dark"] .input-field,
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
.pharmacy-body input,
.pharmacy-body .input-field,
.pharmacy-body input[type="email"],
.pharmacy-body input[type="password"],
.pharmacy-auth .input-field,
.auth-card .input-field,
.auth-form .input-field,
.modal .input-field {
  background-color: #1E2D2B !important;
  background: #1E2D2B !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #34D89E !important;
  border: 1.5px solid rgba(52, 216, 158, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] .input-field:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
.pharmacy-body input:focus,
.pharmacy-body .input-field:focus,
.pharmacy-auth .input-field:focus,
.auth-card .input-field:focus,
.auth-form .input-field:focus,
.modal .input-field:focus {
  background-color: #0A1815 !important;
  background: #0A1815 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #34D89E !important;
  border-color: #34D89E !important;
  box-shadow: 0 0 0 3.5px rgba(52, 216, 158, 0.25) !important;
  outline: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] .input-field::placeholder,
.pharmacy-body input::placeholder,
.pharmacy-auth .input-field::placeholder,
.auth-card .input-field::placeholder,
.auth-form .input-field::placeholder,
.modal .input-field::placeholder {
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
  opacity: 0.85 !important;
}

/* ── الوضع المضيء (Light Mode) ── */
html[data-theme="light"] input,
html[data-theme="light"] .input-field,
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .pharmacy-auth .input-field,
html[data-theme="light"] .auth-card .input-field,
html[data-theme="light"] .auth-form .input-field,
html[data-theme="light"] .modal .input-field {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  caret-color: #0D9488 !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] .input-field:focus,
html[data-theme="light"] input[type="email"]:focus,
html[data-theme="light"] input[type="password"]:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .pharmacy-auth .input-field:focus,
html[data-theme="light"] .auth-card .input-field:focus,
html[data-theme="light"] .auth-form .input-field:focus,
html[data-theme="light"] .modal .input-field:focus {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  caret-color: #0D9488 !important;
  border-color: #0D9488 !important;
  box-shadow: 0 0 0 3.5px rgba(13, 148, 136, 0.18) !important;
  outline: none !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] .input-field::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
  opacity: 0.9 !important;
}

/* ── معالجة الملء التلقائي (Browser Autofill) ── */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover, 
html[data-theme="dark"] input:-webkit-autofill:focus, 
html[data-theme="dark"] input:-webkit-autofill:active,
.pharmacy-body input:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #1E2D2B inset !important;
  box-shadow: 0 0 0 1000px #1E2D2B inset !important;
  caret-color: #34D89E !important;
  transition: background-color 5000s ease-in-out 0s;
}

html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover, 
html[data-theme="light"] input:-webkit-autofill:focus, 
html[data-theme="light"] input:-webkit-autofill:active {
  -webkit-text-fill-color: #0F172A !important;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  caret-color: #0D9488 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── استهداف مباشر لعناصر الهوية والمصادقة ── */
#login-email,
#login-password,
#reg-email,
#reg-password,
#ph-email,
#ph-password,
#ph-reg-name,
#ph-reg-phone,
#ph-reg-license,
#edit-profile-password,
#edit-profile-password-confirm,
#settings-pharmacy-password,
#settings-pharmacy-password-confirm {
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* فئات عناصر المصادقة الحديثة Material Design 3 */
.auth-input-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.auth-input-icon {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--color-primary, #10B981) !important;
  font-size: 22px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.auth-input {
  width: 100% !important;
  height: 54px !important;
  padding-right: 48px !important;
  padding-left: 16px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(52, 216, 158, 0.3) !important;
  background: #1E2D2B !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.auth-input[type="password"] {
  padding-left: 54px !important;
}

.auth-input:focus {
  border-color: #34D89E !important;
  background: #0D201B !important;
  box-shadow: 0 0 0 3.5px rgba(52, 216, 158, 0.25) !important;
}

.auth-toggle-pwd {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: #94A3B8 !important;
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

.auth-toggle-pwd:hover {
  color: #34D89E !important;
  background: rgba(52, 216, 158, 0.1) !important;
}

.auth-biometric-btn {
  background: transparent !important;
  border: 1.5px solid rgba(52, 216, 158, 0.35) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  height: 54px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
}

.auth-biometric-btn:hover {
  background: rgba(52, 216, 158, 0.08) !important;
  border-color: #34D89E !important;
}

.auth-google-btn {
  background: #172824 !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  height: 54px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

.auth-google-btn:hover {
  background: #1F3630 !important;
  border-color: #34D89E !important;
}

.auth-portal-btn {
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 46px !important;
  padding: 0 24px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}


.auth-tabs, .auth-toggle-container {
  display: flex !important;
  background: #122822 !important;
  border-radius: 16px !important;
  padding: 5px !important;
  border: 1px solid rgba(52, 216, 158, 0.18) !important;
  margin-bottom: 20px !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.auth-tab, .auth-toggle-btn {
  flex: 1 1 50% !important;
  min-width: 0 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #94A3B8 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.auth-tab.active, .auth-toggle-btn.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  font-weight: 800 !important;
}
.auth-tab:hover:not(.active), .auth-toggle-btn:hover:not(.active) {
  background: rgba(52, 216, 158, 0.08) !important;
  color: #FFFFFF !important;
}

/* إزالة أي لون أزرق أو بنفسجي أو وردي من الشارات والأزرار */
.badge-blue, .badge-purple, .badge-pink, [class*="blue"], [class*="purple"], [class*="pink"], [style*="#0ea5e9"], [style*="#006c49"] {
  background: rgba(255, 169, 77, 0.15) !important;
  color: #FFA94D !important;
  border-color: rgba(255, 169, 77, 0.3) !important;
}

/* ── البند 2 (تكملة): شارة العرض لأي عنصر يحمل نار أو خصم ── */
[title*="خص"], [title*="🔥"], [style*="#FFA94D"] {
  background: #FFA94D !important;
  color: #0A1F1A !important;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 0 12px 0 12px !important;
  box-shadow: 0 2px 8px rgba(255, 169, 77, 0.3) !important;
}

/* ── البند 3: ضبط وتحديث بطاقة البحث السريع (بدون لمس HTML) ── */
.search-card {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.search-card h3 {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  margin: 0 0 12px 0 !important;
}
.search-wrapper input#medicine-search, .search-input {
  background: rgba(10, 31, 26, 0.8) !important;
  border: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  color: #F8FAFC !important;
  border-radius: 14px !important;
  height: 52px !important;
  padding-inline-start: 44px !important;
  padding-inline-end: 88px !important;
  font-weight: 600 !important;
}
.search-wrapper input#medicine-search:focus, .search-input:focus {
  border-color: #34D89E !important;
  box-shadow: 0 0 0 3px rgba(52, 216, 158, 0.2) !important;
}
.search-wrapper .search-icon {
  color: #10B981 !important;
  font-size: 22px !important;
  right: 14px !important;
}
#voice-search-btn, #barcode-search-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: none !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
}
#voice-search-btn:hover, #barcode-search-btn:hover {
  background: #10B981 !important;
  color: #0A1F1A !important;
}

/* ── البند 8: إزالة التدرج السماوي/الأزرق من بطاقة مواعيد أدويتي ── */
.glass-card, [style*="rgba(8, 145, 178"] {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
}

#forgot-password-link {
  color: #FFA94D !important;
  background: rgba(255, 169, 77, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}
#forgot-password-link:hover {
  background: rgba(255, 169, 77, 0.2) !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════
   💎 تثبيت فائق الدقة والتباين لنمط المظهر المضيء (Light Theme Fix)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"],
[data-theme="light"] {
  --text-primary: #0f172a !important;
  --text-secondary: #334155 !important;
  --text-main: #0f172a !important;
  --text-hint: #475569 !important;
  --bg-page: #f8fafc !important;
  --bg-card: #ffffff !important;
  --bg-surface-elevated: #f1f5f9 !important;
  --border-color: rgba(15, 23, 42, 0.12) !important;
  --border-subtle: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body,
html[data-theme="light"] #app-screen,
html[data-theme="light"] #screen-profile,
html[data-theme="light"] .app-main,
html[data-theme="light"] .app-section {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* ── بطاقة المستخدم في حسابي ── */
html[data-theme="light"] #screen-profile .user-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

html[data-theme="light"] #profile-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] #profile-email {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] #screen-profile .screen-header h2 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}

/* ── بطاقات الإحصائيات (Stat Cards) ── */
html[data-theme="light"] .stat-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .stat-card h4 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .stat-card span {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* ── قوائم وعناصر حسابي (Profile Menu) ── */
html[data-theme="light"] .profile-menu {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .profile-menu-item {
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .profile-menu-item span:not(.material-symbols-outlined) {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .profile-menu-item .arrow {
  color: #94a3b8 !important;
}

html[data-theme="light"] .profile-menu-item:hover {
  background: #f0fdf4 !important;
}

/* ── اختيار المظهر (Theme Select) ── */
html[data-theme="light"] #theme-select {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] #theme-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ── حقول البحث والإدخال في النمط المضيء ── */
html[data-theme="light"] .search-wrapper input#medicine-search,
html[data-theme="light"] .search-input,
html[data-theme="light"] .input-field,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

/* ── النوافذ المنبثقة والبطاقات في النمط المضيء ── */
html[data-theme="light"] .modal {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .modal h1,
html[data-theme="light"] .modal h2,
html[data-theme="light"] .modal h3,
html[data-theme="light"] .modal h4,
html[data-theme="light"] .modal p,
html[data-theme="light"] .modal label,
html[data-theme="light"] .input-label {
  color: #0f172a !important;
}

html[data-theme="light"] .glass-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.18) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .bottom-nav .nav-btn {
  color: #64748b !important;
}

html[data-theme="light"] .bottom-nav .nav-btn.active {
  color: #10b981 !important;
}

/* ══════════════════════════════════════════════════════════════════
   📱 التوافق الشامل للهواتف وشارة المسافة (Zero-Clipping Responsive Design)
   ══════════════════════════════════════════════════════════════════ */
.pharmacy-distance-pill {
  font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFA94D !important;
  background: rgba(255, 169, 77, 0.14) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.pharmacy-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}

@media (max-width: 480px) {
  .search-result-item.detailed.med-card-world {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  
  .search-result-item.detailed.med-card-world .med-photo-stage {
    width: 72px !important;
    height: 72px !important;
    padding: 6px !important;
    margin-inline-end: 8px !important;
  }

  .search-result-item.detailed.med-card-world .med-box-img {
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .search-result-item.detailed.med-card-world .med-title-text {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
  }

  .search-result-item.detailed.med-card-world .med-sub-text {
    font-size: 10.5px !important;
  }

  .search-result-pharmacy-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .pharmacy-name {
    max-width: 115px !important;
    font-size: 11px !important;
  }

  .pharmacy-distance-pill {
    font-size: 10px !important;
    padding: 1.5px 5px !important;
  }

  .search-result-actions {
    min-width: 72px !important;
    gap: 6px !important;
  }

  .med-price-display {
    font-size: 16px !important;
  }

  .med-btn-order {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   🤖 وضوح فائق لرسائل وإخلاء مسؤولية بوت دوائي (AI Medical Disclaimer)
   ══════════════════════════════════════════════════════════════════ */
.ai-top-disclaimer-bar {
  background: rgba(245, 158, 11, 0.12) !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.45 !important;
}

.ai-top-disclaimer-bar .disclaimer-icon {
  font-size: 20px !important;
  color: #FFA94D !important;
  flex-shrink: 0 !important;
}

.ai-top-disclaimer-bar .disclaimer-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #FCD34D !important;
}

.ai-bot-bubble {
  background: #14332A !important;
  color: #F8FAFC !important;
  padding: 14px 18px !important;
  border-radius: 18px 18px 18px 4px !important;
  max-width: 88% !important;
  border: 1.5px solid rgba(52, 216, 158, 0.22) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  text-align: right !important;
  margin-top: 10px !important;
}

.ai-bot-disclaimer {
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  color: #FDE68A !important;
  font-weight: 600 !important;
}

.ai-bot-disclaimer .disclaimer-svg {
  color: #FFA94D !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* في النمط المضيء (Light Mode) */
html[data-theme="light"] .ai-top-disclaimer-bar {
  background: #FEF3C7 !important;
  border-bottom: 1.5px solid #F59E0B !important;
}

html[data-theme="light"] .ai-top-disclaimer-bar .disclaimer-icon {
  color: #D97706 !important;
}

html[data-theme="light"] .ai-top-disclaimer-bar .disclaimer-text {
  color: #92400E !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .ai-bot-bubble {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .ai-reply-content {
  color: #0F172A !important;
}

html[data-theme="light"] .ai-bot-disclaimer {
  background: #FFFBEB !important;
  border: 1.5px solid #F59E0B !important;
  color: #78350F !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .ai-bot-disclaimer .disclaimer-svg {
  color: #D97706 !important;
}

/* ══════════════════════════════════════════════════════════════════
   📦 Material Design 3 — شاشة طلباتي والشريط السفلي وزر الكاميرا
   ══════════════════════════════════════════════════════════════════ */

/* كبسولات الفلترة (Filter Chips) */
.orders-filter {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 2px 14px 2px !important;
  margin-bottom: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.orders-filter::-webkit-scrollbar {
  display: none !important;
}

.filter-btn {
  padding: 8px 18px !important;
  border-radius: 100px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  background: #1A2E28 !important;
  color: #94A3B8 !important;
  border: 1.5px solid rgba(52, 216, 158, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.filter-btn:hover:not(.active) {
  background: #233D35 !important;
  color: #FFFFFF !important;
  border-color: rgba(52, 216, 158, 0.35) !important;
}

.filter-btn.active {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #FFFFFF !important;
  border-color: #34D89E !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* بطاقات الطلبات (Order Cards) */
.order-card {
  background: #13241F !important;
  border: 1px solid rgba(52, 216, 158, 0.18) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.order-card:hover {
  border-color: rgba(52, 216, 158, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.order-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.order-card-id {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #34D89E !important;
  background: rgba(52, 216, 158, 0.1) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.order-card-pharmacy {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
}

.order-status-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* شريط التنقل السفلي والزر العائم FAB */
.bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  min-height: calc(64px + env(safe-area-inset-bottom, 10px)) !important;
  background: rgba(15, 31, 27, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(52, 216, 158, 0.15) !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.35) !important;
  z-index: 100 !important;
}

.fab-upload, #camera-prescription-btn, .fab-prescription {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fab-upload:hover, #camera-prescription-btn:hover, .fab-prescription:hover {
  transform: translateY(-4px) scale(1.05) !important;
}








/* ══════════════════════════════════════════════════════════════
   ══ PHARMACY DASHBOARD — LIGHT & DARK THEME SUPPORT ══
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   LIGHT THEME (Default — Maximum Readability)
   ──────────────────────────────────────────────────────────── */
html[data-theme="light"] .pharmacy-body,
html:not([data-theme="dark"]) .pharmacy-body {
  background: #f8fafc !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .dashboard-main,
html:not([data-theme="dark"]) .pharmacy-body .dashboard-main {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .dashboard-header,
html:not([data-theme="dark"]) .pharmacy-body .dashboard-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .stat-chip,
html:not([data-theme="dark"]) .pharmacy-body .stat-chip {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .stat-chip-green,
html:not([data-theme="dark"]) .pharmacy-body .stat-chip-green {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #065f46 !important;
}

html[data-theme="light"] .pharmacy-body .stat-chip-blue,
html:not([data-theme="dark"]) .pharmacy-body .stat-chip-blue {
  background: rgba(52, 216, 158, 0.08) !important;
  color: #0058be !important;
}

html[data-theme="light"] .pharmacy-body .stat-chip-red,
html:not([data-theme="dark"]) .pharmacy-body .stat-chip-red {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
}

/* Panels */
html[data-theme="light"] .pharmacy-body .panel,
html:not([data-theme="dark"]) .pharmacy-body .panel {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .pharmacy-body .panel-header h2,
html:not([data-theme="dark"]) .pharmacy-body .panel-header h2 {
  color: #1e293b !important;
}

/* Order Cards */
html[data-theme="light"] .pharmacy-body .order-ph-card,
html:not([data-theme="dark"]) .pharmacy-body .order-ph-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .order-ph-patient,
html:not([data-theme="dark"]) .pharmacy-body .order-ph-patient {
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .order-ph-time,
html:not([data-theme="dark"]) .pharmacy-body .order-ph-time {
  color: #64748b !important;
}

html[data-theme="light"] .pharmacy-body .order-ph-prescription,
html:not([data-theme="dark"]) .pharmacy-body .order-ph-prescription {
  background: #f8fafc !important;
  color: #475569 !important;
}

html[data-theme="light"] .pharmacy-body .order-ph-prescription::after,
html:not([data-theme="dark"]) .pharmacy-body .order-ph-prescription::after {
  background: linear-gradient(transparent, #ffffff) !important;
}

/* Stat Cards */
html[data-theme="light"] .pharmacy-body .stat-card,
html:not([data-theme="dark"]) .pharmacy-body .stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .stat-card h3,
html:not([data-theme="dark"]) .pharmacy-body .stat-card h3 {
  color: #64748b !important;
}

html[data-theme="light"] .pharmacy-body .stat-card .stat-value,
html[data-theme="light"] .pharmacy-body .stat-card p.stat-value,
html:not([data-theme="dark"]) .pharmacy-body .stat-card .stat-value,
html:not([data-theme="dark"]) .pharmacy-body .stat-card p.stat-value {
  color: #006c49 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

/* Inventory Table */
html[data-theme="light"] .pharmacy-body .inventory-table-wrapper,
html:not([data-theme="dark"]) .pharmacy-body .inventory-table-wrapper {
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .inventory-table th,
html:not([data-theme="dark"]) .pharmacy-body .inventory-table th {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

html[data-theme="light"] .pharmacy-body .inventory-table td,
html:not([data-theme="dark"]) .pharmacy-body .inventory-table td {
  color: #1e293b !important;
  border-top: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .pharmacy-body .inventory-table tr:hover td,
html:not([data-theme="dark"]) .pharmacy-body .inventory-table tr:hover td {
  background: #f8fafc !important;
}

/* Input Fields */
html[data-theme="light"] .pharmacy-body .input-field,
html[data-theme="light"] .pharmacy-body input,
html[data-theme="light"] .pharmacy-body textarea,
html[data-theme="light"] .pharmacy-body select,
html:not([data-theme="dark"]) .pharmacy-body .input-field,
html:not([data-theme="dark"]) .pharmacy-body input,
html:not([data-theme="dark"]) .pharmacy-body textarea,
html:not([data-theme="dark"]) .pharmacy-body select {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .pharmacy-body .input-field:focus,
html:not([data-theme="dark"]) .pharmacy-body .input-field:focus {
  border-color: #006c49 !important;
  box-shadow: 0 0 0 3px rgba(0, 108, 73, 0.12) !important;
}

html[data-theme="light"] .pharmacy-body .input-label,
html[data-theme="light"] .pharmacy-body label,
html:not([data-theme="dark"]) .pharmacy-body .input-label,
html:not([data-theme="dark"]) .pharmacy-body label {
  color: #475569 !important;
}

/* Filter Buttons */
html[data-theme="light"] .pharmacy-body .filter-btn,
html:not([data-theme="dark"]) .pharmacy-body .filter-btn {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .filter-btn.active,
html:not([data-theme="dark"]) .pharmacy-body .filter-btn.active {
  background: #006c49 !important;
  color: #ffffff !important;
  border-color: #006c49 !important;
}

/* Empty State */
html[data-theme="light"] .pharmacy-body .empty-state,
html:not([data-theme="dark"]) .pharmacy-body .empty-state {
  background: #ffffff !important;
  border: 1px dashed #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

html[data-theme="light"] .pharmacy-body .empty-state h3,
html:not([data-theme="dark"]) .pharmacy-body .empty-state h3 {
  color: #475569 !important;
}

/* Chat */
html[data-theme="light"] .pharmacy-body .chat-layout,
html:not([data-theme="dark"]) .pharmacy-body .chat-layout {
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .chat-list,
html:not([data-theme="dark"]) .pharmacy-body .chat-list {
  background: #ffffff !important;
}

html[data-theme="light"] .pharmacy-body .chat-list-header,
html:not([data-theme="dark"]) .pharmacy-body .chat-list-header {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .chat-conversation-item,
html:not([data-theme="dark"]) .pharmacy-body .chat-conversation-item {
  color: #1e293b !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .pharmacy-body .chat-patient-name,
html:not([data-theme="dark"]) .pharmacy-body .chat-patient-name {
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .chat-window,
html:not([data-theme="dark"]) .pharmacy-body .chat-window {
  background: #f8fafc !important;
}

html[data-theme="light"] .pharmacy-body .chat-bubble.received,
html:not([data-theme="dark"]) .pharmacy-body .chat-bubble.received {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

/* Reports */
html[data-theme="light"] .pharmacy-body .report-card,
html:not([data-theme="dark"]) .pharmacy-body .report-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .report-value,
html:not([data-theme="dark"]) .pharmacy-body .report-value {
  color: #006c49 !important;
}

html[data-theme="light"] .pharmacy-body .report-label,
html:not([data-theme="dark"]) .pharmacy-body .report-label {
  color: #64748b !important;
}

/* Modals */
html[data-theme="light"] .pharmacy-body .overlay .modal,
html[data-theme="light"] .pharmacy-body .modal,
html:not([data-theme="dark"]) .pharmacy-body .overlay .modal,
html:not([data-theme="dark"]) .pharmacy-body .modal {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .pharmacy-body .modal-header h3,
html:not([data-theme="dark"]) .pharmacy-body .modal-header h3 {
  color: #1e293b !important;
}

/* Auth Card */
html[data-theme="light"] .pharmacy-body .auth-card,
html:not([data-theme="dark"]) .pharmacy-body .auth-card {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .pharmacy-body .auth-card h2,
html:not([data-theme="dark"]) .pharmacy-body .auth-card h2 {
  color: #1e293b !important;
}

html[data-theme="light"] .pharmacy-body .pharmacy-auth,
html:not([data-theme="dark"]) .pharmacy-body .pharmacy-auth {
  background: linear-gradient(160deg, #e0f2fe 0%, #f0fdf4 50%, #f8fafc 100%) !important;
}

/* Body background override for glass-upgrade dark forcing */
html[data-theme="light"] body.pharmacy-body,
html:not([data-theme="dark"]) body.pharmacy-body {
  background: #f8fafc !important;
}

/* Override glass-upgrade.css dark gradient on light theme */
html[data-theme="light"] body,
html:not([data-theme="dark"]) body.pharmacy-body {
  background: #f8fafc !important;
}

/* ────────────────────────────────────────────────────────────
   DARK THEME
   ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] .pharmacy-body {
  background: #0d1f17 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body.pharmacy-body {
  background: #0d1f17 !important;
}

html[data-theme="dark"] .pharmacy-body .dashboard-main {
  background: #0f2921 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .dashboard-header {
  background: #122822 !important;
  border-bottom: 1px solid rgba(52, 216, 158, 0.15) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .stat-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .pharmacy-body .stat-chip-green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d89e !important;
}

html[data-theme="dark"] .pharmacy-body .stat-chip-blue {
  background: rgba(52, 216, 158, 0.12) !important;
  color: #34d89e !important;
}

html[data-theme="dark"] .pharmacy-body .stat-chip-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .pharmacy-body .panel {
  background: #0f2921 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .pharmacy-body .panel-header h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .order-ph-card {
  background: #122822 !important;
  border: 1px solid rgba(52, 216, 158, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .order-ph-patient {
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .order-ph-time {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .pharmacy-body .order-ph-prescription {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .pharmacy-body .order-ph-prescription::after {
  background: linear-gradient(transparent, #122822) !important;
}

html[data-theme="dark"] .pharmacy-body .stat-card {
  background: #122822 !important;
  border: 1px solid rgba(52, 216, 158, 0.12) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .stat-card h3 {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .pharmacy-body .stat-card .stat-value,
html[data-theme="dark"] .pharmacy-body .stat-card p.stat-value {
  color: #34d89e !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .pharmacy-body .inventory-table th {
  background: #1a3c30 !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .pharmacy-body .inventory-table td {
  color: #e2e8f0 !important;
  border-top: 1px solid rgba(52, 216, 158, 0.08) !important;
}

html[data-theme="dark"] .pharmacy-body .input-field,
html[data-theme="dark"] .pharmacy-body input,
html[data-theme="dark"] .pharmacy-body textarea,
html[data-theme="dark"] .pharmacy-body select {
  background: #1e2d2b !important;
  color: #ffffff !important;
  border: 1px solid rgba(52, 216, 158, 0.2) !important;
}

html[data-theme="dark"] .pharmacy-body .input-label,
html[data-theme="dark"] .pharmacy-body label {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .pharmacy-body .filter-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .pharmacy-body .filter-btn.active {
  background: #006c49 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .empty-state {
  background: transparent !important;
  border: 1px dashed rgba(52, 216, 158, 0.2) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .pharmacy-body .empty-state h3 {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .pharmacy-body .chat-list {
  background: #0d1f17 !important;
}

html[data-theme="dark"] .pharmacy-body .chat-list-header {
  background: #122822 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .chat-conversation-item {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .pharmacy-body .chat-patient-name {
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .chat-window {
  background: #0f2921 !important;
}

html[data-theme="dark"] .pharmacy-body .chat-bubble.received {
  background: #1e2d2b !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .pharmacy-body .report-card {
  background: #122822 !important;
  border: 1px solid rgba(52, 216, 158, 0.12) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .report-value {
  color: #34d89e !important;
}

html[data-theme="dark"] .pharmacy-body .report-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .pharmacy-body .overlay .modal,
html[data-theme="dark"] .pharmacy-body .modal {
  background: #122822 !important;
  color: #ffffff !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
}

html[data-theme="dark"] .pharmacy-body .modal-header h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .auth-card {
  background: #122822 !important;
  color: #ffffff !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
}

html[data-theme="dark"] .pharmacy-body .auth-card h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .pharmacy-body .pharmacy-auth {
  background: linear-gradient(160deg, #0A1F1A 0%, #1e293b 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   🚀 ترقية سلاسة التمرير العالمية (Ultra-Fast 120 FPS Kinetic Scroll)
   ══════════════════════════════════════════════════════════════ */

/* إلغاء smooth scroll البرمجي على التمرير باللمس لمنع التجميد والثقل */
html, body, .app-main, .modal, .modal-body, .scroll-container {
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* تفعيل تسريع كارت الشاشة GPU على حاويات التمرير الفرعية فقط (ليس .app-main) */
.modal-body,
.scroll-container,
.orders-list,
.pharmacies-grid,
.category-scroll,
.horizontal-scroll,
.drawer-content {
  will-change: scroll-position;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* منع تجميد النوافذ المنبثقة وضمان بقاء الرأس والأسفل ثابتين */
.modal-sheet {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90dvh, 760px) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

.modal-sheet .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

.modal-sheet .modal-header,
.modal-sheet .modal-footer {
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

/* تنسيق مربع نص التعرف على الوصفة OCR */
.ocr-textarea {
  font-family: 'Noto Sans Arabic', 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  background: #10221D !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-sizing: border-box !important;
  touch-action: pan-y !important;
}


/* ── تمكين السكرول والتمرير باللمس على جميع النوافذ وقوائم الصيدليات ── */
#select-pharmacy-modal .modal-body,
#select-pharmacy-list,
.pharmacy-select-card,
.modal-body {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  pointer-events: auto !important;
}

#select-pharmacy-modal .modal {
  height: 85dvh !important;
  max-height: 85dvh !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ══════════════════════════════════════════════════════════════
   🚀 ضمانات التمرير الشامل لجميع الشاشات (الرئيسية، طلباتي، المحفظة)
   ══════════════════════════════════════════════════════════════ */

/* ضمان عمل السكرول للأعلى وللأسفل في الشاشة الرئيسية وقسم طلباتي */
html, body {
  height: 100% !important;
  overflow: hidden !important;
  position: static !important; /* يمنع تثبيت الصفحة وتجميد السكرول */
}

.app-main {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(95px + env(safe-area-inset-bottom, 16px)) !important;
  scroll-behavior: auto !important;
  box-sizing: border-box !important;
}

#screen-home,
#screen-orders,
#screen-profile,
#screen-cart,
#screen-chat,
.app-section {
  touch-action: pan-y !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

#all-orders-list,
.orders-list {
  touch-action: pan-y !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   💎 وضوح فائق لنوافذ تأكيد الطلب واستلام OTP (High Contrast Modals)
   ══════════════════════════════════════════════════════════════════ */

.otp-modal-card,
.order-confirm-card,
#otp-modal .modal,
#order-confirm-modal .modal {
  background: #13241F !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(52, 216, 158, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

.otp-modal-card h2,
.otp-modal-card h3,
.order-confirm-card h2,
.order-confirm-card h3,
#otp-modal h2,
#otp-modal h3,
#order-confirm-modal h2,
#order-confirm-modal h3 {
  color: #FFFFFF !important;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
}

.otp-modal-card p,
.order-confirm-card p,
#otp-modal p,
#order-confirm-modal p {
  color: #CBD5E1 !important;
  font-weight: 500 !important;
}

#order-confirm-text {
  color: #F1F5F9 !important;
  background: rgba(52, 216, 158, 0.1) !important;
  border: 1px solid rgba(52, 216, 158, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

#otp-input {
  background: #0A1815 !important;
  color: #34D89E !important;
  -webkit-text-fill-color: #34D89E !important;
  caret-color: #34D89E !important;
  border: 2px solid #34D89E !important;
  box-shadow: 0 0 0 4px rgba(52, 216, 158, 0.18) !important;
  font-weight: 900 !important;
}

#track-otp-code {
  color: #34D89E !important;
  -webkit-text-fill-color: #34D89E !important;
  background: #0D1E1A !important;
  border: 1.5px solid rgba(52, 216, 158, 0.4) !important;
}

/* في الوضع المضيء (Light Mode) */
html[data-theme="light"] .otp-modal-card,
html[data-theme="light"] .order-confirm-card,
html[data-theme="light"] #otp-modal .modal,
html[data-theme="light"] #order-confirm-modal .modal {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .otp-modal-card h2,
html[data-theme="light"] .otp-modal-card h3,
html[data-theme="light"] .order-confirm-card h2,
html[data-theme="light"] .order-confirm-card h3,
html[data-theme="light"] #otp-modal h2,
html[data-theme="light"] #otp-modal h3,
html[data-theme="light"] #order-confirm-modal h2,
html[data-theme="light"] #order-confirm-modal h3 {
  color: #0F172A !important;
}

html[data-theme="light"] .otp-modal-card p,
html[data-theme="light"] .order-confirm-card p,
html[data-theme="light"] #otp-modal p,
html[data-theme="light"] #order-confirm-modal p {
  color: #475569 !important;
}

html[data-theme="light"] #order-confirm-text {
  color: #064E3B !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
}

html[data-theme="light"] #otp-input {
  background: #F8FAFC !important;
  color: #0D9488 !important;
  -webkit-text-fill-color: #0D9488 !important;
  caret-color: #0D9488 !important;
  border: 2px solid #0D9488 !important;
}

html[data-theme="light"] #track-otp-code {
  color: #0D9488 !important;
  -webkit-text-fill-color: #0D9488 !important;
  background: #F0FDF4 !important;
  border: 1.5px solid #86EFAC !important;
}

/* ══════════════════════════════════════════════════════════════════
   🏥 وضوح فائق لبيانات المريض والبيانات الطبية والتنبيهات للصيدلي
   ══════════════════════════════════════════════════════════════════ */

/* الوضع المظلم الافتراضي (Dark Mode) */
.order-medical-title {
  color: #F87171 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}

.order-medical-card {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #FFFFFF !important;
}

.order-medical-card .medical-label {
  color: #F1F5F9 !important;
  font-weight: 700 !important;
}

.order-medical-card .medical-val {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

.order-medical-card .medical-val.text-warn {
  color: #FCA5A5 !important;
  font-weight: 800 !important;
  background: rgba(239, 68, 68, 0.2) !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}

.order-medical-card .medical-val.text-disease {
  color: #FCA5A5 !important;
  font-weight: 800 !important;
}

.order-medical-card .medical-val.text-hint {
  color: #94A3B8 !important;
}

.order-missing-data-alert {
  margin-top: 10px !important;
  font-size: 12.5px !important;
  color: #FDE68A !important;
  font-weight: 700 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  line-height: 1.5 !important;
}

.order-section-title {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #34D89E !important;
  margin-bottom: 8px !important;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}

.order-patient-card,
.order-products-card {
  background: #18253E !important;
  border: 1px solid rgba(52, 216, 158, 0.2) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: #FFFFFF !important;
}

.patient-card-name {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}

.patient-card-detail {
  color: #CBD5E1 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.patient-card-detail .material-symbols-outlined {
  color: #34D89E !important;
}

.order-item-title {
  color: #FFFFFF !important;
  font-size: 14px !important;
}

.order-item-title strong {
  color: #FFFFFF !important;
}

.order-item-price {
  color: #34D89E !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

/* في الوضع المضيء (Light Mode) دون إفساده */
html[data-theme="light"] .order-medical-title {
  color: #B91C1C !important;
}

html[data-theme="light"] .order-medical-card {
  background: #FEF2F2 !important;
  border: 1.5px solid #FCA5A5 !important;
  color: #0F172A !important;
}

html[data-theme="light"] .order-medical-card .medical-label {
  color: #0F172A !important;
}

html[data-theme="light"] .order-medical-card .medical-val {
  color: #1E293B !important;
}

html[data-theme="light"] .order-medical-card .medical-val.text-warn {
  color: #DC2626 !important;
  background: #FEE2E2 !important;
}

html[data-theme="light"] .order-medical-card .medical-val.text-disease {
  color: #DC2626 !important;
}

html[data-theme="light"] .order-medical-card .medical-val.text-hint {
  color: #64748B !important;
}

html[data-theme="light"] .order-missing-data-alert {
  color: #92400E !important;
  background: #FFFBEB !important;
  border: 1px solid #FCD34D !important;
}

html[data-theme="light"] .order-section-title {
  color: #006C49 !important;
}

html[data-theme="light"] .order-patient-card,
html[data-theme="light"] .order-products-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
}

html[data-theme="light"] .patient-card-name {
  color: #0F172A !important;
}

html[data-theme="light"] .patient-card-detail {
  color: #475569 !important;
}

html[data-theme="light"] .patient-card-detail .material-symbols-outlined {
  color: #0D9488 !important;
}

html[data-theme="light"] .order-item-title {
  color: #0F172A !important;
}

html[data-theme="light"] .order-item-title strong {
  color: #0F172A !important;
}

html[data-theme="light"] .order-item-price {
  color: #0D9488 !important;
}




/* ══════════════════════════════════════════════════════════════
   🔔 أنماط الإشعارات العائمة السريعة (WhatsApp / iOS Dynamic Island)
   & أنيميشن تنبيه الرمز الخاطئ (Shake Error)
   ══════════════════════════════════════════════════════════════ */

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-8px); }
  30%, 60%, 90% { transform: translateX(8px); }
}

.shake-error {
  animation: shakeError 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
  border-color: #EF4444 !important;
  color: #EF4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25) !important;
}

.floating-notif-banner {
  box-sizing: border-box !important;
  border-radius: 20px !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

.floating-notif-banner:active {
  transform: scale(0.97) !important;
}


/* ══════════════════════════════════════════════════════════════
   📱 إصلاح التمرير الجراحي لشاشات شاومي بوكو (Xiaomi POCO Scroll Fix)
   ══════════════════════════════════════════════════════════════ */

/* إزالة أي قفل تمرير متداخل من قوائم الطلبات الداخلية */
#all-orders-list,
.orders-list,
#active-orders-list {
  overflow: visible !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  height: auto !important;
  max-height: none !important;
  min-height: min-content !important;
}

/* بطاقات الطلبات مع تمكين السكرول الفوري باللمس */
.order-card {
  touch-action: pan-y !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transform: none !important;
}

.order-card:hover {
  transform: none !important;
}

.order-card:active {
  transform: scale(0.99) !important;
}

/* الحاوية الرئيسية للتمرير */
.app-main {
  overflow-y: scroll !important; /* Force native momentum scrollbar */
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
}


/* ══════════════════════════════════════════════════════════════
   🔝 رفع جميع الإشعارات والـ Toasts إلى أعلى الشاشة بالكامل
   لحمايتها من أزرار هواتف أندرويد وشاومي السفلية
   ══════════════════════════════════════════════════════════════ */

.toast, 
#toast {
  top: max(20px, env(safe-area-inset-top, 20px)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-30px) !important;
  position: fixed !important;
  z-index: 9999999 !important;
  border-radius: 50px !important;
  background: rgba(15, 31, 27, 0.96) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1.5px solid rgba(52, 216, 158, 0.4) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  padding: 12px 24px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

.toast.show, 
#toast.show {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* ══════════════════════════════════════════════════════════════
   ☀️ ضبط تباين شريط الهيدر ورصيدك في الوضع المضيء والداكن
   ══════════════════════════════════════════════════════════════ */

/* ── نمط الهيدر في الوضع المظلم (Dark Mode) ── */
[data-theme="dark"] .app-header {
  background: rgba(15, 31, 27, 0.95) !important;
  border-bottom: 1px solid rgba(52, 216, 158, 0.15) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .app-header .header-name,
[data-theme="dark"] #user-name {
  color: #FFFFFF !important;
}

[data-theme="dark"] .app-header .header-greeting,
[data-theme="dark"] #user-greeting {
  color: #94A3B8 !important;
}

[data-theme="dark"] #chat-inbox-btn,
[data-theme="dark"] #notif-btn,
[data-theme="dark"] #wallet-header-btn {
  background: #1E2D2B !important;
  border: 1px solid rgba(52, 216, 158, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .wallet-label {
  color: #94A3B8 !important;
}

[data-theme="dark"] .wallet-balance-mini,
[data-theme="dark"] #wallet-mini {
  color: #34D89E !important;
  background: rgba(52, 216, 158, 0.12) !important;
}

/* ── نمط الهيدر فائق الوضوح في الوضع المضيء (Light Mode) ── */
[data-theme="light"] .app-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .app-header .header-name,
[data-theme="light"] #user-name {
  color: #0F172A !important; /* أسود ناصع وواضح جداً */
  font-weight: 800 !important;
}

[data-theme="light"] .app-header .header-greeting,
[data-theme="light"] #user-greeting {
  color: #475569 !important; /* رمادي داكن فائق التباين */
  font-weight: 600 !important;
}

[data-theme="light"] #chat-inbox-btn,
[data-theme="light"] #notif-btn,
[data-theme="light"] #wallet-header-btn {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] #chat-inbox-btn span,
[data-theme="light"] #notif-btn span {
  color: #0F172A !important;
}

[data-theme="light"] .wallet-label {
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .wallet-balance-mini,
[data-theme="light"] #wallet-mini {
  color: #059669 !important;
  background: #E6F4EA !important;
  font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════════════════
   🚀 إصلاح شاشة تسجيل الدخول والتسجيل وأزرار الهاتف وقوقل
   ══════════════════════════════════════════════════════════════ */

#auth-screen:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 24px)) !important;
}

#auth-screen.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

.glow-blob,
.glow-blob-1,
.glow-blob-2,
.glow-blob-3 {
  display: none !important;
  pointer-events: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
  z-index: -10 !important;
}

.splash.fade-out,
#splash-screen.hidden,
.splash.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -10 !important;
}

.auth-tab,
.auth-toggle-btn,
.auth-google-btn,
#send-otp-btn,
#login-btn,
#register-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* ══════════════════════════════════════════════════════════════
   🤖 حماية متقدمة وشاملة لدردشة بوت دوائي وشاشات المحادثات من حواف شاشات أندرويد ولوحة المفاتيح
   ══════════════════════════════════════════════════════════════ */

#screen-ai:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  height: var(--app-visible-height, 100dvh) !important;
  max-height: var(--app-visible-height, 100dvh) !important;
  z-index: 99999 !important;
  background: #0B1713 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#screen-ai .track-header {
  padding-top: max(42px, env(safe-area-inset-top, 42px)) !important;
  padding-bottom: 12px !important;
  padding-inline: max(16px, env(safe-area-inset-left, 16px)) max(16px, env(safe-area-inset-right, 16px)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(52, 216, 158, 0.2) !important;
  background: #142E26 !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  min-height: 74px !important;
  box-sizing: border-box !important;
}

#screen-ai #ai-chat-inline-section {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  background: #0B1713 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#screen-ai #ai-chat-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #0B1713 !important;
  box-sizing: border-box !important;
}

#screen-ai .ai-chat-input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 10px !important;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
  padding-inline: max(16px, env(safe-area-inset-left, 16px)) max(16px, env(safe-area-inset-right, 16px)) !important;
  border-top: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  background: #142E26 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  transition: padding-bottom 0.15s ease-out !important;
}

#screen-ai #ai-chat-input,
#chat-modal #chat-message-input {
  font-size: 15px !important;
  touch-action: manipulation !important;
}

body.keyboard-open #screen-ai .ai-chat-input-wrapper,
body.keyboard-open #chat-modal .chat-input-wrapper {
  padding-bottom: 8px !important;
}

/* حماية الهيدر الرئيسي من التداخل مع شريط الحالة وساعة الموبايل العلوية */
.app-header {
  padding-top: max(14px, env(safe-area-inset-top, 14px)) !important;
  padding-bottom: 12px !important;
  padding-inline: 16px !important;
  min-height: 64px !important;
  box-sizing: border-box !important;
}

#wallet-header-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-inline-start: 2px !important;
}

/* إخفاء الهيدر الرئيسي وشريط التنقل السفلي نهائياً عند فتح شاشة الذكاء الاصطناعي */
body.ai-screen-active .app-header,
body.ai-screen-active .bottom-nav,
.app-header.hidden,
.bottom-nav.hidden,
#screen-ai:not(.hidden) ~ .bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  z-index: -1 !important;
}

#chat-modal:not(.hidden) {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  z-index: 999999 !important;
}

#chat-modal .chat-modal-box {
  width: 100% !important;
  max-width: 500px !important;
  height: 92dvh !important;
  max-height: var(--app-visible-height, 92dvh) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: #0F1F1B !important;
  border: 1.5px solid rgba(52, 216, 158, 0.25) !important;
  border-bottom: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#chat-modal .chat-input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-top: 10px !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  padding-inline: max(16px, env(safe-area-inset-left, 16px)) max(16px, env(safe-area-inset-right, 16px)) !important;
  background: #142E26 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
}

.chat-bubble {
  max-width: 82% !important;
  word-break: break-word !important;
  line-height: 1.6 !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  touch-action: pan-y !important;
}

.chat-bubble.mine {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  color: #FFFFFF !important;
  border-bottom-left-radius: 4px !important;
  align-self: flex-start !important;
}

.chat-bubble.theirs {
  background: #1E2D2B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(52, 216, 158, 0.2) !important;
  border-bottom-right-radius: 4px !important;
  align-self: flex-end !important;
}

/* ═══════════════════════════════════════════════════════════════
   SURGICAL UI REFACTORING — Glass & Glow Enhancements
   Added: 2026-08-19
   ═══════════════════════════════════════════════════════════════ */

/* --- Dark Mode: Glassmorphism Cards --- */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .user-card,
[data-theme="dark"] .order-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .search-card,
[data-theme="dark"] .category-card {
  background: rgba(22, 33, 29, 0.85) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

/* --- Light Mode: Soft Shadow Cards --- */
[data-theme="light"] .stat-card,
[data-theme="light"] .user-card,
[data-theme="light"] .order-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .search-card,
[data-theme="light"] .category-card {
  background: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
}

/* --- Consistent Card Spacing --- */
.order-card,
.stat-card,
.glass-card,
.search-card,
.category-card {
  padding: 16px !important;
  border-radius: 16px !important;
  margin-bottom: 12px;
}

.user-card {
  padding: 20px !important;
  border-radius: 16px !important;
}

/* --- Active Button Glow --- */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-submit,
[data-theme="dark"] button[type="submit"] {
  box-shadow: 0 0 20px rgba(0, 229, 153, 0.3) !important;
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-submit:active {
  box-shadow: 0 0 30px rgba(0, 229, 153, 0.5) !important;
}

/* --- Camera FAB Glow (Dark) --- */
[data-theme="dark"] .upload-fab,
[data-theme="dark"] .fab-circle {
  box-shadow: 0 0 25px rgba(0, 229, 153, 0.45), 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .upload-fab:active,
[data-theme="dark"] .fab-circle:active {
  box-shadow: 0 0 35px rgba(0, 229, 153, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* --- Light Mode: Subtle Button Shadows --- */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-submit {
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="light"] .upload-fab,
[data-theme="light"] .fab-circle {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35) !important;
}

/* --- Material Symbols Icon Sizing for UI replacements --- */
.material-symbols-outlined.icon-sm {
  font-size: 18px !important;
  vertical-align: middle;
}

.material-symbols-outlined.icon-md {
  font-size: 24px !important;
  vertical-align: middle;
}

.material-symbols-outlined.icon-lg {
  font-size: 32px !important;
  vertical-align: middle;
}

.material-symbols-outlined.icon-xl {
  font-size: 48px !important;
  vertical-align: middle;
}

/* Theme-aware icon colors */
[data-theme="dark"] .material-symbols-outlined.icon-themed {
  color: #00E599 !important;
}

[data-theme="light"] .material-symbols-outlined.icon-themed {
  color: #10B981 !important;
}

/* Status icon colors */
.material-symbols-outlined.icon-success { color: #10B981 !important; }
.material-symbols-outlined.icon-warning { color: #FFA94D !important; }
.material-symbols-outlined.icon-error { color: #F87171 !important; }
.material-symbols-outlined.icon-info { color: #0284C7 !important; }
.material-symbols-outlined.icon-muted { color: var(--text-secondary) !important; }

/* ═══════════════════════════════════════════════════════════════
   VITALITY & PHARMACY UI ENHANCEMENTS — 2026-08-24
   ═══════════════════════════════════════════════════════════════ */

/* --- Quick Services Grid (4 Pills) --- */
.quick-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.quick-action-card {
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.quick-action-card:active {
  transform: scale(0.95) !important;
  filter: brightness(1.1) !important;
}

[data-theme="dark"] .quick-action-card {
  background: rgba(22, 33, 29, 0.85) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .quick-action-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* --- Quick Search Chips --- */
.quick-search-chips {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.quick-search-chips::-webkit-scrollbar {
  display: none !important;
}

.search-chip {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.search-chip:active {
  transform: scale(0.94) !important;
  background: rgba(0, 229, 153, 0.25) !important;
  border-color: #00E599 !important;
  color: #00E599 !important;
}

/* --- Hero Banner Pulse Animation --- */
.hero-pharmacy-banner {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* floatPulse removed */
  100% { transform: translateY(-3px); }
}

/* --- Smooth Tap Feedback on Cards --- */
.symptom-card,
.category-card,
.prescription-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.symptom-card:active,
.category-card:active {
  transform: scale(0.96) !important;
}

.prescription-card:active {
  transform: scale(0.98) !important;
}

/* ═══════════════════════════════════════════════════════════════
   🚀 ULTRA-PERFORMANCE: 120 FPS GPU HARDWARE ACCELERATION
   Engineered for Native Feel, Smooth Scrolling & Instant Response
   ═══════════════════════════════════════════════════════════════ */

/* 1. Global Smooth Text & Rendering */
html, body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: auto;
}

/* 2. Fluid Scroll Configuration for Viewport Containers */
.app-screen,
.app-section,
.order-list-container,
.meds-grid,
.quick-actions-grid {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* 3. Smooth Cards without Layout Containment Traps */
.order-card,
.stat-card,
.quick-action-card,
.category-card,
.pharmacy-card,
.glass-card,
.med-box-item {
  contain: none;
}

/* 4. Native Spring Feedback on Tap */
.btn-primary,
.quick-action-card,
.category-card,
.filter-chip,
.nav-btn {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-primary:active,
.quick-action-card:active {
  transform: scale(0.95) translateZ(0) !important;
}

/* 5. Fluid Modal Opening & Glass Elevation */
.modal,
.modal-content,
.bottom-sheet {
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 6. Floating Action Button (FAB) Elevation */
.upload-fab,
.camera-fab,
.floating-prescription-btn {
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow;
  box-shadow: 0 10px 30px rgba(0, 229, 153, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ⚡ ULTRA SPEED & ANTI-FOUT FONT PROTECTION (Slow 2G/3G Internet)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Prevent raw English ligature words from flashing on slow connections */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-display: swap;
  text-rendering: optimizeLegibility;
}

/* 2. Before font finishes loading: transparent text + sleek tiny shimmer placeholder */
/* pulseGhost removed */
  50% { opacity: 0.7; transform: scale(1); }
}


.upload-fab:active,
.camera-fab:active {
  transform: scale(0.92) translate3d(0, 0, 0) !important;
}

/* ══════════════════════════════════════════════════════════════
   📜 حماية وانسيابية السكرول واللمس لكافة الشاشات (الرئيسية، حسابي، طلباتي)
   ══════════════════════════════════════════════════════════════ */

/* الهيكل الخارجي المعزول لمنع الاهتزاز */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  touch-action: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;
}

#app-screen {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

.app-header {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* إلغاء أي تأثيرات خلفية ثقيلة تستهلك GPU وتجمد اللمس على أجهزة أندرويد */
.glow-blob,
.glow-blob-1,
.glow-blob-2,
.glow-blob-3 {
  display: none !important;
  pointer-events: none !important;
}

/* الحاوية المركزية - نافذة العرض الثابتة */
.app-main {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* الشاشات الفردية داخل الحاوية المركزية - كل شاشة حاوية تمرير مستقلة 120 FPS */
.app-section {
  display: none;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  padding: 16px !important;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 30px)) !important;
}

.app-section:not(.hidden) {
  display: block !important;
}

.app-section.hidden {
  display: none !important;
}

/* ضبط شاشة الرئيسية وحسابي وطلباتي - مطابقة 100% لتجربة التمرير المستقل الفوري */
#screen-home,
#screen-orders,
#screen-track,
#screen-wallet,
#screen-returns,
#screen-chat,
#screen-profile {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  box-sizing: border-box !important;
  padding: 16px !important;
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 30px)) !important;
  contain: none !important;
  will-change: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* ضمان أن كافة العناصر والبطاقات في الرئيسية وحسابي تسمح بالسحب الرأسي دون أي اعتراض */
.quick-services-grid,
.quick-action-card,
.hero-pharmacy-banner,
.categories-container,
.user-card,
.stat-card,
.profile-menu,
.profile-menu-item,
.orders-list,
.orders-filter {
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

#screen-profile .profile-menu {
  margin-bottom: 24px !important;
}

/* التمرير الأفقي الآمن للعناصر والشارات دون حجب التمرير الرأسي */
.quick-search-chips,
.categories-scroll,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}

/* 2. إلغاء الرسوميات المتحركة اللانهائية لتوفير طاقة المعالج */
.hero-pharmacy-banner .pulse-container {
  animation: none !important;
}

/* 3. تخفيف backdrop-filter لتسريع استجابة اللمس */
.bottom-nav,
.app-header,
.screen-header-fixed {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 4. إخفاء أي طبقة منبثقة أو نافذة غير مفعلة لمنع حجب اللمس نهائياً */
.overlay.hidden,
.modal.hidden,
.modal-overlay.hidden,
[class*="overlay"].hidden,
[id*="modal"].hidden,
div.overlay.hidden,
#prescription-modal.hidden,
#chat-modal.hidden,
#notifications-modal.hidden,
#rating-modal.hidden,
#edit-profile-modal.hidden,
#barcode-scanner-modal.hidden,
#order-confirm-modal.hidden,
#add-reminder-modal.hidden,
#email-verify-modal.hidden,
#city-picker-modal.hidden,
#favorites-modal.hidden,
#map-location-picker-modal.hidden,
#select-pharmacy-modal.hidden,
#privacy-policy-modal.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -99999 !important;
}

/* 5. ضمان استجابة النقر الفوري على الأزرار */
button, a, .nav-btn, .menu-item, .icon-btn, .profile-menu-item,
input, textarea, select, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}


/* ══════════════════════════════════════════════════════════════
   🏥 فصل شاشة تسجيل الدخول عن لوحة تحكم الصيدلية بنسبة 100%
   ══════════════════════════════════════════════════════════════ */

#pharmacy-auth.hidden,
.pharmacy-auth.hidden,
.pharmacy-body #pharmacy-auth.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -100 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

#pharmacy-dashboard.hidden,
.dashboard.hidden,
.pharmacy-body #pharmacy-dashboard.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -100 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

#pharmacy-auth:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  position: relative !important;
  min-height: 100dvh !important;
  width: 100% !important;
  z-index: 10 !important;
}

#pharmacy-dashboard:not(.hidden) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  min-height: 100dvh !important;
  width: 100% !important;
  z-index: 1 !important;
  position: relative !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 UI/UX PRO MAX — MASTER DESIGN SYSTEM 2026
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Emerald Medical Obsidian Palette (WCAG AAA) */
  --pro-primary: #10B981;
  --pro-primary-light: #34D89E;
  --pro-primary-dark: #059669;
  --pro-primary-glow: rgba(16, 185, 129, 0.22);
  
  --pro-gold: #F59E0B;
  --pro-gold-light: #FCD34D;
  --pro-gold-glow: rgba(245, 158, 11, 0.25);
  
  --pro-bg-oled: #08130F;
  --pro-surface-1: #0D1F17;
  --pro-surface-2: #13241F;
  --pro-surface-glass: rgba(19, 36, 31, 0.85);
  
  --pro-border-subtle: rgba(52, 216, 158, 0.16);
  --pro-border-glow: rgba(52, 216, 158, 0.35);
  
  --pro-text-main: #FFFFFF;
  --pro-text-muted: #94A3B8;
  --pro-text-hint: #64748B;
  
  --pro-radius-sm: 10px;
  --pro-radius-md: 16px;
  --pro-radius-lg: 22px;
  --pro-radius-xl: 28px;
  --pro-radius-pill: 9999px;
  
  --pro-shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--pro-border-subtle);
  --pro-shadow-glow: 0 4px 20px rgba(16, 185, 129, 0.25);
  --pro-shadow-modal: 0 25px 60px -10px rgba(0, 0, 0, 0.7);
  
  --pro-transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Smooth Scrolling & Global Tap Responsiveness ── */
* {
  -webkit-tap-highlight-color: transparent !important;
}

button, a, .clickable, .card, .btn {
  touch-action: manipulation;
  transition: var(--pro-transition);
}

button:active, a:active, .card:active {
  transform: scale(0.975);
}

/* ── Custom Sleek Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(52, 216, 158, 0.2);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 216, 158, 0.4);
}

/* ── Mobile Safe Area Protection for All Floating & Bottom Elements ── */
.bottom-nav,
.action-bar-floating,
.cart-floating-bar,
.bottom-sheet-content,
.modal-footer,
.sidebar-footer {
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* ── VIP Gold Membership Card Styling ── */
.vip-gold-card {
  background: linear-gradient(135deg, #1C1917 0%, #292524 50%, #1C1917 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 12px 36px -4px rgba(245, 158, 11, 0.18), inset 0 1px 0 rgba(254, 240, 138, 0.3) !important;
  border-radius: var(--pro-radius-xl) !important;
  position: relative;
  overflow: hidden;
}

.vip-gold-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Emergency 24/7 Night Shift Banner ── */
.emergency-neon-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15) !important;
}

/* ── Enhanced Glassmorphic Cards ── */
.glass-pro-card {
  background: var(--pro-surface-glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--pro-border-subtle) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-card) !important;
}

.glass-pro-card:hover {
  border-color: var(--pro-border-glow) !important;
  box-shadow: 0 14px 40px -4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.15) !important;
  transform: translateY(-2px);
}

/* ── Pharmacy Modern Header Stat Chips ── */
.stat-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--pro-radius-pill) !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: var(--pro-transition) !important;
}

.stat-chip:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(52, 216, 158, 0.4) !important;
  transform: translateY(-1px);
}

.stat-chip-green {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #34D89E !important;
}

.stat-chip-blue {
  border-color: rgba(59, 130, 246, 0.4) !important;
  background: rgba(59, 130, 246, 0.1) !important;
  color: #60A5FA !important;
}

.stat-chip-red {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #F87171 !important;
}

/* ── Pharmacy Order Cards ── */
.order-card {
  background: #13241F !important;
  border: 1px solid rgba(52, 216, 158, 0.16) !important;
  border-radius: var(--pro-radius-lg) !important;
  padding: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  transition: var(--pro-transition) !important;
}

.order-card:hover {
  border-color: rgba(52, 216, 158, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 15px rgba(16, 185, 129, 0.1) !important;
}

/* ── Order Status Badges ── */
.status-badge-pending {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.status-badge-preparing {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}
.status-badge-ready {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D89E !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.status-badge-completed {
  background: rgba(100, 116, 139, 0.15) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(100, 116, 139, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════
   🚀 PHARMACY TOUCH, HORIZONTAL SCROLL & EDGE FREEDOM (WINDOWS & MOBILE)
   ══════════════════════════════════════════════════════════════ */

/* تحرير الجسم والحاوية الرئيسية من قيود الحجب الأفقي */
.pharmacy-body,
#pharmacy-dashboard,
.dashboard-main,
.pharmacy-body .panel {
  overflow-x: auto !important;
  touch-action: auto !important;
  box-sizing: border-box !important;
  max-width: 100vw !important;
}

/* حماية حواف الشاشة والتوافق مع شاشات ويندوز والهواتف */
.pharmacy-body .dashboard-header {
  padding: 12px max(20px, env(safe-area-inset-right)) !important;
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  z-index: 50 !important;
  position: sticky !important;
  top: 0 !important;
}

.pharmacy-body .panel {
  padding: 16px max(18px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  width: 100% !important;
}

/* ── تحرير جدول المخزون والتمرير الأفقي لليسار واليمين ── */
.inventory-table-wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 16px !important;
  scrollbar-width: auto !important; /* إظهار شريط التمرير لويندوز */
  scrollbar-color: #10B981 rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 12px !important;
  position: relative !important;
  contain: none !important;
}

/* شريط تمرير واضح وأنيق لبيئة ويندوز والكروم */
.inventory-table-wrapper::-webkit-scrollbar {
  height: 10px !important;
  display: block !important;
}

.inventory-table-wrapper::-webkit-scrollbar-thumb {
  background: #10B981 !important;
  border-radius: 10px !important;
  border: 2px solid #08130F !important;
}

.inventory-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #34D89E !important;
}

.inventory-table-wrapper::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
}

/* أبعاد الجدول لضمان وضوح كامل الأعمدة وإمكانية التحرك لليسار */
.inventory-table {
  min-width: 980px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  direction: rtl !important;
}

.inventory-table th,
.inventory-table td {
  white-space: nowrap !important;
  padding: 12px 14px !important;
}

/* تثبيت عمود الإجراءات أو إبرازه عند التمرير لليسار */
.inventory-table td:last-child,
.inventory-table th:last-child {
  padding-left: 20px !important;
}

/* زر تسجيل الخروج في الهيدر */
.header-logout-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #EF4444 !important;
  transform: translateY(-1px);
}


/* ── زر دخول الصيدلية المطور UI/UX Pro Max ── */
.ph-login-btn-pro {
  position: relative !important;
  overflow: hidden !important;
}

.ph-login-btn-pro::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: 0.6s !important;
}

.ph-login-btn-pro:hover::after {
  left: 150% !important;
}

.ph-login-btn-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.ph-login-btn-pro:active {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

.ph-login-btn-pro:disabled {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
  transform: none !important;
}


/* ══════════════════════════════════════════════════════════════
   ⚡ استجابة لمسية فورية 0ms لجميع الأزرار (Instant Touch Feedback)
   ══════════════════════════════════════════════════════════════ */
button, .btn, .auth-tab, .auth-toggle-btn, .nav-btn, .med-btn-order, .med-card-world, .unified-med-card {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.12s ease !important;
}

button:active, .btn:active, .auth-tab:active, .auth-toggle-btn:active, .med-btn-order:active {
  transform: scale(0.96) !important;
  opacity: 0.88 !important;
}

/* مؤشر ضعف الإنترنت اللحظي */
#weak-network-pill {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(245, 158, 11, 0.95);
  color: #000;
  font-weight: 800;
  font-size: 11.5px;
  padding: 4px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  z-index: 999999;
  display: none;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  animation: slideDown 0.3s ease;
}


/* 🔥 حظر أي طبقة خفية تحجب الضغطات وتجميد الواجهة */
#splash-screen.fade-out,
#splash-screen.hidden,
.splash.fade-out,
.splash.hidden,
.glow-blob,
.glow-blob-1,
.glow-blob-2,
.glow-blob-3 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  width: 0 !important;
  height: 0 !important;
}

#auth-screen {
  pointer-events: auto !important;
  z-index: 100 !important;
}

#auth-screen * {
  pointer-events: auto !important;
}

.auth-tab,
.auth-toggle-btn,
.auth-google-btn,
.auth-biometric-btn,
#login-btn,
#register-btn,
#send-otp-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.auth-tab:active,
.auth-toggle-btn:active,
.btn:active,
button:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}


/* ══════════════════════════════════════════════════════════════
   🔥 عزل تام ومطلق بين شاشة الدخول وشاشة التطبيق لمنع التداخل نهائياً
   ══════════════════════════════════════════════════════════════ */

body.logged-in #auth-screen,
#auth-screen.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

body.logged-out #app-screen,
body.logged-out .bottom-nav,
#app-screen.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

body.logged-out #auth-screen:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 999 !important;
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  background-color: var(--bg-page, #0A1815) !important;
}

body.logged-in #app-screen:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 1 !important;
  position: relative !important;
  width: 100% !important;
}

body.logged-in .bottom-nav {
  display: flex !important;
  visibility: visible !important;
}


/* ══════════════════════════════════════════════════════════════
   🔥 إبادة تامة لكافة النوافذ المخفية لمنع حجب الشاشات واللمس نهائياً
   ══════════════════════════════════════════════════════════════ */
.overlay.hidden,
.modal-overlay.hidden,
.modal.hidden,
[class*="overlay"].hidden,
#chat-modal.hidden,
#rating-modal.hidden,
#edit-profile-modal.hidden,
#favorites-modal.hidden,
#privacy-policy-modal.hidden,
#order-confirm-modal.hidden,
#barcode-scanner-modal.hidden,
#city-picker-modal.hidden,
#notifications-modal.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.overlay:not(.hidden),
.modal-overlay:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════
   🎯 عزل أبعاد الأزرار وحماية اللمس للأندرويد لمنع التداخل والجمود
   ══════════════════════════════════════════════════════════════ */
#auth-screen {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  display: block !important;
  background: var(--bg-page, #0A1815) !important;
  padding: 0 0 40px 0 !important;
  box-sizing: border-box !important;
}

.auth-tabs {
  display: flex !important;
  gap: 10px !important;
  margin: 0 20px 20px !important;
}

.auth-tab {
  flex: 1 !important;
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.auth-toggle-container {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 4px !important;
  border-radius: 14px !important;
}

.auth-toggle-btn {
  flex: 1 !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  border: none !important;
}

#login-btn,
#register-btn,
#send-otp-btn,
#biometric-login-btn,
.auth-google-btn {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin-bottom: 14px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

#login-btn:active,
#register-btn:active,
#send-otp-btn:active,
#biometric-login-btn:active {
  transform: scale(0.97) !important;
}

.input-field.auth-input {
  height: 54px !important;
  min-height: 54px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════════
   👁️ تعزيز وضوح حقول كلمات المرور والمدخلات (High Contrast & Crisp)
   ══════════════════════════════════════════════════════════════ */
.input-field,
.auth-input,
#ph-password,
#ph-email,
#ad-password,
#ad-email,
#login-password,
#login-email,
#reg-password,
#reg-email,
#reg-name,
#reg-phone {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: #11221D !important;
  border: 1.5px solid rgba(52, 216, 158, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}

.input-field:focus,
.auth-input:focus {
  border-color: #34D89E !important;
  background: #142822 !important;
  box-shadow: 0 0 0 3px rgba(52, 216, 158, 0.25) !important;
  outline: none !important;
}

.input-field::placeholder,
.auth-input::placeholder {
  color: rgba(203, 213, 225, 0.6) !important;
  font-weight: 500 !important;
}

.auth-toggle-pwd,
#toggle-ph-password,
#toggle-ad-password,
#toggle-login-password,
#toggle-reg-password {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 50 !important;
  touch-action: manipulation !important;
  border: none !important;
  background: transparent !important;
  color: #34D89E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.auth-toggle-pwd:active,
#toggle-ph-password:active,
#toggle-ad-password:active,
#toggle-login-password:active,
#toggle-reg-password:active {
  transform: scale(0.9) !important;
}


/* ══════════════════════════════════════════════════════════════
   🔒 الحماية الشاملة لتباين كلمات المرور ومنع الخلفية البيضاء نهائياً
   ══════════════════════════════════════════════════════════════ */
#ph-password,
#login-password,
#reg-password,
#ad-password,
.auth-input[type="password"],
.auth-input[type="text"],
.pharmacy-auth input[type="password"],
.pharmacy-auth input[type="text"],
.admin-auth input[type="password"],
.admin-auth input[type="text"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background-color: #11221D !important;
  border: 1.5px solid rgba(52, 216, 158, 0.45) !important;
  -webkit-box-shadow: 0 0 0 1000px #11221D inset !important;
  box-shadow: 0 0 0 1000px #11221D inset !important;
  caret-color: #34D89E !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

#ph-password:-webkit-autofill,
#ph-password:-webkit-autofill:hover,
#ph-password:-webkit-autofill:focus,
#ph-password:-webkit-autofill:active,
#login-password:-webkit-autofill,
#login-password:-webkit-autofill:hover,
#login-password:-webkit-autofill:focus,
#login-password:-webkit-autofill:active,
#reg-password:-webkit-autofill,
#reg-password:-webkit-autofill:hover,
#reg-password:-webkit-autofill:focus,
#reg-password:-webkit-autofill:active,
#ad-password:-webkit-autofill,
#ad-password:-webkit-autofill:hover,
#ad-password:-webkit-autofill:focus,
#ad-password:-webkit-autofill:active {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #11221D inset !important;
  box-shadow: 0 0 0 1000px #11221D inset !important;
  caret-color: #34D89E !important;
  transition: background-color 50000s ease-in-out 0s !important;
}


/* ══════════════════════════════════════════════════════════════
   🔒 قفل نهائي لخلفية حقول الصيدلية والإدارة والمريض (Dark Solid 100%)
   ══════════════════════════════════════════════════════════════ */
.pharmacy-auth .input-field,
.pharmacy-auth input,
.pharmacy-auth input[type="email"],
.pharmacy-auth input[type="password"],
.pharmacy-auth input[type="text"],
#pharmacy-auth .input-field,
#ph-email,
#ph-password,
#ph-reg-name,
#ph-reg-phone,
#ph-reg-license {
  background: #11221D !important;
  background-color: #11221D !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #11221D inset !important;
  box-shadow: 0 0 0 1000px #11221D inset !important;
  border: 1.5px solid rgba(52, 216, 158, 0.45) !important;
  caret-color: #34D89E !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

#ph-email:-webkit-autofill,
#ph-email:-webkit-autofill:hover,
#ph-email:-webkit-autofill:focus,
#ph-email:-webkit-autofill:active,
#ph-password:-webkit-autofill,
#ph-password:-webkit-autofill:hover,
#ph-password:-webkit-autofill:focus,
#ph-password:-webkit-autofill:active {
  background: #11221D !important;
  background-color: #11221D !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #11221D inset !important;
  box-shadow: 0 0 0 1000px #11221D inset !important;
  caret-color: #34D89E !important;
  transition: background-color 50000s ease-in-out 0s !important;
}


/* ══════════════════════════════════════════════════════════════
   🚀 أنماط تسريع الأداء لشبكات 2G/3G (Shimmer + Connectivity Bar)
   ══════════════════════════════════════════════════════════════ */

/* وميض Shimmer الذكي للصور والبطاقات أثناء التحميل */
.shimmer-loading,
.dawaei-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.03) 100%) !important;
  background-size: 200% 100% !important;
  /* shimmer disabled */
}

@keyframes dawaeiShimmerPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.med-box-img {
  transition: opacity 0.3s ease;
}

.med-box-img.shimmer-loading {
  opacity: 0.6;
}

.med-box-img.loaded {
  opacity: 1;
}

/* شريط التنبيه الذكي لحالة الاتصال بالإنترنت */
#dawaei-connectivity-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
}

#dawaei-connectivity-bar.visible {
  transform: translateY(0);
}

#dawaei-connectivity-bar.offline {
  background: linear-gradient(135deg, #B45309, #D97706);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

#dawaei-connectivity-bar.online {
  background: linear-gradient(135deg, #047857, #10B981);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* مؤشر التمرير اللانهائي السفلي */
#pop-pagination-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 24px 0;
  color: #94A3B8;
  font-size: 12.5px;
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   💎 ترقية الهوية البصرية والوضع المضيء المريح للعين (UI/UX 2026)
   ══════════════════════════════════════════════════════════════ */

/* بطاقة الدواء الموحدة - النمط الفخم المتكيف */
.med-card-world,
.unified-med-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  direction: rtl !important;
}

.med-card-world:active,
.unified-med-card:active {
  transform: scale(0.98) !important;
}

/* 🌙 الوضع الداكن الافتراضي (Dark Mode) */
:root, [data-theme="dark"] {
  --med-card-bg: #132721;
  --med-card-border: rgba(16, 185, 129, 0.22);
  --med-card-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  --med-photo-bg: #0B1C17;
  --med-title-color: #FFFFFF;
  --med-sub-color: #94A3B8;
  --med-cat-bg: rgba(16, 185, 129, 0.12);
  --med-cat-color: #34D89E;
  --med-price-color: #34D89E;
  --med-ph-bg: rgba(0, 229, 153, 0.08);
  --med-ph-border: rgba(0, 229, 153, 0.2);
  --med-ph-text: #34D89E;
  --med-btn-dir-bg: rgba(245, 158, 11, 0.14);
  --med-btn-dir-border: rgba(245, 158, 11, 0.35);
  --med-btn-dir-text: #F59E0B;
  --med-fav-bg: rgba(255, 255, 255, 0.06);
  --med-fav-border: rgba(255, 255, 255, 0.12);
}

.med-card-world {
  background: var(--med-card-bg) !important;
  border: 1px solid var(--med-card-border) !important;
  box-shadow: var(--med-card-shadow) !important;
}

.med-photo-stage {
  background: var(--med-photo-bg) !important;
  border-bottom: 1px solid var(--med-card-border) !important;
  height: 120px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.med-photo-stage img {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.med-title-text {
  color: var(--med-title-color) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
}

.med-sub-text {
  color: var(--med-sub-color) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.med-cat-label {
  color: var(--med-cat-color) !important;
  background: var(--med-cat-bg) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
}

.pharmacy-info-banner {
  background: var(--med-ph-bg) !important;
  border: 1px solid var(--med-ph-border) !important;
  border-radius: 8px !important;
}

.pharmacy-info-banner .pharmacy-name {
  color: var(--med-ph-text) !important;
}

/* ☀️ الوضع المضيء الكامل عالي التباين (Light Mode Master) */
[data-theme="light"], body.light-theme, body.theme-light {
  --med-card-bg: #FFFFFF;
  --med-card-border: #E2E8F0;
  --med-card-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  --med-photo-bg: #F8FAFC;
  --med-title-color: #0F172A;
  --med-sub-color: #64748B;
  --med-cat-bg: #ECFDF5;
  --med-cat-color: #047857;
  --med-price-color: #047857;
  --med-ph-bg: #F0FDF4;
  --med-ph-border: #BBF7D0;
  --med-ph-text: #047857;
  --med-btn-dir-bg: #FEF3C7;
  --med-btn-dir-border: #FDE68A;
  --med-btn-dir-text: #B45309;
  --med-fav-bg: #F1F5F9;
  --med-fav-border: #CBD5E1;

  /* Global Light Mode Variables */
  --bg-page: #F8FAF9 !important;
  --bg-body: #F8FAF9 !important;
  --bg-card: #FFFFFF !important;
  --bg-surface: #FFFFFF !important;
  --border-color: #E2E8F0 !important;
  --text-primary: #0F172A !important;
  --text-secondary: #475569 !important;
  --text-muted: #64748B !important;
}

[data-theme="light"] body,
[data-theme="light"] #app-screen,
[data-theme="light"] .app-main,
[data-theme="light"] .patient-dashboard {
  background-color: #F8FAF9 !important;
  color: #0F172A !important;
}

[data-theme="light"] .app-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .search-bar-input,
[data-theme="light"] .input-field,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"] {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  -webkit-text-fill-color: #0F172A !important;
}

[data-theme="light"] .search-bar-input::placeholder,
[data-theme="light"] input::placeholder {
  color: #94A3B8 !important;
}

[data-theme="light"] .bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bottom-nav .nav-item {
  color: #64748B !important;
}

[data-theme="light"] .bottom-nav .nav-item.active {
  color: #047857 !important;
}

/* 🧭 زر التوجيه والملاحة المستقيم الأنيق (Straight, High-End Directions Button) */
.med-btn-directions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: var(--med-btn-dir-bg) !important;
  border: 1px solid var(--med-btn-dir-border) !important;
  color: var(--med-btn-dir-text) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  font-style: normal !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.med-btn-directions:active {
  transform: scale(0.95) !important;
}

.med-btn-directions .material-symbols-outlined {
  font-size: 16px !important;
  color: inherit !important;
  transform: none !important;
  font-style: normal !important;
}

/* إيقاف وميض Shimmer فور تحميل الصورة */
.med-box-img.loaded {
  animation: none !important;
  background: transparent !important;
  opacity: 1 !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 ترقية أزرار الطلب، الإلغاء بالأحمر، والمحفظة في الوضع المضيء
   ══════════════════════════════════════════════════════════════ */

/* زر تأكيد الطلب الموحد - أخضر زمردي فخم */
.btn-confirm-order,
#confirm-order-action-btn,
.btn-checkout-confirm {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
  cursor: pointer !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-confirm-order:active,
#confirm-order-action-btn:active,
.btn-checkout-confirm:active {
  transform: scale(0.97) !important;
}

/* 🛑 زر إلغاء الطلب الموحد - أحمر ناصع واضح ومميز */
.btn-cancel-danger,
.btn-order-cancel,
#order-cancel-btn {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35) !important;
  cursor: pointer !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-cancel-danger:active,
.btn-order-cancel:active,
#order-cancel-btn:active {
  transform: scale(0.97) !important;
}

/* زر الطلب الدائري / السريع في الوضع المضيء */
.med-btn-order-circle,
.med-btn-order {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.38) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-theme="light"] .med-btn-order-circle,
[data-theme="light"] .med-btn-order,
body.light-theme .med-btn-order-circle,
body.light-theme .med-btn-order {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.45) !important;
}

/* ☀️ ضبط المحفظة ونقاط الولاء في الوضع المضيء (High Contrast Light Mode) */
[data-theme="light"] #screen-wallet,
body.light-theme #screen-wallet {
  background-color: #F8FAF9 !important;
  color: #0F172A !important;
}

[data-theme="light"] #screen-wallet .section-title,
body.light-theme #screen-wallet .section-title {
  color: #0F172A !important;
}

[data-theme="light"] .wallet-gold-card,
body.light-theme .wallet-gold-card {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 50%, #F0FDF4 100%) !important;
  border: 1.5px solid #F59E0B !important;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] .wallet-gold-card .card-badge-vip,
body.light-theme .wallet-gold-card .card-badge-vip {
  color: #B45309 !important;
}

[data-theme="light"] .wallet-gold-card .points-label,
body.light-theme .wallet-gold-card .points-label {
  color: #475569 !important;
}

[data-theme="light"] .wallet-gold-card #wallet-amount,
body.light-theme .wallet-gold-card #wallet-amount {
  color: #D97706 !important;
  text-shadow: none !important;
}

[data-theme="light"] .wallet-gold-card .points-unit,
body.light-theme .wallet-gold-card .points-unit {
  color: #B45309 !important;
}

[data-theme="light"] .wallet-gold-card .real-wallet-box,
body.light-theme .wallet-gold-card .real-wallet-box {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .wallet-gold-card .real-wallet-box .balance-label,
body.light-theme .wallet-gold-card .real-wallet-box .balance-label {
  color: #475569 !important;
}

[data-theme="light"] .wallet-gold-card .real-wallet-box #real-wallet-amount,
body.light-theme .wallet-gold-card .real-wallet-box #real-wallet-amount {
  color: #047857 !important;
}

[data-theme="light"] .wallet-referral-card,
body.light-theme .wallet-referral-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .wallet-referral-card h4,
body.light-theme .wallet-referral-card h4 {
  color: #0F172A !important;
}

[data-theme="light"] .wallet-referral-card p,
body.light-theme .wallet-referral-card p {
  color: #475569 !important;
}

[data-theme="light"] .wallet-referral-card .referral-code-box,
body.light-theme .wallet-referral-card .referral-code-box {
  background: #F8FAFC !important;
  border: 1.5px dashed #CBD5E1 !important;
}

[data-theme="light"] .wallet-referral-card #patient-referral-code-display,
body.light-theme .wallet-referral-card #patient-referral-code-display {
  color: #D97706 !important;
}

[data-theme="light"] .wallet-info-mini-card,
body.light-theme .wallet-info-mini-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
}

[data-theme="light"] .wallet-info-mini-card h4,
body.light-theme .wallet-info-mini-card h4 {
  color: #0F172A !important;
}

[data-theme="light"] .wallet-info-mini-card p,
body.light-theme .wallet-info-mini-card p {
  color: #64748B !important;
}

/* بطاقات أفراد العائلة وإضافة تذكير في الوضع المضيء */
[data-theme="light"] .order-confirm-card,
body.light-theme .order-confirm-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .order-confirm-card h3,
body.light-theme .order-confirm-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] .order-confirm-card #order-confirm-text,
body.light-theme .order-confirm-card #order-confirm-text {
  background: #F0FDF4 !important;
  color: #047857 !important;
  border: 1px solid #BBF7D0 !important;
}

[data-theme="light"] .order-confirm-card label,
body.light-theme .order-confirm-card label {
  color: #0F172A !important;
}

[data-theme="light"] .order-confirm-card select,
body.light-theme .order-confirm-card select {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  -webkit-text-fill-color: #0F172A !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 باقة الحلول الشاملة (Goal Master Suite 2026)
   ══════════════════════════════════════════════════════════════ */

/* زر X الموحد للإغلاق والخروج في كافة النوافذ والشاشات */
.btn-close-universal,
.screen-close-btn,
.btn-back-ai-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
  color: #EF4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-close-universal:active,
.screen-close-btn:active,
.btn-back-ai-close:active {
  transform: scale(0.92) !important;
  background: rgba(239, 68, 68, 0.25) !important;
}

[data-theme="light"] .btn-close-universal,
[data-theme="light"] .screen-close-btn,
[data-theme="light"] .btn-back-ai-close,
body.light-theme .btn-close-universal,
body.light-theme .screen-close-btn,
body.light-theme .btn-back-ai-close {
  background: #FEE2E2 !important;
  border: 1.5px solid #FCA5A5 !important;
  color: #DC2626 !important;
}

/* زر المفضلة / القلب الواضح والمميز */
.med-btn-icon,
.btn-fav-action {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: var(--med-fav-bg, rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid var(--med-fav-border, rgba(255, 255, 255, 0.15)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.med-btn-icon:active,
.btn-fav-action:active {
  transform: scale(0.92) !important;
}

[data-theme="light"] .med-btn-icon,
body.light-theme .med-btn-icon {
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
}

/* أزرار الخدمات السريعة (استشارة البوت، منظم الحبوب، صيدليات) */
.quick-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.quick-action-card {
  border-radius: 16px !important;
  padding: 12px 6px !important;
  text-align: center !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease !important;
  background: #142822 !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
}

.quick-action-card:active {
  transform: scale(0.95) !important;
}

[data-theme="light"] .quick-action-card,
body.light-theme .quick-action-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .quick-action-card span,
body.light-theme .quick-action-card span {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* بطاقة التحديث السحابي OTA داخل الهاتف */
.in-app-update-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.06)) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

[data-theme="light"] .in-app-update-card,
body.light-theme .in-app-update-card {
  background: #ECFDF5 !important;
  border: 1.5px solid #A7F3D0 !important;
}

[data-theme="light"] .in-app-update-card h4,
body.light-theme .in-app-update-card h4 {
  color: #047857 !important;
}

[data-theme="light"] .in-app-update-card p,
body.light-theme .in-app-update-card p {
  color: #065F46 !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 باقة المراجعة الشاملة لواجهة المستخدم (UI/UX 4-Point Suite)
   ══════════════════════════════════════════════════════════════ */

/* 1. ضمان تحميل وتنسيق كافة الأيقونات في قسم الحساب وكافة الشاشات */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
}

.profile-menu-item .material-symbols-outlined,
.profile-menu-item svg {
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* 2. ضبط التباعد وحجم الخط تحت عناوين 'الحق العرض' والعروض الحصرية */
.offers-container .med-card-world,
#home-offers-list .med-card-world {
  padding: 14px 16px !important;
  gap: 12px !important;
}

.offers-container .med-badge-tag,
#home-offers-list .med-badge-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
  margin-bottom: 6px !important;
  width: fit-content !important;
  position: static !important;
}

.offers-container .med-title-text,
#home-offers-list .med-title-text {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  margin-bottom: 3px !important;
}

.offers-container .med-sub-text,
#home-offers-list .med-sub-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  margin-bottom: 6px !important;
}

/* 3. زر إغلاق النافذة البارز والواضح على جميع الشاشات والنوافذ المنبثقة */
.modal-header .btn-close-universal,
.modal-header .btn-icon,
.modal .btn-close-modal {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  color: #EF4444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.modal-header .btn-close-universal:active,
.modal-header .btn-icon:active,
.modal .btn-close-modal:active {
  transform: scale(0.92) !important;
  background: rgba(239, 68, 68, 0.25) !important;
}

[data-theme="light"] .modal-header .btn-close-universal,
[data-theme="light"] .modal-header .btn-icon,
[data-theme="light"] .modal .btn-close-modal,
body.light-theme .modal-header .btn-close-universal,
body.light-theme .modal-header .btn-icon,
body.light-theme .modal .btn-close-modal {
  background: #FEE2E2 !important;
  border: 1.5px solid #FCA5A5 !important;
  color: #DC2626 !important;
}

/* 4. ثبات وتناسق كافة أزرار الإجراءات بجوار زر 'توجيه' */
.med-actions-flex {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  direction: rtl !important;
}

.med-actions-flex .med-btn-directions {
  flex-shrink: 0 !important;
}

.med-actions-flex .med-btn-icon {
  flex-shrink: 0 !important;
}

.med-actions-flex .med-btn-order-circle,
.med-actions-flex .med-btn-order {
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   ⚡ ترقية السرعة الفائقة وحذف كافة مؤثرات النبض والوميض العالقة
   ══════════════════════════════════════════════════════════════ */

/* إلغاء أي شفافية أو وميض وهمي على الأيقونات */
.material-symbols-outlined {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  text-shadow: none !important;
}

.material-symbols-outlined::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* إيقاف أي نبض عائم على اليسار */
.pulse-container,
.hero-pharmacy-banner .pulse-container {
  animation: none !important;
  transform: none !important;
}

/* حل تراكب نصوص العروض الحصرية على الشاشات الصغيرة */
.offers-container .med-card-world,
#home-offers-list .med-card-world {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  border-radius: 20px !important;
  gap: 12px !important;
}

@media (min-width: 600px) {
  .offers-container .med-card-world,
  #home-offers-list .med-card-world {
    flex-direction: row !important;
    align-items: center !important;
  }
}

.offers-container .search-result-actions,
#home-offers-list .search-result-actions {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(16, 185, 129, 0.2) !important;
  margin-top: 4px !important;
}

@media (min-width: 600px) {
  .offers-container .search-result-actions,
  #home-offers-list .search-result-actions {
    width: auto !important;
    max-width: 45% !important;
    min-width: 120px !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   💎 باقة الواجهات العالمية الفاخرة (Global Luxury Suite 2026)
   ══════════════════════════════════════════════════════════════ */

/* بطاقة العرض الحصري الفاخرة المستوحاة من أرقى التطبيقات العالمية (Capsule / PillPack Style) */
.luxury-offer-card {
  background: linear-gradient(145deg, #132721 0%, #0E1D18 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.luxury-offer-card:active {
  transform: scale(0.985) !important;
}

[data-theme="light"] .luxury-offer-card,
body.light-theme .luxury-offer-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08) !important;
}

.luxury-offer-ribbon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4) !important;
}

.luxury-offer-photo {
  width: 90px !important;
  height: 90px !important;
  border-radius: 18px !important;
  background: #0B1914 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .luxury-offer-photo,
body.light-theme .luxury-offer-photo {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

/* نافذة البحث الصوتي والمايكروفون التفاعلية (Voice Search Modal) */
.voice-recording-wave {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 48px !important;
  margin: 16px 0 !important;
}

.voice-wave-bar {
  width: 5px !important;
  height: 18px !important;
  background: #10B981 !important;
  border-radius: 10px !important;
  animation: wavePulse 1s ease-in-out infinite alternate !important;
}

.voice-wave-bar:nth-child(2) { animation-delay: 0.15s !important; height: 32px !important; }
.voice-wave-bar:nth-child(3) { animation-delay: 0.3s !important; height: 44px !important; background: #34D89E !important; }
.voice-wave-bar:nth-child(4) { animation-delay: 0.45s !important; height: 28px !important; }
.voice-wave-bar:nth-child(5) { animation-delay: 0.6s !important; height: 16px !important; }

@keyframes wavePulse {
  0% { transform: scaleY(0.4); opacity: 0.5; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

/* نافذة تحديث التطبيق السحابي و APK المباشر */
.update-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 بطاقات المنتجات الطبية الشائعة العالمية (Popular Products Pro Suite)
   ══════════════════════════════════════════════════════════════ */

/* 🚀 شريط السحب الأفقي للمنتجات الشائعة بدون أي قص أو تداخل */
#popular-products-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 14px !important;
  padding: 8px 6px 18px 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.35) transparent !important;
}

#popular-products-grid::-webkit-scrollbar {
  height: 6px !important;
}

#popular-products-grid::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.4) !important;
  border-radius: 10px !important;
}

#popular-products-grid .popular-product-card {
  flex: 0 0 192px !important;
  min-width: 192px !important;
  max-width: 192px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.products-grid:not(#popular-products-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

.popular-product-card {
  background: linear-gradient(145deg, #132721 0%, #0E1D18 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}

.popular-product-card:active {
  transform: scale(0.97) !important;
}

[data-theme="light"] .popular-product-card,
body.light-theme .popular-product-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

.popular-product-photo-stage {
  width: 100% !important;
  height: 105px !important;
  border-radius: 14px !important;
  background: #0B1914 !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  margin-bottom: 8px !important;
  position: relative !important;
}

[data-theme="light"] .popular-product-photo-stage,
body.light-theme .popular-product-photo-stage {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

.popular-badge-pill {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background: rgba(16, 185, 129, 0.9) !important;
  color: #FFFFFF !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  z-index: 2 !important;
}

.popular-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 35px !important;
}

[data-theme="light"] .popular-title,
body.light-theme .popular-title {
  color: #0F172A !important;
}

.popular-sub {
  font-size: 11px !important;
  color: #94A3B8 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 2px 0 6px 0 !important;
}

[data-theme="light"] .popular-sub,
body.light-theme .popular-sub {
  color: #64748B !important;
}

.popular-pharmacy-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 3px 6px !important;
  border-radius: 7px !important;
  margin-bottom: 8px !important;
}

[data-theme="light"] .popular-pharmacy-row,
body.light-theme .popular-pharmacy-row {
  background: #F1F5F9 !important;
}

.popular-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
  direction: rtl !important;
}

.popular-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 تصحيح تباين وألوان نوافذ التأكيد ومركز التحديثات في الوضع المضيء
   ══════════════════════════════════════════════════════════════ */

/* 1. نافذة تأكيد الطلب المباشر */
.order-confirm-card {
  background: var(--bg-card, #13241F) !important;
  border: 1.5px solid var(--border-color, rgba(52, 216, 158, 0.35)) !important;
}

[data-theme="light"] .order-confirm-card,
body.light-theme .order-confirm-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .order-confirm-card h3,
body.light-theme .order-confirm-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] #order-confirm-text,
body.light-theme #order-confirm-text {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
}

[data-theme="light"] .order-patient-box,
body.light-theme .order-patient-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .order-patient-box label,
body.light-theme .order-patient-box label {
  color: #0F172A !important;
}

[data-theme="light"] #order-patient-select,
body.light-theme #order-patient-select {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* 2. نافذة مركز تحديثات دوائي */
[data-theme="light"] #app-updater-modal .modal,
body.light-theme #app-updater-modal .modal {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] #app-updater-modal h3,
body.light-theme #app-updater-modal h3 {
  color: #0F172A !important;
}

[data-theme="light"] #app-updater-modal p,
body.light-theme #app-updater-modal p {
  color: #64748B !important;
}

[data-theme="light"] .updater-info-card,
body.light-theme .updater-info-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .updater-info-label,
body.light-theme .updater-info-label {
  color: #64748B !important;
}

[data-theme="light"] .updater-ota-btn,
body.light-theme .updater-ota-btn {
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #047857 !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 ميثاق التباين الصريح الشامل والقضاء على النصوص الداكنة
   ══════════════════════════════════════════════════════════════ */

/* فرض التباين الصريح في الوضع المظلم لجميع الحاويات والبطاقات */
[data-theme="dark"] body,
body:not(.light-theme) {
  --text-main: #FFFFFF !important;
  --text-primary: #FFFFFF !important;
  --text-secondary: #CBD5E1 !important;
  --text-hint: #94A3B8 !important;
  --bg-card: #132721 !important;
  --bg-surface: #162B24 !important;
}

/* حظر أي نصوص داكنة أو غير مقروءة داخل الوضع المظلم */
[data-theme="dark"] p,
body:not(.light-theme) p,
[data-theme="dark"] span:not(.btn span):not(.badge span),
body:not(.light-theme) span:not(.btn span):not(.badge span) {
  color: inherit;
}

[data-theme="dark"] .pharmacy-card,
body:not(.light-theme) .pharmacy-card {
  background: linear-gradient(145deg, #132721 0%, #0E1D18 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .pharmacy-card strong,
body:not(.light-theme) .pharmacy-card strong {
  color: #FFFFFF !important;
}

[data-theme="dark"] .pharmacy-card p,
body:not(.light-theme) .pharmacy-card p {
  color: #CBD5E1 !important;
}

/* بطاقة الصيدليات في الوضع المضيء */
[data-theme="light"] .pharmacy-card,
body.light-theme .pharmacy-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .pharmacy-card strong,
body.light-theme .pharmacy-card strong {
  color: #0F172A !important;
}

[data-theme="light"] .pharmacy-card p,
body.light-theme .pharmacy-card p {
  color: #475569 !important;
}

/* نافذة طلب الصرف الرسمي وتوليد كود التتبع */
.verified-order-card {
  background: #132721 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 28px !important;
  padding: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .verified-order-card,
body.light-theme .verified-order-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .verified-order-card h3,
body.light-theme .verified-order-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] .verified-order-card p,
body.light-theme .verified-order-card p {
  color: #475569 !important;
}

[data-theme="light"] .verified-order-card label,
body.light-theme .verified-order-card label {
  color: #0F172A !important;
}


/* ══════════════════════════════════════════════════════════════
   💎 شريط السحب الأفقي للمنتجات الشائعة وفلاتر الأقسام وزر التوجيه
   ══════════════════════════════════════════════════════════════ */

/* 1. حاوية السحب الأفقي للأدوية (Horizontal Swiper with Touch Snap) */
.products-horizontal-scroll {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 4px 16px 4px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
}

.products-horizontal-scroll::-webkit-scrollbar {
  height: 5px;
}

.products-horizontal-scroll::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.4);
  border-radius: 10px;
}

/* 2. بطاقة الدواء داخل شريط السحب - بدون أي قص أو تداخل */
.popular-product-card {
  flex: 0 0 178px !important;
  min-width: 178px !important;
  max-width: 178px !important;
  scroll-snap-align: start !important;
  background: var(--bg-card, #132721) !important;
  border: 1.5px solid var(--border-color, rgba(16, 185, 129, 0.28)) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  position: relative !important;
  user-select: none !important;
}

.popular-product-card:active {
  transform: scale(0.97) !important;
}

[data-theme="light"] .popular-product-card,
body.light-theme .popular-product-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

.popular-product-photo-stage {
  position: relative !important;
  width: 100% !important;
  height: 96px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

[data-theme="light"] .popular-product-photo-stage,
body.light-theme .popular-product-photo-stage {
  background: #F8FAFC !important;
}

.popular-badge-pill {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  z-index: 2 !important;
  backdrop-filter: blur(4px) !important;
}

.popular-title {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--text-primary, #FFFFFF) !important;
  line-height: 1.35 !important;
  height: 34px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: 4px !important;
}

[data-theme="light"] .popular-title,
body.light-theme .popular-title {
  color: #0F172A !important;
}

.popular-sub {
  font-size: 10.5px !important;
  color: var(--text-secondary, #94A3B8) !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="light"] .popular-sub,
body.light-theme .popular-sub {
  color: #64748B !important;
}

/* 3. شريط فلاتر الأقسام المصغرة للأدوية */
.popular-category-chips-bar {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
  scrollbar-width: none !important;
}

.popular-category-chips-bar::-webkit-scrollbar {
  display: none !important;
}

.popular-cat-chip {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-secondary, #CBD5E1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.popular-cat-chip.active {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35) !important;
}

/* 4. زر التوجيه الفخم للأدوية والصيدليات */
.luxury-direction-btn {
  height: 34px !important;
  padding: 0 10px !important;
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.25)) !important;
  border: 1.5px solid rgba(245,158,11,0.5) !important;
  color: #F59E0B !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.luxury-direction-btn:active {
  transform: scale(0.95) !important;
}

[data-theme="light"] .luxury-direction-btn,
body.light-theme .luxury-direction-btn {
  background: #FFFBEB !important;
  border-color: #FCD34D !important;
  color: #D97706 !important;
}

/* ══════════════════════════════════════════════════════════════
   PHARMACY REPORTS DARK THEME ENHANCEMENT (WCAG AAA)
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] #panel-reports,
html:not([data-theme="light"]) #panel-reports {
  color: #FFFFFF !important;
}

[data-theme="dark"] #panel-reports .glass,
html:not([data-theme="light"]) #panel-reports .glass {
  background: rgba(22, 33, 29, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #rep-orders-table,
html:not([data-theme="light"]) #rep-orders-table {
  color: #FFFFFF !important;
}

[data-theme="dark"] #rep-orders-table > div,
html:not([data-theme="light"]) #rep-orders-table > div {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] #rep-orders-table > div:hover,
html:not([data-theme="light"]) #rep-orders-table > div:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 216, 158, 0.4) !important;
}

[data-theme="dark"] #rep-orders-table span,
html:not([data-theme="light"]) #rep-orders-table span {
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════
   QUICK TOP MEDICINES & SHORTAGE ENGINE (WCAG AAA & MD3)
   ══════════════════════════════════════════════════════════════ */
.quick-shortage-section {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-med-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-med-card:hover {
  transform: translateY(-2px);
}

.quick-med-card.is-out {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15) !important;
}

@keyframes highlightPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

.highlight-pulse {
  animation: highlightPulse 0.8s ease-in-out;
}

html[data-theme="light"] .quick-med-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .quick-med-card.is-out {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
}

html[data-theme="light"] .quick-shortage-section {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.pharmacy-shortage-badge {
  animation: fadeIn 0.3s ease-in;
}

.pharmacy-med-out-of-stock {
  filter: grayscale(0.15);
}