:root {
    --brown: #A67B5C; /* رنگ اصلی قهوه‌ای */
    --brown-light: #D0C59A; /* قهوه‌ای روشن */
    --green-accent: #417154; /* سبز اصلی برند */
    --green-light: #6D9775; /* سبز روشن */
    --beige: #C8B282; /* بژ */
    --green-dark: #104730; /* سبز تیره */
}

/* =========================
   عمومی
   ========================= */
body {
    font-family: 'Shabnam', Tahoma, serif; /* فونت اصلی متن */
    background-color: #fff; /* پس‌زمینه سفید */
    color: #333; /* رنگ متن خاکستری تیره */
    padding-top: 80px; /* فاصله برای navbar ثابت */
    font-size: 1.1rem; /* اندازه متن */
    line-height: 2; /* فاصله خطوط */
    margin-top: 4rem;
}

main.container {
    margin-top: 4rem;
}
/* فاصله بالای main */

/* =========================
   Navbar
   ========================= */
.custom-navbar {
    background-color: #fff; /* پس‌زمینه سفید */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* سایه زیر نوار */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* خط باریک پایین */
    z-index: 1000; /* بالاتر از بقیه */
    top: 0;
    padding: 0.1rem 0 !important; /* ارتفاع کم */
    left: 0;
    right: 0;
    width: 100%;
}

.container-fluid {
    padding-inline: 12px;
}

.navbar-content {
    display: flex; /* چینش فلکس */
    justify-content: space-between; /* فاصله بین آیتم‌ها */
    align-items: center; /* وسط‌چین عمودی */
}

.nav-link-custom {
    color: var(--green-accent); /* رنگ لینک سبز */
    font-family: 'tooba' !important; /* فونت لینک‌ها */
    font-weight: 500 !important; /* ضخیم */
    font-size: 1.3rem !important;
    text-decoration: none; /* بدون خط زیر */
    transition: color 0.2s ease; /* تغییر نرم رنگ */
}

    .nav-link-custom:hover {
        color: var(--green-dark); /* سبز تیره در هاور */
        text-decoration: none; /* خط زیر در هاور */
    }

/* =========================
   Brand (تصویر و متن وسط)
   ========================= */
.navbar-center {
    text-align: center;
}
/* وسط‌چین */
.brand-img {
    width: 150px;
    height: 150px; /* اندازه تصویر */
    border-radius: 50%; /* گرد */
    margin-bottom: -150px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* سایه */
    opacity: 1;
    transform: translateY(0); /* حالت اولیه */
    transition: opacity 0.5s, transform 0.5s; /* انیمیشن نرم */
}

.brand-text {
    font-size: 1.4rem;
    font-weight: 400; /* اندازه و ضخامت */
    color: #2f3e2f; /* رنگ سبز تیره */
    position: relative;
    top: -10px; /* بالا کشیده */
    opacity: 0;
    pointer-events: none; /* مخفی در ابتدا */
    transform: translateY(-6px); /* کمی بالا */
    transition: opacity 0.5s, transform 0.5s; /* انیمیشن */
    color: #A67B5C; /* رنگ قهوه‌ای برند */
}

.brtext {
    font-family: 'motken',sans-serif; /* فونت متن */
    color: #A67B5C; /* رنگ قهوه‌ای برند */
}
/* عنوان سوره */
h2 {
    font-family: 'AMoshref', 'Amiri', serif;
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--green-dark);
    text-align: center;
}


