/* ==========================================================================
   منصة مَحظرِسْتانْ — نظام التصميم (Design System)
   مدرسة أخلاقية وعلمية بروح المحظرة التقليدية
   ========================================================================== */

/* ---------- دعم النتوء العلوي (Notch) في الآيفون عند فتح التطبيق كـ PWA ---------- */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- شريط تثبيت التطبيق (Toast/Bottom Sheet هادئ في أسفل الشاشة) ----------
   يظهر فقط على الجوال (ويُستثنى منه iOS بالكامل عبر js)، ولا يظهر فوراً بل
   بعد أن يُظهر الزائر اهتماماً بالموقع. ظهوره وإخفاؤه بحركة سلسة (Slide-up +
   Fade-in) بدل الانبثاق المفاجئ، وخلفية شبه شفافة مندمجة مع هوية الموقع. */
.install-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(20, 48, 44, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--parchment);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius, 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform: translateY(140%);
  opacity: 0;
  transition:
    transform 0.6s ease-out,
    opacity 0.6s ease-out;
  pointer-events: none;
}
.install-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.install-banner[hidden] {
  display: none;
}
.install-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.install-banner-action:hover {
  opacity: 0.9;
}
.install-banner-close {
  background: transparent;
  border: none;
  color: var(--parchment);
  opacity: 0.7;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.install-banner-close:hover {
  opacity: 1;
}
/* الشريط لا يحجب أي عناصر تفاعلية سفلية، ولا يُزحزح الهيدر بعد الآن
   لأنه أصبح شريطاً سفلياً عائماً لا علوياً */
@media (min-width: 861px) {
  .install-banner {
    display: none !important;
  }
}

/* ---------- الخطوط: مستضافة محلياً ضمن المشروع (assets/fonts) بدل جلبها من الإنترنت ---------- */
/* Amiri (400, 700) */
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/amiri-arabic-400.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/amiri-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/amiri-arabic-700.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/amiri-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Reem Kufi (400, 500, 600, 700) */
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-400.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-500.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-600.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-arabic-700.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/reem-kufi-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Tajawal (300, 400, 500, 700) */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/tajawal-arabic-300.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/tajawal-latin-300.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/tajawal-arabic-400.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/tajawal-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/tajawal-arabic-500.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/tajawal-latin-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Almarai (400, 700, 800) */
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/almarai-arabic-400.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/almarai-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/almarai-arabic-700.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/almarai-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/almarai-arabic-800.woff2") format("woff2");
  unicode-range:
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/almarai-latin-800.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. المتغيرات (Design Tokens) ---------- */
:root {
  /* الألوان الأساسية كما وردت في الهوية البصرية */
  --ink: #14302c; /* أخضر مدادي داكن - عناوين وهيدر */
  --parchment: #f6f1e4; /* خلفية ورقية - المخطوطات */
  --card: #fcfaf2; /* كريمي ناصع - خلفية البطاقات */
  --gold: #b0863f; /* ذهبي مطفأ - أزرار وروابط نشطة */
  --charcoal: #2b2621; /* نص أساسي داكن */
  --sage: #5d7258; /* أخضر مريمية - نص ثانوي ووسوم */

  /* درجات مشتقة للاستخدامات التفاعلية (hover/border/shadow) */
  --ink-light: #1e4139;
  --gold-light: #c9a05c;
  --gold-dark: #8f6a2e;
  --border-soft: rgba(20, 48, 44, 0.12);
  --shadow-soft: 0 8px 24px rgba(20, 48, 44, 0.08);
  --shadow-lift: 0 14px 34px rgba(20, 48, 44, 0.14);

  /* الطباعة */
  --font-display: "Amiri", "Reem Kufi", serif;
  --font-heading: "Reem Kufi", "Amiri", serif;
  --font-body: "Tajawal", "Amiri", sans-serif;

  /* هندسة الصفحة */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container: 1180px;
  --header-h: 76px;
  --player-h: 84px;
}

/* ---------- 2. إعادة الضبط والأساسيات ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  background: var(--parchment);
  color: var(--charcoal);
  line-height: 1.75;
  direction: rtl;
  min-height: 100vh;
  /* نسيج ورقي خفيف جداً يعطي إحساس المخطوطة دون التأثير على وضوح القراءة */
  background-image:
    radial-gradient(
      circle at 15% 20%,
      rgba(176, 134, 63, 0.05) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(93, 114, 88, 0.05) 0%,
      transparent 45%
    );
  background-attachment: fixed;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.35;
}

/* وصول شامل: مؤشر تركيز واضح لكل عنصر قابل للتفاعل */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* حقول البحث تعتمد إبراز الحاوية نفسها عند التركيز (:focus-within) بدل
   إطار التركيز الافتراضي، لذا نُلغي المربع الذي يظهر فور النقر على حقل
   البحث في كل شاشات الموقع */
.home-search-input:focus-visible,
.search-panel-input:focus-visible,
.admin-search-input:focus-visible {
  outline: none;
}

