/* ═══════════════════════════════════════════
   رزق الله — Editorial Islamic Knowledge
   Palette: cream / ink / emerald / gold (4)
   Fonts: Amiri (display) + Cairo (body)
════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&family=Amiri:wght@400;700&family=Cairo:wght@400;600;700&family=Tajawal:wght@400;500;700&family=Almarai:wght@400;700&family=Scheherazade+New:wght@400;700&family=Reem+Kufi:wght@400;600&family=Lateef:wght@400;700&display=swap');

@font-face {
  font-family: 'UthmanicHafs';
  src: url('quran-challenge/fonts/UthmanicHafs1Ver18.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FDFCF8;
  --surface: #FDF8F2;
  --ink: #1c2a26;
  --muted: #5d6b66;
  --line: #e2dcd0;
  --primary: #10367D;
  --primary-ink: #FDF8F2;
  --accent: #b98a2f;
  --radius: 4px;
  --font-display: "Amiri", serif;
  --font-body: "Cairo", sans-serif;

  /* ─── Leaderboard: Gold ─── */
  --lb-gold: #d4af37;
  --lb-gold-dark: #b8941f;
  --lb-gold-bg: linear-gradient(135deg, #2e2508 0%, #3d3518 100%);
  --lb-gold-border: rgba(212,175,55,0.5);
  --lb-gold-glow: rgba(212,175,55,0.22);
  --lb-gold-inset: rgba(212,175,55,0.15);
  --lb-gold-medal: linear-gradient(145deg, #ffd86b, #e8b830, #c9a020);
  --lb-gold-medal-border: rgba(255,215,80,0.7);
  --lb-gold-medal-glow: rgba(232,184,48,0.5);
  --lb-gold-ring: rgba(232,184,48,0.25);
  --lb-gold-avatar-border: #d4af37;
  --lb-gold-avatar-shadow: rgba(212,175,55,0.5);
  --lb-gold-pts-bg: linear-gradient(135deg, #d4af37, #b8941f);
  --lb-gold-pts-text: #1a1400;
  --lb-gold-pts-shadow: rgba(212,175,55,0.5);

  /* ─── Leaderboard: Silver ─── */
  --lb-silver: #b0bac8;
  --lb-silver-dark: #8a96a8;
  --lb-silver-bg: linear-gradient(135deg, #1e2028 0%, #282c34 100%);
  --lb-silver-border: rgba(192,200,212,0.35);
  --lb-silver-glow: rgba(176,186,200,0.12);
  --lb-silver-medal: linear-gradient(145deg, #e8ecf0, #c8d0d8, #a0aab4);
  --lb-silver-medal-border: rgba(200,215,230,0.5);
  --lb-silver-medal-glow: rgba(168,180,192,0.3);
  --lb-silver-medal-ring: rgba(168,180,192,0.08);
  --lb-silver-avatar-border: #b0bac8;
  --lb-silver-avatar-shadow: rgba(176,186,200,0.4);
  --lb-silver-pts-bg: rgba(176,186,200,0.18);
  --lb-silver-pts-text: #c8d0d8;

  /* ─── Leaderboard: Bronze ─── */
  --lb-bronze: #cd7f32;
  --lb-bronze-dark: #a86520;
  --lb-bronze-bg: linear-gradient(135deg, #1e1208 0%, #2a180c 100%);
  --lb-bronze-border: rgba(205,127,50,0.45);
  --lb-bronze-glow: rgba(205,127,50,0.15);
  --lb-bronze-medal: linear-gradient(145deg, #f0b878, #cd7f32, #a86520);
  --lb-bronze-medal-border: rgba(205,127,50,0.45);
  --lb-bronze-medal-glow: rgba(205,127,50,0.3);
  --lb-bronze-medal-ring: rgba(205,127,50,0.08);
  --lb-bronze-avatar-border: #cd7f32;
  --lb-bronze-avatar-shadow: rgba(205,127,50,0.45);
  --lb-bronze-pts-bg: rgba(205,127,50,0.2);
  --lb-bronze-pts-text: #e8a050;
}

.quran-text {
  font-family: "UthmanicHafs", "Amiri", "Noto Naskh Arabic", serif;
  font-weight: 700;
  font-size: 1.18em;
  line-height: 2.2;
  direction: rtl;
  text-align: right;
  color: #5d4037;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hadith-text { color: #1565c0; font-weight: 700; }
.book-text { color: #6a1b9a; }
.rich-title-1 { color: #000; font-weight: 700; font-size: 21px; }
.rich-title-2 { color: #000; font-weight: 700; font-size: 19px; }
.rich-title-3 { color: #000; font-weight: 700; font-size: 17px; }
.custom-link { color: #1565c0; font-weight: 700; text-decoration: underline; }
.scholar-text { color: #2e7d32; font-weight: 700; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
}

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: #2162da; color: #ffffff ; }

.btn--ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--outline { background: #2162da; color: #ffffff; }

.btn--gold { background: #2162da; color: #fff; font-weight: 700; }
#btn-team-all,


/* ─── Navbar ─── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--primary);
}
.navbar-inner {
  width: min(1280px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 16px;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--primary-ink);
}
.navbar-logo-mark {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.navbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--primary-ink);
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
#navbar-links { display: none; }
.navbar-links--desktop { display: flex; }
.navbar-link {
  color: rgba(253, 248, 242, 0.85);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: color 0.2s ease, background 0.2s ease;
}
.navbar-link:hover { color: var(--primary-ink); background: rgba(253, 248, 242, 0.1); }
.navbar-link.active { color: var(--primary-ink); border-bottom: 2px solid #1266F1; }
.navbar-link--cta {
  border: 1px solid #1266F1;
  color: var(--primary);
  margin-inline-start: 8px;
  background: #fff;
}
.navbar-link--cta:hover { background: #1266F1; color: #fff; border-color: #1266F1; }
.navbar-login-mobile {
  display: none;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #1266F1;
  border-radius: var(--radius);
  background: #fff;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-login-mobile:hover { background: #1266F1; color: #fff; border-color: #1266F1; }
.navbar-link--profile {
  border: 1px solid #1266F1;
  color: var(--primary);
  margin-inline-start: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-link--profile:hover { background: #1266F1; color: #fff; border-color: #1266F1; }
.navbar-profile-avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.navbar-link--profile:hover .navbar-profile-avatar-sm { background: #fff; color: var(--primary); }
.navbar-profile {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 18px;
  border: 1px solid #1266F1;
  border-radius: var(--radius);
  background: #fff;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-profile:hover { background: #1266F1; color: #fff; border-color: #1266F1; }
.navbar-profile-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.navbar-profile:hover .navbar-profile-avatar { background: #fff; color: var(--primary); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.hamburger-line {
  width: 24px;
  height: 2px;
  background: var(--primary-ink);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 42, 38, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.navbar-overlay.open { opacity: 1; pointer-events: auto; }

/* ─── Hero ─── */
.hero { padding: 40px 0 56px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-hadith-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-text-col {
  text-align: right;
}

.hero-eyebrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  text-align: right;
}
.hero-eyebrow-rule { display: none; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
.hero-subtitle {
  margin-top: 28px;
  max-width: 560px;
  color: var(--primary);
  font-size: 16px;
  line-height: 1.6;
  text-align: right;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 36px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.hero-stats--secondary {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
.hero-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.hero-stat dd {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.hero-stat dt {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  order: 1;
  text-align: center;
}

.hero-rule { height: 1px; background: var(--line); margin-top: 64px; }

/* ─── Hero · حديث اليوم Card ─── */
.hadith-hero-card {
  width: 100%;
  max-width: 480px;
  display: block;
  text-align: right;
  font-family: var(--font-body);
  background: url('images/koko.webp') center / cover no-repeat;
  border: 1px solid rgba(255, 240, 240, 0.32);
  border-radius: 30px;
  padding: 22px 20px 20px;
  box-shadow: 0 24px 48px -22px rgba(120, 20, 40, 0.4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.hadith-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  transform: translateX(-100%);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.hadith-hero-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 245, 245, 0.55);
  box-shadow: 0 34px 60px -22px rgba(120, 20, 40, 0.5);
}
.hadith-hero-card:hover::before { transform: translateX(100%); }
.hadith-hero-card:active { transform: translateY(-1px) scale(0.996); }

.hadith-hero-loading {
  display: flex; flex-direction: column; gap: 14px; padding: 8px 0; width: 100%;
}
.hadith-hero-loading .skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.14) 25%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.14) 75%);
  background-size: 200% 100%;
  animation: weredShimmer 1.8s ease-in-out infinite;
}
.hadith-hero-loading .skeleton-head { width: 50%; height: 24px; }
.hadith-hero-loading .skeleton-panel { width: 100%; height: 120px; border-radius: 18px; }
.hadith-hero-loading .skeleton-btn { width: 60%; height: 34px; border-radius: 12px; }

.hadith-hero-display { position: relative; z-index: 1; }

.hadith-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hadith-hero-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff4e6;
  text-shadow: 0 1px 3px rgba(70, 10, 25, 0.5), 0 0 1px rgba(70, 10, 25, 0.35);
}
#hadith-hero-index { display: none; }
.hadith-hero-body {
  border-radius: 18px;
  padding: 14px 14px 10px;
}
.hadith-hero-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 2;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(80, 10, 25, 0.55), 0 0 1px rgba(80, 10, 25, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.hadith-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.hadith-hero-source {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: #ffe9da;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(80, 10, 25, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hadith-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: #fff6ec;
  background: rgba(50, 8, 18, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 245, 235, 0.22);
  border-radius: 999px;
  padding: 6px 11px;
  box-shadow: 0 6px 14px -6px rgba(70, 10, 25, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.hadith-hero-card:hover .hadith-hero-cta {
  background: rgba(50, 8, 18, 0.42);
  border-color: rgba(255, 245, 235, 0.4);
}
.hadith-hero-cta svg { color: #ffe6cf; transition: transform 0.25s ease; }
.hadith-hero-card:hover .hadith-hero-cta svg { transform: translateX(4px); }

/* ─── Luxury Hadith Library ─── */
.section-hadith-lux { background: #091426; color: #f4ead1; position: relative; overflow: hidden; }
.section-hadith-lux::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image:radial-gradient(circle at 14% 18%, rgba(201,163,74,.16) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 72%, rgba(201,163,74,.12) 0 1px, transparent 1.5px); background-size:46px 46px,58px 58px; }
.section-hadith-lux::after { content:""; position:absolute; top:0; left:50%; width:min(940px,82%); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,#c9a34a,transparent); opacity:.5; }
.section-hadith-lux .section { position:relative; z-index:1; }
.hadith-lux-header { text-align:center; max-width:760px; margin:0 auto 34px; padding-top:0; }
.hadith-lux-ornament { display:none !important; }
.hadith-lux-title, .hadith-lux-label, .hadith-lux-desc { transform:translateY(-10px); }
@media (max-width:600px){ .hadith-lux-header{margin-bottom:28px;} .hadith-lux-title, .hadith-lux-label, .hadith-lux-desc{transform:translateY(-14px);} }
.hadith-lux-ornament { color:#d2ad56; font-size:27px; margin-bottom:8px; text-shadow:0 0 18px rgba(210,173,86,.22); }
.hadith-lux-label { display:inline-flex; align-items:center; gap:9px; color:#d8b967; font-size:14px; font-weight:700; }
.hadith-lux-label span { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(216,185,103,.55); border-radius:50%; font-family:var(--font-display); }
.hadith-lux-title { margin:12px 0 8px; font-family:var(--font-display); font-size:clamp(30px,4vw,46px); line-height:1.25; color:#fff7e7; }
.hadith-lux-desc { color:rgba(244,234,209,.66); font-size:15px; line-height:1.8; }
.hadith-lux-search { max-width:850px; margin:0 auto 16px; display:flex; align-items:center; gap:10px; min-height:60px; padding:0 18px; border-radius:18px; border:1px solid rgba(201,163,74,.35); background:rgba(4,14,29,.82); box-shadow:0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03); }
.hadith-lux-search svg { color:#d2ad56; flex-shrink:0; }
.hadith-lux-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#fff8e9; font-family:var(--font-body); font-size:15px; text-align:right; }
.hadith-lux-search input::placeholder { color:rgba(244,234,209,.4); }
.hadith-lux-search button { border:0; background:transparent; color:rgba(244,234,209,.5); font-size:25px; cursor:pointer; padding:4px 6px; }
.hadith-lux-filters { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
.hadith-lux-filter { border:1px solid rgba(201,163,74,.25); background:rgba(255,255,255,.03); color:rgba(244,234,209,.72); border-radius:999px; padding:8px 15px; font-family:var(--font-body); font-size:13px; cursor:pointer; transition:all .2s ease; }
.hadith-lux-filter:hover, .hadith-lux-filter.is-active { color:#0a1424; background:#d7b763; border-color:#d7b763; box-shadow:0 6px 18px rgba(215,183,99,.16); }
.hadith-lux-status { min-height:24px; text-align:center; color:rgba(244,234,209,.48); font-size:13px; margin-bottom:10px; }
.hadith-lux-results { display:flex; flex-direction:column; gap:16px; max-width:820px; margin:0 auto; }
.hadith-lux-card { cursor:pointer; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hadith-lux-card:hover, .hadith-lux-card:focus-visible { transform:translateY(-2px); border-color:rgba(215,183,99,.58); box-shadow:0 18px 38px rgba(0,0,0,.28); outline:none; }
.hadith-lux-card-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; font-size:clamp(18px,2.2vw,22px); line-height:1.95; max-height:8em; }
.hadith-lux-card-cta { position:relative; z-index:1; margin-top:15px; padding-top:12px; border-top:1px solid rgba(201,163,74,.16); color:#d7b763; font-size:12px; font-weight:700; text-align:left; }
.hadith-lux-more-wrap { display:flex; justify-content:center; margin-top:22px; }
@media (max-width:600px){ .hadith-lux-results{gap:13px;} .hadith-lux-card{padding:19px 18px 16px; border-radius:18px;} .hadith-lux-card-text{font-size:19px; line-height:1.9; -webkit-line-clamp:4;} }

/* Full hadith reading view */
body.hadith-modal-open { overflow:hidden; }
body.streak-modal-open { overflow:hidden; }
/* Match the app: blur starts BELOW the website navbar. */
.streak-blur-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
}
.streak-blur-pane {
  position: fixed;
  background: rgba(4, 12, 28, 0.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}
.streak-blur-pane.streak-blur-bottom {
  left: 0;
  right: 0;
}
/* The card must always sit above the blur layer. */
.streak-badge.streak-badge--open { z-index: 10000; }
.streak-badge.streak-badge--open .streak-tooltip { z-index: 10001; }
.streak-badge--open {
  z-index: 10002;
}
.hadith-reading-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; }
.hadith-reading-backdrop { position:absolute; inset:0; background:rgba(2,8,20,.82); backdrop-filter:blur(8px); }
.hadith-reading-dialog { position:relative; z-index:1; width:min(720px,100%); max-height:min(86vh,820px); overflow:auto; padding:36px 30px 26px; border:1px solid rgba(215,183,99,.48); border-radius:26px; background:linear-gradient(145deg,#172b47,#071426); box-shadow:0 30px 90px rgba(0,0,0,.5); color:#fff8e9; text-align:center; }
.hadith-reading-close { position:absolute; top:12px; left:15px; width:34px; height:34px; border:1px solid rgba(215,183,99,.32); border-radius:50%; background:rgba(255,255,255,.04); color:#e2c47d; font-size:25px; line-height:1; cursor:pointer; }
.hadith-reading-kicker { color:#e2c47d; font-size:14px; font-weight:700; }
.hadith-reading-number { margin-top:6px; color:rgba(244,234,209,.55); font-size:12px; }
.hadith-reading-divider { width:90px; height:1px; margin:20px auto; background:linear-gradient(90deg,transparent,#d7b763,transparent); }
.hadith-reading-text { color:#fff8ea; font-family:var(--font-display); font-size:clamp(23px,3vw,31px); line-height:2.15; text-align:right; white-space:pre-wrap; }
.hadith-reading-heading { margin-top:20px; padding-top:15px; border-top:1px solid rgba(215,183,99,.18); color:#d7b763; font-family:var(--font-display); font-size:18px; }
.hadith-reading-footer { margin-top:25px; padding-top:15px; border-top:1px solid rgba(215,183,99,.16); color:rgba(244,234,209,.45); font-size:11px; }
@media (max-width:600px){ .hadith-reading-modal{padding:12px;} .hadith-reading-dialog{padding:34px 20px 22px; border-radius:22px;} .hadith-reading-text{font-size:23px; line-height:2.05;} }
.hadith-lux-card { position:relative; overflow:hidden; min-height:190px; padding:24px 23px 20px; border-radius:20px; border:1px solid rgba(201,163,74,.22); background:linear-gradient(145deg,rgba(20,35,58,.96),rgba(7,18,34,.98)); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.hadith-lux-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(201,163,74,.08); border-radius:14px; pointer-events:none; }
.hadith-lux-card::after { content:none; display:none; }
.hadith-lux-card-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:13px; color:#d7b763; font-size:12px; }
.hadith-lux-card-book { font-weight:700; }
.hadith-lux-card-num { color:rgba(244,234,209,.48); }
.hadith-lux-card-text { position:relative; z-index:1; color:#fff8ea; font-family:var(--font-display); font-size:20px; line-height:2; margin:0; }
.hadith-lux-more-wrap { text-align:center; margin-top:22px; }
.hadith-lux-more { display:inline-flex; align-items:center; justify-content:center; min-width:150px; padding:10px 18px; border-radius:12px; border:1px solid rgba(201,163,74,.35); background:rgba(201,163,74,.08); color:#e2c47d; font-family:var(--font-body); font-weight:700; cursor:pointer; }

/* Compact hadith cards: short preview, full text opens on click */
.hadith-lux-card { min-height:0; padding:18px 20px 14px; }
.hadith-lux-card-head { margin-bottom:8px; }
.hadith-lux-card-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; max-height:5.7em; font-size:clamp(17px,2vw,20px); line-height:1.9; }
.hadith-lux-card-cta { margin-top:10px; padding-top:9px; font-size:12px; }
@media (max-width:600px){ .hadith-lux-card{padding:15px 16px 12px;} .hadith-lux-card-text{font-size:18px; line-height:1.85; -webkit-line-clamp:3; max-height:5.55em;} .hadith-lux-card-cta{margin-top:8px; padding-top:8px;} }

/* ─── Section dividers ─── */
.hero,
.section,
.section-alt {
  position: relative;
}
.hero::after,
main > .section::after,
.section-alt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(16,54,125,0.15) 18%, rgba(185,138,47,0.45) 50%, rgba(16,54,125,0.15) 82%, transparent 100%);
  pointer-events: none;
}
.section-alt .section {
  border-bottom: none;
}

/* ─── Sections ─── */
.section { padding: 40px 0 80px; }
.section-header { max-width: 700px; margin-bottom: 52px; }
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}
.section-label span {
  font-family: var(--font-display);
  border: 1px solid var(--accent);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.3;
}
.section-desc {
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
}
.section-count {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(16, 54, 125, 0.07);
  border-radius: 100px;
}
.section-footer { text-align: center; margin-top: 44px; }

/* ─── Unified section headings ─── */
main > .section > .section-header,
.section-alt .section-header {
  text-align: center;
  margin-inline: auto;
  max-width: 700px;
}
main > .section > .section-header .section-label,
.section-alt .section-header .section-label {
  justify-content: center;
}
main > .section > .section-header::before,
.section-alt .section-header::before {
  display: none;
}

/* ─── Learning Plan Roadmap ─── */
.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
  background: var(--primary);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.plan-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-radius: 0;
  text-align: right;
  cursor: pointer;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.plan-card:last-child { border-bottom: none; }
.plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.plan-card:hover::before { opacity: 1; }
.plan-card:nth-child(1)::before { background: linear-gradient(90deg, rgba(26,58,107,0.2) 0%, transparent 60%); }
.plan-card:nth-child(2)::before { background: linear-gradient(90deg, rgba(22,101,101,0.2) 0%, transparent 60%); }
.plan-card:nth-child(3)::before { background: linear-gradient(90deg, rgba(161,98,7,0.2) 0%, transparent 60%); }
.plan-card:nth-child(4)::before { background: linear-gradient(90deg, rgba(109,40,171,0.2) 0%, transparent 60%); }

.plan-card:nth-child(1) { background: rgba(26,58,107,0.18); }
.plan-card:nth-child(2) { background: rgba(22,101,101,0.18); }
.plan-card:nth-child(3) { background: rgba(161,98,7,0.18); }
.plan-card:nth-child(4) { background: rgba(109,40,171,0.18); }

.plan-card-num {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
  color: #fff;
}

.plan-card-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.plan-card:hover .plan-card-icon { transform: scale(1.08); }
.plan-card-icon svg {
  width: 28px;
  height: 28px;
}
.plan-card:nth-child(1) .plan-card-icon { background: rgba(26,58,107,0.25); }
.plan-card:nth-child(2) .plan-card-icon { background: rgba(22,101,101,0.25); }
.plan-card:nth-child(3) .plan-card-icon { background: rgba(161,98,7,0.25); }
.plan-card:nth-child(4) .plan-card-icon { background: rgba(109,40,171,0.25); }

.plan-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.plan-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #F0EDE5;
  margin-bottom: 4px;
}
.plan-card-desc {
  font-size: 14px;
  color: rgba(240,237,229,0.45);
  line-height: 1.5;
}

.plan-card-arrow {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,237,229,0.5);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  flex-shrink: 0;
  transform: scaleX(-1);
}
.plan-card:hover .plan-card-arrow {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
  transform: scaleX(-1) translateX(-3px);
  box-shadow: 0 2px 10px rgba(255,255,255,0.15);
}

/* Accent lines on left edge */
.plan-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.plan-card:hover::after { opacity: 1; }
.plan-card:nth-child(1)::after { background: #1A3A6B; }
.plan-card:nth-child(2)::after { background: #166565; }
.plan-card:nth-child(3)::after { background: #A16207; }
.plan-card:nth-child(4)::after { background: #6D28AB; }

/* ─── Talib Ilm breadcrumb ─── */
.talib-ilm-dark {
  background: #F5F0E8;
  min-height: 100vh;
  padding-bottom: 60px;
}
.talib-ilm-breadcrumb {
  font-size: 14px;
  color: #8B8178;
  margin-bottom: 8px;
}
.breadcrumb-link {
  color: #1B4D7A;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.breadcrumb-link:hover { color: #0E2F4D; }
.breadcrumb-sep { margin: 0 6px; color: #C4BCB0; }
.breadcrumb-current { color: #6B6157; }

/* ─── Section header on warm bg ─── */
#page-talib-ilm .section-title {
  color: #1C1710;
}
#page-talib-ilm .section-desc {
  color: #8B8178;
}
#page-talib-ilm .section {
  padding-top: 10px;
}
#page-talib-ilm .section-header {
  margin-bottom: 14px;
}

/* ─── Back button ─── */
#page-talib-ilm .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #D6CEC2;
  background: #FFFFFF;
  color: #6B6157;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 28px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#page-talib-ilm .back-link:hover {
  border-color: #1B4D7A;
  color: #1B4D7A;
  box-shadow: 0 2px 8px rgba(27,77,122,0.08);
}

/* ─── Levels Container ─── */
.aqeedah-levels {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.level-card {
  background: #FFFFFF;
  border: 1px solid #E8E2D8;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}
.level-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px -8px rgba(0,0,0,0.08);
}

.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  position: relative;
  overflow: hidden;
}
.level-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
}
.level-card:nth-child(1) .level-header::before { background: #1B4D7A; }
.level-card:nth-child(2) .level-header::before { background: #0E7C6B; }
.level-card:nth-child(3) .level-header::before { background: #B8860B; }
.level-card:nth-child(4) .level-header::before { background: #7B2D8E; }
.level-card:nth-child(5) .level-header::before { background: #C75B39; }
.level-card:nth-child(6) .level-header::before { background: #2E7D6A; }

.level-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #1C1710;
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-num-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.level-card:nth-child(1) .level-num-dot { background: #1B4D7A; }
.level-card:nth-child(2) .level-num-dot { background: #0E7C6B; }
.level-card:nth-child(3) .level-num-dot { background: #B8860B; }
.level-card:nth-child(4) .level-num-dot { background: #7B2D8E; }
.level-card:nth-child(5) .level-num-dot { background: #C75B39; }
.level-card:nth-child(6) .level-num-dot { background: #2E7D6A; }

.level-info { display: flex; align-items: center; gap: 12px; }
.level-count {
  font-size: 12px;
  font-weight: 600;
  color: #8B8178;
  background: #F5F0E8;
  padding: 4px 12px;
  border-radius: 20px;
}
.level-desc {
  font-size: 13px;
  color: #8B8178;
  padding: 0 28px 20px;
  border-bottom: 1px solid #F0EBE3;
  line-height: 1.6;
}

.level-books {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #F0EBE3;
}

/* ─── Book Card — Manuscript Design ─── */
.book-card {
  background: #FFFDF9;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px -4px rgba(0,0,0,0.08);
}
.book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 12px 32px -6px rgba(0,0,0,0.12);
}

/* colored book spine */
.book-card-spine {
  width: 7px;
  flex-shrink: 0;
  position: relative;
}
.book-card-spine::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(255,255,255,0.5) 3px, rgba(255,255,255,0.5) 4px);
}
.level-card:nth-child(1) .book-card-spine { background: #2D5F8A; }
.level-card:nth-child(2) .book-card-spine { background: #1A8C7A; }
.level-card:nth-child(3) .book-card-spine { background: #C6930A; }
.level-card:nth-child(4) .book-card-spine { background: #8B3A9E; }
.level-card:nth-child(5) .book-card-spine { background: #D4654A; }
.level-card:nth-child(6) .book-card-spine { background: #3A8C78; }

/* open-book fold shadow */
.book-card-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 18px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* bookmark ribbon */
.book-card-bookmark {
  position: absolute;
  top: 0;
  left: 28px;
  width: 18px;
  height: 24px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  z-index: 2;
}
.level-card:nth-child(1) .book-card-bookmark { background: #2D5F8A; }
.level-card:nth-child(2) .book-card-bookmark { background: #1A8C7A; }
.level-card:nth-child(3) .book-card-bookmark { background: #C6930A; }
.level-card:nth-child(4) .book-card-bookmark { background: #8B3A9E; }
.level-card:nth-child(5) .book-card-bookmark { background: #D4654A; }
.level-card:nth-child(6) .book-card-bookmark { background: #3A8C78; }

/* book icon — SVG circle */
.book-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
}
.book-card-icon svg {
  width: 20px;
  height: 20px;
}
.level-card:nth-child(1) .book-card-icon { background: rgba(45,95,138,0.08); }
.level-card:nth-child(2) .book-card-icon { background: rgba(26,140,122,0.08); }
.level-card:nth-child(3) .book-card-icon { background: rgba(198,147,10,0.08); }
.level-card:nth-child(4) .book-card-icon { background: rgba(139,58,158,0.08); }
.level-card:nth-child(5) .book-card-icon { background: rgba(212,101,74,0.08); }
.level-card:nth-child(6) .book-card-icon { background: rgba(58,140,120,0.08); }
.level-card:nth-child(1) .book-card-icon svg { color: #2D5F8A; }
.level-card:nth-child(2) .book-card-icon svg { color: #1A8C7A; }
.level-card:nth-child(3) .book-card-icon svg { color: #C6930A; }
.level-card:nth-child(4) .book-card-icon svg { color: #8B3A9E; }
.level-card:nth-child(5) .book-card-icon svg { color: #D4654A; }
.level-card:nth-child(6) .book-card-icon svg { color: #3A8C78; }

/* card body */
.book-card-body {
  flex: 1;
  padding: 24px 22px 22px 24px;
  position: relative;
}

/* title — large display */
.book-card-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #1C1710;
  margin-bottom: 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* decorative rule between title and desc */
.book-card-rule {
  width: 32px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 10px;
}
.level-card:nth-child(1) .book-card-rule { background: #2D5F8A; }
.level-card:nth-child(2) .book-card-rule { background: #1A8C7A; }
.level-card:nth-child(3) .book-card-rule { background: #C6930A; }
.level-card:nth-child(4) .book-card-rule { background: #8B3A9E; }
.level-card:nth-child(5) .book-card-rule { background: #D4654A; }
.level-card:nth-child(6) .book-card-rule { background: #3A8C78; }

.book-card-desc {
  font-size: 13.5px;
  color: #7A7168;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* importance — bold accent block */
.book-card-importance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.book-card-importance::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
}
.level-card:nth-child(1) .book-card-importance { background: rgba(45,95,138,0.07); border: 1px solid rgba(45,95,138,0.12); }
.level-card:nth-child(2) .book-card-importance { background: rgba(26,140,122,0.07); border: 1px solid rgba(26,140,122,0.12); }
.level-card:nth-child(3) .book-card-importance { background: rgba(198,147,10,0.07); border: 1px solid rgba(198,147,10,0.12); }
.level-card:nth-child(4) .book-card-importance { background: rgba(139,58,158,0.07); border: 1px solid rgba(139,58,158,0.12); }
.level-card:nth-child(5) .book-card-importance { background: rgba(212,101,74,0.07); border: 1px solid rgba(212,101,74,0.12); }
.level-card:nth-child(6) .book-card-importance { background: rgba(58,140,120,0.07); border: 1px solid rgba(58,140,120,0.12); }

.importance-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.level-card:nth-child(1) .importance-label { background: #2D5F8A; color: #FFF; }
.level-card:nth-child(2) .importance-label { background: #1A8C7A; color: #FFF; }
.level-card:nth-child(3) .importance-label { background: #C6930A; color: #FFF; }
.level-card:nth-child(4) .importance-label { background: #8B3A9E; color: #FFF; }
.level-card:nth-child(5) .importance-label { background: #D4654A; color: #FFF; }
.level-card:nth-child(6) .importance-label { background: #3A8C78; color: #FFF; }

.book-card-importance p {
  font-size: 12.5px;
  color: #4A4239;
  line-height: 1.6;
  margin: 0;
}
.step-placeholder-level {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ─── Step placeholder ─── */
.step-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}
.step-placeholder-icon { font-size: 48px; margin-bottom: 16px; }
.step-placeholder h3 { font-size: 22px; color: var(--primary); margin-bottom: 12px; }
.step-placeholder p { font-size: 14px; line-height: 1.7; }
.step-placeholder-note { margin-top: 24px; font-style: italic; }

/* ─── Quiz Grid ─── */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

/* ─── Quiz Card — Islamic Geometric ─── */
.quiz-card {
  background: #FFFDF8;
  border-radius: 20px;
  padding: 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.12);
}
.quiz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 16px 40px -6px rgba(0,0,0,0.16);
}

/* geometric pattern watermark */
.quiz-card-pattern {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 140px;
  height: 140px;
  opacity: 0.04;
  pointer-events: none;
}

/* colored top accent */
.quiz-card-accent {
  height: 4px;
  width: 100%;
}

/* number badge */
.quiz-card-num {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  z-index: 2;
}

/* body */
.quiz-card-body {
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* icon circle */
.quiz-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.quiz-card-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.quiz-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}
.quiz-card-desc {
  font-size: 15px;
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

/* button row */
.quiz-card-btn {
  margin-top: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

/* — Per-category colors — */
/* Quran — gold */
.quiz-card--quran .quiz-card-accent { background: linear-gradient(90deg, #C9A84C, #E0C878); }
.quiz-card--quran .quiz-card-num { background: rgba(201,168,76,0.1); color: #A08530; }
.quiz-card--quran .quiz-card-icon { background: rgba(201,168,76,0.1); }
.quiz-card--quran .quiz-card-icon svg { color: #C9A84C; }
.quiz-card--quran .quiz-card-title { color: #1C1710; }
.quiz-card--quran .quiz-card-desc { color: #8B8178; }

/* Hadith — deep blue */
.quiz-card--hadith .quiz-card-accent { background: linear-gradient(90deg, #1A3A6B, #2A5A9B); }
.quiz-card--hadith .quiz-card-num { background: rgba(26,58,107,0.1); color: #1A3A6B; }
.quiz-card--hadith .quiz-card-icon { background: rgba(26,58,107,0.1); }
.quiz-card--hadith .quiz-card-icon svg { color: #1A3A6B; }
.quiz-card--hadith .quiz-card-title { color: #1C1710; }
.quiz-card--hadith .quiz-card-desc { color: #8B8178; }

/* Seerah — burgundy */
.quiz-card--seerah .quiz-card-accent { background: linear-gradient(90deg, #8B2252, #B83A6A); }
.quiz-card--seerah .quiz-card-num { background: rgba(139,34,82,0.1); color: #8B2252; }
.quiz-card--seerah .quiz-card-icon { background: rgba(139,34,82,0.1); }
.quiz-card--seerah .quiz-card-icon svg { color: #8B2252; }
.quiz-card--seerah .quiz-card-title { color: #1C1710; }
.quiz-card--seerah .quiz-card-desc { color: #8B8178; }

/* Aqeedah — teal */
.quiz-card--aqeedah .quiz-card-accent { background: linear-gradient(90deg, #0E7C6B, #1AAC94); }
.quiz-card--aqeedah .quiz-card-num { background: rgba(14,124,107,0.1); color: #0E7C6B; }
.quiz-card--aqeedah .quiz-card-icon { background: rgba(14,124,107,0.1); }
.quiz-card--aqeedah .quiz-card-icon svg { color: #0E7C6B; }
.quiz-card--aqeedah .quiz-card-title { color: #1C1710; }
.quiz-card--aqeedah .quiz-card-desc { color: #8B8178; }

/* Book quizzes — navy/blue */
.quiz-card--book .quiz-card-accent { background: linear-gradient(90deg, #10367D, #2A5A9B); }
.quiz-card--book .quiz-card-num { background: rgba(16,54,125,0.1); color: #10367D; }
.quiz-card--book .quiz-card-icon { background: rgba(16,54,125,0.1); }
.quiz-card--book .quiz-card-icon svg { color: #10367D; }
.quiz-card--book .quiz-card-title { color: #1C1710; }
.quiz-card--book .quiz-card-desc { color: #8B8178; }

/* ─── Decorative borders ─── */
.peak-top,
.peak-bottom {
  position: relative;
  height: 14px;
  pointer-events: none;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.peak-top::before,
.peak-bottom::before {
  content: "✦ ✦ ✦ ✦ ✦";
  position: absolute;
  font-size: 7px;
  letter-spacing: 14px;
  color: rgba(212,168,71,0.08);
  top: 50%;
  transform: translateY(-50%);
}
.peak-top::after,
.peak-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 360px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,71,0.1) 20%, rgba(212,168,71,0.18) 50%, rgba(212,168,71,0.1) 80%, transparent);
}

/* ─── Section wrapper ─── */
.peak-section {
  position: relative;
  padding: 30px 0;
  width: 100%;
}

/* ─── Main frame ─── */
.peak-frame {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}

/* ─── Star ornament ─── */
.peak-star {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
}
.peak-star-shape {
  position: relative;
  width: 100px;
  height: 100px;
  animation: peak-pulse 5s ease-in-out infinite;
}
.peak-star-shape::before,
.peak-star-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.peak-star-shape::before {
  background: rgba(212,168,71,0.08);
  transform: rotate(45deg);
}
.peak-star-shape::after {
  background: rgba(212,168,71,0.04);
  transform: rotate(22.5deg);
}
.peak-star-core {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: rgba(212,168,71,0.12);
  box-shadow: 0 0 20px rgba(212,168,71,0.05);
}
.peak-star-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,71,0.08);
}
@keyframes peak-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.85; }
}

/* ─── Content ─── */
.peak-content {
  direction: rtl;
}

/* ─── Badge ─── */
.peak-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 4px 14px 4px 4px;
  border: 1px solid rgba(212,168,71,0.08);
  border-radius: 100px;
  background: rgba(212,168,71,0.03);
}
.peak-badge-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,71,0.15);
  font-family: "Amiri", serif;
  font-size: 13px;
  font-weight: 700;
  color: #D4A847;
}
.peak-badge-label {
  font-family: "Cairo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(212,168,71,0.6);
}

/* ─── Title ─── */
.peak-title {
  font-family: "Amiri", serif;
  font-size: 42px;
  font-weight: 700;
  color: #F0EDE5;
  margin: 0 0 12px;
  line-height: 1.25;
}
.peak-desc {
  font-family: "Cairo", sans-serif;
  font-size: 15px;
  color: rgba(240,237,229,0.45);
  margin: 0 0 28px;
  max-width: 500px;
  line-height: 1.8;
}

/* ─── Actions ─── */
.peak-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.peak-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 8px;
  background: #D4A847;
  color: #0a1628;
  font-family: "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(212,168,71,0.15);
  flex-shrink: 0;
}
.peak-cta:hover {
  background: #e0b85c;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,168,71,0.25);
}
.peak-cta svg {
  transition: transform 0.3s ease;
}
.peak-cta:hover svg {
  transform: translateX(3px);
}

/* ─── Prophet path ─── */
.peak-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.peak-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,71,0.08);
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.peak-link span {
  font-family: "Cairo", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(240,237,229,0.3);
  transition: color 0.3s ease;
}
.peak-link:hover {
  border-color: rgba(212,168,71,0.4);
  background: rgba(212,168,71,0.08);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(212,168,71,0.12);
}
.peak-link:hover span {
  color: #F0EDE5;
}
.peak-link--seal {
  border-color: rgba(212,168,71,0.2);
  background: rgba(212,168,71,0.06);
}
.peak-link--seal span {
  color: rgba(212,168,71,0.5);
}
.peak-link--seal:hover {
  border-color: #D4A847;
  background: rgba(212,168,71,0.12);
}
.peak-link--seal:hover span {
  color: #D4A847;
}

/* ─── Responsive ─── */
@media (max-width: 800px) {
  .peak-frame {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .peak-star {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
  .peak-star-shape {
    width: 70px;
    height: 70px;
  }
  .peak-star-core {
    inset: 16px;
  }
  .peak-content {
    text-align: center;
  }
  .peak-desc {
    margin-inline: auto;
  }
  .peak-actions {
    justify-content: center;
  }
  .peak-badge {
    margin-inline: auto;
  }
  .peak-title {
    font-size: 34px;
  }
}
@media (max-width: 540px) {
  .peak-section {
    padding: 20px 0;
  }
  .peak-top,
  .peak-bottom {
    height: 10px;
  }
  .peak-top::before,
  .peak-bottom::before {
    font-size: 6px;
    letter-spacing: 10px;
  }
  .peak-title {
    font-size: 28px;
  }
  .peak-desc {
    font-size: 14px;
    margin-bottom: 22px;
  }
  .peak-cta {
    padding: 12px 22px;
    font-size: 13px;
  }
  .peak-link {
    width: 32px;
    height: 32px;
  }
  .peak-link span {
    font-size: 9px;
  }
  .peak-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .peak-cta {
    justify-content: center;
  }
  .peak-path {
    justify-content: center;
  }
}

/* ─── Quiz Page ─── */
.quiz-page {
  padding: 100px 0 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.quiz-header {
  text-align: center;
  margin-bottom: 32px;
}
.quiz-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.quiz-progress-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
}
.quiz-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 25px;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.quiz-question-area {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}
.quiz-question-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.5;
}
.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-choice {
  display: block;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: right;
}
.quiz-choice:hover {
  border-color: var(--primary);
  background: #f0f4ff;
}
.quiz-choice.selected {
  border-color: var(--primary);
  background: #e8edff;
}
.quiz-choice input {
  display: none;
}
.quiz-nav {
  text-align: center;
  margin-top: 32px;
}
.quiz-result {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}
.quiz-result h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
.quiz-result-score {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  margin: 16px 0;
}
.quiz-result-detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  text-align: right;
}
.quiz-result-detail h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.quiz-result-detail .correct { color: #2e7d32; font-size: 14px; }
.quiz-result-detail .incorrect { color: #c62828; font-size: 14px; }
.quiz-result-detail .user-answer { font-size: 14px; color: var(--muted); }
.quiz-result-detail .correct-answer { font-size: 14px; color: var(--primary); }

/* Sections with primary background */
#section-questions,
#section-quiz {
  background: var(--primary);
  position: relative;
  overflow: hidden;
}
#section-quiz::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
}
#section-quiz::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}
#section-quiz .section-header { margin-inline: auto; text-align: center; }
#section-quiz .section-title { color: #F0EDE5; }
#section-quiz .section-desc { color: rgba(240,237,229,0.5); }

/* ═══════════════════════════════════════════
   Premium Section Heading System
   ════════════════════════════════════════════ */
.section-heading {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: 48px;
}

/* Ornamental divider */
.section-heading__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-heading__diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}
.section-heading__line {
  width: 40px;
  height: 1px;
}
.section-heading__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Gold variant */
.section-heading--gold .section-heading__diamond { background: #C9A84C; }
.section-heading--gold .section-heading__line { background: linear-gradient(90deg, transparent, #C9A84C, transparent); }
.section-heading--gold .section-heading__dot { background: #C9A84C; box-shadow: 0 0 12px rgba(201, 168, 76, 0.4); }

/* Label */
.section-heading__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-heading__label span {
  font-family: var(--font-display);
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
}

/* Title — the star */
.section-heading__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.5vw, 52px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* Description */
.section-heading__desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin-inline: auto;
}

/* Count badge */
.section-heading__count {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
}

/* ── Gold theme ── */
.section-heading--gold .section-heading__label { color: #C9A84C; }
.section-heading--gold .section-heading__label span { border-color: rgba(201, 168, 76, 0.5); color: #C9A84C; }
.section-heading--gold .section-heading__title { color: #FDF8F2; }
.section-heading--gold .section-heading__desc { color: rgba(253, 248, 242, 0.55); }
.section-heading--gold .section-heading__count { color: #C9A84C; background: rgba(201, 168, 76, 0.1); }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .section-heading {
    margin-bottom: 36px;
  }
  .section-heading__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .section-heading__desc {
    font-size: 15px;
    padding-inline: 8px;
  }
  .section-heading__ornament {
    gap: 8px;
    margin-bottom: 20px;
  }
  .section-heading__line {
    width: 28px;
  }
}

/* ── Section 02 base ── */
#section-questions {
  background: var(--primary);
}
#section-questions .section {
  border-bottom: none;
}

/* ── Book Quizzes (home section) — Sky SaaS ── */
#section-bookquizzes {
  background:
    radial-gradient(1000px 420px at 50% -140px, rgba(14,165,233,0.16), rgba(14,165,233,0) 70%),
    radial-gradient(760px 460px at 108% 12%, rgba(34,197,94,0.08), rgba(34,197,94,0) 60%),
    linear-gradient(180deg, #0F172A 0%, #111827 45%, #0B1220 100%);
  position: relative;
  overflow: hidden;
}
#section-bookquizzes::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.16), rgba(14,165,233,0) 70%);
  filter: blur(60px);
  pointer-events: none;
}
#section-bookquizzes::after {
  content: "";
  position: absolute;
  bottom: -140px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.1), rgba(56,189,248,0) 70%);
  filter: blur(70px);
  pointer-events: none;
}
#section-bookquizzes .section {
  border-bottom: none;
  padding: 40px 0 80px;
}
#section-bookquizzes .empty-state {
  color: #94A3B8;
}

/* Sky SaaS variant of the premium heading */
.section-heading--book .section-heading__diamond { background: #0EA5E9; }
.section-heading--book .section-heading__line { background: linear-gradient(90deg, transparent, #0EA5E9, transparent); }
.section-heading--book .section-heading__dot { background: #38BDF8; box-shadow: 0 0 12px rgba(56,189,248,0.5); }
.section-heading--book .section-heading__label {
  color: #7DD3FC;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(56,189,248,0.25);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
}
.section-heading--book .section-heading__label span {
  border-color: rgba(56,189,248,0.4);
  color: #7DD3FC;
}
.section-heading--book .section-heading__title { color: #F8FAFC; }
.section-heading--book .section-heading__desc { color: #CBD5E1; }
.section-heading--book .section-heading__count { color: #7DD3FC; background: rgba(14,165,233,0.12); }

/* Book quizzes grid + cards */
.bookquizzes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  position: relative;
  z-index: 1;
}
.bookquiz-card {
  background: #1E293B;
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  box-shadow: 0 16px 40px -22px rgba(2,6,23,0.7);
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: bookquizRise 0.55s cubic-bezier(0.2,0.7,0.3,1) both;
}
.bookquiz-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0EA5E9, #38BDF8 45%, #22C55E);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.bookquiz-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(56,189,248,0.35);
  box-shadow: 0 34px 64px -26px rgba(2,6,23,0.85), 0 0 0 1px rgba(14,165,233,0.1);
}
.bookquiz-card:hover::before { opacity: 1; }
.bookquiz-cover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
}
.bookquiz-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7DD3FC;
  background: linear-gradient(160deg, rgba(14,165,233,0.18), rgba(34,197,94,0.12));
  border: 1px solid rgba(56,189,248,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.3,1);
}
.bookquiz-card:hover .bookquiz-ico { transform: rotate(-4deg) scale(1.06); }
.bookquiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #A7F3D0;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.3);
  padding: 6px 12px;
  border-radius: 999px;
}
.bookquiz-badge svg { color: #4ADE80; }
.bookquiz-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 22px;
}
.bookquiz-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  color: #F8FAFC;
  margin: 0 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 61px;
}
.bookquiz-progress {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,0.14);
  overflow: hidden;
  margin-bottom: 18px;
}
.bookquiz-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0EA5E9, #38BDF8);
  transition: width 1.1s cubic-bezier(0.2,0.7,0.3,1);
}
.bookquiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.bookquiz-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #CBD5E1;
}
.bookquiz-count svg { color: #38BDF8; }
.bookquiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  box-shadow: 0 10px 24px -12px rgba(14,165,233,0.7), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.bookquiz-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(14,165,233,0.85), inset 0 1px 0 rgba(255,255,255,0.18);
}
.bookquiz-btn:active { transform: translateY(0) scale(0.97); }
#section-bookquizzes .section-footer .btn--primary {
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  border-color: rgba(56,189,248,0.5);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(14,165,233,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}
#section-bookquizzes .section-footer .btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(14,165,233,0.8), inset 0 1px 0 rgba(255,255,255,0.18);
}
@keyframes bookquizRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .bookquizzes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bookquizzes-grid { grid-template-columns: 1fr; gap: 20px; }
  .bookquiz-body { padding: 14px 16px 18px; }
  .bookquiz-cover { padding: 16px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bookquiz-card { animation: none; }
  .bookquiz-card, .bookquiz-btn { transition: none; }
  .bookquiz-progress-fill { transition: none; }
}

/* ── btn--gold for section-questions ── */
#section-questions .btn--gold {
  background: #fff;
  color: var(--primary);
  border: 1px solid #fff;
  border-radius: var(--radius);
  font-weight: 700;
  transition: all 0.3s ease;
}
#section-questions .btn--gold:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.9);
}
/* ── Section 02 search (premium on blue) ── */
#section-questions .search-wrapper {
  max-width: 580px;
  margin: 0 auto 24px;
}
#section-questions .search-input {
  background: #FDF8F2;
  color: #1C2A26;
  border: 2px solid rgba(201, 168, 76, 0.25);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#section-questions .search-input {
  background: #FDF8F2;
  border: 2px solid rgba(201, 168, 76, 0.25);
  color: #1C2A26;
  border-radius: 16px;
  padding: 18px 56px 18px 52px;
  font-size: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#section-questions .search-input::placeholder {
  color: #8A7E6F;
  font-weight: 500;
}
#section-questions .search-input:hover {
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#section-questions .search-input:focus {
  border-color: #C9A84C;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.15), 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}
#section-questions .search-input:focus::placeholder {
  color: #B5AA98;
}
#section-questions .search-icon {
  color: #C9A84C;
  inset-inline-end: auto;
  inset-inline-start: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}
#section-questions .search-input:focus ~ .search-icon {
  color: #A07A2E;
  transform: translateY(-50%) scale(1.12);
}
#section-questions .search-clear {
  color: #8A7E6F;
  background: rgba(201, 168, 76, 0.08);
  inset-inline-start: auto;
  inset-inline-end: 20px;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  transition: all 0.2s ease;
}
#section-questions .search-clear:hover {
  background: rgba(201, 168, 76, 0.18);
  color: #1C2A26;
}

/* Shared team-grid (used by #all-grid questions page) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.team-grid--all {
  grid-template-columns: repeat(4, 1fr);
}

/* Questions Grid */
#section-questions .questions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── q-card: Scholar's Folio ── */
.q-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-align: right;
  font-family: var(--font-body);
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.q-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 54, 125, 0.08);
  border-color: var(--primary);
}

/* Elegant gold number badge on left (shared by q-card & sh-card) */
.sh-card .q-card-num,
.q-card .q-card-num,
.q-card--all .q-card-num {
  position: absolute;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  background: rgba(158, 125, 46, 0.1);
  color: #9e7d2e;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  z-index: 5;
}

/* Card inner content wrapper */
.q-card-body {
  position: relative;
  z-index: 1;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Question title */
.q-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 58px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA line */
.q-card-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  background: none;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 5px 12px;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.q-card:hover .q-card-more { gap: 10px; background: var(--primary); color: var(--primary-ink); }

/* Bookmark button position below number badge */
.q-card .fav-btn {
  top: 38px;
  left: 12px;
}

/* ── All questions page heading ── */
#page-all .section-title {
  color: rgba(0, 0, 0, 0.85);
  display: inline-block;
  padding: 8px 24px;
  border-radius: 12px;
}

/* ── q-card--all: Archive Card ── */
.q-card--all {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  text-align: right;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  z-index: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.q-card--all:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 54, 125, 0.08);
  border-color: var(--primary);
}

.q-card--all .fav-btn {
  top: 38px;
  left: 12px;
}

.sh-card .fav-btn {
  top: 38px;
  left: 12px;
}

/* ─── Detail page ─── */
.subpage { padding: 56px 0 80px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 28px;
}
.back-link:hover { text-decoration: underline; }

.detail-article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
  max-width: 820px;
}
.detail-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(16, 54, 125, 0.08);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.detail-number {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  padding: 3px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.detail-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 22px;
}
.detail-answer {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.9;
  white-space: pre-line;
}
.detail-sources {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.detail-sources h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 12px;
}
.detail-sources ul { list-style: none; }
.detail-sources li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 15px;
}
.detail-sources li::before {
  content: "◆";
  position: absolute;
  inline-size: 12px;
  inset-inline-start: 0;
  color: var(--accent);
  font-size: 11px;
  top: 4px;
}

/* ─── Video embed in detail ─── */
.detail-video { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.detail-video h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 12px;
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  background: #eef4ff;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
}
.share-btn:hover {
  background: #dbe6ff;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ═══════════════════════════════════════════
   Premium Search Component
   ════════════════════════════════════════════ */
.search-wrapper {
  position: relative;
  max-width: 560px;
  margin: 0 auto 16px;
}
.search-icon {
  position: absolute;
  inset-inline-end: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
.search-input {
  width: 100%;
  padding: 16px 56px 16px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.search-input::placeholder {
  color: rgba(93, 107, 102, 0.5);
  transition: color 0.3s ease;
}
.search-input:hover {
  border-color: rgba(28, 42, 38, 0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.search-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(185, 138, 47, 0.1), 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.search-input:focus::placeholder {
  color: rgba(93, 107, 102, 0.35);
}
.search-input:focus ~ .search-icon {
  color: var(--accent);
  transform: translateY(-50%) scale(1.1);
}
.search-clear {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(28, 42, 38, 0.06);
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  display: none;
  transition: all 0.2s ease;
  line-height: 1;
}
.search-clear:hover {
  background: rgba(28, 42, 38, 0.1);
  color: var(--ink);
}
.search-wrapper.has-value .search-clear { display: block; }
.search-count {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  min-height: 20px;
}
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 56px 0;
  font-size: 16px;
}
.section-alt .search-count { color: var(--muted); }

/* ─── Books (home) / PDF Library ─── */
.books-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
}

#section-pdfs .book-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
  min-height: 320px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  text-align: center;
}
#section-pdfs .book-card:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-3px);
}

#section-pdfs .book-card-cover {
  width: 100px;
  height: 140px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--primary);
  border-radius: 4px;
  display: block;
  margin: 0 auto 12px;
}
#section-pdfs .book-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}
#section-pdfs .book-card-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--primary);
  color: var(--primary-ink);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease;
  margin-top: auto;
  box-sizing: border-box;
  cursor: pointer;
  flex-shrink: 0;
}
#section-pdfs .book-card-download:hover {
  background: #08204D;
}

.books-more-wrap {
  text-align: center;
  margin-top: 24px;
}
.books-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: var(--primary-ink);
  text-decoration: none;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  border: none;
  line-height: 1.4;
}
.books-more-btn:hover {
  background: #08204D;
}
.books-more-btn span {
  font-size: 16px;
}

.book-card-desc {
  font-size: 13px;
  line-height: 1.4;
}
.book-card-author {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.book-card-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Shubuhat ─── */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sh-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  text-align: right;
  font-family: var(--font-body);
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 54, 125, 0.08);
  border-color: var(--primary);
}
.sh-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  padding-left: 58px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sh-card-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  background: none;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 5px 12px;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.sh-card-btn:hover {
  background: var(--primary);
  color: var(--primary-ink);
  gap: 10px;
}

/* Shubuhat detail */
.sh-detail-article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
  max-width: 820px;
  position: relative;
  overflow: hidden;
}
.sh-detail-article::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--accent));
}
.sh-detail-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 22px;
}
.sh-detail-body {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.9;
  white-space: pre-line;
}
@media (max-width: 640px) {
  .subpage.container { width: 100%; }
  .sh-detail-article { padding: 14px; max-width: 100%; border-radius: 12px; }
  .shuba-answer { margin-inline: -6px; }
}
.shuba-card {
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
  position: relative;
}
.shuba-card:last-child { margin-bottom: 0; }
.shuba-card-header {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
}
.shuba-card-body {
  font-size: 17px;
  line-height: 1.9;
  white-space: pre-line;
  color: var(--ink);
}
.shuba-question {
  background: #fcf6ee;
  border: 1px solid #e8d5b8;
  border-inline-start: 4px solid var(--accent);
}
.shuba-question .shuba-card-header { color: #8a6a2a; }
.shuba-answer {
  background: #ffffff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(16, 54, 125, 0.06);
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
}
.shuba-answer::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--primary);
}
.shuba-answer .shuba-card-header {
  color: var(--primary);
  padding: 16px 14px 0;
  margin-bottom: 12px;
}
.shuba-answer .shuba-card-body {
  padding: 0 14px 18px;
  line-height: 24px;
  color: #12203F;
  overflow-wrap: break-word;
}
.shuba-answer .shuba-card-body .quran-text {
  font-weight: 400;
  text-shadow: 0 0 0.4px #5d4037;
}

/* ═══════════════════════════════════════════════════
   Detail pages — App layout above answer (scoped)
   Source: ShubahatDetailScreen.tsx + theme.ts
   ═══════════════════════════════════════════════════ */

/* ── Page padding — compact ── */
#page-detail.subpage,
#page-shubuhat-detail.subpage,
#page-shubuhat-all.subpage,
#page-all.subpage {
  padding-top: 10px;
}

/* ── Back link → ghost pill (matches App BackButton) ── */
#page-detail .back-link,
#page-shubuhat-detail .back-link {
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: 8px 16px;
  margin-bottom: 12px;
  gap: 6px;
  font-size: 13px;
  background: transparent;
}
#page-detail .back-link:hover,
#page-shubuhat-detail .back-link:hover {
  background: rgba(16, 54, 125, 0.06);
  text-decoration: none;
}
#page-detail .back-link span[aria-hidden],
#page-shubuhat-detail .back-link span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── Article → transparent wrapper (elements float on cream bg) ── */
#detail-content .sh-detail-article,
#sh-detail-content .sh-detail-article {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
#detail-content .sh-detail-article::before,
#sh-detail-content .sh-detail-article::before {
  display: none;
}

/* ── Badge ── */
#detail-content .detail-number,
#sh-detail-content .detail-number {
  font-size: 11px;
  padding: 4px 12px;
  line-height: 20px;
  margin-bottom: 10px;
}

/* ── Detail top row ── */
#detail-content .detail-top-row,
#sh-detail-content .detail-top-row {
  margin-bottom: 10px;
}

/* ── Bookmark (matches App FavoriteButton 36×36 r10) ── */
#detail-content .detail-top-row .fav-btn,
#sh-detail-content .detail-top-row .fav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* ── Title + divider line ── */
#detail-content .sh-detail-title,
#sh-detail-content .sh-detail-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  color: #12203F;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E3E9F3;
}

/* ── Question card ── */
#detail-content .shuba-question,
#sh-detail-content .shuba-question {
  background: #FFFFFF;
  border: 1px solid #f0e6d2;
  border-inline-start: 4px solid #b98a2f;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(185, 138, 47, 0.05);
}

/* ── Question card header ── */
#detail-content .shuba-question .shuba-card-header,
#sh-detail-content .shuba-question .shuba-card-header {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 12px;
}

/* ── Question card body ── */
#detail-content .shuba-question .shuba-card-body,
#sh-detail-content .shuba-question .shuba-card-body {
  font-size: 17px;
  line-height: 24px;
  color: #12203F;
}

/* ── Question card Quran text → matches RichText.tsx ── */
#detail-content .shuba-question .shuba-card-body .quran-text,
#sh-detail-content .shuba-question .shuba-card-body .quran-text {
  font-weight: 400;
  text-shadow: 0 0 0.4px #5d4037;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  #page-detail.subpage,
  #page-shubuhat-detail.subpage {
    padding-top: 8px;
  }
  #detail-content .shuba-question,
  #sh-detail-content .shuba-question {
    margin-inline: -6px;
  }
}

.sh-detail-source {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.contact-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
}
.field-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.field-optional { color: var(--muted); font-weight: 500; }
.field-input {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  margin-bottom: 20px;
  transition: border-color 0.2s ease;
}
.field-input:focus { border-color: var(--primary); }
.field-textarea { min-height: 140px; resize: vertical; margin-bottom: 8px; }
.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.char-count { color: var(--muted); font-size: 13px; }
.char-count--warn { color: var(--accent); }
.char-count--limit { color: #a13333; }
#send-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(253, 248, 242, 0.35);
  border-top-color: var(--primary-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast ─── */
.toast {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 50%;
  transform: translateX(50%) translateY(16px);
  background: var(--ink);
  color: var(--bg);
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  max-width: min(420px, calc(100vw - 40px));
}
.toast--visible { opacity: 1; transform: translateX(50%) translateY(0); }
.toast--success { background: var(--primary); color: var(--primary-ink); }
.toast--error { background: #7d2424; color: #fdf3f3; }

/* ─── Footer ─── */
.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0;
  margin-top: 40px;
}
.footer-inner { text-align: center; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}
.footer-note { color: var(--muted); font-size: 14px; margin-top: 6px; }
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 20px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.footer-links a:hover { color: var(--primary); }

/* ─── Reveal animation ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-text-col { text-align: center; }
  .hero-eyebrow { text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-subtitle { text-align: center; margin-inline: auto; }
  #section-questions .questions-grid { grid-template-columns: repeat(2, 1fr); }
  .books-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .contact-card { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1023px) {
  .hamburger { display: flex; }
  .navbar-overlay { top: 76px; bottom: 0; inset-inline: 0; z-index: 99; }
  .navbar-links--desktop { display: none !important; }
  #navbar-links {
    display: flex;
    position: fixed;
    top: 76px;
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 0 0;
    background:
      radial-gradient(560px 240px at 88% -6%, rgba(95, 168, 245, 0.14), rgba(95, 168, 245, 0) 62%),
      linear-gradient(168deg, #0b1f4b 0%, #10367D 58%, #16458f 100%);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 101;
    box-shadow: 18px 0 60px rgba(4, 10, 24, 0.45);
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
  }
  #navbar-links.open { transform: translateX(0); }
  .navbar-login-mobile { display: inline-flex; }
  .navbar-profile.navbar-profile--visible { display: inline-flex; }
}

@media (max-width: 640px) {

  .hero-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .hero-subtitle { padding: 24px 0; }
  .section { padding: 56px 0; }
  .plan-grid { border-radius: 18px; }
  .plan-card { padding: 22px 20px; gap: 16px; }
  .plan-card-num { font-size: 56px; left: 20px; }
  .plan-card-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; }
  .plan-card-icon svg { width: 24px; height: 24px; }
  .plan-card-title { font-size: 16px; }
  .plan-card-desc { font-size: 12px; }
  .roadmap { padding-inline-start: 32px; }
  .level-books { grid-template-columns: 1fr; }
  .level-header { padding: 18px 20px; }
  .level-desc { padding: 0 20px 16px; }
  .level-num { font-size: 18px; }
  .book-card-body { padding: 20px; }
  .book-card-title { font-size: 22px; }
  .book-card-importance { flex-direction: column; gap: 4px; }

  #section-questions .questions-grid,
  .sh-grid {
    grid-template-columns: 1fr;
  }
  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .book-card { min-height: 180px; }
  #section-pdfs .book-card { min-height: 300px; }
  .team-grid, .team-grid--all, .contributor-grid { grid-template-columns: 1fr 1fr; }
  .quiz-grid { gap: 12px; }
  .quiz-card-body { padding: 18px 14px 16px; gap: 6px; }
  .quiz-card-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 0; }
  .quiz-card-icon svg { width: 20px; height: 20px; }
  .quiz-card-title { font-size: 16px; }
  .quiz-card-desc { font-size: 12px; line-height: 1.5; }
  .quiz-card-num { top: 10px; left: 12px; width: 24px; height: 24px; font-size: 11px; border-radius: 8px; }
  .quiz-card-btn svg { width: 22px; height: 22px; }
  .quiz-card-pattern { width: 80px; height: 80px; top: -10px; left: -10px; }

}

/* ═══════════════════════════════════════════
   Bida — Exhibition / Encyclopedia style
   Completely distinct from q-card / sh-card
═══════════════════════════════════════════════ */

/* ─── Section label badge ─── */
#section-bida .section-label span {
  background: var(--primary);
  color: #fff;
}

/* ─── Grid ─── */
.bida-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 20px;
}

/* ─── Exhibition Card ─── */
.bida-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
}
.bida-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

/* Colored category header band */
.bida-card-cat {
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
}

.bida-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bida-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0ede6;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.bida-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.bida-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bida-card-why {
  font-size: 13px;
  color: #8a7e6b;
  line-height: 1.6;
  background: #faf8f3;
  border-radius: 8px;
  padding: 8px 12px;
  border-inline-start: 2px solid #d4c9b5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bida-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s, gap 0.2s;
}
.bida-card-btn:hover {
  color: #08204D;
  gap: 8px;
}

/* ─── Bida Detail Page ─── */

.bida-detail-article {
  max-width: 780px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Hero band */
.bida-detail-hero {
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bida-detail-number {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 16px;
  border-radius: 100px;
}

.bida-detail-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 14px;
  border-radius: 100px;
}

/* Inner white area */
.bida-detail-inner {
  background: #fff;
  padding: clamp(28px, 5vw, 48px);
}

.bida-detail-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 28px;
}

/* Sections */
.bida-detail-section {
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: #faf8f3;
  border-inline-start: 3px solid #d4c9b5;
}

.bida-detail-section-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.bida-detail-section-body {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.85;
  white-space: pre-line;
}

/* Section variants */
.bida-detail-section--why {
  background: #f5f1ea;
  border-inline-start-color: #b98a2f;
}
.bida-detail-section--why .bida-detail-section-head {
  color: #8a6d2b;
}

.bida-detail-section--source {
  background: #eef0f5;
  border-inline-start-color: #5d6b66;
}
.bida-detail-section--source .bida-detail-section-head {
  color: #3a4a50;
}

.bida-detail-section--correction {
  background: #f0faf4;
  border-inline-start-color: #10b981;
}
.bida-detail-section--correction .bida-detail-section-head {
  color: #0a7c4e;
}

.bida-detail-section--summary {
  background: #f4f0fa;
  border-inline-start-color: #7c3aed;
}
.bida-detail-section--summary .bida-detail-section-head {
  color: #5b21b6;
}

.bida-detail-inner .share-btn {
  margin-top: 28px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .bida-grid { grid-template-columns: 1fr; gap: 18px; }
  .bida-card-body { padding: 16px 18px 18px; }
  .bida-card-title { font-size: 17px; }
  .bida-detail-hero { padding: 20px 20px; }
  .bida-detail-inner { padding: 20px; }
  .bida-detail-title { font-size: 21px; }
  .bida-detail-section { padding: 14px 16px; }
}

@media (max-width: 480px) {
  .bida-card-cat { font-size: 10px; padding: 6px 14px; }
  .bida-card-body { gap: 8px; }
  .bida-card-desc { -webkit-line-clamp: 2; }
  .bida-card-why { font-size: 12px; }
}

/* ═══ Report Modal ═══ */
/* ═══ Report Modal — Premium Glassmorphism ═══ */
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,14,23,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.report-modal-box {
  position: relative;
  background: linear-gradient(145deg, rgba(30,40,58,0.95), rgba(20,28,45,0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,151,215,0.2);
  border-radius: 20px;
  padding: 36px 32px 28px;
  width: min(480px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: reportFadeIn 0.35s ease;
}
@keyframes reportFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.report-modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  padding: 0;
  line-height: 1;
}
.report-modal-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: rotate(90deg);
}
.report-modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-modal-title::before {
  content: "🚩";
  font-size: 22px;
}
.report-modal-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
  line-height: 1.6;
}
.report-modal-textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.7;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.report-modal-textarea::placeholder {
  color: rgba(255,255,255,0.3);
}
.report-modal-textarea:focus {
  border-color: #0097D7;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(0,151,215,0.15);
}
.report-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 12px;
}
.report-char-count {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  direction: ltr;
  font-family: var(--font-body);
}
.report-char-count--warn { color: #f5c542; }
.report-char-count--limit { color: #ef5350; }
.report-modal .btn-spinner {
  display: inline-block;
  margin-inline-start: 8px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.report-modal .btn--primary {
  background: linear-gradient(135deg, #0097D7, #0078b3);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(0,151,215,0.3);
}
.report-modal .btn--primary:hover {
  background: linear-gradient(135deg, #00a8e8, #0088c9);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,151,215,0.4);
}
.report-modal .btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,151,215,0.3);
}
.report-modal .btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.report-modal .report-success {
  text-align: center;
  padding: 24px 0;
  color: #fff;
}
.report-modal .report-success-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}
.report-modal .report-success-text {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.detail-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.report-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,151,215,0.08);
  border: 1px solid rgba(0,151,215,0.2);
  border-radius: 8px;
  color: #0097D7;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  transition: all 0.25s ease;
}
.report-btn:hover {
  background: rgba(0,151,215,0.15);
  border-color: rgba(0,151,215,0.35);
  color: #00a8e8;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD — Night Mosque Aesthetic
   Deep blue + gold arches + scholarly honor
   ═══════════════════════════════════════════════════════════ */

/* ─── Entry card on home ─── */
.lb-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--primary);
  border-radius: 20px;
  padding: 20px 22px;
  text-decoration: none;
  border: 1px solid rgba(253,248,242,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lb-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(201,168,76,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.lb-entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.1) inset;
}
.lb-entry-card:hover::before { transform: translateX(100%); }
.lb-entry-card:active { transform: translateY(-1px) scale(0.997); }
.lb-entry-left, .lb-entry-arrow { position: relative; z-index: 1; }
.lb-entry-left { display: flex; align-items: center; gap: 14px; }
.lb-entry-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border: 1px solid rgba(201,168,76,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-entry-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #F0EDE5;
  letter-spacing: -0.01em;
}
.lb-entry-sub {
  font-size: 12.5px;
  color: rgba(240,237,229,0.45);
  margin-top: 3px;
  font-weight: 400;
}
.lb-entry-arrow {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,237,229,0.55);
  transform: scaleX(-1);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, color 0.3s ease;
}
.lb-entry-card:hover .lb-entry-arrow {
  background: rgba(201,168,76,0.12);
  color: #C9A84C;
  transform: scaleX(-1) translateX(3px);
}

/* ─── وردك اليوم (Glassmorphism Premium) ─── */
#section-wered {
  --werd-emerald: #0e7a63;
  --werd-emerald-2: #12b28d;
  --werd-emerald-dark: #0a5c4a;
  --werd-gold: #c99a3f;
  --werd-ink: #141b2e;
  --werd-ink-soft: #5a6478;
  --werd-card-bg: rgba(255, 255, 255, 0.72);
  --werd-card-border: rgba(255, 255, 255, 0.9);
  --werd-line: rgba(20, 27, 46, 0.10);
  --werd-chip-bg: rgba(14, 122, 99, 0.10);
  --werd-shadow: 0 30px 60px -25px rgba(20, 30, 60, 0.35);
  --werd-verse-panel: linear-gradient(160deg, #0f1f2e 0%, #123a35 100%);
}
#section-wered .werd-card {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  background: var(--werd-card-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--werd-card-border);
  border-radius: 30px;
  padding: 26px 22px 22px;
  box-shadow: var(--werd-shadow);
  overflow: hidden;
  transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#section-wered .werd-card:hover {
  box-shadow: 0 40px 70px -25px rgba(20, 30, 60, 0.45);
  transform: translateY(-2px);
}
#section-wered .werd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
}
#section-wered .werd-card:hover::before { animation: weredSheen 1.1s ease; }
@keyframes weredSheen { to { transform: translateX(100%); } }

/* Loading skeleton */
#section-wered .wered-loading {
  display: flex; flex-direction: column; gap: 16px; padding: 40px 8px; width: 100%;
}
#section-wered .skeleton {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(20, 27, 46, 0.04) 25%, rgba(20, 27, 46, 0.10) 50%, rgba(20, 27, 46, 0.04) 75%);
  background-size: 200% 100%;
  animation: weredShimmer 1.8s ease-in-out infinite;
}
#section-wered .skeleton-head { width: 60%; height: 38px; }
#section-wered .skeleton-panel { width: 100%; height: 120px; border-radius: 22px; }
#section-wered .skeleton-btn { width: 100%; height: 54px; border-radius: 18px; }
@keyframes weredShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Display area */
#section-wered .wered-display {
  width: 100%;
  animation: weredFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes weredFadeIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Hidden icon (used by JS) */
#section-wered .wered-icon { font-size: 0; height: 0; overflow: hidden; margin: 0; display: inline; }

/* Card header */
#section-wered .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
#section-wered .head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
#section-wered .head-dot {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--werd-emerald), var(--werd-emerald-2));
  color: #fff; font-size: 19px;
  box-shadow: 0 8px 20px -6px rgba(14, 122, 99, 0.6);
  flex-shrink: 0;
}
#section-wered .head-title h1 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--werd-ink); margin: 0;
}
#section-wered .head-title h1 + span {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--werd-ink-soft); margin-top: 2px;
}
#section-wered .badge {
  font-size: 12px; font-weight: 600;
  color: var(--werd-emerald); background: var(--werd-chip-bg);
  border: 1px solid rgba(14, 122, 99, 0.2);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
#section-wered .badge--count {
  margin-inline-start: 6px;
  color: var(--werd-emerald); background: var(--werd-chip-bg);
  border-color: rgba(14, 122, 99, 0.2);
  font-variant-numeric: tabular-nums;
}
#section-wered .wered-count-ico {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-inline-end: 6px;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--werd-emerald), var(--werd-emerald-2));
  color: #fff; font-size: 11px; line-height: 1;
  box-shadow: 0 4px 10px -3px rgba(14, 122, 99, 0.6);
}

/* Verse panel */
#section-wered .verse-panel {
  position: relative;
  background: var(--werd-verse-panel);
  border-radius: 22px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#section-wered .quote-mark {
  font-family: 'Amiri', serif; font-size: 36px; line-height: 0.6;
  color: var(--werd-gold); opacity: 0.75; user-select: none;
}
#section-wered .quote-mark--end { align-self: flex-end; opacity: 0.45; font-size: 28px; }
#section-wered .verse-text {
  font-family: "UthmanicHafs", var(--font-display);
  font-size: 22px; line-height: 1.75;
  color: #f6f8fb; text-align: center; font-weight: 700;
  position: relative; z-index: 1; margin: 0; max-width: 100%;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Source row */
#section-wered .source-row {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 2px;
  color: var(--werd-ink-soft); font-size: 14px; font-weight: 500;
}
#section-wered .source-row .divider {
  flex: 1; height: 1px;
  background: linear-gradient(to left, transparent, var(--werd-line), transparent);
}
#section-wered .source-row strong { color: var(--werd-ink); font-weight: 700; }

/* Actions wrap */
#section-wered .actions-wrap { width: 100%; margin-top: 4px; position: relative; z-index: 1; }

/* Read button */
#section-wered .read-btn {
  width: 100%; border: none; cursor: pointer; border-radius: 18px;
  padding: 16px 20px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--werd-emerald), var(--werd-emerald-2));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.3s ease, filter 0.3s ease;
  box-shadow: 0 16px 30px -12px rgba(14, 122, 99, 0.6);
}
#section-wered .read-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -14px rgba(14, 122, 99, 0.7); }
#section-wered .read-btn:active { transform: translateY(0) scale(0.99); }
#section-wered .read-btn:disabled { opacity: 0.65; cursor: default; filter: none; transform: none !important; }
#section-wered .btn-label { display: flex; align-items: center; gap: 10px; }
#section-wered .check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: grid; place-items: center; font-size: 14px; flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}
#section-wered .wered-complete-text { text-align: center; }
#section-wered .points-chip {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
}
#section-wered .pts-label { font-weight: 600; font-size: 11px; opacity: 0.8; }

/* Message */
#section-wered .wered-msg {
  text-align: center; font-size: 14px; font-weight: 600; margin-top: 14px;
  padding: 12px 18px; border-radius: 12px;
  color: var(--werd-emerald); background: var(--werd-chip-bg);
  border: 1px solid rgba(14, 122, 99, 0.15);
}

/* Responsive */
@media (max-width: 640px) {
  #section-wered .werd-card { padding: 22px 18px 24px; border-radius: 26px; }
  #section-wered .verse-text { font-size: 19px; }
  #section-wered .head-title h1 { font-size: 18px; }
  #section-wered .head-dot { width: 34px; height: 34px; font-size: 17px; }
  #section-wered .badge { font-size: 11px; padding: 6px 10px; }
  #section-wered .verse-panel { padding: 26px 18px; border-radius: 18px; }
  #section-wered .quote-mark { font-size: 30px; }
  #section-wered .read-btn { font-size: 15px; padding: 14px 18px; border-radius: 16px; }
  #section-wered .check { width: 24px; height: 24px; font-size: 13px; }
}
@media (max-width: 360px) {
  #section-wered .werd-card { padding: 18px 12px 20px; border-radius: 22px; }
  #section-wered .verse-text { font-size: 16px; }
  #section-wered .head-title h1 { font-size: 16px; }
  #section-wered .head-title h1 + span { font-size: 10px; }
  #section-wered .head-dot { width: 30px; height: 30px; font-size: 15px; border-radius: 10px; }
  #section-wered .badge { font-size: 10px; padding: 5px 8px; }
  #section-wered .verse-panel { padding: 22px 14px; }
  #section-wered .source-row { font-size: 12px; gap: 8px; }
  #section-wered .read-btn { font-size: 14px; padding: 12px 14px; }
  #section-wered .points-chip { font-size: 12px; padding: 4px 9px; }
}

/* ─── Shared completion button (premium v2) ─── */
.complete-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #1e3670 0%, #0e1e42 100%);
  color: var(--wered-gold-lighter, #f0dbaa);
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
  border: 1.5px solid rgba(212, 168, 67, 0.4); border-radius: 22px;
  padding: 18px 22px; cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(10, 22, 50, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.complete-btn:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 20px 36px -12px rgba(10, 22, 50, 0.7); }
.complete-btn:active { transform: translateY(0) scale(0.98); }
.complete-btn:disabled { opacity: 0.65; cursor: default; filter: none; }
.complete-btn--locked { animation: complete-pulse 2.5s ease-in-out infinite; }
@keyframes complete-pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.complete-btn-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(212, 168, 67, 0.12);
  border: 1.5px solid rgba(212, 168, 67, 0.45);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.3s ease;
}
.complete-btn:hover .complete-btn-check { background: rgba(212, 168, 67, 0.2); }
.complete-btn-text { flex: 1; text-align: center; }
.complete-btn-points {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; border-radius: 999px;
  background: rgba(212, 168, 67, 0.13);
  border: 1px solid rgba(212, 168, 67, 0.3);
  font-size: 13px; font-weight: 800;
  color: var(--wered-gold-lighter, #f0dbaa);
  padding: 0 10px; flex-shrink: 0; gap: 2px;
}
.complete-btn-pts-label { font-weight: 600; font-size: 11px; opacity: 0.8; }
.complete-btn-status { font-size: 13px; color: var(--muted, #999); margin-top: 8px; }



/* ═══════════════════════════════════════════
   Bookmark / Favorite Button
   ════════════════════════════════════════════ */
.fav-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  padding: 0;
  color: #999;
}
.fav-btn svg {
  width: 18px;
  height: 18px;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.fav-btn:hover {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(185, 138, 47, 0.15);
  transform: scale(1.08);
  color: var(--accent);
}
.fav-btn--active {
  color: #D4A017;
  background: #FFF8E7;
  border-color: #D4A017;
}
.fav-btn--active svg {
  color: #D4A017;
}
.fav-btn--active:hover {
  background: #FFF3D0;
  border-color: #C49A3C;
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.2);
}
.fav-btn--animating {
  transform: scale(1.25);
}
.fav-btn--animating svg {
  transform: scale(1.15);
}
.fav-btn--loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Shubuhat card needs position:relative */
.sh-card { position: relative; }
.q-card { position: relative; }
.bida-card { position: relative; }

/* ─── Detail top row (title + bookmark) ─── */
.detail-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.detail-top-row .fav-btn {
  position: static;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   Login Modal
   ════════════════════════════════════════════ */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  animation: fadeIn 0.25s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.login-modal {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  transform: translateY(20px) scale(0.96);
  animation: modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes modalIn { to { transform: translateY(0) scale(1); } }
.login-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3D0, #FFE082);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
}
.login-modal h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.login-modal p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.login-modal-actions {
  display: flex;
  gap: 12px;
}
.login-modal-actions .btn {
  flex: 1;
}
.login-modal-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.05);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.login-modal-close:hover { background: rgba(0,0,0,0.1); }
@media (max-width: 640px) {
  .login-modal { padding: 32px 24px 24px; }
  .login-modal-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════
   تحدي القرآن — Quran Challenge
═════════════════════════════════════════════ */

.quran-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--primary);
  border-radius: 20px;
  padding: 20px 22px;
  text-decoration: none;
  border: 1px solid rgba(253,248,242,0.08);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.quran-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(201,168,76,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.quran-entry-card:hover { transform: translateY(-3px); border-color: rgba(201,168,76,0.25); box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.1) inset; }
.quran-entry-card:hover::before { transform: translateX(100%); }
.quran-entry-card:active { transform: translateY(-1px) scale(0.997); }
.quran-entry-left, .quran-entry-arrow { position: relative; z-index: 1; }
.quran-entry-left { display: flex; align-items: center; gap: 14px; }
.quran-entry-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border: 1px solid rgba(201,168,76,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quran-entry-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #F0EDE5;
  letter-spacing: -0.01em;
}
.quran-entry-sub {
  font-size: 12.5px;
  color: rgba(240,237,229,0.45);
  margin-top: 3px;
  font-weight: 400;
}
.quran-entry-arrow {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,237,229,0.55);
  transform: scaleX(-1);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, color 0.3s ease;
}
.quran-entry-card:hover .quran-entry-arrow {
  background: rgba(201,168,76,0.12);
  color: #C9A84C;
  transform: scaleX(-1) translateX(3px);
}

/* ─── Fajr Prayer Challenge entry card (🌅) ─── */
.fajr-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    radial-gradient(420px 140px at 88% -30%, rgba(255,179,107,0.28), rgba(255,179,107,0) 65%),
    linear-gradient(120deg, #0f2140 0%, #14305e 55%, #2b2f55 100%);
  border-radius: 20px;
  padding: 20px 22px;
  text-decoration: none;
  border: 1px solid rgba(255,190,120,0.16);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fajr-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,179,107,0.10) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.fajr-entry-card:hover { transform: translateY(-3px); border-color: rgba(255,179,107,0.35); box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,179,107,0.12) inset; }
.fajr-entry-card:hover::before { transform: translateX(100%); }
.fajr-entry-card:active { transform: translateY(-1px) scale(0.997); }
.fajr-entry-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255,179,107,0.16), rgba(255,179,107,0.05));
  border: 1px solid rgba(255,179,107,0.24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fajr-entry-card:hover .quran-entry-arrow {
  background: rgba(255,179,107,0.14);
  color: #FFB36B;
  transform: scaleX(-1) translateX(3px);
}

/* ─── Daily Streak badge (🔥) ─── */
.streak-badge {
  position: relative;
  display: none;
  align-items: center;
  gap: 5px;
  margin-inline-start: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(253, 248, 242, 0.28);
  border-radius: 999px;
  background: rgba(253, 248, 242, 0.12);
  color: var(--primary-ink);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 300;
}
.streak-badge:hover {
  background: rgba(253, 248, 242, 0.22);
  border-color: rgba(253, 248, 242, 0.45);
}
/* ═══════════════════════════════════════════════════════════════
   Blue Flame component — SHARED by the Navbar badge and the Daily
   Streak Card hero (one source of truth, no duplicated animations).
   - Real flame flicker + inner hot-core light + outer cyan glow pulse.
   - Sizing is em-based: Navbar (15px) and Card hero (27px) reuse the
     exact same component — only the font-size changes.
   - Mobile-safe: only transform/opacity are animated (GPU-composited);
     the filter (sepia+hue-rotate recolor + glow) is static.
   ═══════════════════════════════════════════════════════════════ */
.streak-fire {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(1.2)
          drop-shadow(0 0 0.25em rgba(0, 210, 255, 0.9))
          drop-shadow(0 0 0.6em rgba(0, 150, 255, 0.55));
  animation: flameFlicker 2.4s ease-in-out infinite;
}
/* Inner hot-core light moving inside the flame (pure CSS light). */
.streak-fire::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  margin: -0.45em 0 0 -0.45em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(150, 235, 255, 0.55) 45%, rgba(0, 200, 255, 0) 72%);
  animation: flameCore 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
/* Outer cyan glow ring breathing around the flame. */
.streak-fire::after {
  content: "";
  position: absolute;
  inset: -0.35em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.42), rgba(0, 150, 255, 0) 70%);
  animation: flameHalo 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg) translateY(0); }
  25% { transform: scale(1.06) rotate(2deg) translateY(-1.5px); }
  50% { transform: scale(1) rotate(0deg) translateY(0); }
  75% { transform: scale(1.05) rotate(1.5deg) translateY(-1px); }
}
@keyframes flameCore {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-0.05em, 0.06em) scale(1.22); opacity: 0.5; }
}
@keyframes flameHalo {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.streak-count {
  font-size: 13px;
  font-weight: 800;
  color: #9FE7FF;
  line-height: 1;
}
#streak-badge-desktop { display: inline-flex; }
#streak-badge-mobile { display: none; }

.streak-tooltip {
  position: absolute;
  top: calc(100% + 14px);
  width: 300px;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  border-radius: 20px;
  text-align: right;
  color: #DCEBFF;
  font-size: 13.5px;
  line-height: 1.5;
  z-index: 400;
  overflow: hidden;
  /* Solid card: no transparent/see-through background. */
  background: linear-gradient(165deg, #102546 0%, #0A1730 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(110, 200, 255, 0.30);
  box-shadow:
    0 24px 50px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 160, 255, 0.08),
    0 0 44px -6px rgba(0, 150, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.22s ease-out,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.22s linear;
}
/* The card opens/closes ONLY by clicking the flame (toggle) — no hover trigger. */
.streak-badge.streak-badge--open .streak-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.streak-card-glow {
  position: absolute;
  top: -52px;
  left: 50%;
  margin-left: -110px;
  width: 220px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 190, 255, 0.25), rgba(0, 120, 255, 0) 68%);
  pointer-events: none;
}
.streak-card-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(120, 200, 255, 0.18);
}
.streak-fire-orb {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 62%, rgba(0, 150, 255, 0.20), rgba(0, 70, 190, 0.08) 55%, rgba(6, 12, 36, 0) 75%),
    linear-gradient(160deg, rgba(22, 40, 96, 0.92), rgba(8, 16, 44, 0.96));
  border: 1px solid rgba(120, 210, 255, 0.35);
  box-shadow:
    0 0 0 5px rgba(0, 160, 255, 0.12),
    0 8px 22px -4px rgba(0, 120, 255, 0.45),
    0 0 26px 2px rgba(0, 170, 255, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* The flame inside the card hero reuses the shared .streak-fire component —
   only its size differs from the navbar version. */
.streak-fire-orb .streak-fire {
  font-size: 27px;
}
.streak-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #DFF8FF, #6CD6FF 55%, #1E7DFF);
  box-shadow: 0 0 8px 1px rgba(0, 190, 255, 0.85);
  opacity: 0;
  animation: sparkFly var(--dur, 1.8s) linear var(--delay, 0s) infinite;
  pointer-events: none;
}
@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: 0.85; }
  100% { transform: translate(var(--tx, 16px), var(--ty, -26px)) scale(0.15); opacity: 0; }
}
.streak-card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.streak-card-title-main {
  font-size: 15.5px;
  font-weight: 800;
  color: #EAF4FF;
  letter-spacing: 0.2px;
}
.streak-card-title-sub {
  font-style: normal;
  font-size: 12px;
  color: rgba(160, 210, 255, 0.72);
}
.streak-mult {
  flex: none;
  margin-inline-start: auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  color: #041B3D;
  background: linear-gradient(135deg, #9FE7FF, #3FA9FF 55%, #1E7DFF);
  box-shadow: 0 3px 12px rgba(0, 150, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.streak-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.streak-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(110, 200, 255, 0.16);
  background: rgba(120, 200, 255, 0.06);
}
.streak-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(160, 210, 255, 0.78);
}
.streak-stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  color: #C9EAFF;
}
.streak-stat-value small {
  font-size: 12px;
  font-weight: 700;
  color: rgba(160, 210, 255, 0.72);
}
.streak-stat-value .streak-count {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}
.streak-progress {
  margin-top: 14px;
}
.streak-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(160, 210, 255, 0.8);
}
.streak-progress-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(160, 210, 255, 0.10);
  border: 1px solid rgba(110, 200, 255, 0.16);
}
.streak-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1E7DFF, #3FA9FF 55%, #9FE7FF);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
  transform: scaleX(0);
  transform-origin: right center;
  animation:
    progressGrow 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s both,
    progressShine 2.4s linear 0.6s infinite;
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes progressShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* Desktop (RTL): the nav group (badge included) sits at the LEFT edge of the
   viewport, so anchor the card to the badge's left edge and let it expand
   rightward — this keeps it on-screen at any width. */
#streak-badge-desktop .streak-tooltip { left: 0; right: auto; }

/* Group mobile login/profile + streak badge so they stay adjacent */
.navbar-actions {
  display: contents;
}
@media (max-width: 640px) {
  #streak-badge-mobile { display: inline-flex; }

  /* Mobile: anchor the card to the VIEWPORT center (position: fixed + left:50% +
     translateX(-50%)) so it NEVER overflows the screen, regardless of where the
     badge sits in the RTL navbar. Width is capped to the viewport minus margins. */
  #streak-badge-mobile .streak-tooltip {
    position: fixed;
    left: 50%;
    right: auto;
    top: 80px;
    width: min(calc(100vw - 32px), 320px);
    z-index: 10001;
    max-width: calc(100vw - 32px);
    transform: translate(-50%, -12px);
    transform-origin: top center;
    transition:
      opacity 0.22s ease-out,
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.22s linear;
  }
  #streak-badge-mobile.streak-badge--open .streak-tooltip { transform: translate(-50%, 0); }

  .navbar-actions { display: flex; align-items: center; gap: 8px; }
}

/* Very small phones (320px–360px): keep the card fully visible inside the viewport
   and tighten the navbar sizing so it never overflows horizontally. */
@media (max-width: 360px) {
  #streak-badge-mobile .streak-tooltip {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 14px 14px 12px;
  }
  #streak-badge-mobile .streak-fire-orb { width: 46px; height: 46px; }
  #streak-badge-mobile .streak-fire-orb .streak-fire { font-size: 22px; }
  #streak-badge-mobile .streak-stat-value { font-size: 18px; }
  #streak-badge-mobile .streak-card-title-main { font-size: 14.5px; }
  #streak-badge-mobile .streak-card-title-sub { font-size: 11px; }

  .navbar-inner { width: calc(100% - 24px); gap: 10px; }
  .navbar-login-mobile,
  .navbar-profile { font-size: 12.5px; padding: 6px 10px; gap: 6px; }
  .navbar-profile-avatar { width: 24px; height: 24px; font-size: 12px; }
  .streak-badge { padding: 4px 9px; gap: 4px; }
  .hamburger { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .streak-tooltip { transition-duration: 0.15s; }
  .streak-fire,
  .streak-fire::before,
  .streak-fire::after,
  .streak-spark,
  .streak-progress-fill { animation: none !important; }
  .streak-spark { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════
   Mobile navigation — Premium redesign (mobile only)
   Scrollable drawer, pinned sky-blue CTA footer, sky-blue
   accents, glow on the active item, elegant thin scrollbar.
   ═══════════════════════════════════════════════════════════ */

/* ── Press ripple ── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  pointer-events: none;
  animation: menu-ripple 0.5s ease-out forwards;
}
@keyframes menu-ripple { to { transform: scale(1); opacity: 0; } }

/* ── Drawer: head / scrollable list / pinned foot ── */
@media (max-width: 640px) {
  .mobile-menu-head {
    flex-shrink: 0;
    padding: 0 20px 14px;
  }
  .mobile-menu-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #5FA8F5;
  }
  .mobile-menu-headline {
    display: block;
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.2;
    color: var(--primary-ink);
  }

  /* ── Scrollable list area ── */
  .mobile-menu-scroll {
    flex: 1;
    min-height: 0;
    padding: 0 12px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 168, 245, 0.35) transparent;
  }
  .mobile-menu-scroll::-webkit-scrollbar { width: 5px; }
  .mobile-menu-scroll::-webkit-scrollbar-track { background: transparent; }
  .mobile-menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(95, 168, 245, 0.35);
    border-radius: 99px;
  }
  .mobile-menu-scroll::-webkit-scrollbar-thumb:hover { background: rgba(95, 168, 245, 0.55); }

  .mobile-menu-list { display: flex; flex-direction: column; }
  .mobile-menu-list > * {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 14px;
    background-color: transparent;
    color: rgba(253, 248, 242, 0.92);
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.3s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }
  /* hairline dividers between items */
  .mobile-menu-list > * + *::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 16px;
    left: 16px;
    height: 1px;
    background: rgba(253, 248, 242, 0.07);
  }

  /* icon tile */
  #navbar-links .navbar-link-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background-color: rgba(95, 168, 245, 0.12);
    color: #5FA8F5;
    border: 1px solid rgba(95, 168, 245, 0.22);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  #navbar-links .navbar-link-ico svg { width: 20px; height: 20px; }

  .navbar-link-txt { flex: 1; }
  .navbar-link-arrow {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: rgba(95, 168, 245, 0.6);
    transition: color 0.2s ease;
  }

  /* hover / press states */
  #navbar-links .navbar-link--mobile:hover { background-color: rgba(253, 248, 242, 0.06); }
  #navbar-links .navbar-link--mobile:active { background-color: rgba(253, 248, 242, 0.09); }

  /* active section: sky pill + glow + accent bar */
  #navbar-links .navbar-link--mobile.active {
    background-color: rgba(95, 168, 245, 0.16);
    border-color: rgba(95, 168, 245, 0.35);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(95, 168, 245, 0.25), 0 10px 26px -8px rgba(95, 168, 245, 0.45);
  }
  #navbar-links .navbar-link--mobile.active::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: #5FA8F5;
    box-shadow: 0 0 12px rgba(95, 168, 245, 0.9);
  }
  #navbar-links .navbar-link--mobile.active .navbar-link-ico {
    background-color: #5FA8F5;
    color: #10367D;
    border-color: #5FA8F5;
    box-shadow: 0 4px 14px -4px rgba(95, 168, 245, 0.7);
  }
  #navbar-links .navbar-link--mobile.active .navbar-link-arrow { color: #5FA8F5; }

  /* ── Pinned CTA footer ── */
  .mobile-menu-foot {
    flex-shrink: 0;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(22, 69, 143, 0.88) 0%, #16458f 55%);
    border-top: 1px solid rgba(253, 248, 242, 0.1);
    box-shadow: 0 -14px 26px -16px rgba(4, 10, 24, 0.55);
  }
  .mobile-menu-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3d8bf0 0%, #1266F1 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(18, 102, 241, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .mobile-menu-cta:active {
    transform: scale(0.97);
    box-shadow: 0 6px 16px rgba(18, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .mobile-menu-cta-ico { width: 22px; height: 22px; flex-shrink: 0; }
  .mobile-menu-cta-txt { flex: 1; }
  .mobile-menu-cta-arrow { width: 16px; height: 16px; flex-shrink: 0; }

  /* focus visibility */
  #navbar-links a:focus-visible {
    outline: 2px solid #5FA8F5;
    outline-offset: -2px;
  }

  /* ── Staggered entrance on open ── */
  #navbar-links .mobile-menu-list > * {
    transform: translateX(-16px);
    opacity: 0;
  }
  #navbar-links.open .mobile-menu-list > * { transform: translateX(0); opacity: 1; }
  #navbar-links.open .mobile-menu-list > :nth-child(1) { transition-delay: 0.04s, 0.04s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(3) { transition-delay: 0.12s, 0.12s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(4) { transition-delay: 0.16s, 0.16s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(5) { transition-delay: 0.2s, 0.2s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(6) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(7) { transition-delay: 0.28s, 0.28s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(8) { transition-delay: 0.32s, 0.32s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(9) { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(10) { transition-delay: 0.4s, 0.4s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(11) { transition-delay: 0.44s, 0.44s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(12) { transition-delay: 0.48s, 0.48s, 0s, 0s, 0s; }
  #navbar-links.open .mobile-menu-list > :nth-child(13) { transition-delay: 0.52s, 0.52s, 0s, 0s, 0s; }
  #navbar-links:not(.open) .mobile-menu-list > * { transition-delay: 0s; }

  .mobile-menu-head,
  .mobile-menu-foot {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  #navbar-links.open .mobile-menu-head,
  #navbar-links.open .mobile-menu-foot { opacity: 1; transform: translateX(0); }
  #navbar-links.open .mobile-menu-head { transition-delay: 0.26s; }
  #navbar-links.open .mobile-menu-foot { transition-delay: 0.34s; }
  #navbar-links:not(.open) .mobile-menu-head,
  #navbar-links:not(.open) .mobile-menu-foot { transition-delay: 0s; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #navbar-links,
  #navbar-links .mobile-menu-list > *,
  .mobile-menu-head,
  .mobile-menu-foot,
  .mobile-menu-scroll { transition: none !important; }
  #navbar-links .mobile-menu-list > *,
  .mobile-menu-head,
  .mobile-menu-foot { opacity: 1 !important; transform: none !important; }
  .mobile-menu-scroll { scroll-behavior: auto; }
  .ripple { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   "جميع الأسئلة" — All Questions page · Premium responsive
   Redesign (mobile-first). Root-cause fixes:
   1) Real side gutters on mobile (kills edge-to-edge overflow)
   2) Equal-height cards, 2-col only when width allows
   3) Number badge & bookmark moved to opposite top corners so
      nothing overlaps the title
   4) Compact pinned CTA, 2-line clamped titles, uniform radius
   ═══════════════════════════════════════════════════════════ */

