/* Bab Sebta Flipbook v2 — flipbook.css */

/* Wrapper */
.bsf-wrapper {
    direction: rtl;
    max-width: 800px;
    margin: 2rem auto;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    user-select: none;
}

.bsf-book-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

/* Controls */
.bsf-controls-top,
.bsf-controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.bsf-ctrl-btn {
    padding: 9px 20px;
    border: 1.5px solid #534AB7;
    border-radius: 8px;
    background: #fff;
    color: #534AB7;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.bsf-ctrl-btn:hover {
    background: #534AB7;
    color: #fff;
}


.bsf-counter {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
}

/* Progress */
.bsf-progress-wrap {
    flex: 1;
    height: 4px;
    background: #ebebeb;
    border-radius: 2px;
    overflow: hidden;
}
.bsf-progress {
    height: 4px;
    background: #534AB7;
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Flipbook viewport */
.bsf-flip-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    /* subtle shadow under the book */
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.18));
}

/* Turn.js container */
.bsf-flipbook {
    /* width and height set by JS */
}

/* Individual pages */
.bsf-pg {
    overflow: hidden;
    background: #fff;
}

/* --- Cover --- */
.bsf-cover {
    background: linear-gradient(145deg, #3C3489, #534AB7);
}
.bsf-cover-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: #fff;
}
.bsf-cover-icon { font-size: 52px; margin-bottom: 16px; }
.bsf-cover-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.4;
}
.bsf-cover-sub {
    font-size: 13px;
    opacity: 0.75;
    margin: 0;
}

/* --- Back cover --- */
.bsf-back-cover {
    background: linear-gradient(145deg, #26215C, #3C3489);
}
.bsf-back-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 2rem;
    font-size: 16px;
}

/* --- Content page --- */
.bsf-content-page {
    display: flex;
    flex-direction: column;
    border: 0.5px solid #e8e8e8;
    /* Subtle inner shadow to simulate page depth */
    box-shadow: inset -2px 0 8px rgba(0,0,0,0.04);
}

.bsf-pg-image {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.bsf-pg-body {
    padding: 30px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    overflow: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bsf-pg-body.has-image {
    padding-top: 12px;
}

.bsf-pg-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    background: #EEEDFE;
    color: #3C3489;
    margin-bottom: 14px;
    align-self: center;
}

.bsf-pg-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 0 14px !important;
    line-height: 1.5 !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100%;
}

.bsf-pg-text {
    font-size: 15px;
    color: #333;
    line-height: 1.95;
    margin: 0 0 14px;
    text-align: center;
    width: 100%;
    max-width: 90%;
}

.bsf-pg-highlight {
    background: #f8f7fe;
    border: 1px solid #d8d3f0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    margin-top: 14px;
    text-align: center;
    max-width: 90%;
}

.bsf-pg-num {
    position: absolute;
    bottom: 10px;
    left: 14px;
    font-size: 11px;
    color: #bbb;
}

/* Turn.js gradient overlays — keep them subtle */
.gradient {
    background: linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 100%);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .bsf-book-title { font-size: 18px; }
    .bsf-ctrl-btn { padding: 7px 12px; font-size: 13px; }
    .bsf-pg-image { height: 160px; }
    /* تقليل الأحجام شوية على الموبايل عشان تناسب الشاشة */
    .bsf-flipbook[data-fontsize="small"]  .bsf-pg-text     { font-size: 14px; }
    .bsf-flipbook[data-fontsize="small"]  .bsf-pg-heading  { font-size: 18px !important; }
    .bsf-flipbook[data-fontsize="normal"] .bsf-pg-text     { font-size: 18px; }
    .bsf-flipbook[data-fontsize="normal"] .bsf-pg-heading  { font-size: 22px !important; }
    .bsf-flipbook[data-fontsize="large"]  .bsf-pg-text     { font-size: 22px; }
    .bsf-flipbook[data-fontsize="large"]  .bsf-pg-heading  { font-size: 26px !important; }
    .bsf-flipbook[data-fontsize="xlarge"] .bsf-pg-text     { font-size: 28px; }
    .bsf-flipbook[data-fontsize="xlarge"] .bsf-pg-heading  { font-size: 32px !important; }
    .bsf-flipbook[data-fontsize="huge"]   .bsf-pg-text     { font-size: 34px; }
    .bsf-flipbook[data-fontsize="huge"]   .bsf-pg-heading  { font-size: 38px !important; }
}

/* --- Cover with background image --- */
.bsf-cover {
    position: relative;
    overflow: hidden;
}
.bsf-cover-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.bsf-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
    z-index: 1;
}
.bsf-cover-inner {
    position: relative;
    z-index: 2;
}
/* When cover has image, push title to bottom */
.bsf-cover .bsf-cover-bg ~ .bsf-cover-overlay ~ .bsf-cover-inner,
.bsf-cover:has(.bsf-cover-bg) .bsf-cover-inner {
    justify-content: flex-end;
    padding-bottom: 2rem;
}

/* ===== واقعية الكتاب المزدوج (v2.5) ===== */

/* خط الطي في منتصف الكتاب */
.bsf-flipbook.double .bsf-pg {
    box-shadow: inset 0 0 8px rgba(0,0,0,0.08);
}