.skip-link {
  position: absolute;
  right: -999px;
  top: auto;
  background: var(--ink);
  color: var(--parchment);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 999;
}
.skip-link:focus {
  right: 16px;
  top: 16px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. الهيدر ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--parchment);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.site-header .container {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ترتيب العناصر داخل الشريط العلوي (من اليمين إلى اليسار في RTL):
   القائمة المنسدلة (nav-toggle) — العنوان (brand) — الروابط (main-nav) — الأزرار (header-actions) */
.nav-toggle {
  order: 1;
}
.brand {
  order: 2;
}
.main-nav {
  order: 3;
}
.header-actions {
  order: 4;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 1;
}

/* الشعار بجوار عنوان الموقع: صورة يضيفها صاحب الموقع (assets/logo.png)،
   وإن لم تتوفر الصورة (لم تُرفع بعد) يظهر تلقائياً الحرف الدائري كبديل.
   حلقة ذهبية رفيعة وظل ناعم يمنحان الشعار حضوراً أنيقاً ومتّسقاً سواء
   كانت صورة حقيقية أو الحرف البديل، ويفصلانه بلطف عن خلفية الهيدر الداكنة */
.brand-mark {
  width: 46px;
  height: 46px;
  /* border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(197, 160, 89, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  background: rgba(246, 241, 228, 0.04); */
}
.brand-mark-img {
  width: 100%;
  height: 100%;
  /* object-fit: cover;
  border-radius: 50%; */
}
.brand-mark-letter {
  display: none;
}
.brand-mark--fallback {
  border-color: var(--gold);
}
.brand-mark--fallback .brand-mark-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  font-size: 21px;
}

/* عمود النص: العنوان والتوضيح تحته، بفاصل ذهبي قصير أنيق بينهما بدل
   التلاصق المباشر، مع محاذاة رأسية متمركزة مع الشعار */
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.4vw, 21px);
  font-weight: 700;
  color: var(--parchment);
  line-height: 1.25;
  min-width: 0;
  max-width: 100%;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  
}
.brand-name small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0.6px;
  opacity: 0.85;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .brand-name small::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  flex-shrink: 0;
  background: rgba(197, 160, 89, 0.6);
} */

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav a {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--parchment);
  opacity: 0.85;
  transition: all 0.2s ease;
  position: relative;
}
.main-nav a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.main-nav a.is-active {
  opacity: 1;
  color: var(--gold-light);
}
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 16px;
  left: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* ---------- عناصر الأزرار في الهيدر (بحث / لوحة تحكم / عن المحظرة) ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.icon-btn-header {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment);
  border: 1.5px solid rgba(246, 241, 228, 0.28);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.icon-btn-header:hover,
.icon-btn-header[aria-expanded="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.icon-btn-header svg {
  width: 19px;
  height: 19px;
}

/* على الشاشات الكبيرة: أيقونة لوحة التحكم هادئة لا تلفت الانتباه، وتتضح
   قليلاً فقط عند التحويم عليها */
.admin-link-header {
  opacity: 0.55;
}
.admin-link-header:hover {
  opacity: 1;
}

.btn-about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-about svg {
  flex-shrink: 0;
}
.btn-about:hover {
  background: var(--gold);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  color: var(--parchment);
  font-size: 26px;
  flex-shrink: 0;
}

/* ---------- الشريط العلوي على الجوال: سطر واحد مضغوط ومريح ----------
   نمط شائع في تطبيقات الجوال: أيقونة القائمة ثم العنوان ثم أيقونات
   الإجراءات، كلها في سطر واحد دون ازدحام. يُحذف شعار الحرف الدائري
   والعبارة الفرعية تحت العنوان على الجوال لتوفير المساحة، وتتحول
   أزرار الإجراءات النصية إلى أيقونات مدمجة بنفس حجم بقية الأزرار. */
@media (max-width: 860px) {
  .site-header .container {
    flex-wrap: nowrap;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-toggle {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .brand {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    text-align: start;
  }
  /* الشعار يظهر بجوار العنوان على الهاتف أيضاً (بحجم أصغر يلائم الهيدر) */
  .brand-mark {
    display: flex;
    width: 34px;
    height: 34px;
  }
  .brand-mark--fallback .brand-mark-letter {
    font-size: 16px;
  }
  /* بعد تفريغ الهيدر من الأزرار (البحث ولوحة التحكم انتقلا لمكان آخر)،
     أصبح هناك متسع لعنوان أكثر أناقة بسطرين بدل سطر مضغوط واحد */
  .brand-name {
    font-size: clamp(13.5px, 4vw, 17px);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    padding: 4px 0;
  }
  .brand-name small {
    display: block;
    font-size: clamp(9.5px, 2.6vw, 10.5px);
    opacity: 0.85;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    order: 3;
    flex-shrink: 0;
    gap: 5px;
  }

  .icon-btn-header {
    width: 36px;
    height: 36px;
  }
  .icon-btn-header svg {
    width: 17px;
    height: 17px;
  }

  .btn-about {
    padding: 8px 13px;
    font-size: 12.5px;
    gap: 5px;
  }
  .btn-about svg {
    width: 14px;
    height: 14px;
  }

  /* قائمة جانبية منزلقة (Off-canvas): عرض أقل من الشاشة كاملة، وارتفاع
     يمتد على كامل طول الشاشة، مع إمكانية إغلاقها بسحبها لليمين (js) */
  .main-nav {
    order: 4;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 300px);
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    padding: calc(env(safe-area-inset-top) + 22px) 18px 22px;
    gap: 2px;
    display: flex;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    box-shadow: -16px 0 34px rgba(0, 0, 0, 0.28);
    z-index: 220;
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  .main-nav a {
    display: flex;
    align-items: center;
    text-align: start;
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-home-link {
    display: flex !important;
  }

  /* أيقونات توضيحية بجانب أسماء الخيارات — على الجوال فقط */
  .nav-link-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-inline-end: 10px;
    opacity: 0.85;
  }

  /* رابط لوحة التحكم ينتقل إلى أسفل القائمة المنسدلة على الجوال، ويُخفى
     من صف الأيقونات في الهيدر لعدم لفت الانتباه لعامة المستخدمين */
  .admin-link-header {
    display: none !important;
  }

  /* خيارات ثابتة أسفل القائمة المنسدلة: تثبيت التطبيق ولوحة التحكم،
     بمظهر هادئ منفصل بخط علوي عن باقي روابط الموقع */
  .nav-mobile-extra {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-mobile-extra-btn {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: start;
    padding: 12px 10px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--parchment);
    opacity: 0.65;
    cursor: pointer;
  }
  .nav-mobile-extra-btn:hover {
    opacity: 0.95;
  }
}

/* رابط "الرئيسية" داخل القائمة: يظهر فقط ضمن القائمة المنسدلة على الجوال */
.nav-home-link {
  display: none;
}

/* الأيقونات بجانب أسماء الخيارات: مخفية على الشاشات الكبيرة، تظهر على
   الجوال فقط (تُفعَّل داخل استعلام الوسائط أعلاه) */
.nav-link-icon {
  display: none;
}

/* خيارات القائمة الإضافية على الجوال (تثبيت/لوحة تحكم): مخفية افتراضياً
   على الشاشات الكبيرة */
.nav-mobile-extra {
  display: none;
}

@media (max-width: 380px) {
  .header-actions {
    gap: 4px;
  }
  .brand-name {
    font-size: 12.5px;
  }
  .icon-btn-header {
    width: 33px;
    height: 33px;
  }
  .btn-about {
    padding: 7px 10px;
    font-size: 11.5px;
    gap: 0;
  }
  .btn-about svg {
    display: none;
  }
}

/* ---------- 4. النوافذ المنبثقة (Modals) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 20, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay.is-open {
  display: flex;
}

.modal-box {
  background: var(--card);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-soft);
  animation: modal-in 0.25s ease;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--parchment);
  color: var(--ink);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.modal-close:hover {
  background: var(--gold);
  color: var(--card);
}

.modal-title {
  font-size: 22px;
  margin-bottom: 14px;
  padding-left: 40px;
}

.modal-body {
  color: var(--charcoal);
  font-size: 15.5px;
}
.modal-body p + p {
  margin-top: 10px;
}
.modal-empty {
  color: var(--sage);
  font-style: italic;
}

/* ---------- خطوات تثبيت التطبيق على iOS/Safari (داخل ios-install-modal) ---------- */
.ios-install-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.ios-install-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--parchment);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  line-height: 1.6;
}
.ios-install-step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--ink);
}

