/*
Theme Name:   Sufi Books
Theme URI:    https://sufimagazine.horizondm.com
Description:  مكتبة رقمية لكتب التصوف الإسلامي — عرض وتصفح وتحميل الكتب حسب الأقسام.
Author:       Horizon Agency
Version:      1.0.0
Text Domain:  sufi-books
Tested up to: 6.5
Requires at least: 5.9
Requires PHP: 7.4
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --clr-primary:      #1a3c2a;
  --clr-primary-dk:   #122b1e;
  --clr-primary-lt:   #2d6a4f;
  --clr-accent:       #E8611A;
  --clr-accent-dk:    #c44e12;
  --clr-accent-lt:    #f07d40;

  --clr-bg:           #f8f6f2;
  --clr-surface:      #ffffff;
  --clr-surface-2:    #f2ede6;
  --clr-border:       #e2dcd4;
  --clr-card:         #ffffff;

  --clr-text:         #1c1c1c;
  --clr-text-2:       #4a4a4a;
  --clr-text-muted:   #888880;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.18);
  --shadow-card: var(--shadow-lg);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --container-w: 1180px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html { direction: rtl; }

html, body {
  max-width: 100%;
  overflow-x: hidden; /* safety net: a wide flex/grid child anywhere shouldn't drag the whole page sideways */
}

/* Elementor lays out sections/columns with flexbox; flex (and grid) children
   default to min-width:auto, which lets them refuse to shrink below their
   content's natural width instead of wrapping/scrolling — the actual cause
   of any of these widgets dragging the page into horizontal overflow. */
.sb-widget, .sb-book-grid, .sb-section-grid, .sb-manuscript-grid,
.sb-rank-list, .sb-research-list, .sb-timeline, .sb-timeline__content,
.sb-timeline__books, .sb-stats-row, .sb-stats-cards, .sb-author-grid,
.sb-search-bar, .sb-widget--search, .sb-widget--stats, .sb-widget--authors {
  min-width: 0;
}

/* Elementor's own "Flexbox Container" markup (.e-con / .e-con-inner /
   .elementor-widget-container / .elementor-element) hits this exact same
   bug one level above our widgets — confirmed via DevTools on the live
   site: the search widget's wrapping .e-con-inner.flex refused to shrink
   on a 366px mobile viewport, dragging the whole page into horizontal
   scroll. This is a known Elementor issue; patching it globally here. */
.e-con, .e-con-inner, .elementor-widget-container, .elementor-element {
  min-width: 0;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.7;
  overflow-wrap: break-word; /* global safety net: any long unbroken run of
                                 text (a URL, a word with no spaces, etc.)
                                 wraps instead of overflowing its container */
}

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

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

.sb-container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

.sb-section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-accent);
  background: rgba(232,97,26,.1);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 10px;
}

.sb-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.sb-section-header__title { font-size: 26px; margin: 0; color: var(--clr-primary-dk); }
.sb-section-header__count { color: var(--clr-text-muted); font-size: 14px; }

/* ============================================================
   MOBILE HEADER — output by the [sb_mobile_header] shortcode (see
   inc/shortcodes.php), meant to be placed by hand inside the Elementor
   header template with Elementor's own per-widget responsive visibility
   controlling when it's shown (Advanced tab → Responsive → Hide on
   Desktop/Tablet). No display:none gating here — that's Elementor's job.
   ============================================================ */
.sb-mobile-header {
  direction: rtl; /* explicit, so logo/actions order is correct regardless of
                     whatever direction the surrounding Elementor container has */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
}
.sb-mobile-header__logo img { height: 30px; width: auto; }
.sb-mobile-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sb-mobile-header__contact {
  height: 30px; /* matches .sb-mobile-header__logo img so both sit at the same height */
  padding: 0 10px;
  font-size: 11px;
  line-height: 1;
}

