/* ورقة الثيم alkabos.
   قواعد الشِلّ (القائمة الجانبية، كرت المستخدم، مبدّل الثيم، شريط الجوال)
   منقولة هنا مرّة واحدة من كتلة <style> التي كان القالب يكرّرها في رأس كل
   صفحة عضو. تكرارها على ٢٠ صفحة يعني أن أي تعديل يجب أن يُطبَّق عشرين مرة،
   وأن المتصفّح يعيد تنزيلها مع كل صفحة بلا كاش.
   قواعد كل صفحة تبقى في pages/<اسم>.css ويحمّلها الغلاف آليًّا.
   مشغّل القرآن (‎#quran-player-container‎ وأخواته) أُسقط كلّه: ميزة المالك
   السابق تبثّ صوتًا من خادم طرف ثالث في كل صفحة، وليست من هذه اللوحة. */

/* ===================== شِلّ العضو ===================== */
.services .table-wrapper .service-value {
      overflow-wrap: anywhere;
}

/* تنسيق القائمة الجانبية بالكامل */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden !important;
  background: #ffffff;
  border-left: 1px solid #f1d5d7;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 255px;
  direction: rtl !important;
}
html.dark .sidebar {
  background: #0d0e11 !important;
  border-left: 1px solid rgba(225, 29, 39, 0.15) !important;
}

.sidebar-header {
  padding: 16px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.sidebar-header .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
}
.sidebar-header .brand img {
  max-height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(225, 29, 39, 0.35));
}

.sidebar-body {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 4px 12px 20px !important;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
html.dark .sidebar-body {
  scrollbar-color: #23252d transparent;
}
.sidebar-body::-webkit-scrollbar {
  width: 4px;
}
.sidebar-body::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}
html.dark .sidebar-body::-webkit-scrollbar-thumb {
  background-color: #23252d;
}

/* كارد المستخدم */
.sidebar .user-card-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  padding: 9px 11px;
  margin: 2px 0 10px;
  box-shadow: 0 4px 14px rgba(225, 29, 39, 0.06);
  direction: rtl;
  position: relative;
}
html.dark .sidebar .user-card-compact {
  background: #14151a;
  border: 1px solid rgba(225, 29, 39, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(225, 29, 39, 0.08);
}
.user-card-compact .avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #e11d27;
  background: #ffffff;
  border-collapse: separate;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  order: 1;
  box-shadow: 0 0 10px rgba(225, 29, 39, 0.4);
  transition: transform 0.2s ease;
}
.user-card-compact .avatar-wrap:hover {
  transform: scale(1.05);
}
html.dark .user-card-compact .avatar-wrap {
  background: #0d0e11;
}
.user-card-compact .avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-card-compact .user-info-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  padding: 0 9px;
  order: 2;
}
.user-card-compact .user-info-side .uname {
  color: #0f172a;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.2;
}
html.dark .user-card-compact .user-info-side .uname {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}
.user-card-compact .user-info-side .ubalance-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #475569;
  font-size: 11.5px;
      700;
  font-weight: 800;
  direction: ltr;
  margin-top: 3px;
}
html.dark .user-card-compact .user-info-side .ubalance-wrapper {
  color: #f1f5f9;
}
.user-card-compact .user-info-side .ubalance-wrapper .wallet-badge {
  background: #e11d27;
  color: #fff;
  border-radius: 4px;
  width: 16px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 0 6px rgba(225, 29, 39, 0.5);
}
.user-card-compact .user-actions-side {
  display: flex;
  align-items: center;
  order: 3;
}
.user-card-compact .user-actions-side .settings-link {
  background: #f8fafc;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid #f1f5f9;
}
html.dark .user-card-compact .user-actions-side .settings-link {
  background: #1d1f27;
  color: #94a3b8;
  border-color: rgba(225, 29, 39, 0.15);
}
.user-card-compact .user-actions-side .settings-link:hover {
  color: #ffffff;
  background: #e11d27;
  box-shadow: 0 0 8px rgba(225, 29, 39, 0.6);
}