/* بعد از اسکرول */
.navbar.scrolled .brand-img {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.navbar.scrolled .brand-text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* =========================
   DropDowns
   ========================= */
.brown-rounded {
    border: 2px solid var(--brown); /* خط قهوه‌ای */
    border-radius: 12px; /* گوشه گرد */
    padding: 0.5rem 1rem; /* فاصله داخلی */
    background-color: #fff; /* پس‌زمینه سفید */
    font-weight: 500;
    color: #333; /* متن متوسط */
    min-width: 120px; /* حداقل عرض */
}

    .brown-rounded:focus {
        border-color: var(--green-accent); /* سبز در فوکوس */
        box-shadow: 0 0 0 3px rgba(65,113,84,0.25); /* هاله سبز */
        outline: none; /* حذف outline پیش‌فرض */
    }


/* =========================
   Buttons
   ========================= */
.btn-custom {
    background-color: #8b5e3c; /* قهوه‌ای ملایم */
    color: #fff; /* متن سفید */
    border: none;
    border-radius: 8px; /* بدون خط، گرد */
    padding: 0.6rem 1.4rem; /* فاصله داخلی */
    font-weight: 400; /* ضخیم */
    font-family: 'tooba','Shabnam',sans-serif; /* فونت */
    transition: all 0.35s ease; /* انیمیشن نرم */
    margin: 0.3rem; /* فاصله بیرونی */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* سایه */
}

    .btn-custom:hover {
        background-color: #6e472d; /* قهوه‌ای تیره‌تر */
        transform: translateY(-2px); /* کمی بالا بیاد */
        box-shadow: 0 6px 14px rgba(0,0,0,0.3); /* سایه بیشتر */
    }

/* =========================
   Footer
   ========================= */
.footer {
    background-color: #1e1e1e; /* پس‌زمینه تیره */
    color: #d9d9d9; /* متن روشن */
    text-align: center; /* متن وسط‌چین */
    font-family: 'Shabnam',sans-serif; /* فونت هماهنگ */
}

    .footer .text-danger {
        color: #8b5e3c !important; /* رنگ قهوه‌ای برند */
        font-weight: 600; /* ضخیم‌تر */
    }

    .footer .aspNet-Menu,
    .footer .aspNet-Menu ul {
        list-style: none; /* بدون بولت */
        padding: 0;
        margin: 0.5rem 0; /* فاصله داخلی و بیرونی */
        display: flex; /* چینش فلکس */
        justify-content: center; /* وسط‌چین افقی */
        gap: 1.2rem; /* فاصله بین آیتم‌ها */
        flex-wrap: wrap; /* شکستن در موبایل */
    }

        .footer .aspNet-Menu a {
            color: #d9d9d9; /* لینک روشن */
            text-decoration: none; /* بدون خط زیر */
            font-weight: 500; /* ضخامت متوسط */
            transition: color 0.3s ease; /* تغییر نرم رنگ */
        }

            .footer .aspNet-Menu a:hover {
                color: #8b5e3c; /* قهوه‌ای در هاور */
            }

/* =========================
   Fonts
   ========================= */

/* فونت عناوین و لینک‌ها (Shabnam) */
@font-face {
    font-family: 'Shabnam';
    src: url('../fonts/Shabnam.woff2') format('woff2'), url('../fonts/Shabnam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AMoshref';
    src: url('../fonts/AMoshref.woff2') format('woff2'), url('../fonts/AMoshref.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'tooba';
    src: url('../fonts/tooba.woff2') format('woff2'), url('../fonts/tooba.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bustani';
    src: url('../fonts/Bustani.woff2') format('woff2'), url('../fonts/Bustani.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/Amiri.woff2') format('woff2'), url('../fonts/Amiri.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'motken';
    src: url('../fonts/motken.woff2') format('woff2'), url('../fonts/motken.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* استفاده در کل سایت */
body, main, article, section, p {
    font-family: 'Shabnam', Tahoma, serif; /* فونت متن */
    font-size: 1.15rem;
    line-height: 2; /* خوانایی بهتر */
    color: #333; /* رنگ متن */
}

/* استفاده برای دکمه‌ها، لینک‌ها، عناوین */
button, .btn, .nav-link-custom,
h1, h2, h3, h4, h5, h6 {
    font-family: 'tooba','Shabnam',sans-serif; /* فونت تیتر */
    font-weight: 400; /* ضخیم */
}

/* =========================
   index
   ========================= */
.soore-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    direction: rtl;
    justify-content: center;
}

.soore-item {
    text-align: center;
    direction: rtl;
}

.btn-soore {
    background-color: var(--green-accent);
    color: #fff !important;
    width: 100%;
    border-radius: 8px;
    padding: 0 6px; /* پدینگ بالا و پایین صفر شد چون ارتفاع ثابت دادیم */
    transition: all 0.25s ease;
    border: 1px solid rgba(65,113,84,0.18);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    text-decoration: none !important;
    font-size: 1.1rem; /* کمی کوچک‌تر برای جا شدن در کادر */
    font-weight: 500;
    font-family: 'tooba','Shabnam',sans-serif;
    /* ویژگی‌های جدید برای جلوگیری از Wrap */
    height: 52px; /* ارتفاع ثابت برای همسان‌سازی */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* جلوگیری از شکستن متن */
    overflow: hidden; /* جلوگیری از بیرون زدن متن */
    text-overflow: ellipsis; /* نمایش سه نقطه در صورت طولانی بودن بیش از حد */
}

    .btn-soore:hover {
        background-color: var(--brown);
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.14);
    }

.btn-soore-disabled,
.btn-soore-disabled:hover {
    background-color: #f5f0e6;
    color: #9a866f !important;
    border: 1px solid rgba(166,123,92,0.28);
    box-shadow: none;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
    /* تکرار ویژگی‌های تراز برای حالت غیرفعال */
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}


.home-section-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

/* =========================
   soore
   ========================= */

html {
    scroll-padding-top: 90px;
}

.anchor-offset,
[id^="toc_"][id*="_sec_"] {
    scroll-margin-top: 90px;
}

/* رنگ پس‌زمینه هماهنگ با طراحی */
.bg-custom-brown {
    background-color: #f5f0e6; /* بژ روشن */
    margin-top: -2rem;
}

/* عنوان سوره */
h1 {
    font-family: 'Bustani', 'Amiri', serif;
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--green-dark);
    text-align: right;
    padding-top: 4rem;
    margin-bottom: 2rem;
}

/* فیلترها */
.filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

    .filters a {
        font-family: 'motken', 'Amiri', serif;
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        background-color: var(--brown-light);
        color: var(--green-accent);
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .filters a.active,
        .filters a:hover {
            background-color: var(--green-accent);
            color: #fff;
        }

.portfolio-content {
    width: 100%;
}
/* محتوای هر بخش */
.portfolio-item {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    font-family: 'Amiri', serif;
    font-size: 1.2rem;
    line-height: 2.2rem;
    color: #333;
    position: center;
}

.aye-title {
    font-family: 'Bustani', 'Amiri', serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: bold;
    color: var(--green-dark);
    text-align: right;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.text-aye {
    display: inline-block;
    margin-top: 1rem;
    font-size: 1.8rem;
    color: var(--green-accent);
}

.text-left-date {
    display: block; /* تبدیل به عنصر بلاکی برای اشغال کل عرض */
    text-align: left; /* چپ‌چین کردن متن */
    direction: ltr; /* نمایش درست ترتیب اعداد تاریخ از چپ به راست */
    width: 100%;
}
 
.text-block {
    display: block;
    direction: rtl;
    text-align: right;
}

/* هایلایت نتیجه جستجو */

.search-highlight {
    background-color: #fff3a0;
    padding: 2px 4px;
    border-radius: 3px;
}

.fn-ref {
    font-size: 1.2rem;
    vertical-align: super;
    line-height: 0;
    margin: 0 2px;
}

    .fn-ref a {
        text-decoration: none;
        color: #2b5dab;
        font-size: 0.8em;
        vertical-align: sub;
        text-decoration: none;
        display: inline-block;
    }

.fn-ref {
    color: #007bff;
    font-weight: bold;
    padding: 0 2px;
}

.ck-footnotes-preview {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 10px;
    direction: rtl;
}

    .ck-footnotes-preview ol {
        padding-right: 20px;
    }


.footnotes {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
    font-size: 1rem;
    color: #555;
}

    .footnotes ol {
        margin: 8px 0 0 0;
        padding-right: 20px;
    }

    .footnotes li {
        margin-bottom: 8px;
        line-height: 1.9;
    }

    .footnotes li,
    h2, h3, p, sup {
        scroll-margin-top: 100px;
    }

.footnote {
    margin-top: 6px;
    line-height: 1.9;
}

    .footnote sup {
        font-weight: bold;
        color: #333;
    }

sup {
    position: relative;
}

.fn-back {
    margin-right: 6px;
    text-decoration: none;
    color: #2b5dab;
    font-size: 12px;
}

html {
    scroll-padding-top: 100px;
}

[id^="ref-"],
[id^="fn-"] {
    scroll-margin-top: 100px;
}


.footnotes ol li {
    line-height: 1.8;
    margin-bottom: 4px;
}

    .footnotes ol li .footnote-text {
        display: inline;
    }

    .footnotes ol li .fn-back {
        display: inline-block;
        margin-right: 6px;
        text-decoration: none;
        font-size: 0.95em;
    }


/* =========================
   Comment
   ========================= */

.comment-body {
    font-size: 14px;
    line-height: 1.9;
    color: #222;
}

.comment-author {
    font-size: 14px;
    color: #222;
}

.reply-btn {
    text-decoration: none;
    font-size: 13px;
}

.reply-form {
    background: #fafafa;
    border-radius: 6px;
}

.comment-admin {
    border-right: 4px solid #198754;
    background: #f8fff9;
}

    .comment-admin .comment-author {
        color: #198754;
        font-weight: bold;
    }

.comments-wrapper {
    margin-top: 40px;
}

.comments-title {
    font-size: 20px;
    margin-bottom: 20px;
}

.comment-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fafafa;
}

.comment-header {
    font-size: 13px;
    margin-bottom: 6px;
    color: #666;
}

.comment-actions {
    margin-top: 8px;
}


.comment-form-wrapper {
    margin-top: 40px;
    padding: 25px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

.comment-form-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
}

.comment-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.comment-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .comment-field label {
        font-size: 14px;
        margin-bottom: 5px;
        color: #555;
    }

.comment-input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.comment-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    resize: vertical;
}

.comment-submit {
    margin-top: 15px;
}

.comment-btn {
    background: #2e7d32;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

    .comment-btn:hover {
        background: #256628;
    }

/* =========================
   Search Page
   ========================= */

.search-page {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.search-hero {
    background: linear-gradient(135deg, #f7f3ea, #fcfbf8);
    border: 1px solid rgba(166, 123, 92, 0.18);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
}

.search-title {
    font-family: 'Bustani', 'Amiri', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--green-dark);
    text-align: center;
    margin-bottom: 1rem;
    padding-top: 0;
}

.search-box-wrapper {
    width: 100%;
    max-width: 900px; /* حداکثر عرض کل باکس چسبیده به هم */
    margin: 0 auto;
    padding: 10px;
    direction: rtl;
}

.search-input {
    min-height: 56px;
    border-radius: 14px !important;
    border: 2px solid var(--brown-light) !important;
    box-shadow: none !important;
    font-family: 'Shabnam', Tahoma, sans-serif !important;
    font-size: 1.05rem !important;
    padding: 0.9rem 1rem !important;
    direction: rtl;
    text-align: right;
}

    .search-input:focus {
        border-color: var(--green-accent) !important;
        box-shadow: 0 0 0 4px rgba(65,113,84,0.12) !important;
    }

.btn-search-main {
    min-height: 56px;
    border-radius: 14px !important;
    background-color: var(--brown) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'tooba','Shabnam',sans-serif !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(166,123,92,0.22);
    border-radius: 8px;
    font-weight: bold;
}

    .btn-search-main:hover {
        background-color: #8b5e3c !important;
        transform: translateY(-1px);
    }

.btn-search-result {
    border-radius: 14px !important;
    background-color: var(--brown) !important;
    color: #fff !important;
    border: none !important;
    font-family: 'tooba','Shabnam',sans-serif !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(166,123,92,0.22);
    border-radius: 8px;
    font-weight: bold;
}

    .btn-search-result:hover {
        background-color: #8b5e3c !important;
        transform: translateY(-1px);
    }

/* مرتب‌سازی رادیو باتن‌ها بدون به هم ریختگی کادر */
.search-mode-list {
    width: 100%;
    border-collapse: collapse;
}

    .search-mode-list td {
        padding: 8px 12px;
        vertical-align: middle;
    }

    .search-mode-list label {
        margin-right: 6px;
        cursor: pointer;
        font-size: 14px;
        color: #4b5563;
    }

.search-filters-section {
    margin-bottom: 1.5rem;
}

.filter-card {
    background-color: #fff;
    /*   border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 1.2rem 1rem;
*/ box-shadow: 0 6px 16px rgba(0,0,0,0.04);
    height: 100%;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    padding: 15px;
}

.filter-label {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--green-dark);
    font-family: 'tooba','Shabnam',sans-serif;
    font-size: 1.1rem;
    display: block;
    font-weight: bold;
}

.search-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    direction: rtl;
}

    .search-radio-list input[type="radio"] {
        margin-left: 0.35rem;
        margin-right: 0.8rem;
        accent-color: var(--green-accent);
    }

    .search-radio-list label {
        margin-left: 1rem;
        color: #444;
        font-family: 'Shabnam', Tahoma, sans-serif;
        cursor: pointer;
    }

.search-info-panel {
    background-color: #f5f0e6;
    border-right: 5px solid var(--brown);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

.search-info-text {
    color: #4c4035;
    font-family: 'Shabnam', Tahoma, sans-serif;
}

.search-results-section {
    margin-top: 1rem;
}

.search-result-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 1.4rem 1.4rem 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 8px 22px rgba(0,0,0,0.045);
    transition: all 0.25s ease;
    direction: rtl !important;
    text-align: right !important;
}

    .search-result-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(0,0,0,0.07);
    }

.result-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.result-title,
.result-meta,
.result-preview {
    direction: rtl !important;
    text-align: right !important;
}

.result-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    direction: rtl !important;
}

.result-badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-family: 'Shabnam',Tahoma,sans-serif;
    line-height: 1.6;
}

.badge-ayah {
    background-color: rgba(65,113,84,0.12);
    color: var(--green-dark);
    border: 1px solid rgba(65,113,84,0.22);
}

.badge-ayah-number {
    background: #eef7ff;
    color: #1f5f99;
    border: 1px solid #cfe8ff;
}

.badge-soore {
    background-color: rgba(166,123,92,0.14);
    color: #7b563d;
    border: 1px solid rgba(166,123,92,0.22);
}

.badge-section {
    background-color: rgba(208,197,154,0.3);
    color: #5f533b;
    border: 1px solid rgba(208,197,154,0.5);
}

.result-score {
    font-size: 0.95rem;
    color: #7a7a7a;
    font-family: 'Shabnam',Tahoma,sans-serif;
}

.result-title {
    font-family: 'Bustani', 'Amiri', serif;
    color: var(--green-dark);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    margin-bottom: 0.8rem;
    text-align: right;
    line-height: 1.8;
}

.result-meta {
    color: #6b5f53;
    font-size: 1rem;
    margin-bottom: 0.9rem;
    line-height: 2;
}

.meta-divider {
    margin: 0 0.6rem;
    color: #a0a0a0;
}

.result-preview {
    background-color: #fcfbf8;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 1rem;
    color: #333;
    font-family: 'Shabnam', Tahoma, sans-serif;
    line-height: 2.1;
    font-size: 1.02rem;
    margin-bottom: 1rem;
}

    .result-preview mark {
        background-color: #efe2b9;
        color: #493721;
        padding: 0.05rem 0.2rem;
        border-radius: 4px;
    }

.result-actions {
    text-align: left;
}

.empty-result-box {
    background: #fff8f3;
    border: 1px solid rgba(166,123,92,0.2);
    border-radius: 16px;
    padding: 2rem 1rem;
    text-align: center;
    color: #5b493f;
    margin-top: 1rem;
}

.empty-result-title {
    font-family: 'tooba','Shabnam',sans-serif;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: var(--brown);
}

.empty-result-text {
    font-family: 'Shabnam',Tahoma,sans-serif;
    color: #6b625a;
}



/* کانتینر اصلی سرچ در نوار بالا */
.nav-search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

/* گروه بندی اینپوت و دکمه */
.nav-search-group {
    display: flex;
    align-items: stretch;
    background-color: #fff;
    border: 2px solid var(--brown-light); /* استفاده از رنگ تم شما */
    border-radius: 12px; /* هماهنگ با brown-rounded */
    overflow: hidden;
    transition: all 0.3s ease;
    width: 320px; /* عرض مناسب برای ناوبار */
}

    .nav-search-group:focus-within {
        border-color: var(--green-accent); /* تغییر رنگ به سبز هنگام کلیک */
        box-shadow: 0 0 0 3px rgba(65, 113, 84, 0.15);
    }

/* استایل فیلد متن */
.nav-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 6px 12px;
    font-family: 'Shabnam', Tahoma, sans-serif;
    font-size: 0.95rem;
    color: #333;
    background: transparent;
}