/* ---------- 5. القسم البطل (Hero) ---------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-media {
  width: 100%;
  aspect-ratio: 16 / 6;
  min-height: 320px;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-light) 70%);
  position: relative;
  display: flex;
  align-items: flex-end;
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
/* توضع الصورة الشخصية هنا لاحقاً — انظر التعليق داخل ملف index.html */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(20, 48, 44, 0.92) 0%,
    rgba(20, 48, 44, 0.25) 55%,
    rgba(20, 48, 44, 0.05) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 48px 24px 56px;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  color: var(--parchment);
}

.hero-eyebrow {
  display: inline-block;
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  color: var(--parchment);
  max-width: 780px;
  margin-bottom: 16px;
}

.hero-lead {
  max-width: 640px;
  font-size: 17px;
  color: rgba(246, 241, 228, 0.85);
}

/* ---------- 6. شبكة الأقسام ---------- */
.section-grid {
  padding: 64px 0 20px;
}

.section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.section-heading h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
}
.section-heading p {
  color: var(--sage);
  font-size: 15px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.nav-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 32px 22px;
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  box-shadow: var(--shadow-soft);
}
.nav-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.nav-card .icon-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  transition: background 0.25s ease;
}
.nav-card:hover .icon-wrap {
  background: var(--gold);
  color: var(--card);
}
.nav-card .icon-wrap svg {
  width: 30px;
  height: 30px;
}
.nav-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
}
.nav-card p {
  color: var(--sage);
  font-size: 13.5px;
}

/* ---------- 7. الأزرار العامة ---------- */

/* ---------- صفحة "عن المحظرة": بطاقات المعلومات ---------- */
.about-lead {
  max-width: 760px;
  margin: -10px auto 8px;
  text-align: center;
  color: var(--sage);
  font-size: 16px;
  line-height: 1.9;
}

.about-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.about-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.about-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.about-info-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  color: var(--gold-dark);
  transition: background 0.25s ease, color 0.25s ease;
}
.about-info-card:hover .about-info-icon {
  background: var(--gold);
  color: var(--card);
}
.about-info-icon svg {
  width: 24px;
  height: 24px;
}
.about-info-card h3 {
  font-size: 16.5px;
  margin-bottom: 6px;
  color: var(--ink);
}
.about-info-card p {
  color: var(--charcoal);
  font-size: 14px;
  line-height: 1.8;
}

/* بطاقة العنوان الرئيسي في أعلى صفحة "عن المحظرة" */
.about-title-card {
  text-align: center;
  background: linear-gradient(160deg, var(--ink), var(--sage));
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-lift);
}
.about-title-card h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--parchment);
  margin-bottom: 10px;
}
.about-title-card p {
  color: var(--gold-light);
  font-size: 15px;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ---------- صفحة "عن منصة مَحظرِسْتانْ" ---------- */
.platform-content {
  max-width: 720px;
  margin: 0 auto;
}
.platform-content p {
  color: var(--charcoal);
  font-size: 16px;
  line-height: 2;
  margin-bottom: 18px;
}
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  color: var(--gold-dark);
  margin-bottom: 24px;
}
.platform-badge svg {
  width: 16px;
  height: 16px;
}

