/* ============================================================
   Pargar Academy — courses.css
   کارت دوره (مطابق دیزاین) + آرشیو دوره‌ها
   ============================================================ */

/* ===================== کارت دوره ===================== */
.bm-course-card {
    background: var(--bm-surface); border: 1px solid var(--bm-border);
    border-radius: 20px; overflow: hidden; box-shadow: var(--bm-shadow-md);
    transition: transform .18s, box-shadow .18s;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.bm-course-card:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow-xl); }

.bm-course-thumb {
    display: block; height: 150px; position: relative; overflow: hidden;
    background: var(--bm-surface-2);
}
.bm-course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bm-course-card:hover .bm-course-thumb img { transform: scale(1.05); }

.bm-course-badge {
    position: absolute; top: 11px; right: 11px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--bm-accent); color: #fff; font-size: .68rem; font-weight: 800;
}
.bm-course-badge.is-free, .bm-course-badge.is-new { background: var(--bm-success); }

.bm-course-fav {
    position: absolute; top: 11px; left: 11px;
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem; cursor: pointer;
}
.bm-course-hours {
    position: absolute; bottom: 11px; right: 11px;
    padding: 4px 10px; border-radius: 8px;
    background: rgba(0,0,0,.32); color: #fff; font-size: .68rem; font-weight: 600;
}

.bm-course-body { padding: 17px; display: flex; flex-direction: column; flex: 1; }
.bm-course-cat {
    display: inline-block; align-self: flex-start;
    padding: 4px 10px; border-radius: 7px;
    background: var(--bm-secondary-soft); color: var(--bm-secondary);
    font-size: .66rem; font-weight: 700; margin-bottom: 10px;
}
.bm-course-title { margin: 0 0 9px; font-size: .97rem; font-weight: 700; line-height: 1.6; min-height: 50px; color: var(--bm-text); }
.bm-course-title a { color: var(--bm-text); }
.bm-course-title a:hover { color: var(--bm-primary); }

.bm-course-instructor { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; }
.bm-ci-avatar { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--bm-primary), var(--bm-secondary)); flex: 0 0 auto; }
.bm-course-instructor span { font-size: .76rem; color: var(--bm-text-sub); }

.bm-course-footer {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between;
    padding-top: 13px; border-top: 1px solid var(--bm-border);
}
.bm-course-rating { display: flex; align-items: center; gap: 4px; }
.bm-course-rating .bm-star { color: var(--bm-accent); font-size: .82rem; }
.bm-course-rating strong { font-size: .8rem; font-weight: 700; }
.bm-course-rating small { font-size: .7rem; color: var(--bm-text-mute); }
.bm-course-price-wrap { text-align: left; }
.bm-course-price-wrap del { display: block; font-size: .7rem; color: var(--bm-text-mute); text-decoration: line-through; }
.bm-course-price { font-size: .88rem; font-weight: 800; color: var(--bm-primary); }
.bm-price-free { color: var(--bm-success); }

/* ===================== بند عنوان آرشیو ===================== */
.bm-archive-hero { border-bottom: 1px solid var(--bm-border); background: var(--bm-surface); position: relative; overflow: hidden; }
.bm-archive-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 320px at 90% -20%, var(--bm-primary-soft), transparent 70%); pointer-events: none; }
.bm-archive-hero-inner { position: relative; padding-block: 34px 30px; }
.bm-archive-hero .bm-breadcrumb { display: flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--bm-text-mute); margin-bottom: 14px; }
.bm-archive-hero .bm-breadcrumb a { color: var(--bm-text-sub); }
.bm-archive-hero .bm-breadcrumb .cur { color: var(--bm-primary); font-weight: 700; }
.bm-archive-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bm-archive-hero h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 800; letter-spacing: -.6px; }
.bm-archive-hero p { margin: 0; font-size: .95rem; color: var(--bm-text-sub); }
.bm-archive-showing { font-size: .85rem; color: var(--bm-text-mute); }
.bm-archive-showing strong { color: var(--bm-text); font-weight: 700; }

/* ===================== نوار ابزار ===================== */
.bm-archive { padding-block: 26px 70px; }
.bm-archive-topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.bm-filter-open { display: none; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--bm-border); border-radius: 12px; background: var(--bm-surface); color: var(--bm-text); font-family: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; box-shadow: var(--bm-shadow-sm); }