/* الصفحة اليمنى — ظل ناعم على حافة الطي اليسرى */
.bsf-flipbook.double .even .bsf-content-page {
    box-shadow: inset 6px 0 14px -6px rgba(0,0,0,0.22);
}
/* الصفحة اليسرى — ظل ناعم على حافة الطي اليمنى */
.bsf-flipbook.double .odd .bsf-content-page {
    box-shadow: inset -6px 0 14px -6px rgba(0,0,0,0.22);
}

/* ظل الكتاب السفلي للعمق */
.bsf-flip-wrap {
    filter: drop-shadow(0 16px 40px rgba(0,0,0,0.25));
}

/* حواف الصفحات (تأثير ورق مكدس) */
.bsf-flipbook .bsf-pg {
    background: #fff;
}

/* تحسين الغلاف في العرض المزدوج */
.bsf-flipbook.double .bsf-cover,
.bsf-flipbook.double .bsf-back-cover {
    box-shadow: inset 0 0 20px rgba(0,0,0,0.25);
}

/* الصفحة الفارغة (لضبط العدد الزوجي) */
.bsf-blank-page {
    background: #fff;
}

/* turn.js يحتاج LTR على عنصر الكتاب نفسه — المحتوى يبقى RTL */
.bsf-flipbook {
    direction: ltr;
}
.bsf-flipbook .bsf-pg-body,
.bsf-flipbook .bsf-cover-inner,
.bsf-flipbook .bsf-back-inner {
    direction: rtl;
    text-align: right;
}
.bsf-flipbook .bsf-cover-inner,
.bsf-flipbook .bsf-back-inner {
    text-align: center;
}

/* ========== v4: CSS 3D Flip (بدون turn.js) ========== */

.bsf-flipbook {
    position: relative;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1 / 1.3;
    margin: 0 auto;
    perspective: 2000px;
    transform-style: preserve-3d;
}

.bsf-flipbook .bsf-pg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform-origin: left center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotateY(0deg);
    display: none;
}

/* الصفحة الحالية والمقلوبة تظهر */
.bsf-flipbook .bsf-pg.bsf-current,
.bsf-flipbook .bsf-pg.bsf-flipping-next,
.bsf-flipbook .bsf-pg.bsf-flipping-prev,
.bsf-flipbook .bsf-pg.bsf-flipped {
    display: block;
}

/* الصفحة المقلوبة (تختفي خلف اليسار) */
.bsf-flipbook .bsf-pg.bsf-flipped {
    transform: rotateY(-180deg);
    pointer-events: none;
}

/* أنيميشن قلب للأمام */
.bsf-flipbook .bsf-pg.bsf-flipping-next {
    transform: rotateY(-180deg);
    z-index: 100;
}

/* أنيميشن قلب للخلف */
.bsf-flipbook .bsf-pg.bsf-flipping-prev {
    transform: rotateY(0deg);
    z-index: 100;
}

/* ظل ديناميكي أثناء القلب */
.bsf-flipbook .bsf-pg.bsf-flipping-next::after,
.bsf-flipbook .bsf-pg.bsf-flipping-prev::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.2));
    pointer-events: none;
}

/* مظهر مزدوج: نخلي الكتاب يبان عريض على الديسكتوب */
@media (min-width: 700px) {
    .bsf-flipbook {
        max-width: 800px;
        aspect-ratio: 1.4 / 1;
    }
    /* خط طي في المنتصف */
    .bsf-flipbook::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(0,0,0,0.1);
        z-index: 1;
        pointer-events: none;
    }
}

/* ========== v4.1: أزرار تحجيم النص ========== */
.bsf-font-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
}

.bsf-font-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #534AB7;
    background: #fff;
    color: #534AB7;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.bsf-font-btn:hover {
    background: #534AB7;
    color: #fff;
    transform: scale(1.05);
}

.bsf-font-btn:active {
    transform: scale(0.95);
}

.bsf-font-label {
    font-size: 12px;
    color: #888;
    margin: 0 4px;
}

/* مستويات النص */
.bsf-flipbook[data-fontsize="small"]  .bsf-pg-text     { font-size: 18px; line-height: 1.8; }
.bsf-flipbook[data-fontsize="small"]  .bsf-pg-heading  { font-size: 22px !important; }

.bsf-flipbook[data-fontsize="normal"] .bsf-pg-text     { font-size: 24px; line-height: 1.9; }
.bsf-flipbook[data-fontsize="normal"] .bsf-pg-heading  { font-size: 28px !important; }

.bsf-flipbook[data-fontsize="large"]  .bsf-pg-text     { font-size: 24px; line-height: 2; }
.bsf-flipbook[data-fontsize="large"]  .bsf-pg-heading  { font-size: 24px !important; }

.bsf-flipbook[data-fontsize="xlarge"] .bsf-pg-text     { font-size: 24px; line-height: 2.1; }
.bsf-flipbook[data-fontsize="xlarge"] .bsf-pg-heading  { font-size: 42px !important; }

.bsf-flipbook[data-fontsize="huge"]   .bsf-pg-text     { font-size: 24px; line-height: 2.2; }
.bsf-flipbook[data-fontsize="huge"]   .bsf-pg-heading  { font-size: 24px !important; }