/* =====================================================================
   لایه‌ی مشترک هویت بصری ایرانی ادبراه
   بعد از بوت‌استرپ و site.css لود می‌شود تا کامپوننت‌های بوت‌استرپ (کارت، فرم، دکمه،
   جدول، مودال، آکاردئون …) در همه‌ی صفحات از رنگ‌های قالب فعال پیروی کنند.
   رنگ‌ها فقط از متغیرهای قالب می‌آیند؛ هیچ رنگ ثابتی (سیاه/سفید) برای متن یا پس‌زمینه نیست.
   ===================================================================== */

:root[data-bs-theme] {
    --bs-body-bg          : var(--background-secondary);
    --bs-body-color       : var(--primary-text);
    --bs-emphasis-color   : var(--primary-text);
    --bs-heading-color    : var(--primary-text);
    --bs-secondary-color  : var(--secondary-text);
    --bs-secondary-bg     : var(--surface-strong);
    --bs-tertiary-bg      : var(--surface);
    --bs-border-color     : var(--border-subtle);
    --bs-link-color       : var(--primary-text);
}

.text-muted,
.text-secondary,
.form-text {
    color: var(--secondary-text) !important
}

.text-warning {
    color: var(--accent-color-strong) !important
}

hr {
    border-color: var(--border-subtle);
    opacity     : 1
}

/* ---------- کارت‌ها ---------- */
.card {
    --bs-card-bg          : var(--surface);
    --bs-card-cap-bg      : var(--surface-strong);
    --bs-card-border-color: var(--border-subtle);
    --bs-card-color       : var(--primary-text);
    border-width : 2px;
    border-radius: 14px
}

.card-header,
.card-footer {
    border-color: var(--border-subtle)
}

/* ---------- فرم‌ها ---------- */
.form-control,
.form-select {
    min-height      : 44px;
    background-color: var(--surface);
    color           : var(--primary-text);
    border          : 1.5px solid var(--border-subtle);
    border-radius   : 10px
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    color           : var(--primary-text);
    border-color    : var(--accent-color);
    box-shadow      : 0 0 0 3px var(--accent-color-soft)
}

.form-control::placeholder {
    color  : var(--secondary-text);
    opacity: .8
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-strong);
    color           : var(--secondary-text)
}

.form-label {
    font-weight: 700
}

.form-check-input {
    background-color: var(--surface);
    border          : 1.5px solid var(--accent-color)
}

.form-check-input:checked {
    background-color: var(--button-primary);
    border-color    : var(--button-primary)
}

.input-group-text {
    background-color: var(--surface-strong);
    color           : var(--primary-text);
    border          : 1.5px solid var(--border-subtle)
}

.invalid-feedback,
.text-danger {
    font-size: .9rem
}

/* ---------- دکمه‌ها ---------- */
.btn {
    --bs-btn-border-radius: 10px;
    --bs-btn-font-weight  : 700;
    --bs-btn-padding-x    : 1.25rem;
    --bs-btn-padding-y    : .55rem;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease
}

.btn-primary {
    --bs-btn-color              : #fff;
    --bs-btn-bg                 : var(--button-primary);
    --bs-btn-border-color       : var(--button-primary);
    --bs-btn-hover-color        : #fff;
    --bs-btn-hover-bg           : var(--button-primary-hover);
    --bs-btn-hover-border-color : var(--button-primary-hover);
    --bs-btn-active-color       : #fff;
    --bs-btn-active-bg          : var(--button-primary-hover);
    --bs-btn-active-border-color: var(--button-primary-hover);
    --bs-btn-disabled-color     : #fff;
    --bs-btn-disabled-bg        : var(--button-primary);
    --bs-btn-disabled-border-color: var(--button-primary);
    --bs-btn-focus-shadow-rgb   : 201, 162, 39
}

.btn-success {
    --bs-btn-color              : #fff;
    --bs-btn-bg                 : #2e6b45;
    --bs-btn-border-color       : #2e6b45;
    --bs-btn-hover-color        : #fff;
    --bs-btn-hover-bg           : #245538;
    --bs-btn-hover-border-color : #245538;
    --bs-btn-active-color       : #fff;
    --bs-btn-active-bg          : #245538;
    --bs-btn-active-border-color: #245538
}