/* ---------- تتمة القراءة (الصفحة الرئيسية) ---------- */
.continue-reading-section {
  padding: 20px 0;
}
.continue-reading-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .continue-reading-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .continue-reading-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.continue-reading-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.continue-reading-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.continue-reading-card img,
.continue-reading-cover-placeholder {
  width: 46px;
  height: 62px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.continue-reading-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sage), var(--ink));
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 18px;
}
.continue-reading-title {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- الأحدث في الموقع (الصفحة الرئيسية) ---------- */
.latest-section {
  padding: 20px 0 50px;
}
.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .latest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .latest-grid {
    grid-template-columns: 1fr;
  }
}
.latest-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.latest-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold);
}
.latest-card-kind {
  display: inline-block;
  font-size: 11.5px;
  color: var(--gold-dark);
  background: var(--parchment);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
}
.latest-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.latest-card-sub {
  display: block;
  font-size: 13px;
  color: var(--sage);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-gold {
  background: var(--gold);
  color: var(--card);
}
.btn-gold:hover {
  background: var(--gold-dark);
}
.btn-outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--parchment);
}
.btn-sm {
  padding: 9px 16px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}

/* ---------- 8. صفحة الكتب ---------- */
.page-header {
  padding: 44px 0 12px;
  text-align: center;
}
.page-header h1 {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 8px;
}
.page-header p {
  color: var(--sage);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 24px 0 8px;
}
.filter-chip {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--sage);
  transition: all 0.2s ease;
}
.filter-chip.is-active,
.filter-chip:hover {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
}

/* قوائم منسدلة بسيطة لتصفية الكتب حسب التصنيف والمؤلف */
.book-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 24px 0 8px;
}
/* غلاف القائمة المنسدلة: الشكل الهندسي (الحبة البيضاوية) واللون والحدّ
   موجودة هنا فقط، مع overflow:hidden — بهذا لا يظهر أي إطار مربّع افتراضي
   يرسمه المتصفح حول <select> عند الضغط عليه أو فتحه (خصوصاً على الجوال)،
   لأن أي حدود مربعة كهذه تُقصّ تلقائياً عند حدود الغلاف الدائري نفسه */
.filter-select-wrap {
  display: inline-flex;
  align-items: center;
  width: 200px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-select-wrap:hover,
.filter-select-wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.14);
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 10px 38px 10px 18px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--charcoal);
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a5a52' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 14px center;
  outline: none;
}
.filter-select option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .book-filters {
    gap: 8px;
  }
  .filter-select-wrap {
    flex: 1 1 45%;
    width: auto;
    min-width: 0;
  }
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 26px;
  padding: 30px 0 70px;
}
@media (max-width: 560px) {
  .book-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .book-meta {
    padding: 12px 12px 14px;
  }
  .book-title {
    font-size: 13.5px;
  }
  .book-author {
    font-size: 11px;
  }
  .book-card::before {
    right: 16px;
    width: 16px;
    height: 32px;
  }
}

.book-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(20, 48, 44, 0.09);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.85, 0.32, 1),
    box-shadow 0.35s ease;
}
.book-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 42px rgba(20, 48, 44, 0.22);
}
.book-card:hover .book-cover img {
  transform: scale(1.045);
}
.book-card:hover::before {
  transform: translateY(3px) rotate(-3deg);
}

/* شريط إشارة مرجعية ذهبي أعلى الغلاف — بصمة تصميم بطاقة الكتاب في هذه المنصة */
.book-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  width: 20px;
  height: 40px;
  background: linear-gradient(
    180deg,
    var(--gold-light) 0%,
    var(--gold-dark) 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  box-shadow: 0 3px 6px rgba(20, 48, 44, 0.28);
  transform-origin: top center;
  transition: transform 0.3s ease;
  z-index: 4;
  pointer-events: none;
}

.book-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--sage) 0%, var(--ink) 100%);
  overflow: hidden;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.book-meta {
  padding: 15px 15px 17px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.book-title {
  font-family: var(--font-heading);
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-subtitle {
  font-size: 12.5px;
  color: var(--sage);
  margin: -3px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-detail-subtitle {
  font-size: 15px;
  color: var(--sage);
  margin: -6px 0 10px;
}
.book-author {
  position: relative;
  font-size: 12px;
  color: var(--sage);
  padding-top: 9px;
  margin-top: auto;
}
.book-author::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.pdf-viewer-frame {
  width: 100%;
  height: 75vh;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}

/* ---------- صفحة القراءة المدمجة (Embedded PDF Viewer) ---------- */
.reader-page {
  padding: 22px 0 16px;
  display: flex;
  flex-direction: column;
}
.reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.reader-toolbar .back-link {
  margin: 0;
}
.reader-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.reader-frame-wrap {
  width: 100%;
  flex: 1 1 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  background: var(--card);
  display: flex;
}
.reader-frame {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  height: calc(100vh - var(--header-h) - 100px);
  height: calc(100dvh - var(--header-h) - 100px);
  min-height: 560px;
  border: 0;
}
.reader-fallback {
  padding: 40px 24px;
  text-align: center;
  color: var(--sage);
  flex: 1 1 auto;
}
.reader-fallback strong {
  display: block;
  color: var(--ink);
  margin-bottom: 10px;
  font-size: 16px;
}

@media (max-width: 700px) {
  .reader-frame {
    height: calc(100vh - var(--header-h) - 76px);
    height: calc(100dvh - var(--header-h) - 76px);
    min-height: 480px;
  }
  .reader-title {
    flex-basis: 100%;
    text-align: center;
  }
}

/* ---------- 9. صفحة الدروس الصوتية ---------- */
.matn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 30px 0;
}
.matn-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: all 0.2s ease;
}
.matn-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.matn-card h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.matn-card span {
  color: var(--sage);
  font-size: 13px;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 120px;
}
.lesson-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.lesson-card:hover {
  border-color: var(--gold);
}
.lesson-card.is-playing {
  background: #f3ebd6;
  border-color: var(--gold);
}

.lesson-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-icon svg {
  width: 22px;
  height: 22px;
}

.lesson-title {
  flex: 1;
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 500;
}
.lesson-resume-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-inline-start: 8px;
  vertical-align: middle;
}

