/* =================== Tokens =================== */

:root {

    --green-950: #062b20;

    --green-900: #0a3a2a;

    --green-800: #0e4f3a;

    --green-700: #136e52;

    --green-600: #178464;

    --green-300: #cfe8dd;

    --green-200: #e8f4ef;

    --green-100: #f4fbf8;

    --gold: #c9a227;

    --ink: #121a27;

    --muted: #5f6b72;

    --line: #e6eaee;

    --card: #ffffff;

    --bg: #fbfffd;

    --radius: 16px;

    --shadow: 0 18px 40px rgba(0, 0, 0, .06);

    --trans: .3s cubic-bezier(.2, .7, .2, 1)

}



* {

    box-sizing: border-box

}



html[dir="rtl"] {

    direction: rtl

}



body {

    margin: 0;

    background: var(--bg);

    color: var(--ink);

}



a {

    color: inherit;

    text-decoration: none

}



img {

    display: block;

    max-width: 100%

}



/* =================== Hero =================== */

.container {

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 16px

}



.section.hero--library {

    margin-top: 8px

}



.hero-wrap {

    position: relative;

    overflow: hidden;

    border-radius: 12px

}



.hero--library .hero-wrap img {

    width: 100%;

    height: 480px;

    object-fit: cover

}



.hero--library .geo {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .25;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><g fill="none" stroke="%23076B50" stroke-width="1"><path d="M70 0 140 70 70 140 0 70Z"/><circle cx="70" cy="70" r="18"/></g></svg>');

    background-size: 140px 140px;

    background-repeat: repeat

}



.hero--library .text {

    position: absolute;

    inset: auto 0 0 0;

    color: #fff;

    padding: 26px 18px 18px;

    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%)

}



.hero--library .text p {

    color: #fff;

}



.hero--library .text .h1 {

    margin: 0 0 6px;

    letter-spacing: .2px

}



.divider {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 16px 0 6px

}



.divider:before,

.divider:after {

    content: "";

    height: 1px;

    flex: 1;

    background: linear-gradient(to left, transparent, #b9ccbf 30%, transparent)

}



.kufic {

    display: inline-block;

    border: 1px solid #b9ccbf;

    border-radius: 6px;

    padding: 2px 8px;

    color: #2b564a;

    font-weight: 900;

    font-size: 12px;

    letter-spacing: 1px

}



/* =================== Featured Shelf =================== */

.wrap {

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 16px

}



.featured {

    display: grid;

    grid-template-columns: 1.8fr .9fr;

    gap: 16px;

    align-items: start

}



@media (max-width:1100px) {

    .featured {

        grid-template-columns: 1fr

    }

}



.featured .hero {

    background: var(--card);

    border: 1px solid var(--line);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: var(--shadow)

}



.featured .cover {

    position: relative

}



.featured .cover img {

    width: 100%;

    height: 270px;

    object-fit: cover

}



.ribbon {

    position: absolute;

    inset: 12px 12px auto auto;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 10px;

    padding: .25rem .55rem;

    font-weight: 900

}



.h-body {

    padding: 14px

}



.h-meta {

    color: var(--muted);

    font-size: .92rem;

    display: flex;

    gap: 8px;

    align-items: center;

    flex-wrap: wrap

}



.h-title {

    margin: 8px 0 6px;

    font-size: 1.35rem;

    line-height: 1.6

}



.h-excerpt {

    margin: 0;

    color: var(--muted)

}



.buttons {

    display: flex;

    gap: 8px;

    margin-top: 10px;

    flex-wrap: wrap

}



.btn {

    background: #fff;

    color: var(--green-900);

    border: 1px solid #90dac0;

    border-radius: 12px;

    padding: .6rem .9rem;

    cursor: pointer;

    font-weight: 900;

    display: inline-flex;

    gap: 8px;

    align-items: center;

    transition: var(--trans)

}



.btn:hover {

    box-shadow: 0 0 0 5px #90dac038;

    transform: translateY(-1px)

}



.btn.ghost {

    background: #f6fbf9;

    border-color: var(--line)

}



.btn.dl {

    background: var(--green-700);

    color: #fff;

    border-color: var(--green-800)

}



.btn.flat {

    background: #fff;

    border: 1px dashed var(--line);

    color: var(--green-900)

}



.side {

    display: flex;

    flex-direction: column;

    gap: 16px;

    height: max-content;

    position: sticky;

    top: 18px

}



.card {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 14px;

    box-shadow: var(--shadow);

    padding: 12px

}



.card .headx {

    font-weight: 900;

    margin-bottom: 8px

}



/* mini list (hot) */

.list-mini {

    display: grid;

    gap: 10px

}



.list-mini a {

    display: flex;

    gap: 10px;

    align-items: center;

    padding: 8px;

    border-radius: 12px;

    transition: .25s

}



.list-mini a:hover {

    background: var(--green-100)

}



.list-mini img {

    width: 64px;

    height: 46px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid var(--line)

}



.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px

}



