/*
   ─────────────────────────────────────────────────────────────
   الكتب والمذكرات
   ─────────────────────────────────────────────────────────────
   الغلاف طولي (٣×٤) وعليه ظل كعب — الكارت يتقري «كتاب» من نظرة،
   مش كارت كورس بصورة عريضة. الألوان من طقم النحاسي (--a-*) عشان
   المكتبة تبان ركن مميّز جوه المنصة الزرقا، وكلها أدوار تتقلب في الليلي.
*/

/* ══════════════════════════════════════════
   الشبكة والكارت
   ══════════════════════════════════════════ */

/* شبكة الكتب بنفس أعمدة شبكة الكورسات (‎.card-grid‎ في pages.css وresponsive.css
   وapp.css) — كارت الكتاب بنفس عرض كارت الكورس على الكمبيوتر والتابلت، فالمكتبة
   والكتالوج شكلهم واحد. الموبايل بس ليه عمودين (تحت) لأن الغلاف طولي. */

/* الكارت وكل اللي شايله يصغروا مع العمود: سطر اسم الكورس nowrap، ومن غير min-width: 0
   اسم طويل كان بيوسّع الكارت أعرض من الشاشة بدل ما يتقطع بـ «…» */
.book-grid > *,
.book-card,
.book-card__link,
.book-card__body { min-width: 0; }

.book-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.book-card:hover {
    transform: translateY(-3px);
    border-color: var(--a-500);
    box-shadow: var(--sh-3);
}

.book-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.book-card__link:hover { color: inherit; text-decoration: none; }

.book-card__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    /* لون غلاف ثابت مش توكن: الغلاف «ورق» مابيتقلبش مع الليلي، والنحاسي الفاتح هناك بيبقى فاقع */
    background: linear-gradient(160deg, #b45309, #78350f);
}

.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.book-card:hover .book-card__cover img { transform: scale(1.04); }

/* بديل الغلاف: لون النحاسي بدل الأزرق عشان الكتب تفضل مميّزة حتى من غير صورة */
.book-card__cover .cover-fallback { background: linear-gradient(160deg, #b45309, #78350f); color: #fff; }

/* كعب الكتاب: ظل رفيع على ناحية بداية السطر + لمعة خفيفة جنبه */
.book-card__spine {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 14px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 70%, rgba(255, 255, 255, .18));
    pointer-events: none;
}

html[dir='ltr'] .book-card__spine {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 70%, rgba(255, 255, 255, .18));
}

.book-card__kind,
.book-card__badge {
    position: absolute;
    inset-block-start: var(--s-2);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}

.book-card__kind {
    inset-inline-start: calc(14px + var(--s-1));
    background: rgba(255, 255, 255, .92);
    color: #1f2937;
}

.book-card__badge {
    inset-inline-end: var(--s-2);
    background: #facc15;
    color: #422006;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}

.book-card__body { flex: 1; padding: var(--s-3) var(--s-4) var(--s-2); }

.book-card__title {
    margin: 0 0 var(--s-1);
    font-size: var(--t-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.book-card:hover .book-card__title { color: var(--a-600); }

.book-card__course,
.book-card__release {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0 0 var(--s-2);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.book-card__course { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.book-card__release { color: var(--a-600); font-weight: var(--fw-semibold); }

.book-card__formats { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }

.format-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-2);
    background: var(--surface-inset);
}

.book-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--line-soft);
}

.price__from { display: block; font-size: var(--t-2xs); font-weight: var(--fw-medium); color: var(--text-muted); }

.book-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .35rem .8rem;
    border-radius: var(--r-pill);
    background: var(--a-50);
    color: var(--a-700);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.book-card:hover .book-card__cta { background: var(--a-600); color: #fff; }

/* ══════════════════════════════════════════
   قسم الرئيسية — شريط ملوّن بعرض الصفحة
   ══════════════════════════════════════════ */

.books-band {
    position: relative;
    padding-block: var(--s-9, 3.5rem);
    background:
        radial-gradient(60rem 20rem at 85% -10%, color-mix(in srgb, var(--a-500) 22%, transparent), transparent 70%),
        linear-gradient(180deg, var(--a-50), var(--canvas));
    border-block: 1px solid var(--a-100);
}

.books-band__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-6);
}