/* عناصر القائمة الجانبية الموحدة */
.sidebar-simple-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  direction: rtl;
}
.sidebar-simple-menu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 8px 11px;
  background: #ffffff;
  color: #334155;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  border: 1px solid #f1f5f9;
  transition: all 0.25s ease;
}
html.dark .sidebar-simple-menu li a {
  background: #14151a;
  color: #ffffff !important;
  border: 1px solid #1f2129;
}
.sidebar-simple-menu li a .nav-icon {
  width: 32px;
  height: 32px;
  background: #f8fafc;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 16px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  order: 1;
}
html.dark .sidebar-simple-menu li a .nav-icon {
  background: #1d1f27;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-simple-menu li a .nav-text {
  order: 2;
  flex: 1;
  text-align: right;
  color: inherit;
}
.sidebar-simple-menu li a:hover {
  background: #fff1f2;
  color: #e11d27 !important;
  border-color: rgba(225, 29, 39, 0.3);
}
html.dark .sidebar-simple-menu li a:hover {
  background: #191b22;
  color: #ffffff !important;
  border-color: rgba(225, 29, 39, 0.4);
  box-shadow: 0 0 10px rgba(225, 29, 39, 0.15);
}
.sidebar-simple-menu li a:hover .nav-icon {
  background: #e11d27;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(225, 29, 39, 0.4);
}

/* العنصر النشط */
.sidebar-simple-menu li.active a {
  background: linear-gradient(135deg, #e5242e 0%, #a80e16 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(225, 29, 39, 0.5) !important;
}
html.dark .sidebar-simple-menu li.active a {
  background: linear-gradient(135deg, #e5242e 0%, #a80e16 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(225, 29, 39, 0.65) !important;
}
.sidebar-simple-menu li.active a .nav-icon,
html.dark .sidebar-simple-menu li.active a .nav-icon {
  background: #ffffff !important;
  color: #e11d27 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.sidebar-simple-menu li.active a .nav-icon i,
html.dark .sidebar-simple-menu li.active a .nav-icon i {
  color: #e11d27 !important;
}

/* كارد مشغل القرآن */

.sidebar-bottom-controls {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.theme-switcher-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #fecdd3;
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
  direction: rtl;
}
html.dark .theme-switcher-box {
  background: #14151a;
  border: 1px solid rgba(225, 29, 39, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.theme-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.2s;
}
html.dark .theme-tab-btn {
  color: #ffffff !important;
}
.theme-tab-btn.active {
  background: #e11d27;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(225, 29, 39, 0.5);
}
.sidebar-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(225, 29, 39, 0.08);
  border: 1px solid rgba(225, 29, 39, 0.28);
  color: #ff4d55;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  direction: rtl;
}
.sidebar-logout-btn:hover {
  background: #e11d27;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(225, 29, 39, 0.55);
}

/* شريط الموبايل السفلي */
.nav-mob.nav-custom-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff !important;
  border-top: 1px solid #fecdd3 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 8px !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;
  list-style: none !important;
  align-items: center !important;
  justify-content: space-around !important;
}
html.dark .nav-mob.nav-custom-bottom {
  background: #0d0e11 !important;
  border-top: 1px solid rgba(225, 29, 39, 0.25) !important;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.7) !important;
}
@media (max-width: 991px) {
  .nav-mob.nav-custom-bottom {
    display: flex !important;
  }
  body {
    padding-bottom: 68px !important;
  }
}
.nav-mob.nav-custom-bottom li {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-mob.nav-custom-bottom li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  gap: 2px;
}
html.dark .nav-mob.nav-custom-bottom li a {
  color: #ffffff !important;
}
.nav-mob.nav-custom-bottom li a .nav-icon {
  font-size: 18px;
}
.nav-mob.nav-custom-bottom li.active a,
.nav-mob.nav-custom-bottom li a:hover {
  color: #e11d27 !important;
}
.nav-mob.nav-custom-bottom li.center-fab {
  position: relative !important;
  top: -15px !important;
  flex: 0 0 54px !important;
  z-index: 10001 !important;
}
.nav-mob.nav-custom-bottom li.center-fab a {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff2a34 0%, #c40e17 100%) !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 18px rgba(225, 29, 39, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.dark .nav-mob.nav-custom-bottom li.center-fab a {
  border-color: #0d0e11 !important;
}

/* ===================== إضافات الشِلّ ===================== */

/* نقطة الإشعار فوق الجرس: لا قاعدة لها في أوراق القالب، فبألوان القالب نفسها. */
.page-header .notification-btn { position: relative; }
.page-header .notification-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  min-width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e11d27;
  box-shadow: 0 0 0 2px #ffffff;
}
html.dark .page-header .notification-dot { box-shadow: 0 0 0 2px #0d0e11; }
.page-header .notification-dot.has-count {
  min-width: 16px;
  height: 16px;
  top: 2px;
  inset-inline-end: 2px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* الأيقونة المخفيّة في زرّ الثيم: القالب يعتمد على .hidden ولا يعرّفها. */
.page-header .theme-btn .hidden,
.hidden[hidden] { display: none !important; }

/* الشريط الجانبي على الجوال: الورقة تفتحه بالصنف open على body أو على .sidebar. */
@media (max-width: 991px) {
  .main-wrapper > .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 1050;
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  }
  html[dir="rtl"] .main-wrapper > .sidebar:not(.open) { transform: translateX(110%); }
  html[dir="ltr"] .main-wrapper > .sidebar:not(.open) { transform: translateX(-110%); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .5);
  }
  .sidebar-backdrop[hidden] { display: none !important; }
}