/* ── Page shell: gutters + spacing ── */
#page-all.subpage { padding-top: 36px; }
@media (max-width: 640px) {
  #page-all.container { width: 100%; padding-inline: 16px; }
  #page-all.subpage { padding-top: 24px; }
}
@media (max-width: 380px) {
  #page-all.container { padding-inline: 12px; }
}

/* ── Header: compact, aligned, close to search ── */
#page-all .back-link { margin-bottom: 16px; }
@media (max-width: 640px) { #page-all .back-link { font-size: 14px; margin-bottom: 14px; } }
#page-all .section-header { max-width: none; margin-bottom: 20px; }
#page-all .section-label { gap: 8px; margin-bottom: 8px; font-size: 13px; }
#page-all .section-label span {
  width: 30px;
  height: 30px;
  font-size: 13.5px;
}
#page-all .section-title {
  display: block;
  padding: 0;
  border-radius: 0;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.3;
}
@media (max-width: 380px) { #page-all .section-title { font-size: 24px; } }

/* ── Search: compact premium ── */
#page-all .search-wrapper { max-width: 560px; margin-bottom: 14px; }
#page-all .search-input {
  height: 50px;
  padding: 0;
  padding-inline-start: 46px; /* icon (right in RTL) */
  padding-inline-end: 18px;   /* clear (left in RTL)   */
  font-size: 15px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(16, 54, 125, 0.05);
}
#page-all .search-input::placeholder { color: rgba(93, 107, 102, 0.55); font-weight: 500; }
#page-all .search-input:hover { border-color: rgba(185, 138, 47, 0.45); }
#page-all .search-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(185, 138, 47, 0.12), 0 6px 20px rgba(16, 54, 125, 0.08);
  transform: none;
}
#page-all .search-icon {
  inset-inline-start: 17px;
  inset-inline-end: auto;
  width: 17px;
  height: 17px;
  color: rgba(93, 107, 102, 0.65);
}
#page-all .search-input:focus ~ .search-icon { color: var(--accent); transform: translateY(-50%); }
#page-all .search-clear {
  inset-inline-start: auto;
  inset-inline-end: 12px;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
}
#page-all .search-count { margin-bottom: 16px; }
@media (max-width: 380px) {
  #page-all .search-input { height: 48px; font-size: 14px; }
}