.books-band__icon,
.books-hero__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, var(--a-500), var(--a-700));
    color: #fff;
    box-shadow: 0 12px 24px -12px var(--a-600);
    transform: rotate(-6deg);
}

.books-band__icon .icon,
.books-hero__icon .icon { width: 1.8rem; height: 1.8rem; }

.books-band__text { flex: 1; min-width: 14rem; }

.books-band__title,
.books-hero__title {
    margin: 0;
    font-size: var(--t-2xl, 1.75rem);
    font-weight: var(--fw-bold);
}

.books-band__subtitle,
.books-hero__subtitle { margin: var(--s-1) 0 0; color: var(--text-muted); max-width: 44rem; }

/* ══════════════════════════════════════════
   صفحة الكتب
   ══════════════════════════════════════════ */

.books-hero {
    padding-block: var(--s-7) var(--s-6);
    background:
        radial-gradient(50rem 18rem at 90% -20%, color-mix(in srgb, var(--a-500) 25%, transparent), transparent 70%),
        var(--a-50);
    border-bottom: 1px solid var(--a-100);
}

.books-hero__inner { display: flex; align-items: center; gap: var(--s-4); }

.books-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.books-filters__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.5rem;
    padding: .35rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.filter-chip:hover { border-color: var(--a-500); color: var(--text); text-decoration: none; }

.filter-chip.is-active {
    border-color: transparent;
    background: var(--a-600);
    color: #fff;
}

.books-how {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-top: var(--s-8);
    padding: var(--s-4) var(--s-5);
    border: 1px dashed var(--line-strong, var(--line));
    border-radius: var(--r-lg);
    background: var(--surface);
}

.books-how p { margin: var(--s-1) 0 0; color: var(--text-muted); }

.books-how__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
}

.books-how__icon .icon { fill: currentColor; stroke: none; }

/* عنوان قسم فيه أيقونة (صفحة الكورس وكورساتي) */
.books-shelf .section-head__title { display: inline-flex; align-items: center; gap: var(--s-2); }
.books-shelf .section-head__title .icon { color: var(--a-500); }

/* ══════════════════════════════════════════
   صفحة الكتاب
   ══════════════════════════════════════════ */

.book-detail {
    display: grid;
    grid-template-columns: minmax(13rem, 21rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
    margin-top: var(--s-4);
}

.book-detail__cover { position: sticky; inset-block-start: calc(var(--header-h, 4rem) + var(--s-4)); }

.book-detail__cover-frame {
    border-radius: var(--r-lg);
    box-shadow: 0 30px 50px -28px rgba(15, 23, 42, .55), 0 8px 18px -10px rgba(15, 23, 42, .25);
}

.book-detail__title {
    margin: var(--s-3) 0 var(--s-3);
    font-size: var(--t-3xl, 2rem);
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

.book-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
    color: var(--text-muted);
}

.book-detail__meta li { display: inline-flex; align-items: center; gap: var(--s-1); }

.book-detail__description { font-size: var(--t-md); line-height: var(--lh-body); white-space: pre-line; }

.book-detail__soon { align-items: center; font-weight: var(--fw-semibold); }

.book-detail__choose { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-lg); font-weight: var(--fw-bold); }

.format-options { display: grid; gap: var(--s-3); }

.format-option {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.format-option:hover { border-color: var(--a-500); box-shadow: var(--sh-2); }

.format-option__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r);
    background: var(--a-50);
    color: var(--a-600);
}

.format-option__icon .icon { width: 1.5rem; height: 1.5rem; }

.format-option__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.format-option__title { font-size: var(--t-md); }
.format-option__hint { font-size: var(--t-sm); color: var(--text-muted); }

.format-option__buy { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }

.format-option__price { font-size: var(--t-xl); font-weight: var(--fw-bold); white-space: nowrap; }
.format-option__price small { font-size: var(--t-sm); color: var(--text-muted); }