/* اتجاه القالب مكتوب rtl في قواعد القائمة الجانبية وكرت المستخدم؛ هذه اللوحة
   تخدم العربية والإنجليزية معًا فيتبع الاتجاهُ ‎gf_dir()‎ لا قيمةً مخبوزة. */
html[dir="ltr"] .sidebar,
html[dir="ltr"] .sidebar .user-card-compact { direction: ltr !important; }
html[dir="ltr"] .sidebar { border-left: 0; border-right: 1px solid #f1d5d7; }
html[dir="ltr"].dark .sidebar { border-left: 0; border-right: 1px solid rgba(225, 29, 39, .15); }

/* فوتر الزائر: القالب الملتقَط لا يحمل فوترًا أصلًا، وصفحة الزائر بلا تذييل
   تترك روابط الشروط والأسئلة بلا مدخل. بمتغيّرات لون القالب نفسها. */
.guest-footer {
  margin-top: 40px;
  padding: 28px 0;
  border-top: 1px solid #f1d5d7;
  background: #ffffff;
}
html.dark .guest-footer {
  border-top: 1px solid rgba(225, 29, 39, .15);
  background: #0d0e11;
}
.guest-footer .guest-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.guest-footer .guest-footer-logo img { max-height: 40px; object-fit: contain; }
.guest-footer .guest-footer-brand { font-size: 18px; font-weight: 800; color: #e11d27; }
.guest-footer .guest-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.guest-footer .guest-footer-links a {
  color: #64748b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease;
}
html.dark .guest-footer .guest-footer-links a { color: #8a94a6; }
.guest-footer .guest-footer-links a:hover { color: #e11d27; }
.guest-footer .guest-footer-copy {
  width: 100%;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}
html.dark .guest-footer .guest-footer-copy { color: #8a94a6; }

/* قائمة الزائر على الجوال: .menu-toggle يفتح .nav-links بالصنف open.
   الحدّ 768 لا 991: ورقة القالب لا تُظهر زرّ القائمة إلّا تحت 768، فلو
   أخفينا الروابط عند 991 لبقي الزائر بين الحدّين بلا قائمة ولا زرّ. */
@media (max-width: 768px) {
  header .navbar nav .nav-links:not(.open) { display: none; }
  header .navbar nav .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* the template's own rule keeps this list at height:0 + overflow:hidden (it opens on .show):
       without these the menu opened as an empty strip */
    height: auto;
    overflow: visible;
    width: auto;
    min-width: 210px;
    left: auto;
    right: auto;
    inset-inline-end: 12px;
    top: 62px;
    z-index: 1050;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #f1d5d7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }
  html.dark header .navbar nav .nav-links.open {
    background: #14151a;
    border-color: rgba(225, 29, 39, .22);
  }
  header .navbar nav .nav-links.open a { color: #1f2937; display: block; padding: 6px 2px; }
  html.dark header .navbar nav .nav-links.open a { color: #f9fafb; }
  header .navbar nav .nav-links.open a:hover,
  header .navbar nav .nav-links.open a.active { color: var(--main-color); }
}

/* زرّ تبديل السمة في شريط الزائر: يطبعه _guest_head.php ولا قاعدة له في أي
   ورقة، فكان يخرج نصًّا عاريًا. يأخذ شكل الزرّ الثانوي نفسه ليقف بجانب
   «إنشاء حساب» متّسقًا لا منافسًا له. */
.auth-buttons .guest-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  line-height: 1;
  transition: background-color .2s ease;
}
.auth-buttons .guest-theme-btn:hover { background-color: var(--secondary-color); }

/* MediaPanal: this theme stays dark — the light / dark / system switches are hidden */
/* the light / dark / system switch is shown again */