.tag {

    border: 1px dashed var(--line);

    padding: .25rem .6rem;

    border-radius: 999px;

    font-size: .92rem;

    color: var(--muted);

    background: #fff;

    cursor: pointer

}



.tag:hover {

    border-style: solid

}



/* =================== Controls =================== */

.controls {

    display: grid;

    grid-template-columns: 1.4fr .8fr .8fr .6fr .8fr auto;

    gap: 10px;

    align-items: center;

    margin: -60px 0

}



@media (max-width:900px) {

    .controls {

        grid-template-columns: 1fr 1fr 1fr 1fr

    }

}



.input,

.controls select {

    border: 1px solid #d6dde3;

    background: #fff;

    color: #111;

    border-radius: 12px;

    padding: .65rem .8rem;

    font: inherit;

    outline: none

}



.input:focus,

.controls select:focus {

    box-shadow: 0 0 0 3px #90dac04f;

    border-color: #90dac0

}



.viewtog {

    display: flex;

    gap: 6px;

    justify-self: end

}



.viewtog button {

    border: 1px solid var(--line);

    background: #fff;

    color: var(--green-900);

    border-radius: 12px;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    cursor: pointer;

    transition: .2s

}



.viewtog button.active {

    border-color: #90dac0;

    box-shadow: 0 0 0 3px #90dac04f

}



/* =================== Grid / List =================== */

/* ================== Course-style Cards ================== */

#grid.course-container2 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 30px;

    width: 100%;

}



@media (max-width:1200px) {

    #grid.course-container2 {

        grid-template-columns: repeat(3, 1fr)

    }

}



@media (max-width:900px) {

    #grid.course-container2 {

        grid-template-columns: repeat(2, 1fr)

    }

}



@media (max-width:560px) {

    #grid.course-container2 {

        grid-template-columns: 1fr

    }

}



.course-box2 {

    width: 100%;

    max-width: 100%;

    border: 1px solid #e6e6e6;

    border-radius: 8px;

    transition: all .3s ease;

    padding: 10px;

    background: #fff;

    box-shadow: 0 10px 24px rgba(0, 0, 0, .04);

}



.course-box2:hover {

    box-shadow: 2px 20px 30px rgba(0, 0, 0, .06);

    border-color: #C9A227;

    transform: translateY(-1px);

}



/* image */

.course-img2 {

    width: 100%

}



.course-img2 img {

    width: 100%;

    height: 290px;

    object-fit: cover;

    object-position: center;

    margin-bottom: 8px;

    border-radius: 8px;

    border: 1px solid var(--line, #e6eaee);

}



/* text */

.course-text2 {

    display: block;

    gap: 10px

}



.course-text2 .category2 {

    display: inline-block;

    background: #0a3a2a;

    color: #fff;

    border-radius: 999px;

    padding: .15rem .6rem;

    font-size: .9rem;

    font-weight: 700;

    border: 1px solid #cfe8dd;

}



.course-text2 label {

    display: block;

    color: #111;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: all .3s ease;

    padding-top: 12px;

    line-height: 1.6;

}



.course-box2:hover .course-text2 label {

    color: #C9A227;

    font-size: 1.1rem;

}



.course-text2 p {

    color: #5f6b72;

    font-size: .9rem;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* meta row */

.lesson-time2 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 10px;

    gap: 8px;

}



.lesson-time2 span {

    font-size: .9rem;

    color: #27423a;

    font-weight: 500;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.lesson-time2 span i {

    color: #db1032

}





/* =================== Modal (جدید) =================== */

.modal-bg {

    position: fixed;

    inset: 0;

    background: #0008;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

    z-index: 80

}



.modal-bg.show {

    opacity: 1;

    pointer-events: auto

}



.modal {

    position: fixed;

    inset: auto 0 0 0;

    margin: auto;

    width: min(820px, 92vw);

    max-height: 88vh;

    transform: translateY(20px);

    opacity: 0;

    pointer-events: none;

    background: var(--card);

    border: 1px solid var(--line);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 50px 140px rgba(0, 0, 0, .5);

    z-index: 1000;

    transition: .3s

}



.modal.show {

    transform: none;

    opacity: 1;

    pointer-events: auto

}



.m-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 14px;

    border-bottom: 1px solid var(--line)

}



.m-head b {

    font-size: 1.05rem

}



.m-head .close {

    border: 0;

    background: #db1032;

    color: #fff;

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    cursor: pointer

}



.m-body {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 14px;

    padding: 14px

}



@media (max-width:680px) {

    .m-body {

        grid-template-columns: 1fr

    }

}



.m-body .cover {

    width: 100%;

    height: 260px;

    object-fit: cover;

    border: 1px solid var(--line);

    border-radius: 12px

}



.row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap

}