/* ── Grid: 2 columns only when width allows ── */
#all-grid { align-items: stretch; }
@media (max-width: 960px) and (min-width: 641px) {
  #all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 380px) {
  #all-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Cards: equal height, rounded, nothing overflows ── */
.q-card,
.q-card--all {
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
}
.q-card--all { width: 100%; max-width: 100%; }

/* Inner wrapper: top band clears the corner widgets */
.q-card .q-card-body,
.q-card--all .q-card-body {
  padding: 48px 16px 16px;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* Number badge: small, fixed, top-start corner */
.q-card .q-card-num,
.q-card--all .q-card-num {
  top: 12px;
  left: auto;
  inset-inline-start: 12px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  background: rgba(185, 138, 47, 0.12);
  color: var(--accent);
  font-size: 11.5px;
  line-height: 1;
}

/* Bookmark: small, opposite corner, never covers the title */
.q-card .fav-btn,
.q-card--all .fav-btn {
  top: 12px;
  left: auto;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 54, 125, 0.08);
}
.q-card .fav-btn svg,
.q-card--all .fav-btn svg { width: 16px; height: 16px; }

/* Title: max 2 lines + ellipsis, reserves fixed 2-line height */
.q-card .q-card-title,
.q-card--all .q-card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  min-height: calc(2 * 1.55em);
  max-width: 100%;
  min-width: 0;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* CTA: compact pill pinned to the bottom, never full width */
.q-card .q-card-more,
.q-card--all .q-card-more {
  min-height: 38px;
  padding: 0 16px;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  border-width: 1.5px;
  border-radius: 9px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: auto;
}
.q-card:hover .q-card-more,
.q-card--all:hover .q-card-more {
  gap: 9px;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(185, 138, 47, 0.55);
}

/* Slightly tighter type on very small phones */
@media (max-width: 380px) {
  .q-card .q-card-title,
  .q-card--all .q-card-title { font-size: 15px; }
  .q-card .q-card-body,
  .q-card--all .q-card-body { padding: 48px 14px 14px; }
  .q-card .q-card-num,
  .q-card--all .q-card-num { inset-inline-start: 10px; }
  .q-card .fav-btn,
  .q-card--all .fav-btn { inset-inline-end: 10px; }
  .q-card .q-card-more,
  .q-card--all .q-card-more { padding: 0 14px; font-size: 12.5px; min-height: 36px; }
}

/* Reduced motion for the new pieces */
@media (prefers-reduced-motion: reduce) {
  .q-card .q-card-more,
  .q-card--all .q-card-more { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   Question cards — shared design for:
     • home  #section-questions (only 6 questions)
     • page  #page-all / #all-grid (all questions)
   Layout: number + bookmark stacked in a dedicated LEFT rail,
   question text + CTA in the right column (RTL) — no overlap,
   compact content-based heights. Both grids are ALWAYS one
   column: card under card, never 2×2.
   ═══════════════════════════════════════════════════════════ */

/* Both question grids: single column on every screen size */
#section-questions .questions-grid,
#all-grid {
  grid-template-columns: 1fr;
}

/* Content-based heights: cards size to their own content */
#section-questions .questions-grid { align-items: start; }
#all-grid { align-items: start; gap: 16px; }

/* Card shell: 2-column grid — content column right, rail column left */
#section-questions .q-card,
#page-all .q-card--all {
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "content num"
    "content fav";
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
}

/* Number badge: top of the left rail */
#section-questions .q-card .q-card-num,
#page-all .q-card--all .q-card-num {
  position: static;
  grid-area: num;
  justify-self: center;
  margin: 0;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  background: rgba(158, 125, 46, 0.1);
  color: #9e7d2e;
  font-size: 13px;
}