/* Modern burger: rounded square button instead of three bare bars */
.sb-mobile-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--clr-surface-2);
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.sb-mobile-header__toggle:hover,
.sb-mobile-header__toggle.is-active { background: var(--clr-primary); }
.sb-mobile-header__bar {
  display: block;
  height: 2px;
  width: 18px;
  background: var(--clr-primary-dk);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, background .15s ease;
}
.sb-mobile-header__toggle.is-active .sb-mobile-header__bar { background: #fff; }
.sb-mobile-header__toggle.is-active .sb-mobile-header__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.sb-mobile-header__toggle.is-active .sb-mobile-header__bar:nth-child(2) {
  opacity: 0;
}
.sb-mobile-header__toggle.is-active .sb-mobile-header__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Off-canvas slide-in drawer, docked at the left edge (where the burger
   trigger lives) and sliding left→right into view, with a dimmed
   backdrop behind it — not an in-flow dropdown that pushes the header. */
.sb-mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 998;
}
.sb-mobile-menu-overlay.is-open { opacity: 1; visibility: visible; }

.sb-mobile-menu {
  direction: rtl;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(82vw, 320px);
  background: var(--clr-surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sb-mobile-menu.is-open { transform: translateX(0); }

.sb-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--clr-border);
}
.sb-mobile-menu__logo img { height: 28px; width: auto; }
.sb-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--clr-surface-2);
  color: var(--clr-text-2);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.sb-mobile-menu__close:hover { background: var(--clr-accent); color: #fff; }

.sb-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}
.sb-mobile-menu__list li { border-bottom: 1px solid var(--clr-border); }
.sb-mobile-menu__list a {
  display: block;
  padding: 15px 20px;
  font-weight: 600;
  color: var(--clr-text-2);
}
.sb-mobile-menu__list a:hover { color: var(--clr-accent); }

body.sb-mobile-menu-open { overflow: hidden; }

/* ============================================================
   PAGE HEADER (banner with background image + dark overlay) — the
   listing/taxonomy/directory templates' shared top banner
   ============================================================ */
.sb-page-header {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 240px;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.sb-page-header__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.sb-page-header__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.sb-page-header__title { font-size: 36px; color: #fff; margin: 0 0 10px; }
.sb-page-header__meta { color: rgba(255,255,255,.8); font-size: 15px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sb-btn:hover { transform: translateY(-1px); }

.sb-btn--primary { background: var(--clr-primary); color: #fff; }
.sb-btn--primary:hover { background: var(--clr-primary-dk); }

.sb-btn--accent { background: var(--clr-accent); color: #fff; }
.sb-btn--accent:hover { background: var(--clr-accent-dk); }

.sb-btn--outline { background: transparent; color: var(--clr-primary); border-color: var(--clr-primary); }
.sb-btn--outline:hover { background: var(--clr-primary); color: #fff; }

.sb-btn--sm { padding: 7px 14px; font-size: 13px; }
.sb-btn--block { width: 100%; justify-content: center; }

/* ============================================================
   SEARCH BAR (SB_Library_Search_Widget) — no background of its own by
   design; the widget is a bare pill meant to sit on whatever background
   you build around it in Elementor (hero image, color block, etc.)
   ============================================================ */
.sb-widget--search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  text-align: center;
}

.sb-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-surface);
  border-radius: 999px;
  padding: 10px;
  box-shadow: var(--shadow-md);
  max-width: 800px; /* can be overridden live by the widget's "عرض شريط البحث" slider control */
  width: 100%;
  margin: 0 auto;
}

.sb-search-bar__input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}
.sb-search-bar__input-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--clr-text);
}