/* استایل دکمه جستجو */
.nav-search-btn {
    background-color: var(--brown); /* رنگ قهوه‌ای اصلی شما */
    color: #fff !important;
    border: none;
    padding: 6px 15px;
    font-family: 'tooba', sans-serif;
    font-size: 0.95rem;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .nav-search-btn:hover {
        background-color: var(--green-accent); /* در هاور سبز شود */
        color: #fff !important;
    }

/* =========================
   Search Paging
   ========================= */
/* اصلاح Pagination برای حالت RTL و تم سایت */
.pagination {
    padding-right: 0;
    gap: 5px; /* فاصله بین دکمه‌ها */
}

    .pagination .page-item .page-link {
        border-radius: 8px !important;
        border: 1px solid var(--brown-light);
        color: var(--brown);
        min-width: 40px;
        text-align: center;
        transition: all 0.3s ease;
    }

    /* استایل دکمه‌های اول و آخر */
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        font-weight: bold;
        background-color: #f8f9fa;
    }
    /* لینک‌های pagination */
    .pagination .page-link {
        color: var(--brown);
        margin: 0 3px;
    }

        /* hover */
        .pagination .page-link:hover {
            background-color: var(--green-accent);
            border-color: var(--green-accent);
            color: #fff;
        }

    /* صفحه فعال */
    .pagination .page-item.active .page-link {
        background-color: var(--brown);
        border-color: var(--brown);
        color: #fff;
    }

        /* جلوگیری از تغییر رنگ صفحه فعال هنگام hover */
        .pagination .page-item.active .page-link:hover {
            background-color: var(--brown);
            border-color: var(--brown);
        }

    /* دکمه اول و آخر */
    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        font-weight: bold;
        background-color: #f8f9fa;
    }