/* Bookmark: under the number, bottom of the left rail */
#section-questions .q-card .fav-btn,
#page-all .q-card--all .fav-btn {
  position: static;
  grid-area: fav;
  justify-self: center;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
#section-questions .q-card .fav-btn svg,
#page-all .q-card--all .fav-btn svg { width: 16px; height: 16px; }

/* Inner wrapper: content column — no extra padding, simple flow like sh-card */
#section-questions .q-card .q-card-body,
#page-all .q-card--all .q-card-body {
  grid-area: content;
  padding: 0;
  gap: 10px;
  min-width: 0;
}

/* Question title: big, readable, wraps naturally */
#section-questions .q-card .q-card-title,
#page-all .q-card--all .q-card-title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.8;
  min-height: 0;
  max-width: 100%;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}

/* CTA: identical to sh-card-btn, right under the question */
#section-questions .q-card .q-card-more,
#page-all .q-card--all .q-card-more {
  margin-top: 0;
  min-height: 0;
  padding: 5px 12px;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  color: var(--primary);
  background: none;
  white-space: normal;
}
#section-questions .q-card:hover .q-card-more,
#page-all .q-card--all:hover .q-card-more {
  gap: 10px;
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: none;
}

/* "عرض جميع الأسئلة" — right after the 6th card, close & consistent */
#section-questions .section-footer { margin-top: 24px; }