.lesson-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.lesson-play-btn:hover {
  background: var(--gold-dark);
}

.note-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--sage);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.note-btn:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--parchment);
}
.note-btn svg {
  width: 17px;
  height: 17px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sage);
  font-size: 14px;
  margin: 22px 0 4px;
  transition: color 0.2s ease;
}
.back-link:hover {
  color: var(--gold-dark);
}

/* --- المشغل الصوتي الثابت (Persistent Player) --- */
.audio-player {
  position: fixed;
  bottom: -120px;
  right: 0;
  left: 0;
  height: var(--player-h);
  background: var(--ink);
  color: var(--parchment);
  z-index: 500;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.22);
  transition: bottom 0.35s ease;
}
.audio-player.is-visible {
  bottom: 0;
}

.player-inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.player-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.player-toggle:hover {
  background: var(--gold-light);
}
.player-toggle svg {
  width: 20px;
  height: 20px;
}

.player-info {
  min-width: 0;
  flex-shrink: 0;
  width: 160px;
}
.player-track-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-track-sub {
  font-size: 11.5px;
  color: var(--gold-light);
}

.player-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.player-time {
  font-size: 12px;
  color: rgba(246, 241, 228, 0.75);
  width: 42px;
  flex-shrink: 0;
}
.player-seek {
  flex: 1;
  min-width: 0;
  height: 5px;
  border-radius: 4px;
  appearance: none;
  background: rgba(246, 241, 228, 0.2);
  cursor: pointer;
}
.player-seek::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
}

.player-volume-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 110px;
  flex-shrink: 0;
}
.player-volume-wrap svg {
  width: 18px;
  height: 18px;
  color: var(--gold-light);
  flex-shrink: 0;
}
.player-volume {
  width: 80px;
  height: 4px;
  appearance: none;
  border-radius: 4px;
  background: rgba(246, 241, 228, 0.2);
  cursor: pointer;
}
.player-volume::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-light);
}

.player-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(246, 241, 228, 0.7);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-close:hover {
  color: var(--parchment);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 760px) {
  .player-info {
    width: 100px;
  }
  .player-volume-wrap {
    display: none;
  }
  .player-inner {
    gap: 12px;
  }
}

/* هواتف ضيقة جداً: تقليص إضافي وترك مسافة واضحة بين شريط التقدّم وزر
   الإغلاق حتى لا يتلامسا أو يتداخلا بصرياً */
@media (max-width: 420px) {
  .player-inner {
    padding: 0 14px;
    gap: 8px;
  }
  .player-info {
    width: 68px;
  }
  .player-track-sub {
    display: none;
  }
  .player-time {
    width: 30px;
    font-size: 10.5px;
  }
  .player-progress-wrap {
    gap: 6px;
  }
  .player-toggle {
    width: 42px;
    height: 42px;
  }
  .player-close {
    width: 30px;
    height: 30px;
    margin-inline-start: 2px;
  }
}

/* ---------- 10. صفحة الأعلام ---------- */
.scholar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 26px;
  padding: 30px 0 70px;
}
@media (max-width: 560px) {
  .scholar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .scholar-photo {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  .scholar-name {
    font-size: 14px;
  }
  .scholar-role {
    font-size: 11.5px;
  }
}
.scholar-card {
  text-align: center;
}
.scholar-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage), var(--ink));
  border: 3px solid var(--card);
  box-shadow: var(--shadow-soft);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.scholar-card:hover .scholar-photo {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.scholar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scholar-name {
  font-size: 15.5px;
  color: var(--ink);
  font-family: var(--font-heading);
  margin-bottom: 2px;
}
.scholar-role {
  font-size: 12.5px;
  color: var(--sage);
}

.scholar-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 24px 90px;
}
.scholar-detail-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 36px;
}
.scholar-detail-header .scholar-photo {
  width: 110px;
  height: 110px;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: zoom-in;
}
.scholar-detail-header .scholar-photo:focus-visible {
  box-shadow: 0 0 0 3px var(--gold);
}
.scholar-detail-header .scholar-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(20, 48, 44, 0.32);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.scholar-detail-header .scholar-photo:hover::after,
.scholar-detail-header .scholar-photo:focus-visible::after {
  opacity: 1;
}

/* ---------- تكبير الصورة (Lightbox) ---------- */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(10, 20, 18, 0.88);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.image-lightbox-img {
  max-width: min(92vw, 640px);
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transform: scale(0.94);
  transition: transform 0.25s ease;
  cursor: zoom-out;
}
.image-lightbox.is-open .image-lightbox-img {
  transform: scale(1);
}
.image-lightbox-close {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(246, 241, 228, 0.12);
  color: var(--parchment);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.image-lightbox-close:hover {
  background: rgba(246, 241, 228, 0.24);
}
.scholar-detail-header h1 {
  font-size: 26px;
  margin-bottom: 4px;
}
.scholar-detail-header p {
  color: var(--sage);
  font-size: 14px;
}

.scholar-bio {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 2.1;
  color: var(--charcoal);
}
.scholar-bio p + p {
  margin-top: 20px;
}

/* عناصر ماركداون داخل السيرة الذاتية ومحتوى المقالة — ستة مستويات عناوين */
.scholar-bio h1,
.scholar-bio h2,
.scholar-bio h3,
.scholar-bio h4,
.scholar-bio h5,
.scholar-bio h6,
#article-body h1,
#article-body h2,
#article-body h3,
#article-body h4,
#article-body h5,
#article-body h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}
.scholar-bio h1,
#article-body h1 {
  font-size: 27px;
  margin: 34px 0 14px;
}
.scholar-bio h2,
#article-body h2 {
  font-size: 23px;
  margin: 30px 0 13px;
}
.scholar-bio h3,
#article-body h3 {
  font-size: 21px;
  margin: 28px 0 12px;
}
.scholar-bio h4,
#article-body h4 {
  font-size: 19px;
  margin: 24px 0 10px;
}
.scholar-bio h5,
#article-body h5 {
  font-size: 17px;
  margin: 20px 0 8px;
  color: var(--sage);
}
.scholar-bio h6,
#article-body h6 {
  font-size: 15px;
  margin: 18px 0 8px;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.scholar-bio blockquote,
