/* صفحه‌ی «کاوش در میان آثار» — هویت بصری مینیاتور ایرانی؛ همه‌ی رنگ‌ها از قالب فعال می‌آید */

/* عنوان صفحه: ستاره‌ی هشت‌پر + عنوان + خط تزئینی */
.page-title {
    display    : flex;
    align-items: center;
    gap        : .85rem;
    margin     : 0 0 2rem
}

.page-title h1 {
    margin     : 0;
    font-size  : 2.2rem;
    white-space: nowrap
}

.page-title::before {
    content         : '';
    flex-shrink     : 0;
    width           : 40px;
    height          : 40px;
    background-color: var(--accent-color);
    -webkit-mask    : url(/img/miniature/orn/star8.svg) center / contain no-repeat;
    mask            : url(/img/miniature/orn/star8.svg) center / contain no-repeat
}

.page-title::after {
    content         : '';
    flex            : 1;
    height          : 12px;
    background-color: var(--accent-color);
    opacity         : .75;
    -webkit-mask    : url(/img/miniature/orn/rule.svg) repeat-x center / auto 12px;
    mask            : url(/img/miniature/orn/rule.svg) repeat-x center / auto 12px
}

/* ---------- نوار کناری ---------- */
.filter-sidebar {
    position        : sticky;
    top             : 20px;
    padding         : 1.5rem;
    border-radius   : 14px;
    background-color: var(--surface);
    border          : 2px solid var(--accent-color);
    box-shadow      : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--border-subtle)
}

.filter-title {
    padding-bottom: .75rem;
    margin-bottom : 1.25rem;
    border-bottom : 2px solid var(--accent-color)
}

.filter-sidebar h5 {
    margin: 0 0 .75rem
}

.filter-sidebar .form-label {
    color: var(--secondary-text)
}

.filter-sidebar .form-control,
.filter-sidebar .form-select {
    background-color: var(--background-secondary);
    color           : var(--primary-text);
    border          : 1.5px solid var(--border-subtle);
    min-height      : 44px
}

.filter-sidebar .form-control::placeholder {
    color: var(--secondary-text)
}

.filter-sidebar .form-control:focus,
.filter-sidebar .form-select:focus {
    border-color: var(--accent-color);
    box-shadow  : 0 0 0 3px var(--accent-color-soft)
}

/* دکمه‌ی جستجو: پر و هم‌رنگ دکمه‌های اصلی سایت */
.filter-sidebar .btn-outline-secondary {
    min-width       : 48px;
    background-color: var(--button-primary);
    border-color    : var(--button-primary);
    color           : #fff
}

.filter-sidebar .btn-outline-secondary:hover {
    background-color: var(--button-primary-hover);
    border-color    : var(--button-primary-hover);
    color           : #fff
}

.category-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
    display   : flex;
    flex-direction: column;
    gap       : .5rem
}

.category-list a {
    display        : block;
    padding        : .65rem 1rem;
    border         : 1.5px solid var(--border-subtle);
    border-radius  : 10px;
    color          : var(--primary-text) !important;
    transition     : background-color .2s ease, border-color .2s ease
}

.category-list a:hover {
    border-color    : var(--accent-color);
    background-color: var(--accent-color-soft)
}

.category-list a.active {
    background-color: var(--button-primary);
    border-color    : var(--button-primary);
    color           : #fff !important;
    font-weight     : 700
}

/* ---------- کارت اثر ---------- */
.content-card {
    position        : relative;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    overflow        : hidden;
    border-radius   : 14px;
    background-color: var(--surface);
    border          : 2px solid var(--accent-color);
    box-shadow      : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--border-subtle);
    transition      : transform .25s ease, box-shadow .25s ease
}

.content-card:hover {
    transform : translateY(-5px);
    box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--accent-color), var(--card-shadow)
}

.card-img-container {
    position        : relative;
    margin          : 9px 9px 0;
    border-radius   : 8px;
    overflow        : hidden;
    background-color: var(--surface-strong)
}