.kvp {

    background: #f7faf8;

    border: 1px solid var(--line);

    border-radius: 10px;

    padding: .25rem .5rem;

    color: #27423a

}



.stars {

    color: #f4b400;

    letter-spacing: 2px

}



/* =================== Utility =================== */

.sr-only {

    position: absolute !important;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0

}



/* ---------- Controls: Responsive, RTL-friendly ---------- */

.controls {

    display: grid;

    gap: 10px;

    align-items: stretch;

    margin: -60px 0;

    direction: rtl;

    grid-template-areas:

        "q q q cat author year sort view";

    grid-template-columns: repeat(8, 1fr);

}



/* فیلدها روی یک خط کامل در دسکتاپ */

.ctrl-q {

    grid-area: q;

}



.ctrl-cat {

    grid-area: cat;

}



.ctrl-author {

    grid-area: author;

}



.ctrl-year {

    grid-area: year;

}



.ctrl-sort {

    grid-area: sort;

}



.ctrl-view {

    grid-area: view;

    display: flex;

    gap: 6px;

    justify-content: flex-start;

}



/* ورودی‌ها و سلکت‌ها یکدست و بدون بریدگی متن */

.controls .input,

.controls select {

    border: 1px solid #d6dde3;

    background: #fff;

    color: #111;

    border-radius: 12px;

    padding: .65rem .8rem;

    font: inherit;

    outline: none;

    min-width: 0;

    /* جلوی اورفلو در گرید را می‌گیرد */

    white-space: nowrap;

    /* متن گزینه‌ها زیر هم نرود */

    text-overflow: ellipsis;

    overflow: hidden;

}



.controls .input:focus,

.controls select:focus {

    box-shadow: 0 0 0 3px #90dac04f;

    border-color: #90dac0;

}



/* دکمه‌های تغییر نما */

.viewtog button {

    border: 1px solid var(--line, #e6eaee);

    background: #fff;

    color: var(--green-900, #0a3a2a);

    border-radius: 12px;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    cursor: pointer;

    transition: .2s;

    flex: 0 0 auto;

}



.viewtog button.active {

    border-color: #90dac0;

    box-shadow: 0 0 0 3px #90dac04f;

}



/* --------- Breakpoints --------- */

/* تبلت: سرچ یک ردیف کامل، بقیه ردیف دوم؛ بدون بریدگی متن */

@media (max-width: 1024px) {

    .controls {

        grid-template-areas:

            "q q q q q q q q"

            "cat author year sort view view view view";

        grid-template-columns: repeat(8, 1fr);

    }

}



/* موبایل بزرگ: سه ردیف تمیز */

@media (max-width: 720px) {

    .controls {

        grid-template-areas:

            "q q q q"

            "cat author year sort"

            "view view view view";

        grid-template-columns: repeat(4, 1fr);

        margin: -35px 0;

    }

}



/* موبایل کوچک: تک‌ستونی، هرکدام یک ردیف کامل */

@media (max-width: 480px) {

    .controls {

        grid-template-areas:

            "q"

            "cat"

            "author"

            "year"

            "sort"

            "view";

        grid-template-columns: 1fr;

    }



    .controls .input,

    .controls select {

        white-space: normal;

    }



    /* اجازه چندخطی در خیلی عرض کم */

}



/* حداقل عرض منطقی برای بعضی آیتم‌ها تا متنشان کامل دیده شود (دسکتاپ/تبلت) */

.ctrl-q {

    min-width: 280px;

}



.ctrl-cat,

.ctrl-author {

    min-width: 180px;

}



.ctrl-year,

.ctrl-sort {

    min-width: 150px;

}



/* حالت پیش‌فرض: شبکه */

#grid.grid-view {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



@media (max-width:1200px) {

    #grid.grid-view {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width:900px) {

    #grid.grid-view {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width:560px) {

    #grid.grid-view {

        grid-template-columns: 1fr;

    }

}



/* حالت فهرست: کارت‌ها افقی می‌شوند */

#grid.list-view {

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

}



#grid.list-view .course-box2 {

    display: grid;

    grid-template-columns: 180px 1fr;

    /* تصویر + متن */

    align-items: start;

    gap: 12px;

    padding: 12px;

}



#grid.list-view .course-img2 img {

    height: 180px;

    /* تناسب در حالت افقی */

    margin-bottom: 0;

}



#grid.list-view .course-text2 label {

    font-size: 1.05rem;

}



#grid.list-view .lesson-time2 {

    margin-top: 8px;

}



/* ریزاستایل دکمه‌های سوییچ نما */