.btn-secondary,
.btn-dark,
.btn-light {
    --bs-btn-color              : var(--primary-text);
    --bs-btn-bg                 : var(--surface-strong);
    --bs-btn-border-color       : var(--border-subtle);
    --bs-btn-hover-color        : var(--primary-text);
    --bs-btn-hover-bg           : var(--accent-color-soft);
    --bs-btn-hover-border-color : var(--accent-color);
    --bs-btn-active-color       : var(--primary-text);
    --bs-btn-active-bg          : var(--accent-color-soft);
    --bs-btn-active-border-color: var(--accent-color);
    --bs-btn-disabled-color     : var(--secondary-text);
    --bs-btn-disabled-bg        : var(--surface-strong);
    --bs-btn-disabled-border-color: var(--border-subtle)
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-success {
    --bs-btn-color              : var(--primary-text);
    --bs-btn-border-color       : var(--primary-text);
    --bs-btn-hover-color        : var(--background-secondary);
    --bs-btn-hover-bg           : var(--primary-text);
    --bs-btn-hover-border-color : var(--primary-text);
    --bs-btn-active-color       : var(--background-secondary);
    --bs-btn-active-bg          : var(--primary-text);
    --bs-btn-active-border-color: var(--primary-text);
    --bs-btn-disabled-color     : var(--secondary-text);
    --bs-btn-disabled-border-color: var(--border-subtle)
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible {
    outline       : 3px solid var(--accent-color);
    outline-offset: 2px
}

/* ---------- جدول، مودال، منو، لیست ---------- */
.table {
    --bs-table-color       : var(--primary-text);
    --bs-table-bg          : transparent;
    --bs-table-border-color: var(--border-subtle);
    --bs-table-striped-bg  : var(--accent-color-soft);
    --bs-table-striped-color: var(--primary-text);
    --bs-table-hover-bg    : var(--accent-color-soft);
    --bs-table-hover-color : var(--primary-text)
}

.table > thead > tr > th {
    background-color: var(--surface-strong);
    color           : var(--primary-text);
    font-family     : BoldFarhang, sans-serif
}

.modal-content {
    background-color: var(--surface);
    color           : var(--primary-text);
    border          : 2px solid var(--accent-color);
    border-radius   : 14px
}

.modal-header,
.modal-footer {
    border-color: var(--border-subtle)
}

.dropdown-menu {
    --bs-dropdown-bg              : var(--surface);
    --bs-dropdown-color           : var(--primary-text);
    --bs-dropdown-border-color    : var(--accent-color);
    --bs-dropdown-link-color      : var(--primary-text);
    --bs-dropdown-link-hover-color: var(--primary-text);
    --bs-dropdown-link-hover-bg   : var(--accent-color-soft);
    --bs-dropdown-link-active-bg  : var(--button-primary)
}

.list-group {
    --bs-list-group-bg          : var(--surface);
    --bs-list-group-color       : var(--primary-text);
    --bs-list-group-border-color: var(--border-subtle);
    --bs-list-group-action-hover-bg: var(--accent-color-soft);
    --bs-list-group-action-hover-color: var(--primary-text);
    --bs-list-group-active-bg   : var(--button-primary);
    --bs-list-group-active-border-color: var(--button-primary)
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--button-primary)
}

.nav-tabs {
    --bs-nav-tabs-border-color          : var(--border-subtle);
    --bs-nav-tabs-link-active-bg        : var(--surface);
    --bs-nav-tabs-link-active-color      : var(--primary-text);
    --bs-nav-tabs-link-active-border-color: var(--accent-color) var(--accent-color) var(--surface);
    --bs-nav-link-color                 : var(--secondary-text);
    --bs-nav-link-hover-color           : var(--primary-text)
}

.accordion {
    --bs-accordion-bg                : var(--surface);
    --bs-accordion-color             : var(--primary-text);
    --bs-accordion-border-color      : var(--border-subtle);
    --bs-accordion-btn-color         : var(--primary-text);
    --bs-accordion-btn-bg            : var(--surface);
    --bs-accordion-active-color      : var(--primary-text);
    --bs-accordion-active-bg         : var(--surface-strong);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--accent-color-soft)
}

.progress {
    --bs-progress-bg        : var(--surface-strong);
    --bs-progress-bar-bg    : var(--button-primary)
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--secondary-text);
    --bs-breadcrumb-item-active-color: var(--secondary-text)
}

.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
}

/* ---------- اجزای مشترک سبک ایرانی ---------- */
.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
}

.page-lead {
    max-width: 720px;
    margin   : -1rem 0 2rem;
    color    : var(--secondary-text);
    font-size: 1.1rem
}

/* قاب «جدول» برای هر پنل/کارت */
.jadval {
    background-color: var(--surface);
    color           : var(--primary-text);
    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)
}

/* دکمه‌ی اصلی صفحه (فراخوان اصلی): طلایی روی قالب‌ها، متن هم‌رنگ زمینه‌ی قالب */
.btn-gold {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    padding         : .75rem 1.75rem;
    border-radius   : 12px;
    border          : 2px solid var(--accent-color-strong);
    background      : linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, #000));
    color           : var(--on-accent) !important;
    font-weight     : 700;
    transition      : transform .2s ease, box-shadow .2s ease
}

.btn-gold:hover {
    transform : translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 45%, transparent)
}

/* ---------- منوی «محتواها» در هدر ---------- */
.nav-item-dropdown {
    display    : flex;
    align-items: center
}