/* Mobile: same compact proportions */
@media (max-width: 640px) {
  #section-questions .q-card,
  #page-all .q-card--all { padding: 14px 16px 16px; column-gap: 12px; row-gap: 6px; }
  #section-questions .q-card .q-card-body,
  #page-all .q-card--all .q-card-body { gap: 8px; }
  #section-questions .q-card .q-card-title,
  #page-all .q-card--all .q-card-title { font-size: 19px; line-height: 1.75; }
  #section-questions .section-footer { margin-top: 20px; }
}
@media (max-width: 380px) {
  #section-questions .q-card,
  #page-all .q-card--all { padding: 12px 14px 14px; }
  #section-questions .q-card .fav-btn,
  #page-all .q-card--all .fav-btn { width: 30px; height: 30px; }
  #section-questions .q-card-title,
  #page-all .q-card--all .q-card-title { font-size: 18px; }
}
@media (min-width: 641px) {
  #section-questions .q-card .q-card-title,
  #page-all .q-card--all .q-card-title { font-size: 20px; }
}

/* ──────────────────────────────────────────────────────────
   Desktop navbar — wider & larger on large screens.
   • ≥1280px: navbar uses the full available width; taller bar,
     bigger logo / title / links while still ONE single row.
   • ≥1600px: even larger — roomier padding & typography for
     big monitors.
   Mobile drawer (≤640px) and tablet state are untouched.
   ────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .navbar-inner {
    width: min(100% - 40px, 1600px);
    height: 80px;
    gap: 14px;
  }

  .navbar-logo-mark { width: 46px; height: 46px; }
  .navbar-title { font-size: 28px; }

  .navbar-links--desktop {
    gap: 3px;
  }

  .navbar-links--desktop .navbar-link {
    white-space: nowrap;
    font-size: 14px;
    padding: 9px 12px;
  }

  .navbar-links--desktop .navbar-link--cta,
  .navbar-links--desktop .navbar-link--profile {
    margin-inline-start: 4px;
    padding: 9px 13px;
  }

  #streak-badge-desktop {
    margin-inline-start: 6px;
  }
}

@media (min-width: 1600px) {
  .navbar-inner {
    width: min(100% - 48px, 1760px);
    height: 86px;
    gap: 18px;
  }

  .navbar-logo-mark { width: 50px; height: 50px; }
  .navbar-title { font-size: 30px; }

  .navbar-links--desktop {
    gap: 5px;
  }

  .navbar-links--desktop .navbar-link {
    font-size: 16px;
    padding: 11px 16px;
  }

  .navbar-links--desktop .navbar-link--cta,
  .navbar-links--desktop .navbar-link--profile {
    margin-inline-start: 6px;
    padding: 11px 18px;
  }

  #streak-badge-desktop {
    margin-inline-start: 8px;
  }
}

/* ──────────────────────────────────────────────────────────
   Desktop scale — sections & typography breathe on large
   screens (≥1280px). Mobile and tablet values are untouched.
   ────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
   .section { padding: 40px 0 80px; }
  .section-desc { font-size: 17px; }
  .section-label { font-size: 15px; }
  .section-footer { margin-top: 52px; }
  .section-heading__desc { font-size: 17px; }
  .hero-rule { margin-top: 72px; }
}

/* ═══════════════════════════════════════════
   الأذكار — Entry Card
   ═══════════════════════════════════════════ */