.viewtog button {

    border: 1px solid var(--line, #e6eaee);

    background: #fff;

    color: var(--green-900, #0a3a2a);

    border-radius: 12px;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    cursor: pointer;

    transition: .2s;

}



.viewtog button.active {

    border-color: #90dac0;

    box-shadow: 0 0 0 3px #90dac04f;

}



/* گروه دکمه‌ها */

.viewtog {

    display: inline-flex;

    gap: 8px;

    align-items: center;

    /* دکمه‌ها در محور عمودی دقیقاً وسط */

}



/* خود دکمه‌ها: مربع، بزرگ‌تر، کلیک‌پذیرتر */

.viewtog button {

    width: 48px;

    height: 48px;

    border: 1px solid var(--line, #e6eaee);

    background: #fff;

    color: var(--green-900, #0a3a2a);

    border-radius: 12px;

    display: grid;

    /* وسط‌چین واقعی */

    place-items: center;

    /* وسط‌چین افقی/عمودی */

    cursor: pointer;

    transition: .2s;

    padding: 0;

    /* تا آیکن دقیقاً وسط باشه */

}



/* آیکن‌ها: بزرگ‌تر و دقیقاً وسط */

.viewtog button i {

    font-size: 22px;

    /* اندازه آیکن */

    line-height: 1;

    /* بدون کشیدگی عمودی */

    display: block;

    /* جلوگیری از خط‌پایه‌ی اضافی */

}



/* حالت فعال */

.viewtog button.active {

    border-color: #90dac0;

    box-shadow: 0 0 0 3px #90dac04f;

}



/* لمسی‌تر روی موبایل‌های کوچک */

@media (max-width:560px) {

    .viewtog button {

        width: 52px;

        height: 52px;

    }



    .viewtog button i {

        font-size: 24px;

    }

}



/* دکمه بستن داخل هدر مودال */

.m-head .close {

    margin-inline-start: auto;

    /* در RTL می‌چسبه به سمت چپ هدر */

    width: 48px;

    /* تاچ تارگت استاندارد */

    height: 48px;

    border: 0;

    padding: 0;

    /* مزاحمِ مرکزقرارگیری نشه */

    border-radius: 12px;

    background: #db1032;

    color: #fff;

    display: grid;

    /* وسط‌چین واقعی */

    place-items: center;

    /* افقی/عمودی دقیقاً وسط */

    cursor: pointer;

    transition: transform .15s ease, box-shadow .2s ease;

}



.m-head .close:hover {

    box-shadow: 0 0 0 3px rgba(219, 16, 50, .18);

}



.m-head .close:active {

    transform: translateY(1px);

}



/* خود آیکن ضربدر (Remix Icon یا Font Awesome) */

.m-head .close i {

    font-size: 22px;

    /* بزرگ‌تر و خواناتر */

    line-height: 1;

    /* جلوگیری از آفست عمودی */

    display: block;

    /* پایه‌ی متن حذف شود */

}



/* اگر جایی از پروژه «close-x» هم داری (مثل صفحه مقالات) */

.close-x {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    padding: 0;

    display: grid;

    place-items: center;

}



.close-x i {

    font-size: 22px;

    line-height: 1;

    display: block;

}



/* موبایل: کمی بزرگ‌تر برای لمس راحت‌تر */

@media (max-width:560px) {



    .m-head .close,

    .close-x {

        width: 52px;

        height: 52px;

    }



    .m-head .close i,

    .close-x i {

        font-size: 24px;

    }

}





/* --- بارگذاری بیشتر: وسط‌چین و هاور مثل ضربدر --- */

.wrap .more {

    width: 100%;

    margin: 22px 0 36px;

    display: grid;

    /* وسط‌چین واقعی */

    place-items: center;

    /* افقی/عمودی */

}



/* خود دکمه */

.wrap .more .btn.flat {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 220px;

    /* لمس راحت‌تر */

    padding: .75rem 1.1rem;

    border: 1px solid #90dac0;

    border-radius: 12px;

    background: #fff;

    color: #0b3f28;

    box-shadow: none;

    transform: translateY(0);

    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;

}



/* آیکن داخل دکمه */

.wrap .more .btn.flat i {

    font-size: 18px;

    line-height: 1;

    display: block;

}



/* هاور شبیه کلید بستن (حلقه قرمز) */

.wrap .more .btn.flat:hover {

    box-shadow: 0 0 0 3px rgba(16, 219, 124, 0.18);

    transform: translateY(-1px);

}



/* حالت کلیک */

.wrap .more .btn.flat:active {

    transform: translateY(0);

}



/* اگر احیاناً داخل گرید افتاد، یک‌ستونه‌اش کن */

#booksWrap+.more {

    grid-column: 1 / -1;

}