.dropdown-toggle-custom {
    display    : inline-flex;
    align-items: center;
    gap        : .35rem
}

/* پل نامرئی بین لینک و پنل تا هاور هنگام حرکت ماوس قطع نشود */
.nav-item-dropdown::after {
    content : '';
    position: absolute;
    top     : 100%;
    left    : -24px;
    right   : -24px;
    height  : 24px
}

.mega-menu-panel {
    top             : calc(100% + 18px);
    min-width       : 660px;
    max-width       : 760px;
    padding         : 0;
    overflow        : hidden;
    background-color: var(--surface);
    border          : 2px solid var(--accent-color);
    border-radius   : 16px;
    box-shadow      : inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--border-subtle), 0 20px 44px #00000052
}

.mega-menu-panel::before {
    display: none
}

.mega-menu-inner {
    display             : grid;
    grid-template-columns: 1.7fr 1fr
}

.mega-col {
    padding: 1.6rem 1.75rem 1.2rem
}

.mega-col-quick {
    position        : relative;
    background-color: var(--surface-strong);
    border-inline-start: 1px solid var(--border-subtle)
}

.mega-title {
    display    : flex;
    align-items: center;
    gap        : .55rem;
    margin     : 0 0 .9rem;
    font-size  : 1.1rem;
    color      : var(--accent-color-strong)
}

.mega-title::before {
    content         : '';
    width           : 18px;
    height          : 18px;
    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
}

.mega-menu-grid li.fw-bold {
    margin-top : .5rem;
    padding-top: .65rem
}

.mega-menu-grid li.fw-bold > a {
    color: var(--accent-color-strong) !important
}

.mega-menu-grid li a,
.mega-quick-list li a {
    display      : flex;
    align-items  : center;
    gap          : .55rem;
    padding      : .5rem .7rem;
    border-radius: 8px;
    color        : var(--primary-text) !important;
    font-size    : .98rem;
    transition   : background-color .15s ease
}

.mega-menu-grid li a:hover,
.mega-quick-list li a:hover {
    background-color: var(--accent-color-soft);
    color           : var(--primary-text) !important
}

.mega-quick-list {
    list-style: none;
    margin    : 0;
    padding   : 0
}

.mega-quick-list i {
    color: var(--accent-color)
}

.mega-menu-view-all {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    margin          : 0;
    padding         : .85rem 1rem;
    border-top      : 0;
    background-color: var(--button-primary);
    color           : #fff !important;
    font-size       : 1rem;
    font-weight     : 700;
    transition      : background-color .2s ease
}

.mega-menu-view-all:hover {
    background-color: var(--button-primary-hover)
}

/* ---------- دکمه‌ی اصلی هدر خانه: طلایی ---------- */
.btn-hero-primary {
    background  : linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, #000));
    border-color: var(--accent-color-strong);
    color       : var(--on-accent) !important;
    box-shadow  : 0 6px 16px color-mix(in srgb, var(--accent-color) 40%, transparent)
}

.btn-hero-primary:hover {
    background  : linear-gradient(180deg, var(--accent-color-strong), var(--accent-color));
    border-color: var(--accent-color-strong);
    box-shadow  : 0 10px 22px color-mix(in srgb, var(--accent-color) 55%, transparent)
}

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

/* لینک‌هایی که شکل دکمه دارند: قاعده‌ی سراسری رنگ لینک (a { color }) نباید رنگ متن دکمه را بخورد */
a.btn {
    color: var(--bs-btn-color) !important
}

a.btn:hover,
a.btn:focus-visible,
a.btn:active {
    color: var(--bs-btn-hover-color) !important
}

/* دکمه‌ی اصلی در همه‌ی صفحه‌ها: طلایی + متن هم‌رنگ زمینه‌ی قالب (برای هر قالبی خوانا) */
.btn-primary {
    --bs-btn-color              : var(--on-accent);
    --bs-btn-bg                 : var(--accent-color);
    --bs-btn-border-color       : var(--accent-color-strong);
    --bs-btn-hover-color        : var(--on-accent);
    --bs-btn-hover-bg           : var(--accent-color-strong);
    --bs-btn-hover-border-color : var(--accent-color-strong);
    --bs-btn-active-color       : var(--on-accent);
    --bs-btn-active-bg          : var(--accent-color-strong);
    --bs-btn-active-border-color: var(--accent-color-strong);
    --bs-btn-disabled-color     : var(--on-accent);
    --bs-btn-disabled-bg        : var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color-strong)
}

.pagination {
    --bs-pagination-active-bg          : var(--accent-color);
    --bs-pagination-active-border-color: var(--accent-color-strong);
    --bs-pagination-active-color       : var(--on-accent)
}

.pagination .page-item.active .page-link {
    color: var(--on-accent) !important
}