.static-public-page {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.public-page-hero {
    text-align: center;
    background: linear-gradient(135deg, #f7f3ea, #fcfbf8);
    border: 1px solid rgba(166,123,92,0.18);
    border-radius: 18px;
    padding: 2rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.public-page-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--green-dark);
    margin: 0;
    font-family: 'Bustani', 'Amiri', serif;
    padding-top: 0rem;
}

.public-page-card {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    line-height: 2.2;
    color: #444;
}

.contact-public-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1.5rem;
    align-items: start;
}

.public-form-title {
    font-size: 1.35rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    font-family: 'tooba', 'Shabnam', sans-serif;
}

.public-form-group {
    margin-bottom: 1rem;
}

    .public-form-group label {
        display: block;
        margin-bottom: .5rem;
        font-weight: 700;
        color: var(--green-accent);
    }

.public-input,
.public-textarea {
    width: 100%;
    border: 2px solid var(--brown-light);
    border-radius: 12px;
    padding: .75rem 1rem;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .3s, box-shadow .3s;
    font-family: inherit;
}

    .public-input:focus,
    .public-textarea:focus {
        outline: none;
        border-color: var(--green-accent);
        box-shadow: 0 0 0 3px rgba(65,113,84,0.18);
    }

.public-textarea {
    resize: vertical;
    min-height: 180px;
    direction: rtl;
    text-align: right;
    line-height: 2;
}