.book-detail__how {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-top: var(--s-5);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.book-detail__how .icon { margin-top: .2em; }

/* الليلي: النحاسي بيبقى أصفر فاتح — النص والأيقونات عليه لازم تغمق عشان تتقري */
[data-theme='dark'] .filter-chip.is-active,
[data-theme='dark'] .book-card:hover .book-card__cta,
[data-theme='dark'] .books-band__icon,
[data-theme='dark'] .books-hero__icon { color: #1c1403; }

/* ══════════════════════════════════════════
   صفحة الكورس — كارت كتب المادة تحت كارت الحجز
   ══════════════════════════════════════════
   العمود كله (الحجز + الكتب) هو اللي بيلزق وانت بتسكرول، مش كارت الحجز
   لوحده — وإلا الكتب تتزق تحته وتختفي ورا الكارت اللازق. */

.course-hero__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-4));
    display: grid;
    gap: var(--s-4);
}

.course-hero__aside > .buy-card { position: static; }

.course-books {
    padding: var(--s-4) var(--s-5) var(--s-5);
    background: var(--surface);
    border-radius: var(--r-lg);
    border-top: 4px solid var(--a-500);
    box-shadow: var(--sh-4);
    color: var(--text);
}

.course-books__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }

.course-books__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r);
    background: linear-gradient(140deg, var(--a-500), var(--a-700));
    color: #fff;
    transform: rotate(-6deg);
}

.course-books__title { margin: 0; font-size: var(--t-md); font-weight: var(--fw-bold); }
.course-books__hint { margin: .1rem 0 0; font-size: var(--t-xs); color: var(--text-muted); }

.course-books__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.course-book {
    display: flex;
    gap: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line-soft);
}

.course-book:first-child { padding-top: 0; border-top: 0; }

.course-book__cover {
    display: block;
    flex: none;
    width: 4.25rem;
    border-radius: .4rem;
    box-shadow: 0 8px 16px -10px rgba(15, 23, 42, .5);
}

.course-book__cover .cover-fallback { padding: .35rem; }
.course-book__cover .cover-fallback__title { font-size: .6rem; }
.course-book__cover .book-card__spine { width: 7px; }