#article-body blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-inline-start: 3px solid var(--gold);
  background: var(--parchment);
  color: var(--sage);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.scholar-bio ul,
#article-body ul {
  margin: 14px 0;
  padding-inline-start: 22px;
}
.scholar-bio ul li,
#article-body ul li {
  margin-bottom: 8px;
}
.scholar-bio a,
#article-body a {
  color: var(--gold-deep, var(--gold));
  text-decoration: underline;
}
.margin-note {
  position: relative;
  color: var(--gold-deep, var(--gold));
  cursor: help;
  font-size: 13px;
  border-bottom: 1px dotted currentColor;
}
.margin-note-text {
  display: none;
  position: absolute;
  bottom: 130%;
  right: 0;
  width: max-content;
  max-width: 240px;
  background: var(--ink);
  color: var(--parchment);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.margin-note:hover .margin-note-text,
.margin-note:focus .margin-note-text {
  display: block;
}

/* ---------- إدراج بيت شعر داخل السيرة/المقالة ---------- */
.poem-container {
  max-width: 580px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.poem-verse {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.poem-hemistich {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Amiri", var(--font-display), serif;
  font-size: 18px;
  line-height: 2;
  color: var(--ink);
  text-align: justify;
  text-align-last: justify;
  text-justify: kashida;
  -webkit-text-justify: kashida;
}

/* ---------- 11. صفحة المقالات ---------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 30px 0 70px;
}
.article-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.article-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.article-card .article-author {
  color: var(--gold-dark);
  font-size: 12.5px;
  margin-bottom: 12px;
  font-weight: 600;
}
.article-card p.excerpt {
  color: var(--charcoal);
  font-size: 14px;
  margin-bottom: 16px;
}
.article-card .read-more {
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 2px;
}

.article-full {
  max-width: 720px;
  margin: 0 auto;
  padding: 50px 24px 90px;
}
.article-full h1 {
  font-size: 30px;
  margin-bottom: 10px;
}
.article-full .article-author {
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 30px;
  display: block;
}
.article-full-body {
  font-size: 17px;
  line-height: 2.1;
}
.article-full-body p + p {
  margin-top: 20px;
}

/* ---------- 12. حالات فارغة وتحميل ---------- */
.state-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--sage);
  grid-column: 1 / -1;
}
.state-msg strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 16px;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--card) 25%,
    #efe8d4 50%,
    var(--card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ---------- 13. التذييل (Footer) ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(246, 241, 228, 0.8);
  padding: 50px 0 26px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(246, 241, 228, 0.12);
}
@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand h3 {
  color: var(--parchment);
  font-size: 20px;
  margin-bottom: 10px;
}
.footer-brand p {
  font-size: 13.5px;
  line-height: 1.9;
  max-width: 320px;
}
.footer-col h4 {
  color: var(--gold-light);
  font-size: 14px;
  margin-bottom: 14px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  font-size: 13.5px;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--gold-light);
}
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.footer-bottom a {
  color: var(--gold-light);
  font-weight: 600;
}

/* ---------- 14. لوحة التحكم (Admin) ---------- */
.admin-shell {
  display: flex;
  min-height: 100vh;
}
.admin-sidebar {
  width: 250px;
  background: var(--ink);
  color: var(--parchment);
  padding: 26px 18px;
  flex-shrink: 0;
}
/* على الشاشات الكبيرة: تبقى قائمة لوحة التحكم ثابتة بطول الشاشة عند
   التمرير (Sticky) بدل أن تتحرك مع باقي المحتوى لأعلى/أسفل */
@media (min-width: 761px) {
  .admin-sidebar {
    position: sticky;
    top: var(--header-h);
    align-self: flex-start;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
}
.admin-sidebar h2 {
  color: var(--parchment);
  font-size: 18px;
  margin-bottom: 26px;
  padding: 0 8px;
}
.admin-sidebar nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.admin-sidebar nav a:hover,
.admin-sidebar nav a.is-active {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  color: var(--gold-light);
}
.admin-sidebar nav {
  display: flex;
  flex-direction: column;
}
.nav-divider {
  display: block;
  height: 1px;
  margin: 10px 6px 14px;
  background: rgba(246, 241, 228, 0.14);
}
.admin-sidebar nav .logout-link {
  color: #e0b3b3;
}
.admin-nav-icon {
  display: none;
}
.admin-tab-select {
  display: none;
}

/* الهيدر الموحّد أعلى لوحة التحكم — بنفس هوية بقية الموقع على كل الشاشات */
#admin-topbar .header-actions {
  margin-inline-start: auto;
}

.admin-main {
  flex: 1;
  padding: 36px 40px;
  max-width: 900px;
}
.admin-main h1 {
  font-size: 24px;
  margin-bottom: 6px;
}
.admin-main > p.lead {
  color: var(--sage);
  margin-bottom: 30px;
}

/* ---------- أداة تنسيق ماركداون فوق حقول الكتابة (السيرة/المقالة) ---------- */
.md-toolbar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.md-tools-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--sage);
  cursor: pointer;
  transition: all 0.2s ease;
}
.md-tools-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.md-tools-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 26px rgba(20, 48, 44, 0.16);
  padding: 6px;
  gap: 2px;
}
.md-toolbar.is-open .md-tools-menu {
  display: flex;
}
.md-tools-menu button {
  background: none;
  border: none;
  text-align: start;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--charcoal);
  cursor: pointer;
}
.md-tools-menu button:hover {
  background: var(--parchment);
  color: var(--ink);
}
.md-editable {
  font-family: "Courier New", ui-monospace, monospace;
  line-height: 1.7;
}