.bm-sort { position: relative; }
.bm-sort-btn { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--bm-border); border-radius: 12px; background: var(--bm-surface); color: var(--bm-text); font-family: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; box-shadow: var(--bm-shadow-sm); }
.bm-sort-lbl { color: var(--bm-text-mute); font-weight: 500; }
.bm-sort-btn .bm-caret { width: 8px; height: 8px; border-right: 2px solid var(--bm-text-mute); border-bottom: 2px solid var(--bm-text-mute); transform: rotate(45deg); margin-bottom: 3px; }
.bm-sort-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 14px; box-shadow: var(--bm-shadow-lg); padding: 6px; list-style: none; margin: 0; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .18s; }
.bm-sort.open .bm-sort-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bm-sort-menu li a { display: block; padding: 10px 14px; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--bm-text-sub); }
.bm-sort-menu li.active a, .bm-sort-menu li a:hover { background: var(--bm-primary-soft); color: var(--bm-primary); }

.bm-viewtoggle-wrap { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.bm-view-lbl { font-size: .82rem; color: var(--bm-text-mute); }
.bm-viewtoggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--bm-border); border-radius: 11px; background: var(--bm-surface); }
.bm-viewtoggle button { width: 34px; height: 30px; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--bm-text-mute); }
.bm-viewtoggle button.is-active { background: var(--bm-primary); color: #fff; }

/* ===================== چیدمان ===================== */
.bm-archive-layout { display: grid; grid-template-columns: 286px 1fr; gap: 26px; align-items: start; }

/* سایدبار = چند کارت جدا */
.bm-filters { position: sticky; top: calc(var(--bm-header-h) + 16px); }
.bm-filter-form { display: flex; flex-direction: column; gap: 16px; }
.bm-filters-mobilehead { display: none; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bm-filters-mobilehead h3 { margin: 0; font-size: 1.1rem; }
.bm-filter-close { display: none; background: none; border: none; font-size: 1.2rem; color: var(--bm-text-mute); cursor: pointer; }

.bm-fcard { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 18px; padding: 20px; box-shadow: var(--bm-shadow-sm); }
.bm-fcard-search { padding: 18px; }
.bm-fcard-title { font-size: .9rem; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.bm-fcard-num { font-size: .72rem; color: var(--bm-text-mute); font-weight: 500; }

.bm-fsearch { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1.5px solid var(--bm-border); border-radius: 12px; background: var(--bm-surface-2); }
.bm-fsearch input { flex: 1; border: none; background: transparent; color: var(--bm-text); font-family: inherit; font-size: .84rem; outline: none; min-width: 0; }

.bm-fcheck-list { display: flex; flex-direction: column; gap: 13px; }
.bm-fcheck, .bm-fradio { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: .84rem; color: var(--bm-text-sub); }
.bm-fname { flex: 1; }
.bm-fcount { font-size: .72rem; color: var(--bm-text-mute); }

.bm-fbox { width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid var(--bm-border-strong); background: var(--bm-surface); flex: 0 0 auto; position: relative; transition: .15s; }
.bm-fcheck.is-on .bm-fbox { background: var(--bm-primary); border-color: var(--bm-primary); }
.bm-fcheck.is-on .bm-fbox::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border-right: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(45deg); }
.bm-fcheck.is-on .bm-fname, .bm-fradio.is-on .bm-fname { color: var(--bm-text); font-weight: 600; }

.bm-fdot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bm-border-strong); flex: 0 0 auto; position: relative; transition: .15s; }
.bm-fradio.is-on .bm-fdot { border-color: var(--bm-primary); }
.bm-fradio.is-on .bm-fdot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bm-primary); }
.bm-fstars { color: var(--bm-accent); font-size: .82rem; letter-spacing: -1px; }
.bm-flabel { color: var(--bm-text-mute); font-size: .78rem; }
.bm-fradio.is-on .bm-flabel { color: var(--bm-text-sub); }