.course-book__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.course-book__title {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.course-book__title:hover { color: var(--a-600); text-decoration: none; }

.course-book__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.course-book__tags .pill { font-size: var(--t-2xs); }

.course-book__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* زرار طلب لكل صيغة: أخضر واتساب، وجواه الصيغة والسعر — ضغطة واحدة ويتبعت الطلب */
.course-book__order {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    background: var(--a-50);
    color: var(--a-700);
    border: 1px solid var(--a-100);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.course-book__order:hover { border-color: var(--a-500); color: var(--a-700); text-decoration: none; }

.course-book__order.is-whatsapp { background: #1f9d55; color: #fff; border-color: transparent; }
.course-book__order.is-whatsapp:hover { background: #178046; color: #fff; }
.course-book__order:active { transform: scale(.97); }
.course-book__order.is-whatsapp .icon { fill: currentColor; stroke: none; }
.course-book__order strong { padding-inline-start: .35rem; border-inline-start: 1px solid currentColor; border-inline-start-color: color-mix(in srgb, currentColor 40%, transparent); }

/* شاشات بعمود واحد: الحجز والكتب تحت عنوان الكورس، مش لازقين */
@media (max-width: 991px) {
    .course-hero__aside { position: static; max-width: 32rem; }
}

@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .course-hero__aside { position: static; max-width: none; }
}

/* صورة صغيرة في قايمة الأدمن — بنسبة الغلاف الطولي */
.book-admin-thumb {
    width: 2.5rem;
    height: 3.3rem;
    object-fit: cover;
    border-radius: .35rem;
    margin-inline-end: .5rem;
}

/* ══════════════════════════════════════════
   تابلت وموبايل
   ══════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .book-detail { grid-template-columns: 1fr; gap: var(--s-5); }

    /* الغلاف في النص وأصغر — العنوان وأزرار الطلب هما الأهم على الموبايل */
    .book-detail__cover { position: static; max-width: 15rem; margin-inline: auto; width: 100%; }

    .book-detail__title { font-size: var(--t-2xl, 1.6rem); text-align: center; }
    .book-detail__info > .pill { display: flex; width: fit-content; margin-inline: auto; }
    .book-detail__meta { justify-content: center; }

    .format-option { flex-wrap: wrap; padding: var(--s-4); }
    .format-option__buy { width: 100%; justify-content: space-between; }
    .format-option__buy .btn { flex: 1; justify-content: center; }

    .books-band { padding-block: var(--s-7); }
    .books-band__all { width: 100%; justify-content: center; }
    .books-band__title, .books-hero__title { font-size: var(--t-xl); }
    .books-band__icon, .books-hero__icon { width: 3rem; height: 3rem; }

    .books-filters { flex-direction: column; }
    .books-filters__group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .books-filters__group::-webkit-scrollbar { display: none; }
    .filter-chip { white-space: nowrap; }

    .card-grid.book-grid:not(.card-grid--rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .book-card__body { padding: var(--s-2) var(--s-3) var(--s-1); }
    .book-card__footer { padding: var(--s-2) var(--s-3); flex-wrap: wrap; }
    .book-card__title { font-size: var(--t-ui); }
}

/* الكتب على الرف الأفقي أضيق من كروت الكورسات — الغلاف طولي */
@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .book-grid.card-grid--rail > * { flex-basis: min(46%, 13rem); }
}

@media (prefers-reduced-motion: reduce) {
    .book-card, .book-card__cover img { transition: none; }
    .book-card:hover, .book-card:hover .book-card__cover img { transform: none; }
}

/* ══════════════════════════════════════════
   نموذج الكتاب (PDF)
   ══════════════════════════════════════════ */

/* الغلاف بيتدوس عليه يفتح النموذج — طبقة «بص جوه الكتاب» بتظهر من تحت */
.book-detail__peek {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--s-4);
    border: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 45%);
    color: #fff;
    cursor: zoom-in;
    opacity: .92;
    transition: opacity var(--dur) var(--ease);
}

.book-detail__peek span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .95);
    color: #1f2937;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}

.book-detail__peek:hover,
.book-detail__peek:focus-visible { opacity: 1; }

.sample-btn {
    margin-top: var(--s-4);
    justify-content: center;
    background: linear-gradient(135deg, var(--a-600), var(--a-700));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 22px -12px var(--a-600);
}

.sample-btn:hover { color: #fff; filter: brightness(1.08); }

.sample-btn__hint {
    margin: var(--s-2) 0 0;
    text-align: center;
    font-size: var(--t-sm);
    color: var(--text-muted);
}

.format-chip--sample { background: var(--a-50); border-color: var(--a-100); color: var(--a-700); }

.course-book__sample {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    color: var(--a-600);
}

/* ── العارض على صفحة الكتاب ── */

.book-sample {
    margin-top: var(--s-10, 3rem);
    padding-top: var(--s-8);
    border-top: 1px solid var(--line-soft);
}

.book-sample__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.book-sample__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r);
    background: var(--a-50);
    color: var(--a-600);
}

.book-sample__heading { min-width: 0; }
.book-sample__heading h2 { margin: 0; font-size: var(--t-xl, 1.35rem); font-weight: var(--fw-bold); }
.book-sample__heading p { margin: .15rem 0 0; color: var(--text-muted); font-size: var(--t-sm); }

/* إطار بارتفاع ثابت بيتسحب جوّاه — نموذج طويل مايطوّلش الصفحة كلها */
.book-sample__frame {
    display: flex;
    flex-direction: column;
    height: min(82vh, 60rem);
    height: min(82dvh, 60rem);
    min-height: 24rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
    overflow: hidden;
}