.adhkar-entry-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    radial-gradient(420px 140px at 88% -30%, rgba(74,222,128,0.22), rgba(74,222,128,0) 65%),
    linear-gradient(120deg, #0c2918 0%, #134e2a 55%, #1a3a2e 100%);
  border-radius: 20px;
  padding: 20px 22px;
  text-decoration: none;
  border: 1px solid rgba(74,222,128,0.14);
  box-shadow: 0 2px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}
.adhkar-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(74,222,128,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
.adhkar-entry-card:hover { transform: translateY(-3px); border-color: rgba(74,222,128,0.3); box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(74,222,128,0.1) inset; }
.adhkar-entry-card:hover::before { transform: translateX(100%); }
.adhkar-entry-card:active { transform: translateY(-1px) scale(0.997); }
.adhkar-entry-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(74,222,128,0.16), rgba(74,222,128,0.05));
  border: 1px solid rgba(74,222,128,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.adhkar-entry-card:hover .quran-entry-arrow {
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  transform: scaleX(-1) translateX(3px);
}

/* ═══════════════════════════════════════════
   الأذكار — Categories Grid (2 cols, per-card accent)
   ═══════════════════════════════════════════ */
.adhkar-cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.adhkar-cat-card {
  --cat-accent: #16a34a;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  padding: 20px 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  width: 100%;
  font-family: inherit;
  text-align: center;
  animation: adhkarCardIn 0.35s ease both;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.adhkar-cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--cat-accent);
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
  background: #fff;
}
.adhkar-cat-card:active { transform: translateY(0) scale(0.98); }