.admin-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  padding: 10px 8px 10px 18px;
  color: var(--sage);
  margin-bottom: 8px;
}
.admin-search-bar:focus-within {
  border-color: var(--gold);
}
.admin-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 14.5px;
  padding: 4px 0;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}
.admin-stat-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.admin-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.admin-stat-number {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-dark);
  line-height: 1;
}
.admin-stat-label {
  font-size: 12.5px;
  color: var(--sage);
}
@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-box {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-soft);
}
.login-box h1 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 6px;
}
.login-box p.lead {
  text-align: center;
  color: var(--sage);
  font-size: 13.5px;
  margin-bottom: 26px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.form-group .hint {
  font-size: 12px;
  color: var(--sage);
  margin-top: 6px;
  display: block;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 14.5px;
  font-family: inherit;
  color: var(--charcoal);
  transition: border-color 0.2s ease;
}
.form-control:focus {
  border-color: var(--gold);
}
textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.upload-box {
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  color: var(--sage);
  font-size: 13.5px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.upload-box:hover {
  border-color: var(--gold);
  background: rgba(176, 134, 63, 0.05);
}
.upload-box.has-file {
  border-color: var(--sage);
  color: var(--ink);
}

.form-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-soft);
}
.form-card h2 {
  font-size: 18px;
  margin-bottom: 20px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}
.checkbox-row label {
  margin: 0;
  font-weight: 400;
}

.form-msg {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  display: none;
}
.form-msg.is-success {
  display: block;
  background: rgba(93, 114, 88, 0.12);
  color: var(--sage);
}
.form-msg.is-error {
  display: block;
  background: rgba(176, 60, 60, 0.1);
  color: #9c3b3b;
}

.admin-table-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-table-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
}
.admin-table-row .row-title {
  flex: 1;
  min-width: 0;
}
.drag-handle {
  display: flex;
  align-items: center;
  color: var(--sage);
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
}
.drag-handle:active {
  cursor: grabbing;
}
/* الحالة البصرية أثناء سحب عنصر لإعادة ترتيبه (SortableJS) */
.sortable-ghost {
  opacity: 0.4;
  background: var(--bg-accent-light, var(--parchment));
}
.admin-table-row .row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  border: 1px solid var(--border-soft);
}
.icon-btn:hover {
  color: #9c3b3b;
  border-color: #9c3b3b;
}

@media (max-width: 760px) {
  .admin-shell {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .admin-sidebar h2 {
    display: none;
  }
  /* على الجوال: قائمة منسدلة موحّدة الهوية مع هيدر الموقع (ألوان الحبر
     والذهبي)، بدل شريط أيقونات يشغل عرض الشاشة كاملاً */
  .admin-tab-select {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    background: var(--ink);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: 999px;
    padding: 12px 40px 12px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--parchment);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: left 16px center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: border-color 0.2s ease;
  }
  .admin-tab-select:focus {
    outline: none;
    border-color: var(--gold);
  }
  .admin-tab-select option {
    background: var(--ink);
    color: var(--parchment);
  }
  .admin-tab-select option[value="logout"] {
    color: #e0b3b3;
  }
  .admin-sidebar nav {
    display: none;
  }
  .admin-main {
    padding: 26px 18px;
  }
}

.icon-btn.icon-btn-edit:hover {
  color: var(--gold-dark);
  border-color: var(--gold);
}
.manage-empty {
  color: var(--sage);
  font-size: 13.5px;
  padding: 10px 4px;
}
.admin-table-row .row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline-end: 10px;
}
.edit-banner {
  background: rgba(176, 134, 63, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold-dark);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.edit-banner button {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  flex-shrink: 0;
}

/* ---------- 15. شريط البحث الشامل في الموقع ---------- */
.search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--ink);
  border-top: 1px solid rgba(246, 241, 228, 0.12);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.25s ease;
  z-index: 90;
}
.search-panel.is-open {
  max-height: 80vh;
  opacity: 1;
  overflow-y: auto;
}
/* في الصفحات الفرعية (الأعلام/الكتب/الدروس/المقالات) تصبح لوحة البحث
   عرضاً مباشراً للنتائج أسفل الهيدر مباشرة بدل قائمة منسدلة صغيرة،
   لأن باقي محتوى الصفحة يُخفى أثناء عرض النتائج */
.search-panel--section.is-open {
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
}
.search-panel .container {
  padding-top: 22px;
  padding-bottom: 26px;
}

.search-panel-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(246, 241, 228, 0.08);
  border: 1.5px solid rgba(246, 241, 228, 0.2);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  color: var(--gold-light);
}
.search-panel-bar svg {
  flex-shrink: 0;
}
.search-panel-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--parchment);
  font-family: inherit;
  font-size: 16px;
  padding: 8px 0;
}
.search-panel-input::placeholder {
  color: rgba(246, 241, 228, 0.5);
}
.search-panel-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--parchment);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.search-panel-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.search-panel-scopes .filter-chip {
  background: rgba(246, 241, 228, 0.06);
  border-color: rgba(246, 241, 228, 0.22);
  color: rgba(246, 241, 228, 0.75);
}
.search-panel-scopes .filter-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.search-panel-results {
  margin-top: 18px;
}
.search-panel-hint {
  color: rgba(246, 241, 228, 0.6);
  font-size: 13.5px;
  padding: 6px 2px;
}
.search-result-group {
  margin-bottom: 18px;
}
.search-result-group h4 {
  color: var(--gold-light);
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 600;
}
.search-result-group ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-group a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--parchment);
  transition: background 0.2s ease;
}
.search-result-group a:hover {
  background: rgba(246, 241, 228, 0.08);
}
.search-result-group a strong {
  font-size: 14.5px;
  font-weight: 600;
}
.search-result-group a span {
  font-size: 12.5px;
  color: var(--gold-light);
  flex-shrink: 0;
}