.sb-search-bar__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: var(--clr-surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  color: var(--clr-text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 16px 13px 34px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

.sb-search-bar__submit {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--clr-primary);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}
.sb-search-bar__submit:hover { background: var(--clr-primary-dk); }

@media (max-width: 560px) {
  .sb-search-bar { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .sb-search-bar__input-wrap { flex-basis: 100%; padding: 8px 16px 0; }
  .sb-search-bar__select { flex: 1; }
  .sb-search-bar__submit { flex: 1; justify-content: center; }
}

/* ============================================================
   BOOK GRID / CARD
   ============================================================ */
.sb-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
  margin: 30px 0;
}

.sb-book-card {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sb-book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.sb-book-card__cover { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--clr-surface-2); }
.sb-book-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-book-card__badge {
  position: absolute; top: 10px; inset-inline-start: 10px;
  background: var(--clr-accent); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 3px 10px;
}

.sb-book-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sb-book-card__title { font-size: 16px; margin: 0; }
.sb-book-card__title a:hover { color: var(--clr-accent); }
.sb-book-card__author { font-size: 13px; color: var(--clr-text-muted); }
.sb-book-card__excerpt { font-size: 13px; color: var(--clr-text-2); margin: 4px 0 10px; flex: 1; }
.sb-book-card__actions { display: flex; gap: 8px; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.sb-filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sb-filter-bar select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--clr-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding: 9px 14px 9px 34px; /* extra start-side padding reserves room for the arrow so it isn't flush against the edge */
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.sb-ajax-results { transition: opacity .15s ease; }
.sb-ajax-results.is-loading { opacity: .45; pointer-events: none; }

/* ============================================================
   SINGLE BOOK
   ============================================================ */
.sb-single-book { padding-top: 40px; padding-bottom: 60px; } /* top/bottom only —
  this element also carries .sb-container, whose side padding a full
  "padding" shorthand here would silently wipe out (same specificity,
  later rule wins the whole property, not just the axis it changes) */
.sb-book-hero { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.sb-book-hero__cover img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.sb-book-hero__title { font-size: 32px; margin: 0 0 10px; color: var(--clr-primary-dk); }
.sb-book-hero__meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--clr-text-2); font-size: 14px; margin-bottom: 20px; }
.sb-book-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sb-book-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .sb-single-book { padding-top: 24px; padding-bottom: 40px; }
  .sb-book-hero { grid-template-columns: 1fr; gap: 24px; text-align: center; justify-items: center; }
  .sb-book-hero__cover { max-width: 200px; width: 100%; justify-self: center; margin: 0 auto; }
  .sb-book-hero__cover img { margin: 0 auto; }
  .sb-book-hero__title { font-size: 24px; }
  .sb-book-hero__meta { justify-content: center; font-size: 13px; gap: 12px; }
  .sb-book-hero__actions { justify-content: center; }
  .sb-book-hero__actions .sb-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
  .sb-book-hero__title { font-size: 21px; }
  .sb-toc { padding: 16px 18px; }
  .sb-toc li { font-size: 14px; }
}

.sb-prose {
  font-size: 16px;
  color: var(--clr-text-2);
  margin-top: 34px;
  overflow-wrap: anywhere; /* a long unbroken word (no spaces) would otherwise
                              overflow the container instead of wrapping */
  word-break: break-word;
}
.sb-prose h2, .sb-prose h3 { color: var(--clr-primary-dk); }

.sb-toc { background: var(--clr-surface-2); border-radius: var(--radius-lg); padding: 22px 26px; margin-top: 34px; }
.sb-toc__title { margin: 0 0 14px; font-size: 18px; color: var(--clr-primary-dk); }
.sb-toc ol { margin: 0; padding-inline-start: 20px; }
.sb-toc li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--clr-border); }
.sb-toc li:last-child { border-bottom: none; }
.sb-toc__page { color: var(--clr-text-muted); font-size: 13px; }

/* ============================================================
   SECTIONS DIRECTORY / MAIN CATEGORIES WIDGET
   ============================================================ */