.bm-price-btns { display: flex; gap: 8px; margin-bottom: 18px; }
.bm-price-btn { flex: 1; text-align: center; padding: 9px 0; border: 1px solid var(--bm-border); border-radius: 10px; font-size: .8rem; font-weight: 700; color: var(--bm-text-sub); background: var(--bm-surface); }
.bm-price-btn.is-on { background: var(--bm-primary); color: #fff; border-color: var(--bm-primary); }

.bm-range { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 999px; background: var(--bm-surface-2); outline: none; }
.bm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bm-primary); cursor: pointer; border: 3px solid var(--bm-surface); box-shadow: var(--bm-shadow-sm); }
.bm-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bm-primary); cursor: pointer; border: 3px solid var(--bm-surface); }
.bm-range-info { display: flex; justify-content: space-between; margin-top: 12px; font-size: .76rem; color: var(--bm-text-sub); }
.bm-range-val { color: var(--bm-primary); font-weight: 700; }

.bm-fchips { display: flex; flex-wrap: wrap; gap: 9px; }
.bm-fchip { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--bm-border); background: var(--bm-surface); color: var(--bm-text-sub); font-size: .8rem; font-weight: 600; }
.bm-fchip.is-on { border-color: var(--bm-primary); background: var(--bm-primary-soft); color: var(--bm-primary); font-weight: 700; }

.bm-filters-clear { display: block; text-align: center; padding: 12px; border: 1px solid var(--bm-border); border-radius: 12px; background: transparent; color: var(--bm-text-sub); font-weight: 700; font-size: .84rem; }
.bm-filters-clear:hover { border-color: var(--bm-primary); color: var(--bm-primary); }

/* چیپ‌های فعال */
.bm-active-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.bm-active-lbl { font-size: .78rem; color: var(--bm-text-mute); }
.bm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--bm-primary-soft); color: var(--bm-primary); font-size: .78rem; font-weight: 700; }
.bm-chip-x { width: 15px; height: 15px; border-radius: 50%; background: var(--bm-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; line-height: 1; }
.bm-chips-clear { font-size: .78rem; color: var(--bm-error); font-weight: 700; }

/* گرید */
.bm-courses-grid.bm-archive-grid { grid-template-columns: repeat(3, 1fr); }
.bm-archive-grid[data-view="list"] { grid-template-columns: 1fr; }
.bm-archive-grid[data-view="list"] .bm-course-card { flex-direction: row; }
.bm-archive-grid[data-view="list"] .bm-course-thumb { width: 260px; height: auto; flex: 0 0 260px; }

/* اورلی موبایل */
.bm-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s; z-index: 150; }
.bm-filter-overlay.open { opacity: 1; visibility: visible; }

/* صفحه‌بندی */
.bm-pagination { margin-top: 40px; }
.bm-pagination ul { list-style: none; display: flex; justify-content: center; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.bm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--bm-border); border-radius: 11px; color: var(--bm-text); font-weight: 600; }
.bm-pagination .page-numbers.current { background: var(--bm-primary); color: #fff; border-color: var(--bm-primary); }
.bm-pagination a.page-numbers:hover { border-color: var(--bm-primary); color: var(--bm-primary); }

/* ریسپانسیو */
@media (max-width: 1024px) { .bm-courses-grid.bm-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) {
    .bm-filter-open { display: inline-flex; }
    .bm-viewtoggle-wrap { margin-right: 0; }
    .bm-archive-layout { grid-template-columns: 1fr; }
    .bm-filters { position: fixed; inset: 0 auto 0 0; width: min(330px, 88vw); transform: translateX(-100%); transition: transform .3s ease; z-index: 200; overflow-y: auto; background: var(--bm-bg); padding: 20px; }
    .bm-filters.open { transform: translateX(0); }
    .bm-filters-mobilehead, .bm-filter-close { display: flex; }
    .bm-archive-grid[data-view="list"] .bm-course-thumb { flex-basis: 180px; }
}
@media (max-width: 560px) {
    .bm-courses-grid.bm-archive-grid, .bm-archive-grid[data-view="list"] { grid-template-columns: 1fr; }
    .bm-archive-grid[data-view="list"] .bm-course-card { flex-direction: column; }
    .bm-archive-grid[data-view="list"] .bm-course-thumb { width: 100%; flex-basis: auto; height: 150px; }
    .bm-archive-hero h1 { font-size: 1.6rem; }
    .bm-archive-topbar { gap: 10px; }
    .bm-sort, .bm-sort-btn { flex: 1; } .bm-sort-btn { width: 100%; justify-content: space-between; }
}