/* ---------- شريط البحث الرئيسي المدمج في الصفحة الرئيسية (مستوحى من مكتبة نور) ---------- */
.home-search {
  padding: 46px 0 8px;
}

.home-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  box-shadow: var(--shadow-soft);
  color: var(--sage);
}
.home-search-bar:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-lift);
}
.home-search-bar svg {
  flex-shrink: 0;
}
.home-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--charcoal);
  font-family: inherit;
  font-size: 16px;
  padding: 20px 20px 20px 1px;
}
.home-search-input::placeholder {
  color: var(--sage);
  opacity: 0.8;
}
.home-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--gold);
  color: var(--card);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.home-search-submit:hover {
  background: var(--gold-dark);
}
.home-search-submit svg {
  flex-shrink: 0;
}

.home-search-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 16px auto 0;
}

.home-search-results {
  max-width: 760px;
  margin: 0 auto;
  display: none;
}
.home-search-results.has-results {
  display: block;
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.home-search-results .search-panel-hint {
  color: var(--sage);
}
.home-search-results .search-result-group h4 {
  color: var(--gold-dark);
}
.home-search-results .search-result-group a {
  color: var(--charcoal);
}
.home-search-results .search-result-group a:hover {
  background: var(--parchment);
}
.home-search-results .search-result-group a span {
  color: var(--sage);
}

@media (max-width: 560px) {
  .home-search-bar {
    padding: 6px 6px 6px 18px;
  }
  .home-search-submit span {
    display: none;
  }
  .home-search-submit {
    padding: 12px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- 16. غلاف الكتاب — تصميم طبيعي مسطّح بلا ظل سفلي ---------- */
.book-cover {
  border-radius: var(--radius-md);
}
.book-cover-image {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sage) 0%, var(--ink) 100%);
}
.book-cover img {
  object-position: top center;
}
.book-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  color: rgba(246, 241, 228, 0.85);
}

/* لمسات واقعية على غلاف بطاقة الكتاب فقط: توهج وتظليل جانبي، خطوط كعب المجلّد، وطية زاوية الصفحة */
.book-card .book-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 32%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0) 9%,
      rgba(0, 0, 0, 0) 89%,
      rgba(0, 0, 0, 0.3) 100%
    );
  z-index: 2;
  pointer-events: none;
}
.book-card .book-cover::after {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  right: 0;
  width: 6px;
  background: repeating-linear-gradient(
    180deg,
    rgba(246, 241, 228, 0.55) 0px,
    rgba(246, 241, 228, 0.55) 2px,
    rgba(20, 48, 44, 0.28) 2px,
    rgba(20, 48, 44, 0.28) 4px
  );
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.25);
  z-index: 3;
  pointer-events: none;
}
/* ---------- 17. صفحة تفاصيل الكتاب وصفحة القراءة ---------- */
.book-detail {
  padding: 40px 0 80px;
}
.book-detail-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .book-detail-layout {
    grid-template-columns: 1fr;
  }
  .book-detail-cover {
    max-width: 220px;
    margin: 0 auto;
  }
}
.book-detail-cover.book-cover {
  aspect-ratio: 3/4;
}
.book-detail-info h1 {
  font-size: clamp(22px, 3.2vw, 30px);
  margin-bottom: 6px;
}
.book-detail-author {
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 4px;
}
.book-detail-category {
  color: var(--sage);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.book-detail-desc {
  font-size: 16px;
  line-height: 2;
  color: var(--charcoal);
  margin-bottom: 26px;
}
.book-detail-desc p + p {
  margin-top: 14px;
}
.book-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- كتب ذات صلة (صفحة تفاصيل الكتاب) ---------- */
.related-books-section {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border-soft);
}
.related-books-heading {
  font-size: 20px;
  margin-bottom: 20px;
}
.related-books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .related-books-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.related-book-card {
  display: block;
}
.related-book-cover {
  margin-bottom: 8px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.related-book-card:hover .related-book-cover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.related-book-title {
  display: block;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.related-book-author {
  display: block;
  font-size: 12.5px;
  color: var(--sage);
  margin-top: 2px;
}

/* ---------- 18. تحسينات متفرقة ---------- */
.footer-bottom .link-btn {
  color: var(--gold-light);
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
}
.footer-bottom .link-btn:hover {
  text-decoration: underline;
}

/* ---------- صفحة 404 ---------- */
.not-found-page {
  max-width: 640px;
  margin: 70px auto 90px;
  text-align: center;
}
.not-found-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.not-found-page h1 {
  font-size: clamp(22px, 3vw, 28px);
  margin-bottom: 10px;
}
.not-found-page > p {
  color: var(--sage);
  font-size: 15px;
  margin-bottom: 30px;
}
.not-found-search {
  margin-bottom: 10px;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

/* ---------- نسخة الطباعة: تُخفي عناصر التصفح وتُبرز المحتوى فقط (عبر طباعة المتصفح Ctrl+P) ---------- */
@media print {
  .site-header,
  .site-footer,
  .home-search,
  .audio-player,
  .back-link,
  .install-banner,
  .related-books-section,
  .continue-reading-section,
  .latest-section {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .article-full,
  .scholar-detail {
    padding: 0;
  }
  .article-full-body,
  .scholar-bio {
    color: #000;
  }
}