.book-sample__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.book-sample__counter {
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.book-sample__counter:empty { visibility: hidden; }

.book-sample__expand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.book-sample__expand:hover { border-color: var(--a-500); color: var(--a-700); }

/* السكرول بيكمّل للصفحة لما الطالب يوصل لآخر النموذج — مايتحبسش جوه الإطار */
.book-sample .book-sample__pages { overscroll-behavior: auto; }
.book-sample .book-sample__pages:focus-visible { outline: 2px solid var(--a-500); outline-offset: -2px; }

.book-sample .sample-page { box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .35); }
.book-sample .sample-viewer__status,
.book-sample .sample-viewer__fallback { color: var(--text-muted); }
.book-sample .sample-viewer__spinner { border-color: var(--line); border-top-color: var(--a-500); }

.book-sample__order {
    display: flex;
    width: min(100%, 24rem);
    margin: var(--s-5) auto 0;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .book-sample { margin-top: var(--s-8); padding-top: var(--s-6, 1.5rem); }

    /* الإطار من الحافة للحافة — الصفحة تاخد كل العرض المتاح */
    .book-sample__frame {
        height: min(78dvh, 44rem);
        margin-inline: calc(var(--gutter, 1rem) * -1);
        border-radius: 0;
        border-inline: 0;
    }

    .book-sample .book-sample__pages { padding: var(--s-3); gap: var(--s-3); }
}

/* ── العارض: dialog بملء الشاشة ── */

.has-sample-open { overflow: hidden; }

.sample-viewer {
    width: min(100vw, 56rem);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: #1e2330;
    color: #fff;
    display: none;
    flex-direction: column;
}

.sample-viewer[open] { display: flex; }
.sample-viewer::backdrop { background: rgba(8, 11, 20, .82); backdrop-filter: blur(4px); }

.sample-viewer__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--s-4) var(--s-3);
    background: #151924;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sample-viewer__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sample-viewer__heading strong { font-size: var(--t-sm); color: #facc15; }

.sample-viewer__book {
    font-size: var(--t-ui);
    font-weight: var(--fw-bold);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sample-viewer__counter {
    flex: none;
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

.sample-viewer__counter:empty { display: none; }

.sample-viewer__close {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sample-viewer__close:hover { background: rgba(255, 255, 255, .2); }

.sample-viewer__pages {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
}

.sample-page {
    /* من غيرها الصفحات بتنكمش عشان تساع العمود (flex) وتبقى شرايط رفيعة */
    flex: none;
    width: 100%;
    max-width: 48rem;
    /* الـ canvas بياخد اتجاه الكتابة من الصفحة؛ في RTL بيرسم نص الـ PDF بالعكس
       فالعربي يطلع مفكّك. pdf.js بيحدد مكان كل حرف بنفسه، فالاتجاه هنا لازم LTR */
    direction: ltr;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    overflow: hidden;
}

/* الصفحة لسه ماترسمتش: لمعة خفيفة بدل مربع أبيض ساكت */
.sample-page:not(.is-rendered) {
    background: linear-gradient(100deg, #eef0f4 30%, #f8f9fb 50%, #eef0f4 70%) 0 0 / 200% 100%;
    animation: sample-shimmer 1.2s linear infinite;
}

.sample-page canvas { display: block; width: 100%; height: auto; }

@keyframes sample-shimmer { to { background-position: -200% 0; } }

.sample-viewer__status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: auto;
    color: rgba(255, 255, 255, .8);
}

.sample-viewer__spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #facc15;
    border-radius: 50%;
    animation: sample-spin .8s linear infinite;
}

@keyframes sample-spin { to { transform: rotate(360deg); } }

.sample-viewer__fallback { margin: auto; text-align: center; color: rgba(255, 255, 255, .85); }

.sample-viewer__foot {
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: #151924;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: center;
}

.sample-viewer__order { width: min(100%, 24rem); justify-content: center; }

/* رفع النموذج في شاشة الأدمن */
.sample-upload__current {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--a-100);
    border-radius: var(--r);
    background: var(--a-50);
    color: var(--a-700);
    font-size: var(--t-sm);
}

.sample-upload__current[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sample-page:not(.is-rendered), .sample-viewer__spinner { animation: none; }
}