/* ─── Per-category accent colors ─── */
.adhkar-cat-card[data-accent="morning"]        { --cat-accent: #b98a2f; }
.adhkar-cat-card[data-accent="evening"]        { --cat-accent: #4f46e5; }
.adhkar-cat-card[data-accent="sleep"]          { --cat-accent: #7c3aed; }
.adhkar-cat-card[data-accent="wakeup"]         { --cat-accent: #ea580c; }
.adhkar-cat-card[data-accent="after_prayer"]   { --cat-accent: #16a34a; }
.adhkar-cat-card[data-accent="mosque"]         { --cat-accent: #0d9488; }
.adhkar-cat-card[data-accent="quranic_duas"]   { --cat-accent: #0284c7; }
.adhkar-cat-card[data-accent="prophetic_duas"] { --cat-accent: #db2777; }
.adhkar-cat-card[data-accent="ruqyah"]         { --cat-accent: #dc2626; }
.adhkar-cat-card[data-accent="travel"]         { --cat-accent: #2563eb; }

@keyframes adhkarCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.adhkar-cat-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 15px;
  background: var(--cat-accent) 14%;
  background: color-mix(in srgb, var(--cat-accent) 12%, transparent);
  border: 1px solid var(--cat-accent) 28%;
  border: 1px solid color-mix(in srgb, var(--cat-accent) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-accent);
}
.adhkar-cat-info { min-width: 0; }
.adhkar-cat-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.adhkar-cat-arrow {
  display: none;
  color: var(--muted);
  opacity: 0.5;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.adhkar-cat-card:hover .adhkar-cat-arrow {
  opacity: 1;
  color: var(--cat-accent);
  transform: translateX(-3px);
}

/* ─── Grid responsive: 1 col on very small screens if needed ─── */
@media (max-width: 380px) {
  .adhkar-cats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .adhkar-cat-card { padding: 16px 10px 14px; }
  .adhkar-cat-icon { width: 46px; height: 46px; min-width: 46px; }
}

/* ═══════════════════════════════════════════
   الأذكار — Reader (Full Redesign)
   ═══════════════════════════════════════════ */

/* ─── Top Bar ─── */
.adhkar-r-top {
  padding: 16px 20px 0;
}
.adhkar-r-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.adhkar-r-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.adhkar-r-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.adhkar-r-back:active {
  transform: scale(0.97);
}
.adhkar-r-cat-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Progress ─── */
.adhkar-r-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.adhkar-r-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.adhkar-r-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.adhkar-r-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─── Loading ─── */
.adhkar-r-loading {
  padding: 32px 20px;
}
.adhkar-r-skeleton {
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Empty ─── */
.adhkar-r-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
  font-size: 15px;
}

/* ─── Reader ─── */
.adhkar-r-reader {
  padding: 20px;
  max-width: 680px;
  margin: 0 auto;
  animation: adhkarReaderSlide 0.4s cubic-bezier(0.16,1,0.3,1);
  touch-action: pan-y;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
}
.adhkar-r-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-top: 18px;
  opacity: 0.75;
}
.adhkar-r-swipe-hint svg {
  flex-shrink: 0;
  animation: adhkarSwipeNudge 1.6s ease-in-out infinite;
}
@keyframes adhkarSwipeNudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(3px); }
  40% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
}
@keyframes adhkarReaderSlide {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.adhkar-r-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 28px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.adhkar-r-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #16a34a);
}

.adhkar-r-text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 2;
  color: var(--ink);
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
  margin-bottom: 24px;
}

/* ─── Footer (Source + Counter) ─── */
.adhkar-r-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.adhkar-r-source {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.6;
  word-break: break-word;
}
.adhkar-r-source:empty {
  display: none;
}
.adhkar-r-source-label {
  font-weight: 700;
  margin-left: 4px;
}
.adhkar-r-counter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.adhkar-r-counter-circle {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adhkar-r-counter-ring {
  position: absolute;
  top: 0;
  left: 0;
}
.adhkar-r-counter-progress {
  transition: stroke-dashoffset 0.4s cubic-bezier(0.16,1,0.3,1);
}
.adhkar-r-counter-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  z-index: 1;
  white-space: nowrap;
}
@keyframes adhkarCounterPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─── Done Button ─── */
.adhkar-r-actions {
  padding: 20px 20px 0;
  max-width: 680px;
  margin: 0 auto;
}
.adhkar-r-done-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 16px rgba(22,163,74,0.25);
  min-height: 54px;
}
.adhkar-r-done-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(22,163,74,0.3);
}
.adhkar-r-done-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(22,163,74,0.2);
}
.adhkar-r-done-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ─── Message ─── */
.adhkar-r-msg {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  margin-top: 12px;
  animation: adhkarFadeIn 0.3s ease;
}
.dhikr-msg--success { background: #dcfce7; color: #15803d; }
.dhikr-msg--bonus { background: #fef9c3; color: #a16207; }
.dhikr-msg--warn { background: #fef3c7; color: #b45309; }
.dhikr-msg--error { background: #fee2e2; color: #dc2626; }

/* ─── All Done ─── */
.adhkar-r-done {
  text-align: center;
  padding: 28px 24px 32px;
  max-width: 480px;
  margin: 0 auto;
  animation: adhkarReaderSlide 0.5s cubic-bezier(0.16,1,0.3,1);
}
.adhkar-r-done-icon {
  margin-bottom: 18px;
  animation: adhkarDonePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
@keyframes adhkarDonePop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.adhkar-r-done-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.adhkar-r-done .adhkar-r-done-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.adhkar-r-done-sub {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6;
}
.adhkar-r-restart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 16px rgba(22,163,74,0.25);
  min-width: 220px;
}
.adhkar-r-restart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(22,163,74,0.3);
}
.adhkar-r-restart-btn:active {
  transform: translateY(0) scale(0.98);
}
.adhkar-r-done-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 220px;
}
.adhkar-r-done-back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@keyframes adhkarFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .adhkar-r-top {
    padding: 12px 16px 0;
  }
  .adhkar-r-cat-name {
    font-size: 18px;
  }
  .adhkar-r-reader {
    padding: 16px;
  }
  .adhkar-r-card {
    padding: 32px 20px 24px;
    border-radius: 14px;
  }
  .adhkar-r-text {
    font-size: 20px;
    line-height: 1.9;
  }
  .adhkar-r-actions {
    padding: 16px 16px 0;
  }
  .adhkar-r-done-btn {
    padding: 15px 20px;
    font-size: 15px;
    border-radius: 12px;
  }
  .adhkar-r-done {
    padding: 24px 20px 28px;
  }
  .adhkar-r-done-title {
    font-size: 20px;
  }
  .adhkar-r-counter-circle {
    width: 52px;
    height: 52px;
  }
  .adhkar-r-counter-ring {
    width: 52px;
    height: 52px;
  }
  .adhkar-r-counter-num {
    font-size: 10px;
  }
  .adhkar-r-footer {
    gap: 12px;
  }
  .adhkar-r-source {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════
   حديث اليوم — صفحة + Story (9:16)
   ═══════════════════════════════════════════ */
.hadith-page {
  padding: 24px 16px 48px;
  max-width: 820px;
}
.hadith-page-header .back-link {
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hadith-loading { padding: 8px 0; }
.hadith-empty { text-align: center; padding: 60px 20px; color: var(--muted); }

.hadith-app {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* ─── Story stage ─── */
.hadith-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}
.hadith-canvas {
  --h-font: "Amiri", serif;
  --h-size: 24px;
  --h-valign: center;
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b3d45 0%, #14555c 100%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.45);
  font-family: var(--font-body);
}
.hadith-canvas--fallback {
  background: linear-gradient(160deg, #0b3d45 0%, #14555c 60%, #1c2a26 100%);
}
.hadith-canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hadith-canvas-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.06) 70%, rgba(0,0,0,0.34) 100%);
}
.hadith-canvas-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: var(--h-valign);
  gap: 14px;
  padding: 40px 22px 36px;
  text-align: center;
  box-sizing: border-box;
}

/* White rounded box holding the hadith + verdict */
.hadith-story-box {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 20px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.45);
  color: #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hadith-story-hadith {
  font-family: var(--h-font);
  font-size: var(--h-size);
  font-weight: 600;
  line-height: 1.85;
  color: #111111;
  word-break: break-word;
}
.hadith-story-verdict {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: #111111;
  text-align: center;
  display: inline-block;
  background: rgba(134, 239, 172, 0.35);
  border-radius: 8px;
  padding: 2px 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  max-width: 100%;
  box-sizing: border-box;
}
.hadith-verdict-label {
  font-weight: 700;
  color: #111111;
  margin-inline-end: 6px;
}
.hadith-verdict-value {
  font-weight: 600;
  color: #111111;
}
.hadith-story-source {
  font-family: var(--font-body);
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Source modes */
.hadith-src--badge {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
}
.hadith-src--line {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.5);
}
.hadith-src--none { display: none !important; }

/* ─── Download story image ─── */
.hadith-download-row {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hadith-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-ink);
  background: linear-gradient(120deg, #0d9488, #0f766e);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(13,148,136,0.6);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, opacity 0.25s ease;
}
.hadith-download-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(13,148,136,0.7); }
.hadith-download-btn:active { transform: translateY(0) scale(0.995); }
.hadith-download-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.hadith-download-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ─── Editor controls ─── */
.hadith-controls {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.hadith-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.hadith-index { font-weight: 700; color: var(--ink); }
.hadith-total { font-weight: 600; }
.hadith-ctrl-group {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 12px;
}
.hadith-ctrl-group label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.hadith-ctrl-group select,
.hadith-ctrl-group input[type="range"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
}
.hadith-ctrl-group select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.hadith-ctrl-group input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: none;
}
.hadith-ctrl-value,
.hadith-ctrl-color-val {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  min-width: 30px;
  text-align: center;
}
.hadith-ctrl-seg {
  display: flex;
  gap: 6px;
  grid-column: 2 / 4;
}
.hadith-seg-btn {
  flex: 1;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hadith-seg-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

@media (max-width: 600px) {
  .hadith-page { padding: 18px 12px 40px; }
  .hadith-canvas { max-width: 300px; }
  .hadith-canvas-content { padding: 36px 20px 32px; gap: 12px; }
  .hadith-story-hadith { line-height: 1.9; }
  .hadith-controls { max-width: 300px; }
  .hadith-ctrl-group { grid-template-columns: 80px 1fr auto; gap: 8px; }
}




/* Hadith archive page — match the main hadith library design */
#page-hadith-all {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 28px clamp(16px, 4vw, 56px) 80px;
  background: #091426;
  color: #f4ead1;
  overflow: hidden;
}
#page-hadith-all::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background-image: radial-gradient(circle at 14% 18%, rgba(201,163,74,.16) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 72%, rgba(201,163,74,.12) 0 1px, transparent 1.5px);
  background-size: 46px 46px, 58px 58px;
}
#page-hadith-all .back-link { color: #d7b763; }
#page-hadith-all .section-header { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto 30px; }
#page-hadith-all .section-label { color: #d8b967; }
#page-hadith-all .section-label span { border-color: rgba(216,185,103,.55); }
#page-hadith-all .section-title { color: #fff7e7; }
#page-hadith-all .section-desc { color: rgba(244,234,209,.66); }
#page-hadith-all .hadith-lux-results { position: relative; z-index: 1; }
@media (max-width: 600px) {
  #page-hadith-all { padding: 18px 12px 60px; }
  #page-hadith-all .section-header { margin-bottom: 24px; }
}

/* Hadith search: match the premium homepage search design */
.section-hadith-lux .hadith-lux-search {
  max-width: 580px;
  min-height: 0;
  margin: 0 auto 24px;
  padding: 0;
  position: relative;
  display: block;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.section-hadith-lux .hadith-lux-search input {
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 18px 56px 18px 52px;
  border: 2px solid rgba(201,168,76,.25);
  border-radius: 16px;
  background: #FDF8F2;
  color: #1C2A26;
  font-size: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition: all .3s ease;
}
.section-hadith-lux .hadith-lux-search input::placeholder { color:#8A7E6F; font-weight:500; }
.section-hadith-lux .hadith-lux-search input:hover { border-color:rgba(201,168,76,.45); }
.section-hadith-lux .hadith-lux-search input:focus { outline:none; border-color:#C9A84C; background:#fff; box-shadow:0 0 0 4px rgba(201,168,76,.15), 0 8px 32px rgba(0,0,0,.18); transform:translateY(-2px); }
.section-hadith-lux .hadith-lux-search svg { position:absolute; left:20px; top:50%; transform:translateY(-50%); color:#C9A84C; z-index:2; pointer-events:none; }
.section-hadith-lux .hadith-lux-search button { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#8A7E6F; background:rgba(201,168,76,.08); border-radius:8px; padding:6px 10px; font-size:13px; z-index:2; }
@media (max-width:600px) { .section-hadith-lux .hadith-lux-search { max-width:100%; } .section-hadith-lux .hadith-lux-search input { font-size:15px; padding:16px 48px 16px 48px; } }

/* Hadith search: dark theme override */
#page-all .search-input,
.hadith-lux-search input {
  background: #0b1b31 !important;
  color: #fff8e9 !important;
  border-color: rgba(201,163,74,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.18) !important;
}
#page-all .search-input::placeholder,
.hadith-lux-search input::placeholder {
  color: rgba(244,234,209,.58) !important;
}
#page-all .search-input:focus {
  background: #0b1b31 !important;
  border-color: #d7b763 !important;
  box-shadow: 0 0 0 4px rgba(215,183,99,.14), 0 8px 24px rgba(0,0,0,.22) !important;
}
/* Match the hadith search design on the All Hadiths page */
#page-all .search-wrapper {\r\n  max-width: 560px !important;\r\n  min-height: 0;\r\n  margin: 0 auto 16px !important;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n}
#page-all .search-input {
  height: 60px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff8e9 !important;
}
#page-all .search-input::placeholder { color: rgba(244,234,209,.58) !important; }
#page-all .search-input:focus { background: transparent !important; box-shadow: none !important; }
#page-all .search-icon { color: #d2ad56 !important; }
#page-all .search-clear {
  color: rgba(244,234,209,.65) !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
}


/* Fix: remove the white gap beneath the fixed navbar on dark pages */
/* Restored original light homepage hero background; dark override removed. */


/* Dark premium search style for the complete hadith archive */
#page-all .search-wrapper { max-width: 560px; margin: 0 auto 16px; }
#page-all .search-input { background: #0b1b31; color: #f5efe5; border: 2px solid rgba(201, 168, 76, 0.72); border-radius: 28px; padding: 20px 64px; min-height: 82px; box-shadow: 0 8px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03); }
#page-all .search-input::placeholder { color: rgba(245,239,229,.58); }
#page-all .search-input:hover, #page-all .search-input:focus { background: #0b1b31; border-color: #c9a84c; box-shadow: 0 0 0 4px rgba(201,168,76,.12), 0 8px 28px rgba(0,0,0,.24); transform: none; }
#page-all .search-icon { color: #c9a84c; inset-inline-end: 22px; }
#page-all .search-input:focus ~ .search-icon { color: #e2c66a; }
#page-all .search-clear { background: rgba(255,255,255,.07); color: rgba(245,239,229,.65); border-radius: 14px; padding: 10px 13px; inset-inline-start: 16px; }
#page-all .search-clear:hover { background: rgba(255,255,255,.12); color: #f5efe5; }

/* Hide the hadith search field on the homepage; keep it on the full archive page */
.section-hadith-lux .hadith-lux-search { display: none !important; }

/* Homepage hadith source filters: text-only links, not button cards. */
#section-hadith .hadith-lux-filters { gap: 24px; }
#section-hadith .hadith-lux-filter {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  color: rgba(244,234,209,.78) !important;
  border-radius: 0 !important;
  font-weight: 600;
}
#section-hadith .hadith-lux-filter.is-active,
#section-hadith .hadith-lux-filter:hover {
  color: #d7b763 !important;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Final polish: All Hadith page header and dark search */
#page-hadith-all .section-header { margin-bottom: 34px; }
#page-hadith-all .section-title { margin-top: 8px; margin-bottom: 30px; }
#page-hadith-all .search-wrapper { max-width: 850px; min-height: 60px; margin: 0 auto 18px; padding: 0 18px; border: 1px solid rgba(201,163,74,.55); border-radius: 18px; background: rgba(4,14,29,.92); box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03); }
#page-hadith-all .search-input { height: 60px; background: #0b1b31 !important; color: #fff8e9 !important; border: 0 !important; border-radius: 14px; box-shadow: none !important; }
#page-hadith-all .search-input::placeholder { color: rgba(244,234,209,.58) !important; }
#page-hadith-all .search-input:focus { background: #0b1b31 !important; border: 0 !important; box-shadow: none !important; transform: none; }
#page-hadith-all .search-icon { color: #c9a84c; }
#page-hadith-all .search-clear { color: #d7b763; background: rgba(201,168,76,.08); }
@media (max-width: 600px) { #page-hadith-all .section-title { margin-bottom: 26px; } #page-hadith-all .search-wrapper { padding: 0 10px; border-radius: 18px; } }

/* Final hadith filters: plain text navigation */
.hadith-lux-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 6px auto 10px;
}
.hadith-lux-filter {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244,234,209,.72);
  border-radius: 0;
  padding: 2px 0 5px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: color .2s ease, border-color .2s ease;
}
.hadith-lux-filter:hover,
.hadith-lux-filter.is-active {
  color: #d7b763;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #d7b763;
  box-shadow: none;
}
#page-hadith-all .section-header {
  margin-bottom: 12px;
}
#page-hadith-all .section-title {
  margin-bottom: 10px;
}
#page-hadith-all .hadith-lux-filters {
  margin-top: 2px;
  margin-bottom: 8px;
}
#page-hadith-all .hadith-lux-results {
  margin-top: 6px;
}
@media (max-width: 600px) {
  .hadith-lux-filters { gap: 24px; margin-top: 2px; margin-bottom: 7px; }
  .hadith-lux-filter { font-size: 15px; }
  #page-hadith-all .section-header { margin-bottom: 10px; }
  #page-hadith-all .section-title { margin-bottom: 8px; }
}