/* اگر عکس اثر نبود یا نیامد، کاشی خاتم نشان داده می‌شود */
.card-img-container::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background-color: var(--accent-color);
    opacity         : .35;
    -webkit-mask    : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat;
    mask            : url(/img/miniature/orn/khatam.svg) 0 0 / 60px 60px repeat
}

.content-card img {
    position    : relative;
    display     : block;
    width       : 100%;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
    color       : transparent;
    font-size   : 0
}

.card-overlay {
    display: none
}

.card-type-badge {
    position       : absolute;
    top            : 10px;
    left           : 10px;
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    background     : #000000a6;
    color          : #fff;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : .95rem
}

.content-card .card-body {
    display       : flex;
    flex-direction: column;
    flex-grow     : 1;
    gap           : .35rem;
    padding       : 1rem 1.1rem 1.15rem;
    background    : none;
    color         : var(--primary-text)
}

.content-card .card-title {
    margin       : 0;
    font-size    : 1.15rem;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis
}

/* کل کارت کلیک‌پذیر است (لینک عنوان روی کارت کش می‌آید) */
.content-card .card-title a::after {
    content : '';
    position: absolute;
    inset   : 0;
    z-index : 1
}

.content-card .card-author {
    margin   : 0;
    font-size: .9rem;
    color    : var(--secondary-text)
}

.content-card .card-price {
    margin-top : auto;
    padding-top: .5rem;
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--accent-color-strong)
}

/* دکمه‌ی «مشاهده»: ظاهر دکمه‌ی کامل برای تشخیص آسان؛ کلیک واقعی روی لینک کارت است */
.card-action {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    margin-top      : .6rem;
    padding         : .6rem 1rem;
    border-radius   : 10px;
    background-color: var(--button-primary);
    color           : #fff;
    font-weight     : 700;
    transition      : background-color .2s ease
}

.content-card:hover .card-action {
    background-color: var(--button-primary-hover)
}

/* ---------- صفحه‌بندی ---------- */
.pagination {
    --bs-pagination-bg                : var(--surface);
    --bs-pagination-color             : var(--primary-text);
    --bs-pagination-border-color      : var(--border-subtle);
    --bs-pagination-hover-bg          : var(--accent-color-soft);
    --bs-pagination-hover-color       : var(--primary-text);
    --bs-pagination-hover-border-color: var(--accent-color);
    --bs-pagination-focus-bg          : var(--accent-color-soft);
    --bs-pagination-focus-color       : var(--primary-text);
    --bs-pagination-active-bg         : var(--button-primary);
    --bs-pagination-active-border-color: var(--button-primary);
    --bs-pagination-active-color      : #fff;
    --bs-pagination-disabled-bg       : transparent;
    --bs-pagination-disabled-color    : var(--secondary-text);
    --bs-pagination-disabled-border-color: var(--border-subtle);
    gap: .4rem
}

.pagination .page-link {
    min-width    : 44px;
    min-height   : 44px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    border-width : 1.5px;
    border-radius: 10px !important
}

.pagination .page-item.active .page-link {
    color: #fff !important
}

@media (max-width: 768px) {
    .page-title h1 {
        font-size  : 1.5rem;
        white-space: normal
    }

    .filter-sidebar {
        position     : static;
        margin-bottom: 1.5rem
    }
}

/* ---------- فیلترهای جست‌وجو ---------- */
.filter-toggle {
    display: none
}

.filter-group {
    margin   : 0 0 1.4rem;
    padding  : 0;
    border   : 0;
    min-width: 0
}

.filter-group legend {
    float        : none;
    width        : auto;
    margin-bottom: .6rem;
    padding      : 0;
    font-size    : 1.05rem;
    font-family  : BoldFarhang, sans-serif;
    color        : var(--accent-color-strong)
}