.sb-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 30px 0; }
.sb-section-card {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  padding: 26px 20px 20px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow .15s ease, transform .15s ease;
  border-bottom: 3px solid var(--clr-accent);
}
.sb-section-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.sb-section-card__link { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sb-section-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
}
.sb-section-card__icon--green  { background: rgba(26,60,42,.1); color: var(--clr-primary); }
.sb-section-card__icon--accent { background: rgba(232,97,26,.12); color: var(--clr-accent); }
.sb-section-card__icon--sage   { background: rgba(45,106,79,.12); color: var(--clr-primary-lt); }

.sb-section-card__title { font-size: 16px; margin: 4px 0 0; color: var(--clr-primary-dk); }
.sb-section-card__count { font-size: 22px; font-weight: 800; color: var(--clr-primary-dk); }
.sb-section-card__explore {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--clr-accent);
}
.sb-section-card__explore:hover { color: var(--clr-accent-dk); }

.sb-section-card__subs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sb-section-card__subs a { font-size: 12px; background: var(--clr-surface-2); padding: 4px 10px; border-radius: 999px; }

.sb-categories-cta { text-align: center; margin-top: 34px; }

/* ============================================================
   YEAR ARCHIVE — vertical timeline (page-templates/template-archive.php)
   ============================================================ */
.sb-timeline { display: flex; flex-direction: column; margin: 30px 0; }

.sb-timeline__item { display: flex; gap: 20px; align-items: stretch; }

.sb-timeline__marker { flex-shrink: 0; width: 84px; display: flex; flex-direction: column; align-items: center; }
.sb-timeline__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--clr-surface);
  border: 2px solid var(--clr-accent);
  color: var(--clr-primary-dk);
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.sb-timeline__dot { flex: 1; width: 2px; background: var(--clr-border); margin: 6px 0; }
.sb-timeline__item:last-child .sb-timeline__dot { background: transparent; }

.sb-timeline__content { flex: 1; min-width: 0; padding-bottom: 32px; }
.sb-timeline__count { display: block; font-size: 13px; color: var(--clr-text-muted); margin-bottom: 14px; }
.sb-timeline__books { display: flex; flex-wrap: wrap; gap: 16px; }

.sb-timeline-book { display: flex; flex-direction: column; width: 110px; gap: 8px; flex-shrink: 0; }
.sb-timeline-book__cover {
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--clr-surface-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sb-timeline-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-timeline-book:hover .sb-timeline-book__cover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sb-timeline-book__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 560px) {
  .sb-timeline__marker { width: 62px; }
  .sb-timeline__year { min-width: 44px; padding: 6px 8px; font-size: 12px; }
  .sb-timeline__item { gap: 12px; }
  .sb-timeline__books { gap: 10px; }
  .sb-timeline-book { width: 84px; }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.sb-pagination { display: flex; justify-content: center; gap: 8px; margin: 30px 0; }
.sb-pagination a, .sb-pagination span, .sb-pagination button {
  padding: 8px 14px; border-radius: var(--radius-sm); background: var(--clr-surface);
  border: 1px solid var(--clr-border); font-size: 14px;
  font-family: inherit; cursor: pointer; /* button-specific resets, harmless on <a>/<span> */
}
.sb-pagination .current { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.sb-pagination button:hover { border-color: var(--clr-accent); color: var(--clr-accent); }

/* ============================================================
   AUTH (LOGIN / REGISTER)
   ============================================================ */
.sb-auth { display: flex; justify-content: center; padding-top: 50px; padding-bottom: 50px; } /* top/bottom only — also carries .sb-container, see .sb-single-book comment */
.sb-auth__card { background: var(--clr-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 34px; width: 100%; max-width: 420px; }
.sb-auth__form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.sb-auth__form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--clr-text-2); }
.sb-auth__form input[type="text"],
.sb-auth__form input[type="email"],
.sb-auth__form input[type="password"] {
  padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--clr-border); font-family: inherit; font-size: 14px;
}
.sb-auth__remember { flex-direction: row !important; align-items: center; gap: 8px !important; }
.sb-auth__error { background: #fdecea; color: #b3261e; border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; }
.sb-auth__switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--clr-text-muted); }
.sb-auth__switch a { color: var(--clr-accent); font-weight: 700; }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.sb-notification-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.sb-notification {
  display: flex; align-items: center; gap: 14px; background: var(--clr-card);
  border-radius: var(--radius-md); padding: 14px 18px; box-shadow: var(--shadow-sm);
}
.sb-notification__icon { color: var(--clr-accent); flex-shrink: 0; }
.sb-notification__title { font-weight: 700; }
.sb-notification__meta { font-size: 12px; color: var(--clr-text-muted); }