/* FIX: Section 02 & 04 light background */
#section-questions, #section-bookquizzes { background: var(--primary) !important; color: #fff !important; }
#section-questions .section-title, #section-bookquizzes .section-title { color: #fff !important; }
#section-questions .section-desc, #section-bookquizzes .section-desc { color: rgba(255,255,255,0.72) !important; }
#section-questions .section-label, #section-bookquizzes .section-label { color: #A9852A !important; }
#section-questions .section-label span, #section-bookquizzes .section-label span { background: var(--primary) !important; color: #d8b967 !important; border-color: rgba(216,185,103,.7) !important; }
#section-questions::before, #section-questions::after, #section-bookquizzes::before, #section-bookquizzes::after { display:none !important; }

/* ─── Blue backgrounds for sections 02 and 04 ─── */
#section-questions,
#section-bookquizzes {
  background: var(--primary);
  color: #fff;
}
#section-questions .section-title,
#section-bookquizzes .section-title {
  color: #fff;
}
#section-questions .section-desc,
#section-bookquizzes .section-desc {
  color: rgba(255,255,255,0.72);
}
#section-questions .section-count,
#section-bookquizzes .section-count {
  color: #fff;
  background: rgba(255,255,255,0.10);
}

/* FINAL: restore full blue surface for sections 02 and 04 */
#section-questions,
#section-bookquizzes,
#section-questions > .section,
#section-bookquizzes > .section {
  background: var(--primary) !important;
  color: #fff !important;
}
#section-questions .section-title,
#section-bookquizzes .section-title {
  color: #fff !important;
}
#section-questions .section-desc,
#section-bookquizzes .section-desc {
  color: rgba(255,255,255,0.72) !important;
}
#section-questions .section-label,
#section-bookquizzes .section-label {
  color: #d8b967 !important;
}

/* Section 02 count */
#section-questions .section-count {
  color: #f1cf58 !important;
  background: rgba(241,207,88,0.14) !important;
}

/* Tighten Section 02 spacing */
#section-questions > .section {
  padding-top: 40px !important;
}
#section-questions .section-header {
  margin-bottom: 18px !important;
}
#section-questions .section-count {
  margin-top: 8px !important;
}

/* Fix: all-questions search must stay light */
#page-all .search-input {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: 0 2px 10px rgba(16, 54, 125, 0.05) !important;
}
#page-all .search-input::placeholder { color: rgba(93,107,102,.55) !important; }

/* Questions archive search: remove accidental dark side strips */
#page-all .search-wrapper {
  overflow: hidden;
  border-radius: 16px;
}
#page-all .search-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  background: #FDF8F2 !important;
  color: #1C2A26 !important;
  border: 2px solid rgba(201,168,76,.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
#page-all .search-input:focus {
  background: #fff !important;
  border-color: #C9A84C !important;
}

/* ═══ أحاديث مشتهرة لا تصح ═══ */
#section-hadith-not-authentic .section-label span,
#page-hadith-not-authentic-all .section-label span {
  background: #FFF4F4;
  color: #9A3030;
  border: 1px solid #E4B6B6;
}

.hna-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.hna-card {
  position: relative;
  background: #fff;
  border: 1px solid #eadfd5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  cursor: pointer;
  text-align: start;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hna-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: #d5c0a8;
}

.hna-card:focus-visible {
  outline: 3px solid rgba(16,54,125,.18);
  outline-offset: 3px;
}

.hna-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #faf7f2;
  border-bottom: 1px solid #eee5db;
}

.hna-card-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.hna-card-verdict {
  padding: 5px 10px;
  border-radius: 999px;
  background: #fce8e8;
  color: #983333;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.hna-card-body {
  padding: 20px;
}

.hna-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
}

.hna-card-quote {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 2;
  color: #5b4437;
  background: #fffaf4;
  border-inline-start: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 10px;
}

.hna-card-source {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.7;
}

.hna-card-more {
  display: block;
  margin-top: 14px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.hna-detail {
  background: #fff;
  border: 1px solid #eadfd5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.07);
}

.hna-detail-hero {
  padding: 22px 24px;
  background: linear-gradient(135deg, #10367D, #214f9d);
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.hna-detail-hero strong {
  background: #fbe9e9;
  color: #8f2d2d;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.hna-detail-inner {
  padding: 28px;
}

.hna-detail-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
}

.hna-detail-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #eee5db;
  border-radius: 14px;
  background: #fffdf9;
}

.hna-detail-section-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 10px;
}

.hna-detail-section-body {
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
}

.hna-detail-quote {
  font-family: var(--font-display);
  font-size: 23px;
  color: #5b4437;
}

.hna-detail-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff4f4;
  border: 1px solid #f2d3d3;
}

.hna-detail-verdict-label {
  font-size: 13px;
  color: var(--muted);
}

.hna-detail-verdict strong {
  color: #8f2d2d;
  font-size: 15px;
}

.hna-reference {
  margin-top: 6px;
  color: var(--muted);
}

.hna-source-link {
  display: inline-flex;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef4ff;
  color: #1857b3;
  font-weight: 800;
  text-decoration: none;
}

#section-hadith-not-authentic {
  scroll-margin-top: 90px;
}

@media (max-width: 900px) {
  .hna-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hna-grid { grid-template-columns: 1fr; }
  .hna-detail-inner { padding: 18px; }
  .hna-detail-title { font-size: 23px; }
  .hna-card-body { padding: 16px; }
  .hna-card-title { font-size: 18px; }
  .hna-card-quote { font-size: 18px; }
  .hna-detail-quote { font-size: 20px; }
}


/* ═══ Hadith not authentic — compact preview cards ═══ */
.hna-card-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 6em;
}

.hna-card-source {
  margin-top: 10px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  #section-hadith-not-authentic {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hna-card-body { padding: 15px; }
  .hna-card-title { font-size: 18px; margin-bottom: 9px; }
  .hna-card-quote {
    font-size: 18px;
    line-height: 1.85;
    -webkit-line-clamp: 3;
    max-height: 5.55em;
    padding: 10px 12px;
  }
  .hna-card-source { margin-top: 9px; }
  .hna-card-more { margin-top: 10px; font-size: 12px; }
}


/* Blue section treatment — match the Important Questions section */
#section-hadith-not-authentic .search-wrapper {
  max-width: 580px;
  margin-inline: auto;
}
#section-hadith-not-authentic .hna-grid {
  position: relative;
  z-index: 1;
}
#section-hadith-not-authentic .section-footer {
  position: relative;
  z-index: 1;
}
#section-hadith-not-authentic .btn--primary {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}
#section-hadith-not-authentic .btn--primary:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.9);
}


/* Blue background for the whole hadith section, exactly like Important Questions */
#section-hadith-not-authentic.section-alt {
  background: var(--primary) !important;
}
#section-hadith-not-authentic.section-alt::after {
  background: none;
}


/* Prevent the home hadith section from remaining visible behind the detail page */
body.hna-detail-open #section-hadith-not-authentic {
  display: none !important;
}


/* Final color fix: section 08 header on blue background */
#section-hadith-not-authentic .section-title {
  color: #fff !important;
}
#section-hadith-not-authentic .section-desc {
  color: rgba(255,255,255,0.72) !important;
}
#section-hadith-not-authentic .section-label {
  color: #d8b967 !important;
}


/* Fix: hide section 08 home preview while its full archive page is open on mobile */
body.hna-archive-open #section-hadith-not-authentic {
  display: none !important;
}


/* HNA header refinements */
#section-hadith-not-authentic .section-header {
  margin-bottom: 24px !important;
}
#section-hadith-not-authentic .section-label span {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
#section-hadith-not-authentic .section-count {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 5px 14px !important;
  color: #f1cf58 !important;
  background: rgba(241,207,88,0.14) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
@media (max-width: 600px) {
  #section-hadith-not-authentic .section-header {
    margin-bottom: 18px !important;
  }
}