.filter-option {
    display      : flex;
    align-items  : center;
    gap          : .6rem;
    padding      : .4rem .6rem;
    border-radius: 8px;
    cursor       : pointer;
    transition   : background-color .15s ease
}

.filter-option:hover {
    background-color: var(--accent-color-soft)
}

.filter-option input {
    flex-shrink : 0;
    width       : 1.1rem;
    height      : 1.1rem;
    accent-color: var(--button-primary)
}

.filter-option span i {
    margin-inline-end: .25rem;
    color            : var(--accent-color)
}

.price-range {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    margin-top : .5rem
}

.price-range .form-control {
    min-width : 0;
    text-align: center
}

/* ---------- نوار نتایج و چیپ‌ها ---------- */
.results-bar {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : .75rem 1rem;
    margin     : 0 0 1.25rem;
    min-height : 2.5rem
}

.results-count {
    color: var(--secondary-text)
}

.results-count strong {
    color    : var(--primary-text);
    font-size: 1.2rem
}

.filter-chips {
    display  : flex;
    flex-wrap: wrap;
    gap      : .5rem
}

.filter-chip {
    display      : inline-flex;
    align-items  : center;
    gap          : .45rem;
    padding      : .25rem .8rem;
    border       : 1.5px solid var(--accent-color);
    border-radius: 999px;
    background   : var(--accent-color-soft);
    font-size    : .92rem;
    transition   : background-color .2s ease
}

.filter-chip:hover {
    background-color: var(--accent-color)
}

.filter-chip i {
    font-size: .7rem
}

.filter-clear-all {
    align-self     : center;
    color          : var(--accent-color-strong) !important;
    font-size      : .92rem;
    text-decoration: underline !important
}

#contents-results {
    transition: opacity .15s ease
}

#contents-results.is-loading {
    opacity       : .45;
    pointer-events: none
}

@media (max-width: 991px) {
    .filter-toggle {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        width          : 100%;
        padding        : .6rem .25rem;
        background     : none;
        border         : 0;
        color          : var(--primary-text);
        font-family    : BoldFarhang, sans-serif;
        font-size      : 1.1rem
    }

    .filter-title {
        display: none
    }

    #filters-form.is-collapsed {
        display: none
    }
}

/* ---------- نوار فیلتر افقی (جایگزین نوار کناری بلند) ---------- */
.filter-bar {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : flex-end;
    gap             : 1rem 1.1rem;
    margin          : 0 0 1.75rem;
    padding         : 1.4rem 1.5rem;
    background-color: var(--surface);
    border          : 2px solid var(--accent-color);
    border-radius   : 14px;
    box-shadow      : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--border-subtle)
}

.filter-field {
    flex: 1 1 165px;
    min-width: 0
}

.filter-field-search {
    flex: 2 1 280px
}

.filter-field-price {
    flex: 1.4 1 250px
}

.filter-field-actions {
    display    : flex;
    flex       : 1 1 230px;
    align-items: center;
    gap        : 1rem;
    flex-wrap  : wrap
}

.filter-check {
    display    : inline-flex;
    align-items: center;
    gap        : .5rem;
    cursor     : pointer
}

.filter-check input {
    width       : 1.1rem;
    height      : 1.1rem;
    accent-color: var(--button-primary)
}

.filter-bar .form-label {
    display      : block;
    margin-bottom: .35rem;
    font-size    : .95rem;
    color        : var(--accent-color-strong);
    font-family  : BoldFarhang, sans-serif
}

/* دکمه‌ی اصلی: طلایی با متنِ هم‌رنگ زمینه‌ی تم، یکسان در همه‌ی قالب‌ها */
.card-action,
.pagination .page-item.active .page-link {
    background-color: var(--accent-color) !important;
    border-color    : var(--accent-color-strong) !important;
    color           : var(--on-accent) !important
}

.content-card:hover .card-action {
    background-color: var(--accent-color-strong) !important
}

@media (max-width: 991px) {
    .filter-bar.is-collapsed {
        display: none
    }
}