/* ==========================================================
   SURAH INDEX PAGE — MOSQUE-ARCH STYLE (GREEN + GOLD)
   Quran Project
========================================================== */

.surah-index-page {
    /* بدون پس‌زمینه اختصاصی — از پس‌زمینه اصلی سایت (layout/body) ارث می‌برد */
    padding: 60px 0 100px;
}

/*==============================
Panel (عنوان + جستجو + فیلتر)
==============================*/

.surah-panel {
    position: relative;
    background: linear-gradient(180deg, #FFFDF6 0%, #F6EEDA 100%);
    border: 1.5px solid #145C42;
    border-radius: 10px;
    padding: 46px 44px 32px;
    margin-bottom: 44px;

    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 22px 40px -18px rgba(20,45,35,.35),
        0 8px 16px -8px rgba(20,45,35,.25);
}

.surah-panel-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1.5px solid #C9A227;
}

.surah-panel-corner.tl { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.surah-panel-corner.tr { top: 8px; left: 8px;  border-right: none; border-bottom: none; }
.surah-panel-corner.bl { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.surah-panel-corner.br { bottom: 8px; left: 8px;  border-right: none; border-top: none; }

.surah-index-page .page-title {
    text-align: center;
    margin-bottom: 26px;
}

.surah-index-page .page-title h1 {
    font-size: 40px;
    font-weight: 900;
    color: #0F4A32;
    margin-bottom: 10px;
}

.surah-index-page .page-title p {
    font-size: 16px;
    color: #6B7A6E;
    margin-bottom: 18px;
}

.surah-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.surah-divider span {
    width: 40px;
    height: 1px;
    background: rgba(201,162,39,.6);
}

.surah-divider svg {
    width: 15px;
    height: 15px;
    color: #C9A227;
}

/*==============================
Toolbar
==============================*/

.surah-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid rgba(20,92,66,.15);
}

.surah-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.surah-search input {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(20,92,66,.35);
    border-radius: 8px;
    padding: 11px 42px 11px 16px;
    color: #1F332B;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    outline: none;
    transition: .2s;
}

.surah-search input::placeholder {
    color: #9AA6A0;
}

.surah-search input:focus {
    border-color: #C9A227;
}

.surah-search svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: #8CA0A0;
}

.surah-filters {
    display: flex;
    gap: 8px;
}

.surah-filters button {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #145C42;
    background: #fff;
    border: 1px solid rgba(20,92,66,.3);
    border-radius: 8px;
    padding: 9px 18px;
    cursor: pointer;
    transition: .2s;
}

.surah-filters button:hover {
    border-color: #C9A227;
}

.surah-filters button.active {
    background: #145C42;
    border-color: #145C42;
    color: #F3DA9A;
}

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

.surah-index-page .surah-grid {

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:22px;

}

.surah-box {
    position: relative;
    text-decoration: none;
    display: block;
    background: linear-gradient(180deg, #FFFDF7 0%, #F5EDD9 100%);
    border: 1px solid rgba(20,92,66,.3);
    border-radius: 10px;
    padding-bottom: 18px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: visible;

    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 14px 22px -14px rgba(20,45,35,.28),
        0 4px 8px -4px rgba(20,45,35,.18);
}

.surah-box:hover {
    transform: translateY(-6px);
    border-color: #145C42;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 26px 34px -16px rgba(20,45,35,.4),
        0 10px 16px -8px rgba(20,45,35,.28);
}

.surah-arch {
    position: relative;
    height: 64px;
    background: linear-gradient(160deg, #1C6B4E 0%, #0F3F2C 100%);
    clip-path: polygon(0 100%, 0 42%, 50% 4%, 100% 42%, 100% 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    margin-bottom: 18px;
    box-shadow: 0 3px 8px rgba(15,63,44,.35);
}

.surah-arch svg {
    width: 34px;
    height: 34px;
}

.medal-star {
    fill: none;
    stroke: #C9A227;
    stroke-width: 1.1;
}

.medal-num {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: #F3DA9A;
}

.surah-card-body {
    padding: 0 18px;
}

.surah-name {
    font-family: 'Amiri', serif;
    font-size: 25px;
    font-weight: 700;
    color: #0F4A32;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 10px;
}

.surah-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #7A8A84;
}

.type-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.type-pill.makki {
    background: rgba(201,162,39,.15);
    color: #9C7A15;
}

.type-pill.madani {
    background: rgba(20,92,66,.12);
    color: #145C42;
}

.surah-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #C4CEC8;
}

/*==============================
کارت آخرین سوره‌ی مطالعه‌شده
==============================*/

.surah-box.is-last-read {
    border-color: #C9A227;
    background: linear-gradient(180deg, #FFF9E9 0%, #FBEFC9 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 16px 26px -14px rgba(180,140,20,.35);
}

.surah-box.is-last-read .surah-arch {
    background: linear-gradient(160deg, #C9A227 0%, #9C7A15 100%);
}

.surah-box.is-last-read .surah-name {
    color: #8A6A12;
}

.no-results {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #9AA6A0;
}

/*==========================================================
Responsive
==========================================================*/

@media (max-width: 560px) {

    .surah-index-page .page-title h1 {
        font-size: 28px;
    }

    .surah-panel {
        padding: 34px 22px 24px;
    }

    .surah-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .surah-search {
        max-width: 100%;
    }

}