/* ============================================================
   ELEMENTOR WIDGETS: STATS ROW, NOTIFICATIONS BELL
   ============================================================ */
.sb-stats-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
.sb-stats-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
}
.sb-stats-row__value { font-size: 24px; font-weight: 800; color: #f0e4c8; }
.sb-stats-row__label { font-size: 13px; color: rgba(240,228,200,.75); }

/* ============================================================
   ORNATE HEADING (title flanked by gem ornaments + a diamond divider) —
   shared by the stats and main-categories widgets
   ============================================================ */
.sb-ornate-heading { text-align: center; margin-bottom: 40px; }
.sb-ornate-heading__title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 30px;
  font-weight: 800;
  margin: 0;
  color: var(--clr-primary-dk);
}
.sb-ornate-heading__gem { display: inline-flex; color: var(--clr-accent); }
.sb-ornate-heading__subtitle { margin: 10px 0 0; color: var(--clr-text-2); font-size: 15px; }
.sb-ornate-heading__divider { display: block; width: fit-content; margin: 16px auto 0; color: var(--clr-accent); }

/* Dark variant, used inside .sb-stats-section (white title, gold ornaments) */
.sb-stats-section__heading .sb-ornate-heading__title { color: #fff; }
.sb-stats-section__heading .sb-ornate-heading__gem { color: #d4af6a; }
.sb-stats-section__heading .sb-ornate-heading__subtitle { color: rgba(255,255,255,.75); }
.sb-stats-section__heading .sb-ornate-heading__divider { color: #d4af6a; }

/* ============================================================
   STANDALONE "إحصائيات المكتبة" WIDGET — dark decorative hero section
   ============================================================ */
.sb-stats-section {
  position: relative;
  background: linear-gradient(160deg, var(--clr-primary) 0%, var(--clr-primary-dk) 100%);
  border-radius: var(--radius-xl);
  padding: 50px 30px;
  overflow: hidden;
}
.sb-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 42px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 42px);
  pointer-events: none;
}
.sb-stats-section__heading,
.sb-stats-cards { position: relative; z-index: 1; }

.sb-stats-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.sb-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
  max-width: 240px;
  padding: 30px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(212,175,106,.4);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: background .15s ease, transform .15s ease;
}
.sb-stat-card:hover { background: rgba(255,255,255,.08); transform: translateY(-3px); }
.sb-stat-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
}
.sb-stat-card__icon--accent { background: var(--clr-accent); }
.sb-stat-card__value { font-size: 30px; font-weight: 800; color: #fff; }
.sb-stat-card__label { font-size: 14px; color: rgba(255,255,255,.75); }
.sb-stat-card__divider { color: #d4af6a; }

.sb-notifications-bell { position: relative; display: inline-flex; color: var(--clr-text-2); }
.sb-notifications-bell:hover { color: var(--clr-accent); }
.sb-notifications-bell__count {
  position: absolute; top: -6px; inset-inline-end: -8px;
  background: var(--clr-accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ============================================================
   CAROUSEL (latest books widget)
   ============================================================ */
.sb-carousel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sb-carousel__arrows { display: flex; gap: 8px; }
.sb-carousel__arrow {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--clr-border);
  background: var(--clr-surface); color: var(--clr-text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.sb-carousel__arrow:hover { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }

.sb-carousel {
  overflow: hidden;
  width: 100%;
  min-width: 0; /* flex/grid children default to min-width:auto, which ignores overflow:hidden
                   and lets the box grow to the track's full unwrapped width instead of clipping it */
}
.sb-carousel__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 4px;
  min-width: 0;
}
.sb-carousel__track::-webkit-scrollbar { display: none; }
.sb-carousel__slide { flex: 0 0 220px; scroll-snap-align: start; }
.sb-book-card__section { font-size: 12px; color: var(--clr-accent); font-weight: 600; }

/* ============================================================
   RANKED LIST (most-read books widget)
   ============================================================ */
.sb-rank-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 20px 0; }
.sb-rank-item {
  display: flex; align-items: center; gap: 14px; background: var(--clr-card);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm);
}
.sb-rank-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--clr-surface-2);
  color: var(--clr-primary-dk); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.sb-rank-item__body { flex: 1; min-width: 0; }
.sb-rank-item__title { font-size: 15px; margin: 0 0 4px; }
.sb-rank-item__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--clr-text-muted); margin-bottom: 8px; }
.sb-rank-item__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-rank-item__views { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--clr-text-muted); }
.sb-rank-item__cover { flex-shrink: 0; width: 56px; border-radius: var(--radius-sm); overflow: hidden; }