.public-form-submit {
    margin-top: 1rem;
}

.public-message {
    display: block;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    line-height: 1.9;
}

    .public-message.success {
        background-color: #eef8f0;
        color: #246b38;
        border: 1px solid #cfe8d4;
    }

    .public-message.error {
        background-color: #fff1f1;
        color: #a33a3a;
        border: 1px solid #f0c9c9;
    }

@media (max-width: 768px) {
    .contact-public-grid {
        grid-template-columns: 1fr;
    }

    .public-page-card {
        padding: 1.1rem;
    }
}

.scroll-top-btn {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

    .scroll-top-btn.show {
        opacity: 1;
        visibility: visible;
    }

    .scroll-top-btn:hover {
        background: #146c43;
        transform: translateY(-3px);
    }

/* ===================== */
/* MOBILE OPTIMIZATION  Phone Responsive */
/* ===================== */

@media (max-width: 768px) {

    @media (max-width: 768px) {

        /* اول: همه چیز ستونی شود */
        .navbar-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            width: 100% !important;
        }

        /* ترتیب صحیح بالا -> پایین */
        .navbar-center {
            order: 1 !important; /* لوگو اول */
        }

        .nav-links {
            order: 2 !important; /* لینک‌ها دوم */
        }

        .dropdowns {
            order: 3 !important; /* انتخاب‌های سوره/آیه سوم */
        }

        .nav-search-container {
            order: 4 !important; /* جستجو چهارم */
        }
    }

    /* جلوگیری از هدر ثابت */
    .custom-navbar,
    .navbar,
    .topbar,
    .header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
    }

    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .main-content,
    .page-content,
    .content-wrapper,
    .container,
    .container-fluid {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }


    /* کلیات */
    .custom-navbar,
    .custom-navbar * {
        box-sizing: border-box !important;
    }

    .custom-navbar {
        padding: 4px 8px !important;
        margin: 0 !important;
        min-height: auto !important;
    }


    /* کانتینر اصلی به صورت ستونی */
    .navbar-content,
    .container-fluid,
    .navbar-nav,
    .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 4px !important;
    }

        .navbar-collapse.collapse {
            display: flex !important;
            visibility: visible !important;
            height: auto !important;
        }


    /* ===== BRAND ===== */

    .navbar-brand {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .brand-img,
    #brandImage {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        object-fit: contain !important;
        display: block !important;
        margin-bottom: 2px !important;
    }

    /* عبارت یک آیه */

    .brand-text,
    #brandText,
    .navbar-center .brand-text,
    .navbar-center #brandText {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }



        .brand-text[style],
        #brandText[style] {
            font-size: 0.9rem !important;
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            transform: none !important;
        }


    /* ===== NAV LINKS ===== */

    .nav-links,
    .navbar-nav {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
    }

        .nav-link-custom,
        .navbar-nav .nav-link {
            width: 100% !important;
            max-width: 300px !important;
            text-align: center !important;
            display: block !important;
            font-size: 0.85rem !important;
            padding: 4px 8px !important;
            white-space: normal !important;
            margin: 0 !important;
        }


    /* ===== DROPDOWNS ===== */

    .navbar-center {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .dropdowns {
        width: 100% !important;
        max-width: 340px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin: 0 auto !important;
    }

        .dropdowns > * {
            width: 100% !important;
            display: block !important;
            float: none !important;
            flex: none !important;
        }

        .dropdowns select,
        .dropdown-custom,
        .brown-rounded {
            width: 100% !important;
            min-width: 0 !important;
            height: 40px !important;
            font-size: 0.85rem !important;
            padding: 5px 8px !important;
        }


    /* ===== SEARCH ===== */

    .nav-search-container {
        order: 4 !important;
        width: 100% !important;
        display: block !important;
        margin-top: 4px !important;
    }

    .nav-search-group {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .nav-search-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 40px !important;
        font-size: 0.85rem !important;
    }

    .nav-search-btn {
        flex: 0 0 auto !important;
        height: 40px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }


    /* فاصله‌های اضافی بالا */
    .page-header,
    .hero,
    .header,
    .top-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ===== INDEX PAGE ===== */

    .soore-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .btn-soore {
        padding: 8px 6px;
        font-size: 0.9rem;
    }


    /* ===== SOORE / AYE ===== */

    .portfolio-container {
        padding: 10px;
    }

    .portfolio-item {
        padding: 14px;
    }

    .text-aye {
        font-size: 1.6rem;
        line-height: 2.3;
    }

    .text-block {
        font-size: 0.95rem;
        line-height: 1.9;
    }

    .filters {
        gap: 6px;
    }

        .filters a {
            font-size: 0.85rem;
            padding: 6px 10px;
        }


    /* ===== COMMENTS ===== */

    .comment-row {
        flex-direction: column;
    }


    /* ===== SEARCH PAGE ===== */

    .search-hero {
        padding: 40px 15px;
    }

    .search-title {
        font-size: 1.8rem;
    }

    .search-subtitle {
        font-size: 0.95rem;
    }

    .search-box-wrapper {
        padding: 18px;
    }

        .search-box-wrapper .row {
            margin: 0;
        }

        .search-box-wrapper .col-md-12 {
            padding: 0;
            margin-bottom: 12px; /* ایجاد فاصله عمودی مناسب بین فیلد و دکمه در موبایل */
        }

            .search-box-wrapper .col-md-12:last-child {
                margin-bottom: 0;
            }

    .search-mode-list tbody,
    .search-mode-list tr,
    .search-mode-list td {
        display: block;
        width: 100%;
    }

    .search-mode-list td {
        padding: 6px 0;
    }

    .search-radio-list {
        flex-direction: column;
        gap: 0.5rem;
    }

    .search-result-card {
        padding: 16px;
    }

    .result-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .result-title {
        font-size: 1.05rem;
    }

    .result-meta {
        font-size: 0.8rem;
    }

    .result-badges {
        margin-bottom: 6px;
    }

    .result-actions {
        text-align: center;
    }

    .pager-section {
        margin-top: 20px;
    }
}