/* =========================================================
   Islamic library theme — deep green, gold and warm paper
   ========================================================= */
:root {
  --ink: #473c36;
  --ink-2: #5d4a3e;
  --muted: #7a6a5e;
  --paper: #fbf8f1;
  --card: #ffffff;
  --line: #e8e0d0;
  --sky: #c85414;          /* primary orange, manhajonline style (name kept so older rules still work) */
  --sky-deep: #8a4f1a;
  --sky-soft: #f8ebdd;
  --sun: #d49133;          /* gold */
  --sun-deep: #a05c19;
  --sun-soft: #fbf1df;
  --mint: #17a673;
  --mint-soft: #e2f6ee;
  --rose: #c43d3d;
  --rose-soft: #fbe7e7;
  --night: #473c36;        /* dark brown for heroes and footer */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --lift: 0 1px 2px rgba(71, 60, 54, .05), 0 12px 30px -14px rgba(71, 60, 54, .22);
  --font-head: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --font-ar: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
  /* 8-point star pattern used on dark sections */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d49133' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M32 6l7.5 18.5L58 32l-18.5 7.5L32 58l-7.5-18.5L6 32l18.5-7.5z'/%3E%3Crect x='17' y='17' width='30' height='30' transform='rotate(45 32 32)'/%3E%3Crect x='17' y='17' width='30' height='30'/%3E%3C/g%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); letter-spacing: -.01em; }
h1 { font-weight: 700; line-height: 1.1; }
h2 { font-weight: 700; line-height: 1.15; }
h3, h4 { font-weight: 600; line-height: 1.25; }
a { color: var(--sky-deep); text-decoration: none; }
a:hover { color: var(--sky); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }
.text-muted { color: var(--muted) !important; }
.min-w-0 { min-width: 0; }
.ar { font-family: var(--font-ar); display: block; line-height: 1.6; }

.skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2000; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { color: #fff; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--r-sm); padding: .6rem 1.1rem; }
.btn-brand { background: var(--sky); color: #fff; border: 1px solid var(--sky); }
.btn-brand:hover, .btn-brand:focus { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.btn-gold, .btn-sun { background: var(--sun); color: #1c1606; border: 1px solid var(--sun); }
.btn-gold:hover, .btn-sun:hover { background: var(--sun-deep); border-color: var(--sun-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: #fff; border-color: var(--ink-2); color: var(--ink); }
.btn-lg { padding: .85rem 1.4rem; font-size: 1.05rem; }
.btn-sm { padding: .3rem .7rem; font-size: .85rem; border-radius: 8px; }
.link-arrow { font-weight: 600; }
.btn-round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: inline-grid; place-items: center; font-size: 1.05rem; flex: none; }
.btn-round:hover:not(:disabled) { border-color: var(--sky); color: var(--sky); }
.btn-round:disabled { opacity: .4; }
.btn-live { background: var(--rose); border-color: var(--rose); color: #fff; font-weight: 700; }
.btn-live:hover { background: #a83232; color: #fff; }
.btn-live .live-dot { background: #fff; animation: none; }
.btn-link-muted { background: none; border: 0; padding: 0; color: var(--muted); font-size: .88rem; }
.btn-link-muted:hover { color: var(--rose); }
.btn-copy { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: .3rem .7rem; font-size: .85rem; font-weight: 600; color: var(--ink); }
.btn-copy:hover { border-color: var(--ink-2); }

/* ---------- Header (manhajonline style: maroon strip, logo + banner, brown menu bar, gold line) ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--sky); color: #fff; display: grid; place-items: center; font-size: 1.15rem; }
.brand-light, .brand-light:hover { color: #fff; }

.top-strip { background: linear-gradient(90deg, #473f36 0%, #631d1d 100%); color: #d9c6b8; font-size: .88rem; }
.top-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.top-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.top-links a { color: #d9c6b8; display: inline-flex; align-items: center; gap: .35rem; }
.top-links a:hover, .top-links a.active { color: #fff; }
.top-links i { color: var(--sun); font-size: .85rem; }
.top-tools { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
.top-strip .lang-btn { background: transparent; border-color: rgba(255, 255, 255, .25); color: #f3e6d8; padding: .18rem .7rem; }
.top-strip .lang-btn:hover, .top-strip .lang-btn[aria-expanded="true"] { border-color: var(--sun); color: #fff; }
.top-admin { color: #f3e6d8; font-weight: 500; }
.top-admin:hover { color: #fff; }
@media (max-width: 767.98px) { .top-links { display: none; } }

.site-branding { background: #fff; border-bottom: 1px solid var(--line); }
.branding-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.brand-logo img { display: block; max-height: 96px; max-width: 220px; width: auto; height: auto; }
.header-banner { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.header-banner img { display: block; max-width: 100%; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.header-banner.is-logo { justify-content: flex-start; }
.header-banner.is-logo img { max-height: 120px; }
.header-banner-text { flex-direction: column; align-items: center; text-align: center; color: var(--muted); }
.header-banner-text strong { font-family: var(--font-head); font-size: 1.6rem; color: var(--ink); }
.header-banner-text span { max-width: 60ch; }
.branding-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.branding-social { display: flex; gap: .4rem; }
.branding-social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; font-size: .95rem; }
.branding-social a:hover { background: #5e2221; color: #fff; }
.branding-search { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fafaf0; width: 240px; }
.branding-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .45rem .75rem; outline: none; color: var(--ink); }
.branding-search button { border: 0; background: var(--sky); color: #fff; width: 42px; }
.branding-search button:hover { background: var(--sky-deep); }
@media (max-width: 991.98px) {
  .branding-side { display: none; }
  .branding-inner { gap: 1rem; padding-block: .75rem; }
  .brand-logo img { max-height: 64px; max-width: 140px; }
  .header-banner img { max-height: 70px; }
  .header-banner.is-logo { justify-content: center; }
  .header-banner.is-logo img { max-height: 90px; }
  .header-banner-text span { display: none; }
}
@media (max-width: 575.98px) {
  .branding-inner { flex-direction: column; gap: .5rem; }
  .header-banner-text { display: none; }
}

.site-nav { background: transparent; padding: 0; }
.site-nav .nav-shell { background: var(--ink); border-radius: 10px 10px 0 0; padding: .55rem .75rem; position: relative; min-height: 60px; }
.site-nav .nav-shell::after { content: ""; position: absolute; inset-inline: 0; bottom: -5px; height: 5px; background: linear-gradient(90deg, #f6d600, #d49133 18%, #c85414 35%, #f0c419 52%, #b8743a 70%, #f6d600 85%, #a05c19); }
.site-nav .nav-link { color: #f3e6d8; font-weight: 700; padding: .5rem .7rem !important; border-radius: 8px; white-space: nowrap; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #ff7e36; background: transparent; }
.site-nav .nav-link.active { color: #fff; background: var(--sky); }
.site-nav .dropdown-menu { background: #39312c; border-color: #39312c; }
.site-nav .dropdown-item { color: #f5f0e6; }
.site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background: transparent; color: #ff7e36; }
/* Type menu items: their topics drop down on hover */
.site-nav .nav-caret { font-size: .7em; margin-inline-start: .3rem; opacity: .7; }
.site-nav .nav-hover .dropdown-menu { min-width: 220px; max-height: 70vh; overflow-y: auto; }
.site-nav .nav-hover .dropdown-divider { border-color: rgba(255, 255, 255, .15); }
.nav-sub-toggle { display: none; }
@media (min-width: 1200px) {
  .site-nav .nav-hover { position: relative; }
  .site-nav .nav-hover > .dropdown-menu { top: 100%; inset-inline-start: 0; margin-top: 0; }
  .site-nav .nav-hover:hover > .dropdown-menu, .site-nav .nav-hover:focus-within > .dropdown-menu { display: block; }
}
@media (max-width: 1199.98px) {
  .site-nav .nav-hover { display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav .nav-hover > .nav-link { flex: 1; }
  .nav-sub-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: #f3e6d8; }
  .nav-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .site-nav .nav-hover > .dropdown-menu { flex-basis: 100%; }
}
.site-nav .navbar-toggler { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); font-size: 1.15rem; }
.icon-btn:hover, .icon-btn.is-active { background: var(--sky-soft); color: var(--ink); }
.site-nav .icon-btn { color: #f3e6d8; }
.site-nav .icon-btn:hover, .site-nav .icon-btn.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.site-nav .btn-gold { background: radial-gradient(#d49133, #c85414); border: 0; color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .4); }
.site-nav .btn-gold:hover { background: radial-gradient(#fff2dd, #a18453); color: var(--ink); text-shadow: none; }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--lift); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; display: flex; gap: .6rem; align-items: center; }
.dropdown-item:active { background: var(--sky); }
@media (max-width: 1199.98px) {
  .site-nav .nav-shell { border-radius: 0; }
  .site-nav > .container-xl { max-width: none; }
  .site-nav .navbar-collapse { padding: .75rem 0 1rem; }
  .nav-actions { margin-top: .75rem; }
}

/* ---------- Avatars / pills ---------- */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; }
.avatar-initials { display: inline-grid; place-items: center; font-weight: 700; font-family: var(--font-head); }
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .22rem .65rem; border-radius: 999px; }
.pill-ok { background: var(--mint-soft); color: #0d7a53; }
.pill-warn { background: var(--sun-soft); color: #8a4f1a; }
.pill-bad { background: var(--rose-soft); color: #a52a2a; }
.pill-muted { background: #f1ebe0; color: var(--muted); }
.pill-sky { background: var(--sky-soft); color: var(--sky-deep); }

/* ---------- Flash ---------- */
.flash-stack { position: fixed; top: 84px; right: 16px; z-index: 1080; width: min(420px, calc(100% - 32px)); }
.flash-stack .alert { border: 0; border-radius: var(--r-md); box-shadow: var(--lift); font-weight: 500; }

/* ---------- Layout ---------- */
.section { padding: 4.5rem 0; }
.section-tight { padding: 2.75rem 0; }
.section-title { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .4rem; }
.section-lead { color: var(--muted); max-width: 60ch; margin-bottom: 0; }
.section-row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-head { padding: 3rem 0 2.25rem; background: var(--night) var(--pattern); color: #fff; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; color: #fff; }
.page-head p { color: #e6d8c6; margin: .6rem 0 0; max-width: 62ch; font-size: 1.08rem; }
.page-head-ar { color: var(--sun); font-size: 1.5rem; margin-bottom: .1rem; }
.page-head .hero-search { background: #fff; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; }
.panel-title { font-size: 1.2rem; margin-bottom: 1rem; }
.prose { font-size: 1.07rem; line-height: 1.8; color: var(--ink-2); max-width: 72ch; }

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 4rem; background: var(--night) var(--pattern); color: #fff; overflow: hidden; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); margin-bottom: 1.1rem; max-width: 14ch; color: #fff; }
.hero .lead { color: #e6d8c6; font-size: 1.15rem; max-width: 48ch; margin-bottom: 1.8rem; }
.hero-basmala { font-family: var(--font-ar); color: var(--sun); font-size: 1.45rem; margin-bottom: .75rem; text-align: left; }
.hero-search { display: flex; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .4rem; max-width: 560px; }
.hero-search input { flex: 1; border: 0; background: transparent; padding: .6rem .75rem; outline: none; min-width: 0; color: var(--ink); }
.hero-facts { display: flex; gap: 2.25rem; margin-top: 2.25rem; flex-wrap: wrap; }
.hero-facts strong { display: block; font-family: var(--font-head); font-size: 1.8rem; line-height: 1; }
.hero-facts span { color: var(--muted); font-size: .92rem; }
.hero .hero-facts strong { color: var(--sun); }
.hero .hero-facts span { color: #cdbba7; }

.new-board { background: rgba(255, 255, 255, .06); border: 1px solid rgba(212, 145, 51, .35); border-radius: 22px; padding: 1.1rem; backdrop-filter: blur(6px); }
.new-board-head { color: var(--sun); font-weight: 700; padding: .25rem .5rem .75rem; }
.new-board ol { list-style: none; margin: 0; padding: 0; }
.new-board li a { display: flex; align-items: center; gap: .85rem; padding: .7rem .5rem; border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; border-radius: 10px; }
.new-board li a:hover { background: rgba(255, 255, 255, .06); }
.new-board strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-board small { display: block; color: #cdbba7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--night); }
.new-board-empty { color: #cdbba7; padding: 1.5rem .5rem; margin: 0; }

/* Kinds strip under the hero */
.kind-strip { margin-top: -1.75rem; position: relative; z-index: 2; }
.kind-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; }
.kind-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; color: var(--ink); box-shadow: var(--lift); }
.kind-card i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); color: var(--sky); font-size: 1.25rem; }
.kind-card strong { font-family: var(--font-head); font-size: 1.08rem; }
.kind-card small { color: var(--muted); }
.kind-card:hover { border-color: var(--sun); color: var(--ink); }
@media (max-width: 991.98px) { .kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kind-grid .kind-card:last-child { grid-column: span 2; } }
@media (max-width: 575.98px) {
  .kind-grid { gap: .6rem; }
  .kind-card { min-width: 0; padding: .75rem; column-gap: .6rem; }
  .kind-card i { width: 38px; height: 38px; font-size: 1.1rem; }
  .kind-card strong { font-size: .95rem; overflow-wrap: anywhere; }
  .kind-card small { font-size: .8rem; }
}

/* ---------- Filters ---------- */
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filter-bar > .form-control { flex: 1 1 240px; width: auto; }
.filter-bar > .form-select { flex: 0 1 220px; width: auto; }
.kind-tabs, .tab-strip { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
/* Scholar page: topics of a type, then the series of one topic */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.topic-grid .kind-card { min-width: 0; }
.topic-grid .kind-card strong { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
.topic-crumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; color: var(--muted); font-size: .95rem; }
.topic-crumb a { color: var(--sky); font-weight: 500; }
.topic-crumb strong { color: var(--ink); font-family: var(--font-head); font-size: 1.1rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: .42rem 1rem; font-weight: 500; font-size: .93rem; }
.chip:hover { border-color: var(--sky); color: var(--sky-deep); }
.chip.active { background: var(--sky); border-color: var(--sky); color: #fff; }
.form-control, .form-select { border-color: var(--line); border-radius: var(--r-sm); padding: .65rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--sky); box-shadow: 0 0 0 .2rem rgba(200, 84, 20, .15); }
.form-label { font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.form-check-input:checked { background-color: var(--sky); border-color: var(--sky); }
.pager { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 2rem; }
.pager-gap { padding: .4rem .3rem; color: var(--muted); }

/* ---------- Drawn covers ---------- */
.cover-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: 12% 10% 10% 14%; color: #fff; position: relative; overflow: hidden;
  background: var(--pattern), linear-gradient(160deg, hsl(var(--h) 45% 26%), hsl(calc(var(--h) + 20) 50% 14%)); }
.cover-fallback::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(212, 145, 51, .45); border-radius: inherit; pointer-events: none; }
.cover-fallback i { position: absolute; top: 12%; left: 14%; color: var(--sun); font-size: 1.6rem; }
.cover-fallback b { font-family: var(--font-head); font-size: clamp(.95rem, 1.5vw, 1.2rem); line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cover-fallback small { font-size: .75rem; color: #e6d9a8; border-top: 1px solid rgba(212, 145, 51, .45); padding-top: .4rem; }

/* ---------- Series cards ---------- */
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.series-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.series-card:hover { border-color: #d8c3a5; box-shadow: var(--lift); }
.series-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--sky-soft); }
.series-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-tag { position: absolute; right: 10px; bottom: 10px; background: rgba(57, 49, 44, .85); color: #fff; font-size: .75rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; }
.series-body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.series-kicker { font-size: .78rem; font-weight: 700; color: var(--sun-deep); text-transform: uppercase; letter-spacing: .04em; }
.series-title { font-size: 1.12rem; margin: .25rem 0 .1rem; }
.series-title a { color: var(--ink); }
.series-title a:hover { color: var(--sky-deep); }
.series-ar { color: var(--muted); font-size: 1.05rem; text-align: right; }
.series-scholar { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); font-size: .9rem; margin: .5rem 0 .75rem; }
.series-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--muted); font-size: .86rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.series-meta .series-comments { color: inherit; text-decoration: none; }
.series-meta .series-comments:hover { color: var(--sky-deep); }

/* ---------- Book cards ---------- */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.6rem 1.25rem; }
.book-card { display: flex; flex-direction: column; }
.book-thumb { display: block; aspect-ratio: 3 / 4; border-radius: 4px 12px 12px 4px; overflow: hidden; background: var(--sky-soft); box-shadow: 0 1px 2px rgba(71, 60, 54, .08), 0 14px 24px -14px rgba(71, 60, 54, .55); transition: transform .2s; }
.book-thumb:hover { transform: translateY(-3px); }
.book-thumb img { width: 100%; height: 100%; object-fit: cover; }
.book-thumb .cover-fallback::before { border-radius: 2px 8px 8px 2px; }
.book-body { padding: .75rem .1rem 0; display: flex; flex-direction: column; flex: 1; }
.book-cat { font-size: .78rem; font-weight: 700; color: var(--sun-deep); text-transform: uppercase; letter-spacing: .04em; }
.book-title { font-size: 1rem; margin: .15rem 0 0; line-height: 1.3; }
.book-title a { color: var(--ink); }
.book-ar { color: var(--muted); font-size: .98rem; text-align: right; }
.book-author { color: var(--muted); font-size: .88rem; margin: .1rem 0 0; }
.book-foot { display: flex; gap: .9rem; margin-top: auto; padding-top: .4rem; color: var(--muted); font-size: .82rem; }

.book-hero-cover { aspect-ratio: 3 / 4; border-radius: 6px 16px 16px 6px; overflow: hidden; background: var(--sky-soft); box-shadow: 0 2px 4px rgba(71, 60, 54, .1), 0 30px 50px -26px rgba(71, 60, 54, .7); max-width: 300px; }
.book-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-hero-cover .cover-fallback b { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.book-name { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: .25rem 0 .1rem; }
.book-name-ar { font-size: 1.6rem; color: var(--ink-2); text-align: left; }
.facts-inline { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--muted); }
.book-summary { border-left: 4px solid var(--sun); background: #fff; border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1rem 1.25rem; margin-top: 1.5rem; }
.book-summary h2 { font-size: 1rem; color: var(--muted); margin: 0 0 .4rem; font-family: var(--font-body); }
.book-summary p { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.explain-row { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .8rem 1rem; color: var(--ink); }
.explain-row:hover { border-color: var(--sky); color: var(--ink); }
.explain-row > i:first-child { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sky-soft); color: var(--sky); }
.explain-row small { display: block; color: var(--muted); }

/* PDF reader */
.reader { margin-top: 2.5rem; background: #3b3f3d; border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: 80px; }
.reader-bar { display: flex; align-items: center; gap: 1rem; padding: .6rem .75rem .6rem 1.1rem; background: var(--night); color: #fff; }
.reader-bar strong { flex: 1; min-width: 0; }
.reader-page { color: #e6d8c6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reader-bar .btn-round { background: transparent; border-color: rgba(255, 255, 255, .2); color: #fff; width: 36px; height: 36px; }
.reader-pages { height: min(82vh, 1100px); overflow: auto; padding: 1rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.reader-page-box { background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); flex: none; max-width: none; }
.reader-loading { color: #ddd; text-align: center; margin: auto; }

/* ---------- Scholars ---------- */
.scholar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.1rem; }
.scholar-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1rem 1.1rem; text-align: center; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: .15rem; transition: border-color .2s, box-shadow .2s; }
.scholar-card:hover { border-color: var(--sun); box-shadow: var(--lift); color: var(--ink); }
.scholar-card .avatar { margin-bottom: .6rem; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sun-soft); }
.scholar-card h3 { font-size: 1.02rem; margin: 0; }
.scholar-card .ar { color: var(--muted); font-size: 1rem; }
.scholar-counts { display: flex; gap: .9rem; color: var(--muted); font-size: .84rem; margin-top: .35rem; }
.scholar-hero { background: var(--night) var(--pattern); color: #fff; padding: 3rem 0 2.5rem; }
.scholar-hero-grid { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.scholar-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .6rem; }
.scholar-ar { color: var(--sun); font-size: 1.5rem; text-align: left; }
.scholar-photo { box-shadow: 0 0 0 4px rgba(212, 145, 51, .6); }
.bio-panel summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.bio-panel summary::after { content: "\F282"; font-family: bootstrap-icons; color: var(--muted); transition: transform .2s; }
.bio-panel[open] summary::after { transform: rotate(180deg); }

.hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-pills span { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); color: #f3eadf; border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; }

/* ---------- Series page ---------- */
.series-hero { background: var(--night) var(--pattern); color: #fff; padding: 2.25rem 0 2.5rem; }
.crumb { font-size: .9rem; color: #cdbba7; margin-bottom: 1.25rem; }
.crumb a { color: #e6d9a8; }
.series-hero-grid { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: center; }
.series-hero-cover { aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.series-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.series-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 .8rem; }
.series-hero-ar { color: var(--sun); font-size: 1.45rem; text-align: left; }
.teacher-line { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 600; margin-bottom: 1rem; }
.teacher-line:hover { color: var(--sun); }
.teacher-line.dark { color: var(--ink); margin: .75rem 0 0; }
.teacher-line.dark:hover { color: var(--sky); }
.book-link { display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem; padding: .75rem 1rem; border: 1px solid rgba(212, 145, 51, .4); border-radius: var(--r-md); background: rgba(212, 145, 51, .08); max-width: 560px; }
.book-link > i { font-size: 1.6rem; color: var(--sun); }
.book-link small { display: block; color: #cdbba7; font-size: .78rem; }
.book-link a:not(.btn) { color: #fff; font-weight: 600; }
.surah-link { flex-wrap: wrap; }
.surah-link .min-w-0 { flex: 1 1 180px; }
.surah-link .form-select { margin-top: .2rem; background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; font-weight: 600; max-width: 280px; }
.surah-link .form-select option { color: var(--ink); }
.surah-link .surah-range { color: #fff; font-weight: 600; }
@media (max-width: 767.98px) { .series-hero-grid { grid-template-columns: 1fr; } .series-hero-cover { width: 140px; } }

.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.player-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.player-stage { position: relative; background: #000; }
.player-stage.is-video { aspect-ratio: 16 / 9; }
.player-stage.is-video video, .player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-stage.is-audio { background: var(--night) var(--pattern); padding: 2rem 1.25rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.player-stage.is-audio audio { width: 100%; }
.audio-art { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; color: var(--night); background: var(--sun); box-shadow: 0 0 0 10px rgba(212, 145, 51, .18); }
.player-stage.playing .audio-art { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 20px rgba(212, 145, 51, .08); } }
.player-info { padding: 1rem 1.2rem 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.player-info h2 { font-size: 1.25rem; margin: .1rem 0 0; }
.player-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.speed { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.speed button { border: 0; background: #fff; padding: .45rem .6rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.speed button.on { background: var(--sky); color: #fff; }

.playlist { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: sticky; top: 88px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); }
.playlist-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.playlist-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.playlist-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.playlist-list li:last-child { border-bottom: 0; }
.pl-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .7rem .4rem .7rem 1rem; color: var(--ink); }
.pl-main:hover { color: var(--ink); background: var(--paper); }
.pl-num { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .82rem; font-weight: 700; background: var(--paper); color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-t { flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; }
.pl-thumb { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: var(--paper); }
.pl-t small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; margin-top: .1rem; }
.pl-ico { color: var(--line); font-size: 1.35rem; }
.pl-dl { padding: .7rem 1rem .7rem .5rem; color: var(--muted); }
.pl-dl:hover { color: var(--sky); }
.playlist-list li.current { background: var(--sky-soft); }
.playlist-list li.current .pl-num { background: var(--sky); color: #fff; }
.playlist-list li.current .pl-ico { color: var(--sky); }
@media (max-width: 991.98px) {
  .player-layout { grid-template-columns: 1fr; }
  .playlist { position: static; max-height: 520px; }
}

/* ---------- Topics ---------- */
.topic-band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; }
.topic-card { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); background: var(--paper); }
.topic-card:hover { border-color: var(--sun); color: var(--ink); }
.topic-card span:first-child { font-weight: 600; }
.topic-card small { color: var(--muted); font-weight: 400; margin-left: .35rem; }
.topic-card .ar { color: var(--sky-deep); font-size: 1.15rem; }

/* ---------- Home: events / posts / donate ---------- */
.event-mini, .post-row { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .75rem; color: var(--ink); }
.event-mini + .event-mini { margin-top: .75rem; }
.event-mini:hover, .post-row:hover { border-color: var(--sky); color: var(--ink); }
.event-mini .date-tile { width: 60px; flex: none; }
.event-mini small, .post-row small { display: block; color: var(--muted); }
.post-row img { width: 110px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
.donate-band { background: var(--night) var(--pattern); color: #fff; padding: 3rem 0; margin-top: 2rem; }
.donate-band .container-xl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.donate-band h2 { color: #fff; margin: 0 0 .3rem; }
.donate-band p { color: #e6d8c6; margin: 0; max-width: 60ch; }

.ayah-card { background: var(--night) var(--pattern); color: #fff; border-radius: 24px; padding: 2.5rem 2rem; margin: 0; border: 1px solid rgba(212, 145, 51, .35); }
.ayah-card p { font-family: var(--font-ar); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.9; color: var(--sun); margin: 0 0 1.25rem; }
.ayah-card footer { color: #e6d8c6; font-size: 1.02rem; }
.ayah-card cite { display: block; margin-top: .5rem; color: #e6d9a8; font-style: normal; font-weight: 600; }

/* ---------- Donations ---------- */
.donate-hero { background: var(--night) var(--pattern); color: #fff; padding: 4rem 0; }
.donate-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.3rem); max-width: 18ch; }
.donate-hero p { color: #e6d8c6; max-width: 55ch; font-size: 1.1rem; }
.raised { font-family: var(--font-head); font-weight: 700; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; color: var(--sun); }
.goal-bar { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 1.1rem 0 .6rem; }
.goal-bar span { display: block; height: 100%; background: var(--sun); border-radius: 999px; }
.goal-meta { display: flex; justify-content: space-between; color: #e6d8c6; font-size: .95rem; }
.pay-method { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.2rem; background: #fff; border-left: 5px solid var(--m, var(--sky)); }
.pay-method .name { font-weight: 700; font-family: var(--font-head); font-size: 1.1rem; }
.pay-method .num { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; margin: .5rem 0 .6rem; font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */
.table-clean { width: 100%; margin: 0; }
.table-clean th { font-size: .82rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: .75rem 1rem; white-space: nowrap; background: #fbfaf6; }
.table-clean td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table-clean tr:last-child td { border-bottom: 0; }
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Events / blog ---------- */
.event-row { display: grid; grid-template-columns: 88px 1fr auto; gap: 1.25rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.event-row + .event-row { margin-top: 1rem; }
.date-tile { text-align: center; border-radius: var(--r-md); background: var(--sky-soft); padding: .55rem 0; }
.date-tile .m { display: block; font-size: .78rem; font-weight: 700; color: var(--sky-deep); text-transform: uppercase; }
.date-tile .d { display: block; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.event-row h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.event-row .meta { color: var(--muted); font-size: .92rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.event-thumb { width: 120px; height: 84px; border-radius: 12px; object-fit: cover; }
@media (max-width: 640px) { .event-row { grid-template-columns: 70px 1fr; } .event-thumb { display: none; } }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card .b { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.2rem; }
.post-card h3 a { color: var(--ink); }
.post-card .date { color: var(--muted); font-size: .88rem; margin-bottom: .4rem; }

/* ---------- Empty ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty-state i { font-size: 2.4rem; color: var(--sun); display: block; margin-bottom: .6rem; }
.empty-state h4 { color: var(--ink); font-size: 1.15rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night) var(--pattern); color: #d8c8b4; padding: 4rem 0 1.5rem; }
.donate-band + .site-footer { margin-top: 0; border-top: 1px solid rgba(212, 145, 51, .2); }
main + .site-footer { margin-top: 0; }
.site-footer h6 { color: var(--sun); font-family: var(--font-body); font-weight: 700; margin-bottom: 1rem; }
.footer-text { max-width: 38ch; }
.footer-logo { height: 44px; width: auto; max-width: 120px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: #d8c8b4; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; }
.footer-social a:hover { background: var(--sun); color: var(--night); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding-top: 1.25rem; font-size: .9rem; display: flex; justify-content: space-between; }
.footer-admin { color: #8f7a68; font-size: .82rem; }
.footer-admin:hover { color: #fff; }
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .4); z-index: 1050; }
.wa-float:hover { color: #fff; background: #1ebe5a; }

/* ---------- Admin sign-in ---------- */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--night) var(--pattern); }
.login-box { width: 100%; max-width: 420px; }
.login-box .brand { color: #fff; justify-content: center; display: flex; }
.login-box .text-muted.small { color: #cdbba7 !important; }

/* =========================================================
   Live classes
   ========================================================= */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); margin-right: .4rem; vertical-align: middle; animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(196, 61, 61, .55); } 70% { box-shadow: 0 0 0 9px rgba(196, 61, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 61, 61, 0); } }
.live-bar { display: block; background: var(--sky-deep); color: #fff; font-size: .93rem; }
.live-bar.is-live { background: #7a1f1f; }
.live-bar:hover { color: #fff; }
.live-bar .container-xl { display: flex; align-items: center; gap: .55rem; padding-top: .55rem; padding-bottom: .55rem; min-width: 0; }
.live-bar .live-dot { background: #ff6b6b; }
.live-bar-cta { margin-left: auto; font-weight: 700; color: var(--sun); white-space: nowrap; }

.live-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .22rem .7rem; background: var(--sky-soft); color: var(--sky-deep); }
.live-badge.is-live { background: var(--rose-soft); color: var(--rose); }
.live-badge.is-live .live-dot { margin-right: .1rem; }
.live-badge.is-soon { background: var(--sun-soft); color: #8a4f1a; }
.live-badge.is-ended, .live-badge.is-cancelled { background: #f1ebe0; color: var(--muted); }
.live-badge.is-cancelled { text-decoration: line-through; }
.platform-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--p); border: 1px solid color-mix(in srgb, var(--p) 35%, white); border-radius: 999px; padding: .2rem .65rem; background: #fff; }

.live-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .75rem 0 1.25rem; }
.live-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 0 0 .3rem; }
.host-controls { background: #fff; border: 1px dashed var(--line); border-radius: var(--r-md); padding: .6rem; }
.live-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 1.5rem; align-items: start; }
.live-player { position: relative; aspect-ratio: 16 / 9; background: #1f1814; border-radius: var(--r-lg); overflow: hidden; }
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-lock { aspect-ratio: 16 / 9; background: var(--night) var(--pattern); color: #ece0d0; border-radius: var(--r-lg); display: grid; place-content: center; text-align: center; padding: 2rem; gap: .4rem; }
.live-lock > i { font-size: 2.4rem; color: var(--sun); }
.live-lock h2 { color: #fff; font-size: 1.35rem; margin: 0; }
.countdown { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; background: var(--sun-soft); border: 1px solid #ecd995; border-radius: var(--r-md); padding: .8rem 1.1rem; margin-bottom: 1rem; }
.countdown > span { font-weight: 700; color: #8a4f1a; }
.cd-units { display: flex; align-items: baseline; gap: .3rem; }
.cd-units b { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.cd-units small { color: var(--muted); margin-right: .55rem; }

.live-chat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; height: min(680px, calc(100vh - 110px)); position: sticky; top: 88px; overflow: hidden; }
.lc-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.lc-list { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.lc-empty { color: var(--muted); text-align: center; margin: auto 0; font-size: .93rem; }
.lc { display: flex; gap: .6rem; align-items: flex-start; position: relative; }
.lc-body { min-width: 0; flex: 1; }
.lc-name { font-weight: 700; font-size: .88rem; }
.lc-name time { font-weight: 400; color: var(--muted); font-size: .76rem; margin-left: .2rem; }
.lc-body p { margin: .1rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.lc.is-host .lc-body p { background: var(--sun-soft); border-radius: 10px; padding: .35rem .6rem; display: inline-block; }
.lc-tag { background: var(--sky); color: #fff; border-radius: 5px; font-size: .68rem; padding: .05rem .35rem; vertical-align: 1px; }
.lc-del { border: 0; background: none; color: var(--muted); opacity: 0; padding: 0 .2rem; }
.lc:hover .lc-del, .lc-del:focus { opacity: 1; }
.lc-form { display: grid; gap: .45rem; padding: .75rem; border-top: 1px solid var(--line); }
.lc-row { display: flex; gap: .5rem; }
.lc-form textarea, .lc-name-input { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; font: inherit; max-height: 120px; }
.lc-name-input { font-size: .9rem; padding: .4rem .75rem; }
.lc-form textarea:focus, .lc-name-input:focus { outline: 2px solid var(--sky); outline-offset: -1px; }
.lc-note { padding: .85rem 1rem; border-top: 1px solid var(--line); margin: 0; color: var(--muted); font-size: .93rem; text-align: center; }

/* Questions (Su'aalo) */
.qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.75rem; align-items: start; }
.qa-layout > .qa-ask { order: 2; position: sticky; top: 88px; }
.qa-layout .filter-bar .kind-tabs { margin: 0; flex-basis: 100%; }
.qa-list { display: grid; gap: 1rem; }
.qa { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.35rem; }
.qa-head { display: flex; align-items: center; gap: .7rem; }
.qa-head strong { font-size: .95rem; }
.qa-tag { margin-inline-start: auto; flex-shrink: 0; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .2rem .65rem; background: var(--sun-soft); color: var(--sun-deep); }
.qa-tag.is-done { background: var(--mint-soft); color: var(--mint); }
.qa-q { margin-top: .75rem; font-size: 1.05rem; font-weight: 500; overflow-wrap: anywhere; }
.qa-q a { color: var(--ink); text-decoration: none; }
.qa-q a:hover { color: var(--sky-deep); }
.qa-a { margin-top: .9rem; padding: .9rem 1rem; background: var(--paper); border-inline-start: 3px solid var(--mint); border-radius: 10px; }
.qa-a-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-weight: 700; font-size: .88rem; color: var(--mint); margin-bottom: .4rem; }
.qa-a-head a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); }
.qa-a .prose { overflow-wrap: anywhere; }
.qa-actions { margin-top: .6rem; text-align: end; }
.qa-media { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .6rem; }
.qa-audio { width: 100%; max-width: 520px; height: 40px; display: block; }
.qa-a > .qa-audio { margin: .4rem 0; }
.qa-yt, .qa-yt-frame { display: block; position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; overflow: hidden; padding: 0; margin: .2rem 0 .7rem; background: #000; }
.qa-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.qa-yt:hover img { opacity: 1; }
.qa-yt-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 44px; border-radius: 12px; background: #e62117; color: #fff; display: grid; place-items: center; font-size: 1.8rem; }
.qa-single { max-width: 820px; }
.qa-foot { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; font-size: .88rem; }
.qa-foot:empty { display: none; }
.qa-foot > a { color: var(--muted); text-decoration: none; }
.qa-foot > a:hover { color: var(--sky-deep); }
.qa-books { margin-top: .9rem; display: grid; gap: .6rem; }
.qa-books-title { font-weight: 700; font-size: .85rem; color: var(--ink-2); }
.qa-book { display: flex; gap: .8rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .55rem; }
.qa-book-cover { width: 48px; height: 64px; border-radius: 6px; overflow: hidden; flex: none; background: var(--sun-soft); display: block; }
.qa-book-cover img, .qa-book-cover > * { width: 100%; height: 100%; object-fit: cover; }
.qa-book-title { font-weight: 600; color: var(--ink); text-decoration: none; display: block; overflow-wrap: anywhere; }
.qa-book-title:hover { color: var(--sky-deep); }

/* Question cards (home) and Su'aal & Jawaab article cards */
.qa-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.qa-card, .qa-article-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.qa-card:hover, .qa-article-card:hover { border-color: var(--sky); transform: translateY(-2px); color: var(--ink); }
.qa-card .qa-tag { margin: 0; }
.qa-card-q { font-weight: 500; margin: 0 0 .8rem; overflow-wrap: anywhere; }
.qa-card-meta { margin-top: auto; display: flex; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .82rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.qa-card-meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.qa-article-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.qa-article-card { border-top: 4px solid var(--mint); }
.qa-article-kicker { display: inline-flex; align-items: center; gap: .35rem; color: var(--mint); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.qa-article-card h3 { font-size: 1.12rem; margin: .45rem 0 .5rem; line-height: 1.35; overflow-wrap: anywhere; }
.qa-article-card p { color: var(--ink-2); font-size: .92rem; margin: 0 0 .8rem; overflow-wrap: anywhere; }

/* One question shown as an article */
.qa-article { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 2.2rem); }
.qa-article h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: .5rem 0 .8rem; overflow-wrap: anywhere; }
.qa-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }
.qa-article-meta a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); text-decoration: none; }
.qa-article-q { background: var(--sun-soft); border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.qa-article-q-label { font-weight: 700; font-size: .85rem; color: var(--sun-deep); margin-bottom: .3rem; }
.qa-article-q-label span { font-weight: 500; color: var(--ink-2); }
.qa-article-q p { margin: 0; font-size: 1.05rem; font-weight: 500; overflow-wrap: anywhere; }
.qa-article .qa-a { background: none; border: 0; padding: 0; }
.qa-article .qa-a .prose { font-size: 1.06rem; line-height: 1.8; }
.qa-single .qa-q { font-size: 1.2rem; }
@media (max-width: 991.98px) {
  .qa-layout { grid-template-columns: 1fr; }
  .qa-layout > .qa-ask { order: 0; position: static; }
}

/* Lesson comments */
.comments .panel-title { display: flex; align-items: center; gap: .45rem; }
.cm-form { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.cm-form textarea { flex: 1; resize: vertical; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; font: inherit; min-height: 64px; max-height: 260px; }
.cm-form textarea:focus { outline: 2px solid var(--sky); outline-offset: -1px; }
.cm-form-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.cm-label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 600; }
.cm-label .lc-name-input, .cm-label textarea { font-weight: 400; font-size: 1rem; }
.cm-form .is-invalid { border-color: var(--rose); outline: 2px solid var(--rose-soft); }
.cm-error { margin: 0; color: var(--rose); font-size: .88rem; font-weight: 500; }
.cm-as { margin: 0; color: var(--muted); font-size: .88rem; }
.cm-replies .cm-form { margin: .6rem 0 .2rem; }
.cm-list { display: flex; flex-direction: column; gap: 1.1rem; }
.cm { display: flex; gap: .7rem; align-items: flex-start; }
.cm-body { min-width: 0; flex: 1; }
.cm-name { font-weight: 700; font-size: .9rem; }
.cm-name time { font-weight: 400; color: var(--muted); font-size: .78rem; margin-left: .25rem; }
.cm-body p { margin: .15rem 0 0; overflow-wrap: anywhere; }
.cm.is-host > .cm-body > p { background: var(--sun-soft); border-radius: 10px; padding: .35rem .6rem; display: inline-block; }
.cm-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .3rem; }
.cm-actions button { border: 0; background: none; padding: 0; color: var(--muted); font-size: .82rem; font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.cm-actions button:hover { color: var(--ink); }
.cm-actions .cm-like.on { color: #e0245e; }
.cm-replies { display: flex; flex-direction: column; gap: .9rem; }
.cm-replies:not(:empty) { margin-top: .8rem; padding-left: .9rem; border-left: 2px solid var(--line); }
.cm-new > .cm-body > p { animation: cm-flash 1.6s ease-out; }
@keyframes cm-flash { from { background: var(--sun-soft); } }
.comments .lc-empty { margin: .5rem 0 0; }

.live-list { display: grid; gap: .75rem; }
.live-row { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem 1.1rem; color: var(--ink); }
.live-row:hover { border-color: #d8c3a5; color: var(--ink); box-shadow: var(--lift); }
.live-row .date-tile { width: 64px; flex: none; }
.live-row h3 { font-size: 1.1rem; margin: 0; }
.live-row p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.live-now-card { display: grid; gap: .4rem; justify-items: start; background: linear-gradient(120deg, #4a1414, var(--night) 70%); color: #fff; border-radius: var(--r-lg); padding: 1.5rem 1.7rem; margin-bottom: 1rem; }
.live-now-card.is-soon { background: var(--night) var(--pattern); border: 1px solid rgba(212, 145, 51, .35); }
.live-now-card:hover { color: #fff; }
.live-now-card h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: .2rem 0 0; }
.live-now-card p { color: #e6d8c6; margin: 0 0 .5rem; }
@media (max-width: 991.98px) {
  .live-layout { grid-template-columns: 1fr; }
  .live-chat { position: static; height: 520px; }
}

/* =========================================================
   Language switcher
   ========================================================= */
.lang-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: .38rem .8rem; font-weight: 600; font-size: .88rem; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--sky); color: var(--sky-deep); }
.lang-switch .dropdown-item.active { background: var(--sky-soft); color: var(--sky-deep); }
.lang-switch .dropdown-item[lang="ar"] { font-family: var(--font-ar); font-size: 1.1rem; }
.footer-langs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.footer-langs a { border: 1px solid rgba(255, 255, 255, .18); color: #d8c8b4; border-radius: 999px; padding: .25rem .8rem; font-size: .88rem; }
.footer-langs a:hover, .footer-langs a.active { border-color: var(--sun); color: var(--sun); }
.footer-langs a[lang="ar"] { font-family: var(--font-ar); }
@media (min-width: 1200px) { .lang-switch { margin-inline-start: .5rem; } }

/* =========================================================
   Arabic (right to left)
   ========================================================= */
[dir="rtl"] { --font-head: 'Noto Kufi Arabic', 'Roboto', sans-serif; --font-body: 'Noto Naskh Arabic', 'Roboto', Tahoma, sans-serif; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .hero h1 { line-height: 1.3; }
[dir="rtl"] .hero-basmala { text-align: right; }
[dir="rtl"] .series-kicker, [dir="rtl"] .book-cat, [dir="rtl"] .date-tile .m { text-transform: none; letter-spacing: 0; }
[dir="rtl"] .flash-stack { right: auto; left: 16px; }
[dir="rtl"] .wa-float { right: auto; left: 20px; }
[dir="rtl"] .media-tag { right: auto; left: 10px; }
[dir="rtl"] .book-summary { border-left: 0; border-right: 4px solid var(--sun); border-radius: var(--r-md) 0 0 var(--r-md); }
[dir="rtl"] .live-bar-cta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .pl-main { padding: .7rem 1rem .7rem .4rem; }
[dir="rtl"] .pl-dl { padding: .7rem .5rem .7rem 1rem; }
[dir="rtl"] .lc-name time { margin-left: 0; margin-right: .2rem; }
[dir="rtl"] .cm-name time { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .cm-replies:not(:empty) { padding-left: 0; border-left: 0; padding-right: .9rem; border-right: 2px solid var(--line); }
[dir="rtl"] .topic-card small { margin-left: 0; margin-right: .35rem; }
[dir="rtl"] .cd-units small { margin-right: 0; margin-left: .55rem; }
[dir="rtl"] .cover-fallback { padding: 12% 14% 10% 10%; }
[dir="rtl"] .cover-fallback i { left: auto; right: 14%; }
[dir="rtl"] .flip-x, [dir="rtl"] #prevBtn i, [dir="rtl"] #nextBtn i { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .pay-method { border-left: 1px solid var(--line); border-right: 5px solid var(--m, var(--sky)); }
[dir="rtl"] .bio-panel summary::after { margin-right: auto; }
[dir="rtl"] .hero-search input, [dir="rtl"] .filter-bar .form-control { text-align: right; }
[dir="rtl"] .footer-bottom { flex-direction: row; }

/* =========================================================
   Quran
   ========================================================= */
:root { --q-size: 1.9rem; --font-quran: 'Amiri Quran', 'Amiri', 'Traditional Arabic', serif; }
.quran-title-ar { font-family: var(--font-quran); font-size: 2rem; }
.quran-tabs { display: flex; gap: .5rem; margin-top: 1.25rem; }
.quran-tabs .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #f3eadf; }
.quran-tabs .chip.active { background: var(--sun); border-color: var(--sun); color: var(--night); }
.crumb-link { color: #e6d9a8; font-size: .9rem; display: inline-block; margin-bottom: 1rem; }
.crumb-link:hover { color: #fff; }

.quick-listen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .75rem 1rem; margin-bottom: 1.25rem; }
.quick-listen > i { font-size: 1.3rem; color: var(--sky); }
.quick-listen label { font-weight: 600; }
.quick-listen .form-select { flex: 1 1 260px; max-width: 420px; }

.surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; }
.surah-card { position: relative; display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.surah-card:hover { border-color: var(--sun); box-shadow: var(--lift); }
.surah-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; color: var(--ink); }
.surah-link:hover { color: var(--ink); }
.surah-num { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--sky-deep); background: var(--sky-soft); clip-path: polygon(50% 0, 64% 14%, 85% 15%, 86% 36%, 100% 50%, 86% 64%, 85% 85%, 64% 86%, 50% 100%, 36% 86%, 15% 85%, 14% 64%, 0 50%, 14% 36%, 15% 15%, 36% 14%); font-variant-numeric: tabular-nums; }
.surah-names { flex: 1; min-width: 0; }
.surah-names strong, .track-names strong { display: block; font-weight: 600; }
.surah-names small, .track-names small { display: block; color: var(--muted); font-size: .8rem; }
.surah-ar { font-family: var(--font-quran); font-size: 1.35rem; color: var(--sky-deep); white-space: nowrap; }
.surah-play { width: 46px; flex: none; border: 0; border-inline-start: 1px solid var(--line); background: transparent; color: var(--sky); font-size: 1.4rem; border-radius: 0 var(--r-md) var(--r-md) 0; }
[dir="rtl"] .surah-play { border-radius: var(--r-md) 0 0 var(--r-md); }
.surah-play:hover { background: var(--sky); color: #fff; }
.surah-card.is-playing { border-color: var(--sky); background: var(--sky-soft); }
.surah-card.is-playing .surah-play { background: var(--sky); color: #fff; }

/* Surah reading page */
.surah-hero { background: var(--night) var(--pattern); color: #fff; padding: 2rem 0 1.5rem; text-align: center; }
.surah-hero .crumb-link { display: block; text-align: start; }
.surah-hero-ar { display: block; font-family: var(--font-quran); font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--sun); line-height: 1.6; }
.surah-hero h1 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .9rem; }
.surah-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; font-size: .92rem; }
.surah-pager a { color: #e6d9a8; }
.surah-pager a:hover { color: #fff; }
.surah-pager.bottom { margin-top: 2rem; }
.surah-pager.bottom a { color: var(--ink); }
.surah-toolbar { position: sticky; top: 64px; z-index: 900; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.surah-toolbar .container-xl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; padding-top: .6rem; padding-bottom: .6rem; }
.surah-toolbar .form-select { width: auto; max-width: 240px; padding-top: .45rem; padding-bottom: .45rem; }
.surah-toolbar .font-size { display: flex; gap: .3rem; }
.surah-toolbar .btn-round { width: 36px; height: 36px; font-size: .78rem; font-weight: 700; }
.surah-toolbar .jump .form-control { width: 110px; padding-top: .45rem; padding-bottom: .45rem; }
@media (max-width: 1199.98px) { .surah-toolbar { top: 0; position: relative; } }

.surah-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.75rem; align-items: start; }
.surah-aside { position: sticky; top: 140px; display: grid; gap: 1rem; }
.reciters-cta { display: flex; align-items: center; gap: .9rem; color: var(--ink); padding: 1.1rem 1.25rem; }
.reciters-cta:hover { border-color: var(--sun); color: var(--ink); }
.reciters-cta > i { font-size: 1.6rem; color: var(--sun-deep); }
.reciters-cta small { display: block; color: var(--muted); }
@media (max-width: 991.98px) { .surah-layout { grid-template-columns: 1fr; } .surah-aside { position: static; } }

.mushaf { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.basmala { text-align: center; font-family: var(--font-quran); font-size: calc(var(--q-size) * 1.05); color: var(--sky-deep); padding: 1.5rem 1rem .5rem; }
.ayah { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; transition: background .25s; }
.ayah-side { display: flex; flex-direction: column; align-items: center; gap: .45rem; flex: none; width: 44px; }
.ayah-key { font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ayah-side .btn-round { width: 34px; height: 34px; font-size: .9rem; }
.ayah-body { flex: 1; min-width: 0; }
.ayah-ar { font-family: var(--font-quran); font-size: var(--q-size); line-height: 2.25; text-align: right; color: var(--ink); margin: 0 0 .6rem; word-spacing: .08em; }
.ayah-no { color: var(--sun-deep); font-size: .85em; white-space: nowrap; }
.sajda { color: var(--sky); }
.ayah-tr { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.ayah-tr[dir="rtl"] { font-family: var(--font-body); }
.hide-tr .ayah-tr { display: none; }
.ayah.is-playing { background: var(--sun-soft); }
.ayah.is-playing .ayah-side .btn-round:first-of-type { background: var(--sky); border-color: var(--sky); color: #fff; }
.ayah.is-target { box-shadow: inset 4px 0 0 var(--sun); }
[dir="rtl"] .ayah.is-target { box-shadow: inset -4px 0 0 var(--sun); }
.tr-source { color: var(--muted); font-size: .82rem; text-align: center; padding: .75rem 1rem 0; margin: 0; }
.mushaf .surah-pager.bottom { padding: 0 1.4rem 1.4rem; }
@media (max-width: 575.98px) {
  .ayah { flex-direction: column-reverse; padding: 1rem; gap: .5rem; }
  .ayah-side { flex-direction: row; width: auto; }
  :root { --q-size: 1.6rem; }
}

/* Reciters */
.reciter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.reciter-card { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .8rem 1rem; color: var(--ink); }
.reciter-card:hover { border-color: var(--sun); color: var(--ink); box-shadow: var(--lift); }
.reciter-card strong { display: block; font-weight: 600; line-height: 1.3; }
.reciter-card small { display: block; color: var(--muted); font-size: .8rem; }
.reciter-card > i { margin-inline-start: auto; color: var(--line); font-size: 1.5rem; flex: none; }
.reciter-card:hover > i { color: var(--sky); }
.letter-bar { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.25rem; }
.letter-bar .chip { padding: .25rem .65rem; font-size: .85rem; min-width: 36px; justify-content: center; }
.reciter-hero { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.reciter-hero h1 { margin: .1rem 0 .3rem; }
.reciter-hero p { color: #e6d8c6; }

.track-list { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.track-list li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.track-list li:last-child { border-bottom: 0; }
.track-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; border: 0; background: none; padding: .7rem 1rem; text-align: start; color: var(--ink); }
.track-main:hover { background: var(--paper); }
.track-names { flex: 1; min-width: 0; }
.track-ico { color: var(--line); font-size: 1.45rem; }
.track-main:hover .track-ico { color: var(--sky); }
.track-dl { padding: .7rem 1.1rem; color: var(--muted); font-size: 1.1rem; }
.track-dl:hover { color: var(--sky); }
.track-list li.is-playing { background: var(--sky-soft); }
.track-list li.is-playing .track-ico { color: var(--sky); }
@media (max-width: 575.98px) { .track-main .surah-ar { display: none; } }

/* Player bar */
.qplayer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060; background: var(--night) var(--pattern); color: #fff; border-top: 2px solid var(--sun); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .5); }
.qplayer[hidden] { display: none; }
.qp-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.5fr) auto; align-items: center; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.qp-info { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.qp-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--sun); color: var(--night); font-size: 1.1rem; }
.qplayer.is-playing .qp-icon { animation: breathe 2.4s ease-in-out infinite; }
.qp-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.qp-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cdbba7; font-size: .8rem; }
.qp-controls, .qp-extra { display: flex; align-items: center; gap: .3rem; }
.qp-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: inline-grid; place-items: center; font-size: 1.15rem; }
.qp-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.qp-btn.on { color: var(--sun); }
.qp-main { width: 46px; height: 46px; background: var(--sun); color: var(--night); font-size: 1.5rem; }
.qp-main:hover { background: #e0a04a; color: var(--night); }
.qp-small { font-size: .8rem; font-weight: 700; width: auto; min-width: 38px; border-radius: 999px; padding: 0 .5rem; }
.qp-progress { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: #cdbba7; font-variant-numeric: tabular-nums; }
.qp-progress .form-range { flex: 1; }
.qp-progress .form-range::-webkit-slider-thumb { background: var(--sun); }
.qp-progress .form-range::-moz-range-thumb { background: var(--sun); }
.qp-progress .form-range::-webkit-slider-runnable-track { background: rgba(255, 255, 255, .2); }
[dir="rtl"] [data-qp="prev"] i, [dir="rtl"] [data-qp="next"] i { display: inline-block; transform: scaleX(-1); }
body.qp-open { padding-bottom: 76px; }
body.qp-open .wa-float { bottom: 92px; }
body.q-loading main { opacity: .55; transition: opacity .15s; }
@media (max-width: 991.98px) {
  .qp-inner { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .75rem; }
  .qp-progress { grid-column: 1 / -1; order: 3; }
  .qp-extra { display: none; }
  body.qp-open { padding-bottom: 118px; }
  body.qp-open .wa-float { bottom: 132px; }
}
.empty-filter { text-align: center; padding: 2rem 0; }

/* Menu fits on one line with the Quran item and longer site names */
.brand { white-space: nowrap; }
.nav-actions .btn { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-nav .nav-link { padding: .5rem .5rem !important; font-size: .94rem; }
  .brand { font-size: 1.25rem; }
  .nav-actions .btn-gold { padding: .5rem .8rem; }
}

/* =========================================================
   Home page: slideshow, social buttons, three columns
   ========================================================= */
.home-slides { background: var(--night) var(--pattern); }
.home-slides .carousel-item { position: relative; height: clamp(320px, 52vw, 520px); background: var(--night) var(--pattern); }
.home-slides .carousel-item > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-caption { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 3.5rem; color: #fff;
  background: linear-gradient(180deg, rgba(31, 24, 20, 0) 25%, rgba(31, 24, 20, .55) 55%, rgba(31, 24, 20, .92) 100%); }
.slide-welcome .slide-caption { align-items: center; padding-bottom: 0; background: none; }
.slide-caption .container-xl { width: 100%; }
.slide-caption h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.8rem); max-width: 28ch; margin: .4rem 0 .6rem; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.slide-caption h2 a { color: #fff; }
.slide-caption h2 a:hover { color: #ffe2bf; }
.slide-caption p { font-size: 1.15rem; max-width: 60ch; color: #f3e6d8; margin-bottom: 1.1rem; }
.slide-kicker { display: inline-flex; align-items: center; gap: .4rem; background: var(--sky); color: #fff; font-weight: 700; padding: .3rem .8rem; border-radius: 6px; font-size: .95rem; }
.home-slides .carousel-control-prev, .home-slides .carousel-control-next { width: 9%; opacity: 1; }
.slide-arrow { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 1.6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.carousel-control-prev:hover .slide-arrow, .carousel-control-next:hover .slide-arrow { background: var(--sun); color: #fff; }
.home-slides .carousel-indicators { margin-bottom: 1rem; }
.home-slides .carousel-indicators [data-bs-target] { width: 14px; height: 14px; border-radius: 50%; border: 0; margin: 0 6px; }
.home-slides .carousel-indicators .active { background: var(--sun); }
@media (max-width: 767.98px) {
  .home-slides .carousel-control-prev, .home-slides .carousel-control-next { display: none; }
  .slide-caption { padding-bottom: 2.75rem; }
  .slide-caption p { display: none; }
}

.home-search-band { background: var(--ink); padding: 1rem 0; }
.home-search { max-width: none; border: 0; }
.home-search input { font-size: 1.15rem; padding: .8rem 1rem; }

.social-band { background: #fff; border-bottom: 1px solid var(--line); padding: 1.5rem 0; text-align: center; }
.social-band h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.social-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.social-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--brand); color: #fff; font-weight: 700; font-size: 1.1rem; padding: .75rem 1.4rem; border-radius: 999px; min-height: 52px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.social-btn i { font-size: 1.4rem; }
.social-btn:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.social-btn.is-main { font-size: 1.25rem; padding: .9rem 1.8rem; }
@media (max-width: 575.98px) {
  .social-band { padding: 1rem 0; }
  .social-band h2 { font-size: 1.1rem; margin-bottom: .75rem; }
  .social-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .social-btn, .social-btn.is-main { justify-content: center; font-size: .92rem; padding: .5rem .75rem; min-height: 42px; gap: .45rem; box-shadow: none; }
  .social-btn i { font-size: 1.1rem; }
  .social-buttons .social-btn:last-child:nth-child(odd) { grid-column: span 2; }
}
.branding-social a[style] { background: var(--brand); }

.home-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 991.98px) { .home-cols { grid-template-columns: 1fr; } }
.home-col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.home-col-head { display: flex; align-items: center; gap: .6rem; background: var(--ink); color: #fff; padding: .9rem 1.2rem; border-bottom: 4px solid var(--sun); }
.home-col-head i { color: var(--sun); font-size: 1.35rem; }
.home-col-head h2 { color: #fff; font-size: 1.3rem; margin: 0; }
.home-list { list-style: none; margin: 0; padding: .35rem 0; flex: 1; }
.home-list li + li { border-top: 1px solid var(--line); }
.home-list a { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.2rem; color: var(--ink); min-height: 64px; }
.home-list a:hover { background: var(--sky-soft); color: var(--ink); }
.home-list strong { display: block; font-size: 1.08rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-list small { display: block; color: var(--muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-play { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sky); color: #fff; font-size: 1.4rem; }
.home-play-alt { background: var(--sun-soft); color: var(--sky-deep); font-size: 1.2rem; }
.home-col-more { display: block; text-align: center; font-weight: 700; font-size: 1.05rem; padding: .9rem; background: var(--sun-soft); border-top: 1px solid var(--line); color: var(--sky-deep); }
.home-col-more:hover { background: var(--sky); color: #fff; }
.home-empty { color: var(--muted); padding: 1.5rem 1.2rem; margin: 0; flex: 1; }
.home-ar { display: block; font-family: var(--font-ar, 'Noto Naskh Arabic', serif); color: var(--muted); font-size: .95rem; line-height: 1.6; text-align: right; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Phones and tablets: the newest Duruus as a two-column grid of compact cells */
@media (max-width: 991.98px) {
  .home-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .home-list-grid li { border-bottom: 1px solid var(--line); }
  .home-list-grid li + li { border-top: 0; }
  .home-list-grid li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
  .home-list-grid a { align-items: flex-start; gap: .5rem; padding: .85rem .7rem; min-height: 0; height: 100%; }
  .home-list-grid .home-play { width: auto; height: auto; background: none; color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
  .home-list-grid strong { font-size: .92rem; -webkit-line-clamp: 3; }
  .home-list-grid .home-ar { font-size: .85rem; line-height: 1.5; margin-top: .2rem; }
  .home-list-grid small { display: none; }
}

/* =========================================================
   Easy reading: bigger text and buttons for older visitors
   ========================================================= */
html { font-size: 17px; }
@media (min-width: 992px) { html { font-size: 18px; } }
:root { --muted: #66574c; }
.site-nav .nav-link { font-size: 1.02rem; }
.btn { min-height: 44px; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 48px; }
.series-meta, .book-foot, .scholar-counts { font-size: .95rem; }
/* Phones: Bootstrap's widest gutters (g-5 = 3rem) are wider than the page padding and make the page scroll sideways */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5, .row.g-4, .row.gx-4 { --bs-gutter-x: 1.5rem; }
}

/* Home page: newest YouTube videos */
.yt-red { color: #e62117; }
.yt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 991.98px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } }
.yt-card { display: flex; flex-direction: column; gap: .3rem; color: var(--ink); min-width: 0; }
.yt-card:hover { color: var(--ink); }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #1f1814; margin-bottom: .35rem; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.yt-card:hover .yt-thumb img { transform: scale(1.04); }
.yt-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 38px; border-radius: 10px; background: rgba(230, 33, 23, .92); color: #fff; display: grid; place-items: center; font-size: 1.5rem; }
.yt-len { position: absolute; right: .4rem; bottom: .4rem; background: rgba(0, 0, 0, .8); color: #fff; font-size: .75rem; font-weight: 600; padding: .1rem .35rem; border-radius: 4px; font-variant-numeric: tabular-nums; }
.yt-card strong { font-size: 1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-card small { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .yt-play { width: 42px; height: 30px; font-size: 1.2rem; }
  .yt-card strong { font-size: .9rem; }
  .yt-card small { font-size: .78rem; }
}