/* ============================================================
   STAR RATING
   ============================================================ */
.sb-rating { display: flex; align-items: center; gap: 6px; }
.sb-rating__stars { display: flex; gap: 2px; }
.sb-rating__star {
  border: none; background: none; cursor: pointer; padding: 0; font-size: 16px; line-height: 1;
  color: var(--clr-border);
}
.sb-rating__star.is-filled { color: #f0b429; }
.sb-rating.is-readonly .sb-rating__star { pointer-events: none; }
.sb-rating__average { font-size: 12px; font-weight: 700; color: var(--clr-text-2); }

/* ============================================================
   MANUSCRIPT SECTION (archive/manuscripts widget)
   ============================================================ */
.sb-manuscript-section {
  background: var(--clr-primary-dk); border-radius: var(--radius-xl); padding: 44px 30px; text-align: center;
}
.sb-manuscript-section__title { color: #fff; font-size: 28px; margin: 0 0 8px; }
.sb-manuscript-section__subtitle { color: rgba(255,255,255,.7); max-width: 560px; margin: 0 auto 30px; }

.sb-manuscript-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; text-align: start; }
.sb-manuscript-card { background: #0f2419; border-radius: var(--radius-lg); overflow: hidden; }
.sb-manuscript-card__cover { position: relative; aspect-ratio: 4/3; }
.sb-manuscript-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.sb-manuscript-card__badge {
  position: absolute; top: 10px; inset-inline-start: 10px; font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; background: rgba(0,0,0,.5); color: #f0b429; border: 1px solid #f0b429;
}
.sb-manuscript-card__body { padding: 18px; }
.sb-manuscript-card__title { color: #fff; font-size: 16px; margin: 0 0 8px; }
.sb-manuscript-card__meta { display: flex; gap: 12px; color: rgba(255,255,255,.6); font-size: 12px; margin-bottom: 14px; }
.sb-manuscript-card__cta { border-color: rgba(255,255,255,.4); color: #fff; }
.sb-manuscript-card__cta:hover { background: #fff; color: var(--clr-primary-dk); }

/* ============================================================
   RESEARCH LIST (research widget)
   ============================================================ */
.sb-research-list { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.sb-research-item {
  display: flex; gap: 16px; background: var(--clr-card); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.sb-research-item__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--clr-surface-2);
  color: var(--clr-primary); display: flex; align-items: center; justify-content: center;
}
.sb-research-item__body { flex: 1; min-width: 0; }
.sb-research-item__title { font-size: 17px; margin: 0 0 4px; }
.sb-research-item__author { font-size: 13px; color: var(--clr-text-muted); margin-bottom: 8px; }
.sb-research-item__abstract { font-size: 14px; color: var(--clr-text-2); margin: 0 0 12px; }
.sb-research-item__footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.sb-research-item__stat { font-size: 13px; color: var(--clr-text-muted); }

.sb-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sb-tag-chip {
  font-size: 12px; background: var(--clr-surface-2); color: var(--clr-text-2);
  padding: 4px 12px; border-radius: 999px;
}

/* ============================================================
   AUTHORS (الكتّاب)
   ============================================================ */
.sb-author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; margin: 30px 0; min-width: 0; }
.sb-author-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 26px 18px; background: var(--clr-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease;
}
.sb-author-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sb-author-card__photo {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--clr-surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--clr-text-muted);
  border: 3px solid var(--clr-surface-2);
}
.sb-author-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.sb-author-card__name { font-size: 16px; margin: 0; color: var(--clr-primary-dk); }
.sb-author-card__count { font-size: 13px; color: var(--clr-text-muted); }

.sb-author-profile { padding-top: 40px; padding-bottom: 60px; } /* see .sb-single-book comment above — same shorthand-clobbers-.sb-container bug */
.sb-author-profile__header {
  display: flex; align-items: center; gap: 26px; margin-bottom: 30px;
}
.sb-author-profile__photo {
  flex-shrink: 0; width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  background: var(--clr-surface-2); display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-muted); box-shadow: var(--shadow-md);
}
.sb-author-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.sb-author-profile__name { font-size: 28px; margin: 0 0 8px; color: var(--clr-primary-dk); }
.sb-author-profile__tagline { color: var(--clr-text-2); margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.sb-author-profile__books { margin-top: 44px; }

@media (max-width: 560px) {
  .sb-author-profile { padding-top: 24px; padding-bottom: 40px; }
  .sb-author-profile__header { flex-direction: column; text-align: center; }
  .sb-author-profile__photo { width: 100px; height: 100px; }
  .sb-author-profile__name { font-size: 22px; }
  .sb-author-profile__books { margin-top: 30px; }
}

/* ============================================================
   404 / SEARCH EMPTY STATE
   ============================================================ */
.sb-empty-state { text-align: center; padding: 80px 20px; color: var(--clr-text-muted); }
.sb-empty-state h1 { font-size: 30px; color: var(--clr-primary-dk); }

/* ============================================================
   MOBILE RESPONSIVENESS — ELEMENTOR WIDGETS
   Every homepage widget (search, carousel, ranked list, manuscripts,
   research list, main categories, stats) gets tighter spacing/type
   scale on small screens so they don't look cramped or oversized —
   Elementor's own column/section padding sits on top of this, this
   just makes sure the widget's own internals hold up on their own.
   ============================================================ */
@media (max-width: 768px) {
  /* Last-resort brute-force fix: cap every element to the viewport width.
     Safe even for the horizontally-scrolling carousel — overflow-x:auto
     containers are explicitly allowed to let their children exceed the
     container's own box; this only stops the *container* itself (or any
     Elementor wrapper with a stray fixed/intrinsic width) from being
     wider than the screen, which is what was dragging the whole page
     sideways. !important because Elementor/plugins often set inline
     width styles that would otherwise out-rank this. */
  * { max-width: 100vw !important; }

  .sb-page-header { min-height: 180px; margin-bottom: 28px; }
  .sb-page-header__title { font-size: 26px; }
  .sb-page-header__inner { padding-top: 26px; padding-bottom: 26px; }

  .sb-carousel__slide { flex-basis: 170px; }

  /* Books/research/archive/author listing grids — 2 per row instead of
     the auto-fill default collapsing to 1 column once the card's
     230px minimum no longer fits two-across on a phone-width screen. */
  .sb-book-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sb-book-card__body { padding: 12px; gap: 4px; }
  .sb-book-card__title { font-size: 14px; }
  .sb-book-card__excerpt { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .sb-book-card__actions { flex-wrap: wrap; }
  .sb-book-card__actions .sb-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12px; }

  .sb-author-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .sb-rank-list { grid-template-columns: 1fr; gap: 12px; }
  .sb-rank-item { padding: 12px; gap: 10px; }
  .sb-rank-item__cover { width: 46px; }

  /* Reinforced with extra specificity + !important on purpose: a
     generic [class*="stats"] rule in Additional CSS (a broad mobile
     overflow fix) also matches .sb-stats-row__item and forces it to
     width:100%, which stacks these to one-per-row. This keeps them
     3-across regardless of what else is loaded after this stylesheet. */
  .sb-stats-row.sb-stats-row { display: flex !important; flex-wrap: nowrap !important; }
  .sb-stats-row .sb-stats-row__item { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }

  .sb-manuscript-section { padding: 30px 18px; border-radius: var(--radius-lg); }
  .sb-manuscript-section__title { font-size: 22px; }
  .sb-manuscript-section__subtitle { margin-bottom: 20px; font-size: 14px; }
  .sb-manuscript-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .sb-manuscript-card__body { padding: 14px; }
  .sb-manuscript-card__title { font-size: 14px; }

  .sb-research-item { padding: 14px; gap: 12px; }
  .sb-research-item__title { font-size: 15px; }

  .sb-section-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .sb-section-card { padding: 16px; }
  .sb-section-card__icon { width: 46px; height: 46px; }
  .sb-section-card__count { font-size: 18px; }

  .sb-ornate-heading__title { font-size: 22px; gap: 8px; }
  .sb-stats-section { padding: 34px 18px; }

  .sb-stats-cards { gap: 12px; }
  .sb-stat-card { padding: 20px 16px; flex-basis: 150px; }
  .sb-stat-card__icon { width: 46px; height: 46px; }
  .sb-stat-card__value { font-size: 22px; }
}

@media (max-width: 480px) {
  .sb-page-header { min-height: 150px; }
  .sb-page-header__title { font-size: 21px; }

  .sb-widget--search { gap: 16px; }
  .sb-search-bar { padding: 6px; gap: 6px; }
  .sb-search-bar__input-wrap { padding: 0 12px; }
  .sb-search-bar__input-wrap input { font-size: 14px; }
  .sb-search-bar__select { font-size: 12px; padding: 10px 12px 10px 26px; }
  .sb-search-bar__submit { font-size: 13px; padding: 10px 16px; }

  .sb-stats-row { gap: 8px; }
  .sb-stats-row__item { min-width: 78px; padding: 8px 12px; }
  .sb-stats-row__value { font-size: 19px; }
  .sb-stats-row__label { font-size: 11px; }

  .sb-carousel__header { flex-wrap: wrap; }
  .sb-carousel__slide { flex-basis: 150px; }

  .sb-rank-item__meta { gap: 6px; }
  .sb-rank-item__footer { flex-wrap: wrap; gap: 6px; }

  .sb-manuscript-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

  .sb-research-item { flex-direction: column; }
  .sb-research-item__icon { width: 36px; height: 36px; }

  .sb-section-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sb-section-card { padding: 12px; }
  .sb-section-card__title { font-size: 14px; }

  .sb-author-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sb-author-card { padding: 18px 12px; }
  .sb-author-card__photo { width: 68px; height: 68px; }

  /* stays 3-per-row on phones, per request — just shrinks to fit */
  .sb-stats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-wrap: nowrap; }
  .sb-stat-card { flex: none; max-width: none; padding: 14px 8px; gap: 8px; }
  .sb-stat-card__icon { width: 36px; height: 36px; }
  .sb-stat-card__icon svg { width: 18px; height: 18px; }
  .sb-stat-card__value { font-size: 17px; }
  .sb-stat-card__label { font-size: 11px; line-height: 1.3; }
}