/**
 * Course Archive v2 — Sidebar + Grid, RTL, Mobile-first
 *
 * Dark mode: html[data-theme="dark"] (matches child theme pattern)
 * Breakpoints: 480 → 768 → 1024 → 1400
 *
 * @since 1.6.0
 */

/* ==========================================================
   CSS Custom Properties
   ========================================================== */

:root {
    --qm-cat-primary: #1E6649;
    --qm-cat-primary-hover: #155039;
    --qm-cat-primary-light: #E8F5EE;
    --qm-cat-text: #1a1a2e;
    --qm-cat-text-muted: #6b7280;
    --qm-cat-border: #E8E4D8;
    --qm-cat-bg: #FFFDF6;
    --qm-cat-card-bg: #ffffff;
    --qm-cat-badge-text: #ffffff;
    --qm-cat-free: #1E9A6D;
    --qm-cat-sale-strike: #9ca3af;
    --qm-cat-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --qm-cat-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
    --qm-cat-radius-card: 16px;
    --qm-cat-radius-btn: 10px;
    --qm-cat-radius-pill: 999px;
    --qm-cat-radius-sheet: 20px;
}

html[data-theme="dark"] {
    --qm-cat-primary: #34d399;
    --qm-cat-primary-hover: #2abb87;
    --qm-cat-primary-light: #0d2119;
    --qm-cat-text: #eaf3f0;
    --qm-cat-text-muted: #9cb6af;
    --qm-cat-border: rgba(255, 255, 255, 0.1);
    --qm-cat-bg: #0a1612;
    --qm-cat-card-bg: #15352b;
    --qm-cat-free: #34d399;
    --qm-cat-sale-strike: #6b7280;
    --qm-cat-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --qm-cat-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ==========================================================
   Page Container
   ========================================================== */

.qm-catalog {
    direction: rtl;
    text-align: right;
    background: var(--qm-cat-bg);
    color: var(--qm-cat-text);
    min-height: 60vh;
    padding-bottom: 48px;
}

.qm-catalog-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ==========================================================
   Page Header (gradient)
   ========================================================== */

.qm-catalog-header {
    text-align: center;
    padding: 32px 0 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    background: linear-gradient(135deg, #E8F5EE 0%, #FFFDF6 60%, #f0ebe0 100%);
    border-bottom: 1px solid var(--qm-cat-border);
}

html[data-theme="dark"] .qm-catalog-header {
    background: linear-gradient(135deg, #0d2119 0%, #15352b 60%, #1a3a30 100%);
}

.qm-catalog-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--qm-cat-text);
}

.qm-catalog-subtitle {
    font-size: 15px;
    color: var(--qm-cat-text-muted);
    margin: 0;
}

/* ==========================================================
   Layout: Content + Sidebar
   ========================================================== */

.qm-catalog-layout {
    display: block;
}

.qm-catalog-main {
    min-height: 400px;
}

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

.qm-catalog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    position: relative; /* required for filtered-out absolute positioning */
}

/* ==========================================================
   Course Card
   ========================================================== */

.qm-course-card {
    display: flex;
    flex-direction: column;
    background: var(--qm-cat-card-bg);
    border-radius: var(--qm-cat-radius-card);
    overflow: hidden;
    box-shadow: var(--qm-cat-shadow);
    transition: filter 0.25s, opacity 0.15s, transform 0.15s;
    border: 1px solid var(--qm-cat-border);
}

.qm-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.qm-course-card:active {
    filter: brightness(0.97);
}

/* Card banner */
.qm-card-banner {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: linear-gradient(135deg, var(--qm-cat-primary-light), var(--qm-cat-primary));
}

html[data-theme="dark"] .qm-card-banner {
    background: linear-gradient(135deg, #0d2119, #15352b);
}

.qm-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qm-card-banner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--qm-cat-primary-light), var(--qm-cat-primary));
    opacity: 0.3;
}

/* Badge — gradient overlays */
.qm-card-badge {
    position: absolute;
    top: 10px;
    left: 10px; /* top-left in RTL = visual top-right */
    padding: 4px 12px;
    border-radius: var(--qm-cat-radius-pill);
    font-size: 12px;
    font-weight: 700;
    color: var(--qm-cat-badge-text);
    background: var(--qm-cat-primary);
    line-height: 1.4;
}

.qm-card-badge[data-tag="bestseller"] { background: linear-gradient(135deg, #d97706, #f59e0b); }
.qm-card-badge[data-tag="new"]        { background: linear-gradient(135deg, #1E6649, #2a8a62); }
.qm-card-badge[data-tag="rising"]     { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.qm-card-badge[data-tag="updated"]    { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.qm-card-badge[data-tag="featured"]   { background: linear-gradient(135deg, #dc2626, #ef4444); }
.qm-card-badge[data-tag="limited"]    { background: linear-gradient(135deg, #b91c1c, #dc2626); }

/* Price badge — banner overlay */
.qm-card-price-badge {
    position: absolute;
    bottom: 10px;
    right: 10px; /* physical right = visual left in RTL (opposite tag badge) */
    padding: 5px 14px;
    border-radius: var(--qm-cat-radius-pill);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.78);
    line-height: 1.4;
    white-space: nowrap;
}

.qm-card-price-badge del {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.7;
    text-decoration: line-through;
    margin-left: 4px;
}

.qm-card-price-badge--free {
    background: linear-gradient(135deg, #1E6649, #1E9A6D);
}

.qm-card-price-badge .qm-sar-icon {
    width: 12px;
    height: 12px;
    background: #fff;
}

/* Card body */
.qm-card-body {
    padding: 12px 14px 0;
    flex: 1;
}

.qm-card-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.qm-card-college,
.qm-card-uni {
    padding: 2px 10px;
    border-radius: var(--qm-cat-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.qm-card-college {
    color: var(--qm-cat-primary);
    background: var(--qm-cat-primary-light);
}

.qm-card-uni {
    color: #6B7280;
    background: rgba(107, 114, 128, 0.1);
}

html[data-theme="dark"] .qm-card-college {
    background: rgba(30, 102, 73, 0.2);
}

html[data-theme="dark"] .qm-card-uni {
    color: #9CA3AF;
    background: rgba(156, 163, 175, 0.15);
}

/* College-specific pill colors */
.qm-card-college[data-college="ccis"] { color: #0096D6; background: rgba(0,150,214,0.1); }
.qm-card-college[data-college="cba"]  { color: #C8102E; background: rgba(200,16,46,0.1); }
.qm-card-college[data-college="cad"]  { color: #6D6E71; background: rgba(109,110,113,0.1); }
.qm-card-college[data-college="chs"]  { color: #00843D; background: rgba(0,132,61,0.1); }

/* Dark mode pill overrides */
html[data-theme="dark"] .qm-card-college[data-college="ccis"] { color: #5BC0EB; background: rgba(0,150,214,0.15); }
html[data-theme="dark"] .qm-card-college[data-college="cba"]  { color: #EF5350; background: rgba(200,16,46,0.15); }
html[data-theme="dark"] .qm-card-college[data-college="cad"]  { color: #9E9E9E; background: rgba(109,110,113,0.2); }
html[data-theme="dark"] .qm-card-college[data-college="chs"]  { color: #4CAF50; background: rgba(0,132,61,0.15); }

.qm-card-title {
    font-size: 19.2px !important;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 4px;
    color: var(--qm-cat-text);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qm-card-instructor {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--qm-cat-text);
    margin-bottom: 6px;
    text-align: center;
}

/* Stat bar (chapters · lessons · key feature) */
.qm-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    font-size: 11px;
    color: var(--qm-cat-text-muted);
    margin-bottom: 8px;
}

.qm-card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.qm-card-stats span + span::before {
    display: none;
}

.qm-card-stats svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Card footer — buttons only (price moved to banner) */
.qm-card-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--qm-cat-border);
    margin-top: auto;
}

/* Single button (free courses) — span full width */
.qm-card-footer > :only-child {
    grid-column: 1 / -1;
}

/* SAR icon */
.qm-sar-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--qm-sar-svg) no-repeat center / contain;
    mask: var(--qm-sar-svg) no-repeat center / contain;
    vertical-align: middle;
    margin-right: 2px;
}

.qm-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    height: 38px;
    box-sizing: border-box;
    border-radius: var(--qm-cat-radius-btn);
    background: linear-gradient(135deg, #1E6649, #2a8a62);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: filter 0.2s;
}

.qm-btn-buy:hover,
.qm-btn-buy:focus,
.qm-btn-buy:visited {
    color: #fff;
    filter: brightness(1.35);
}

.qm-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    height: 38px;
    border-radius: var(--qm-cat-radius-btn);
    background: transparent;
    color: var(--qm-cat-primary);
    border: 1.5px solid var(--qm-cat-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.qm-btn-cart:hover {
    background: rgba(30, 102, 73, 0.15);
    color: #155039;
    border-color: #155039;
    box-shadow: 0 2px 8px rgba(30, 102, 73, 0.2);
}

html[data-theme="dark"] .qm-btn-cart:hover {
    background: rgba(30, 102, 73, 0.25);
    border-color: #fff;
    color: #fff;
}

.qm-btn-cart svg {
    flex-shrink: 0;
}

.qm-btn-cart.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.qm-btn-cart.is-added {
    background: var(--qm-cat-primary-light);
    border-color: var(--qm-cat-free);
    color: var(--qm-cat-free);
}

html[data-theme="dark"] .qm-btn-cart.is-added {
    background: rgba(30, 154, 109, 0.15);
}

.qm-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    min-height: 40px;
    border-radius: var(--qm-cat-radius-btn);
    background: var(--qm-cat-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: filter 0.2s;
}

.qm-btn-view:hover {
    filter: brightness(1.1);
}

/* ==========================================================
   Filter Animation — Cross-fade + Brick-stack
   ========================================================== */

/* Grid-level cross-fade out */
.qm-catalog-grid.qm-fading-out { pointer-events: none; }
.qm-catalog-grid.qm-fading-out .qm-course-card:not(.qm-filtered-out) {
    opacity: 0;
    transform: translateY(-8px);
}

/* Hidden card — out of flow */
.qm-course-card.qm-filtered-out {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* Load More deferred — hidden but preserves grid slot */
.qm-course-card.qm-deferred {
    display: none !important;
}

/* Brick entrance: start state */
.qm-course-card.qm-brick-enter {
    opacity: 0;
    transform: translateY(50px);
}

/* Brick entrance: animate to final position */
.qm-course-card.qm-brick-enter.qm-brick-go {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
   Load More
   ========================================================== */

.qm-load-more-wrap {
    text-align: center;
    padding: 24px 0 8px;
}

.qm-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 32px;
    min-height: 48px;
    border: 2px solid var(--qm-cat-primary);
    border-radius: var(--qm-cat-radius-pill);
    background: transparent;
    color: var(--qm-cat-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.qm-load-more:hover {
    background: linear-gradient(135deg, #1E6649, #2a8a62);
    color: #fff;
    border-color: transparent;
}

.qm-load-more-count::before { content: '('; }
.qm-load-more-count::after  { content: ' \0645\062A\0628\0642\064A)'; }

/* ==========================================================
   Empty State
   ========================================================== */

.qm-empty-state {
    display: none;
    text-align: center;
    padding: 64px 24px;
    color: var(--qm-cat-text-muted);
}

.qm-empty-state.qm-visible {
    display: block;
}

.qm-empty-icon {
    opacity: 0.4;
    margin-bottom: 16px;
}

.qm-empty-text {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
}

.qm-empty-clear {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    min-height: 44px;
    border: 2px solid var(--qm-cat-primary);
    border-radius: var(--qm-cat-radius-pill);
    background: transparent;
    color: var(--qm-cat-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

/* Explicit hover: this outline button used to get its fill from the global
   button:hover in style.css, which is now scoped to unclassed buttons.
   Matches .qm-btn-cart:hover so the two outline buttons behave alike. */
.qm-empty-clear:hover {
    background: rgba(30, 102, 73, 0.15);
    border-color: #155039;
    color: #155039;
}

html[data-theme="dark"] .qm-empty-clear:hover {
    background: rgba(30, 102, 73, 0.25);
    border-color: #fff;
    color: #fff;
}

/* ==========================================================
   Sidebar (desktop only, hidden on mobile)
   ========================================================== */

.qm-catalog-sidebar {
    display: none;
}

.qm-sidebar-inner {
    position: sticky;
    /* Pin flush below the sticky search bar: qimah-header (86px) + stuck search bar (~73px) */
    top: calc(var(--qm-header-h, 86px) + 73px);
    padding: 18px 16px;
    /* Solid white — the warm cream page bg was bleeding through any transparent
       overlay. Solid white kills the creaminess; rounded corners + shadow keep
       the modern feel. */
    background: #FFFFFF;
    border: 1px solid rgba(217, 211, 196, 0.55);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 32px -16px rgba(5, 94, 85, 0.14),
        0 4px 12px -8px rgba(5, 94, 85, 0.08);
}

/* Dark mode: solid teal-green card surface */
html[data-theme="dark"] .qm-sidebar-inner {
    background: #15352b;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 32px -16px rgba(0, 0, 0, 0.55),
        0 4px 12px -8px rgba(0, 0, 0, 0.25);
}

/* Filter section headings */
.qm-filter-heading {
    font-size: 12px;
    font-weight: 700;
    color: var(--qm-cat-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
    padding: 0;
}

.qm-filter-section {
    margin-bottom: 20px;
}

.qm-filter-section:last-of-type {
    margin-bottom: 12px;
}

/* College nav items */
.qm-college-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qm-college-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--qm-cat-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
    text-align: right;
    border-inline-end: 3px solid transparent;
}

.qm-college-item:hover {
    background: var(--qm-cat-primary-light);
    border-inline-end-color: var(--qm-cat-primary);
    color: var(--qm-cat-primary);
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.15);
}

.qm-college-item:hover .qm-college-label {
    font-weight: 700;
}

.qm-college-item:hover .qm-college-count {
    background: var(--qm-cat-primary);
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(30, 102, 73, 0.3);
}

html[data-theme="dark"] .qm-college-item:hover {
    background: rgba(30, 102, 73, 0.1);
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.2);
}

html[data-theme="dark"] .qm-college-item:hover .qm-college-count {
    background: rgba(30, 102, 73, 0.8);
}

.qm-college-item.is-active {
    border-inline-end-color: var(--qm-cat-primary);
    background: var(--qm-cat-primary-light);
    font-weight: 700;
    color: var(--qm-cat-primary);
}

html[data-theme="dark"] .qm-college-item.is-active {
    background: rgba(30, 102, 73, 0.15);
}

/* College-specific sidebar active colors */
.qm-college-item[data-college="ccis"].is-active { border-inline-end-color: #0096D6; background: rgba(0,150,214,0.08); }
.qm-college-item[data-college="cba"].is-active  { border-inline-end-color: #C8102E; background: rgba(200,16,46,0.08); }
.qm-college-item[data-college="cad"].is-active  { border-inline-end-color: #6D6E71; background: rgba(109,110,113,0.08); }
.qm-college-item[data-college="chs"].is-active  { border-inline-end-color: #00843D; background: rgba(0,132,61,0.08); }

.qm-college-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--qm-cat-text-muted);
    background: var(--qm-cat-bg);
    padding: 1px 8px;
    border-radius: var(--qm-cat-radius-pill);
    min-width: 24px;
    text-align: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

html[data-theme="dark"] .qm-college-count {
    background: rgba(255, 255, 255, 0.08);
}

/* University nav — mirrors college nav */
.qm-university-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qm-university-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--qm-cat-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
    text-align: right;
    border-inline-end: 3px solid transparent;
}

.qm-university-item:hover {
    background: rgba(107, 114, 128, 0.08);
    color: var(--qm-cat-primary);
    border-inline-end-color: var(--qm-cat-primary);
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.15);
}

.qm-university-item:hover .qm-college-label {
    font-weight: 700;
}

.qm-university-item:hover .qm-college-count {
    background: var(--qm-cat-primary);
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(30, 102, 73, 0.3);
}

.qm-university-item.is-active {
    border-inline-end-color: #6B7280;
    background: rgba(107, 114, 128, 0.08);
    font-weight: 700;
    color: #4B5563;
}

html[data-theme="dark"] .qm-university-item:hover {
    background: rgba(156, 163, 175, 0.1);
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.2);
}

html[data-theme="dark"] .qm-university-item:hover .qm-college-count {
    background: rgba(30, 102, 73, 0.8);
}

html[data-theme="dark"] .qm-university-item.is-active {
    border-inline-end-color: #9CA3AF;
    background: rgba(156, 163, 175, 0.12);
    color: #D1D5DB;
}

/* Tag chips */
.qm-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qm-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid var(--qm-cat-border);
    border-radius: var(--qm-cat-radius-pill);
    background: transparent;
    color: var(--qm-cat-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.qm-tag-chip:hover {
    border-color: var(--qm-cat-primary);
    color: var(--qm-cat-primary);
}

.qm-tag-chip.is-active {
    background: linear-gradient(135deg, #1E6649, #1E9A6D);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

/* Sort nav items */
.qm-sort-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qm-sort-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--qm-cat-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: color 0.25s, background 0.25s, font-weight 0.25s, box-shadow 0.25s;
}

.qm-sort-item:hover {
    color: var(--qm-cat-primary);
    background: var(--qm-cat-primary-light);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.15);
}

html[data-theme="dark"] .qm-sort-item:hover {
    background: rgba(30, 102, 73, 0.1);
    box-shadow: inset 0 0 0 1px rgba(30, 102, 73, 0.2);
}

.qm-sort-item.is-active {
    color: var(--qm-cat-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* Clear filters */
.qm-filter-clear {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

.qm-filter-clear.qm-hidden {
    display: none;
}

/* ==========================================================
   Filter FAB (mobile only)
   ========================================================== */

.qm-filter-fab {
    display: flex;
    position: fixed;
    /* Rung 2. Theme 1.38.2 moved .qimah-back-to-top from 24 to 88 to free rung 0
       for the qimah-profile feedback launcher - which landed back-to-top in the
       slot this rule already owned, so both sat at 88 in the 769-1023px band
       where this FAB and the cart bar are still visible. The <=768px block near
       the end of this file compensates separately, because the launcher hides
       there and the column is one element shorter. Pitch is 64px: 24 / 88 / 152. */
    bottom: 152px;
    left: 24px; /* physical left = visual left in RTL */
    z-index: 98;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #2a8a62, #1a5c3f);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 6px 20px rgba(30, 102, 73, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
    transition: transform 0.15s, box-shadow 0.2s, bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.qm-filter-fab svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    stroke-width: 2.2;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.qm-filter-fab:active {
    transform: scale(0.92);
    box-shadow:
        0 2px 8px rgba(30, 102, 73, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .qm-filter-fab {
    background: linear-gradient(145deg, #1d6b4e, #0f3d2a);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Badge hidden — keep markup for potential future use */
.qm-fab-badge {
    display: none !important;
}

/* ==========================================================
   Bottom Sheet (mobile)
   ========================================================== */

.qm-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s;
}

.qm-sheet-backdrop.is-open {
    display: block;
    opacity: 1;
}

.qm-filter-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 80vh;
    background: var(--qm-cat-card-bg);
    border-radius: var(--qm-cat-radius-sheet) var(--qm-cat-radius-sheet) 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    flex-direction: column;
}

.qm-filter-sheet.is-open {
    display: flex;
    transform: translateY(0);
}

.qm-sheet-handle {
    text-align: center;
    padding: 10px 0 4px;
}

.qm-sheet-handle span {
    display: inline-block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--qm-cat-border);
}

.qm-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 12px;
    border-bottom: 1px solid var(--qm-cat-border);
}

.qm-sheet-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.qm-sheet-close {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--qm-cat-border);
    border-radius: 50%;
    background: var(--qm-cat-bg);
    color: var(--qm-cat-text);
    cursor: pointer;
    flex-shrink: 0;
}

.qm-sheet-close svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.qm-sheet-handle {
    cursor: grab;
}

.qm-sheet-handle:active {
    cursor: grabbing;
}

.qm-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

.qm-sheet-footer {
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--qm-cat-border);
}

.qm-sheet-apply {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: var(--qm-cat-radius-btn);
    background: linear-gradient(135deg, #1E6649, #2a8a62);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================================
   Mini-Cart Drawer
   ========================================================== */

.qm-cart-drawer {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)); /* sits above the cart bar */
    left: 0;
    right: 0;
    max-height: 60vh;
    background: var(--qm-cat-card-bg, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    z-index: 10002;
    transform: translateY(100%);
    visibility: hidden;
    display: flex;
    flex-direction: column;
    direction: rtl;
    /* No transition here — JS adds .is-ready after first paint to prevent FOUC */
}

/* Transitions enabled after JS init (prevents load flash) */
.qm-cart-drawer.is-ready {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.35s;
}

/* RTL override no longer needed — bottom sheet is full-width */

.qm-cart-drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

.qm-cart-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99; /* below cart bar (100) and drawer (10002) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.qm-cart-drawer__backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.qm-cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--qm-cat-border);
}

.qm-cart-drawer__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--qm-cat-text);
}

.qm-cart-drawer__close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--qm-cat-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.qm-cart-drawer__body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Loading skeleton */
.qm-cart-drawer__skeleton {
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--qm-cat-border) 25%, transparent 50%, var(--qm-cat-border) 75%);
    background-size: 200% 100%;
    animation: qm-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes qm-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state */
.qm-cart-drawer__empty {
    text-align: center;
    color: var(--qm-cat-text-muted);
    font-size: 14px;
    padding: 24px 0;
}

/* Cart item */
.qm-cart-drawer__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qm-cart-drawer__item-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--qm-cat-primary-light);
    flex-shrink: 0;
}

.qm-cart-drawer__item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qm-cart-drawer__item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--qm-cat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-cart-drawer__item-price {
    font-size: 13px;
    color: var(--qm-cat-primary);
    font-weight: 700;
}

.qm-cart-drawer__item-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--qm-cat-text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.qm-cart-drawer__item-remove:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

/* Total row */
.qm-cart-drawer__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--qm-cat-text);
    padding-bottom: 8px;
}

.qm-cart-drawer__total-value {
    color: var(--qm-cat-primary);
}

.qm-cart-drawer__footer {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--qm-cat-border);
}

.qm-cart-drawer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--qm-cat-radius-btn);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter 0.2s;
}

.qm-cart-drawer__btn--primary {
    background: linear-gradient(135deg, #1E6649, #2a8a62) !important;
    color: #fff !important;
}

.qm-cart-drawer__btn--primary:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* ==========================================================
   Toast Notification
   ========================================================== */

.qm-toast-container {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.qm-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--qm-cat-radius-btn);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    animation: qm-toast-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.qm-toast--success {
    background: linear-gradient(135deg, #1E6649, #1E9A6D);
}

.qm-toast--error {
    background: #dc2626;
}

.qm-toast.is-leaving {
    animation: qm-toast-out 0.25s ease forwards;
}

@keyframes qm-toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes qm-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* ==========================================================
   Sticky Cart Bar (mobile only)
   ========================================================== */

.qm-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--qm-cat-card-bg);
    border-top: 1px solid var(--qm-cat-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    direction: rtl;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s 0.35s;
}

.qm-cart-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s 0s;
}

.qm-cart-bar__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--qm-cat-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-cart-bar__chevron {
    flex-shrink: 0;
    color: var(--qm-cat-text-muted);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Flip chevron when drawer is expanded */
.qm-cart-bar.is-expanded .qm-cart-bar__chevron {
    transform: rotate(180deg);
}

.qm-cart-bar__count {
    font-size: 14px;
    font-weight: 700;
    color: var(--qm-cat-text);
    flex-shrink: 0;
}

.qm-cart-bar__total {
    font-size: 14px;
    font-weight: 700;
    color: var(--qm-cat-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.qm-cart-bar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 40px;
    box-sizing: border-box;
    border-radius: var(--qm-cat-radius-btn);
    background: linear-gradient(135deg, #1E6649, #2a8a62);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: filter 0.2s;
}

.qm-cart-bar__btn:hover {
    filter: brightness(1.1);
    color: #fff !important;
}

/* Shift FAB + back-to-top + toast up when cart bar is visible */
body.qm-has-cart .qm-filter-fab {
    bottom: 208px; /* back-to-top's 144 + 48 + 16. Was 80, which collided with the
                      feedback launcher - the cart bar lifts rung 0 to 80 too. */
}

body.qm-has-cart .qimah-back-to-top {
    bottom: 144px; /* 56px bar + 24px gap + 64 for the feedback launcher below it */
}

body.qm-has-cart .qm-toast-container {
    bottom: 140px; /* bar + fab + gap */
}

/* Toast also needs synced bottom transition */
.qm-toast-container {
    transition: bottom 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================
   Mobile: Full-width CTA (< 480px)
   ========================================================== */

@media (max-width: 479px) {
    .qm-btn-buy,
    .qm-btn-cart,
    .qm-btn-view {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================
   Tablet: 2 columns (480px+)
   ========================================================== */

@media (min-width: 480px) {
    .qm-catalog-inner {
        padding: 0 24px;
    }

    .qm-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .qm-catalog-header {
        padding: 40px 0 20px;
        margin: 0 -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .qm-catalog-title {
        font-size: 28px;
    }
}

/* ==========================================================
   Desktop: Sidebar + 2 columns (1024px+)
   ========================================================== */

@media (min-width: 1024px) {
    .qm-catalog-layout {
        display: grid;
        grid-template-columns: 1fr 260px;
        gap: 24px;
        align-items: start;
    }

    /* Sidebar visible + stretch so sticky inner has room to scroll */
    .qm-catalog-sidebar {
        display: block;
        order: 1; /* In RTL grid, this puts sidebar on the right (visual) */
        align-self: stretch;
    }

    .qm-catalog-main {
        order: 0;
    }

    /* FAB + cart bar hidden on desktop */
    .qm-filter-fab,
    .qm-cart-bar {
        display: none !important;
    }

    /* Cart drawer: revert to side-panel on desktop (no cart bar) */
    .qm-cart-drawer {
        top: 72px;
        bottom: auto;
        left: auto;
        right: 0;
        width: 340px;
        max-width: 90vw;
        max-height: calc(100vh - 72px);
        border-radius: 0 0 var(--qm-cat-radius-card) 0;
        box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.15);
        transform: translateX(110%);
    }

    html[dir="rtl"] .qm-cart-drawer {
        left: auto;
        right: 0;
    }

    .qm-cart-drawer.is-open {
        transform: translateX(0);
    }

    .qm-catalog-header {
        padding: 48px 0 24px;
    }

    .qm-catalog-title {
        font-size: 32px;
    }

    /* Hover effects — desktop only */
    .qm-course-card:hover {
        box-shadow: var(--qm-cat-shadow-hover);
        filter: brightness(1.02);
    }
}

/* ==========================================================
   Wide desktop: 3 columns (1400px+)
   ========================================================== */

@media (min-width: 1400px) {
    .qm-catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================
   Focus states
   ========================================================== */

.qm-college-item:focus-visible,
.qm-university-item:focus-visible,
.qm-tag-chip:focus-visible,
.qm-sort-item:focus-visible,
.qm-btn-buy:focus-visible,
.qm-btn-cart:focus-visible,
.qm-btn-view:focus-visible,
.qm-load-more:focus-visible,
.qm-empty-clear:focus-visible,
.qm-filter-fab:focus-visible,
.qm-sheet-apply:focus-visible {
    outline: 3px solid var(--qm-cat-primary);
    outline-offset: 2px;
}

/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .qm-toast {
        animation: none !important;
    }
    .qm-course-card {
        transition: none !important;
    }
    .qm-course-card.qm-brick-enter {
        opacity: 1;
        transform: none;
    }
    .qm-cart-bar,
    .qm-filter-fab,
    .qm-toast-container {
        transition: none !important;
    }
}

/* =========================================================
   SEARCH BAR (Course Archive Search)
========================================================= */

/* Sticky containing-block fix: theme/elementor sets `body { overflow-y: auto }`
   which silently breaks `position: sticky` (body becomes the scroll container).
   Override on the courses archive only — viewport handles scrolling, sticky works.
   `overflow-x: clip` preserves horizontal-overflow protection without creating a
   scroll container (vs `hidden`, which would re-trigger the same bug). */
body.post-type-archive-sfwd-courses {
    overflow-x: clip;
    overflow-y: visible;
}

.qm-search-bar {
    position: sticky;
    /* Stick below the site's sticky #qimah-header (~86px tall, z-index 10001) */
    top: var(--qm-header-h, 86px);
    z-index: 50;
    background: rgba(255, 253, 246, 0.55);
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    border-bottom: 1px solid rgba(232, 228, 216, 0.4);
    padding: 18px 0 16px;
    margin: 0 calc(-1 * var(--qm-catalog-pad, 24px));
    transition:
        padding .35s cubic-bezier(0.32, 0.72, 0, 1),
        background .25s ease,
        border-color .3s ease,
        box-shadow .35s ease;
}

/* On mobile, the search bar lives at the BOTTOM (thumb-reach + sits above iOS keyboard).
   Coordinates with .qm-cart-bar via body.qm-has-cart, and pushes the filter FAB up. */

/* Glass morphic when stuck: compacts vertically, glass tint deepens slightly for
   contrast against scrolling content, soft floating shadow lifts off the page.
   Cards scrolling underneath are heavily blurred via backdrop-filter — that's the
   intended Liquid Glass aesthetic, not bleed-through. */
.qm-search-bar.is-stuck {
    padding: 10px 0;
    background: rgba(255, 253, 246, 0.7);
    border-bottom-color: rgba(232, 228, 216, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 12px 28px -14px rgba(5, 94, 85, 0.18),
        0 4px 10px -6px rgba(5, 94, 85, 0.08);
}

.qm-search-bar-inner {
    max-width: var(--qm-catalog-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--qm-catalog-pad, 24px);
    display: flex;
    align-items: center;
    position: relative;
}

.qm-search-icon {
    position: absolute;
    inset-inline-end: 42px;
    color: #6e9888;
    pointer-events: none;
    flex-shrink: 0;
    transition: color .25s ease, transform .25s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Higher specificity than Hello Elementor reset.css `input[type="search"]` (0,0,1,1) */
input.qm-search-input {
    flex: 1;
    width: 100%;
    height: 52px;
    padding-block: 0;
    padding-inline-end: 60px;
    padding-inline-start: 60px;
    border: 1px solid rgba(217, 211, 196, 0.8);
    border-radius: 999px; /* pill */
    background: #FFFFFF;
    color: #055E55;
    font-family: inherit;
    font-size: 16px; /* Prevents iOS zoom on focus */
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
    outline: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 2px rgba(5, 94, 85, 0.05),
        0 8px 22px -14px rgba(5, 94, 85, 0.10);
    transition:
        border-color .2s ease,
        box-shadow .25s cubic-bezier(0.32, 0.72, 0, 1),
        background-color .2s ease;
}

input.qm-search-input::placeholder {
    color: #a8b1ab;
    opacity: 1;
    font-weight: 400;
    letter-spacing: 0.01em;
}

input.qm-search-input:hover {
    border-color: rgba(30, 102, 73, 0.42);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 4px rgba(5, 94, 85, 0.06),
        0 14px 30px -16px rgba(5, 94, 85, 0.16);
}

input.qm-search-input:focus,
input.qm-search-input:focus-visible {
    border-color: #1E6649;
    background: #FFFFFF;
    box-shadow:
        0 0 0 4px rgba(30, 102, 73, 0.10),
        0 0 0 1px rgba(30, 102, 73, 0.5),
        0 1px 2px rgba(5, 94, 85, 0.05),
        0 18px 36px -18px rgba(5, 94, 85, 0.20);
}

/* Icon turns full-brand and gently scales when input is focused */
.qm-search-bar:focus-within .qm-search-icon {
    color: #1E6649;
    transform: scale(1.06);
}

/* Hide native browser-side search controls — RTL otherwise renders a duplicate X */
input.qm-search-input::-webkit-search-cancel-button,
input.qm-search-input::-webkit-search-decoration,
input.qm-search-input::-webkit-search-results-button,
input.qm-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
input.qm-search-input::-ms-clear,
input.qm-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.qm-search-clear {
    position: absolute;
    inset-inline-start: 36px;
    width: 32px;
    height: 32px;
    background: rgba(5, 94, 85, 0.06);
    border: 0;
    cursor: pointer;
    padding: 0;
    color: #6e9888;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        color .15s ease,
        background-color .2s ease,
        transform .2s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow .2s ease;
}

.qm-search-clear:hover,
.qm-search-clear:focus-visible {
    color: #FFFFFF;
    background: linear-gradient(135deg, #1E6649 0%, #2a8a62 100%);
    transform: scale(1.06);
    box-shadow: 0 4px 10px -4px rgba(30, 102, 73, 0.45);
    outline: none;
}

.qm-search-clear:active {
    transform: scale(0.92);
    box-shadow: 0 2px 4px -2px rgba(30, 102, 73, 0.3);
}

.qm-search-clear.qm-hidden {
    display: none;
}

/* No body.admin-bar override needed: the qimah-header is sticky at top:0 and does
   NOT shift for the WP admin bar (the admin bar simply overlaps the top 32px of
   the qimah-header). The search bar must therefore stay pinned at the qimah-header's
   bottom (top: 86px), not double-offset by 32px — otherwise a 32px gap appears
   between header and search bar where scrolling cards bleed through. */

/* =========================================================
   SEARCH BAR — Mobile (≤768px): bottom-fixed, full-width
========================================================= */
@media (max-width: 768px) {
    /* Reserve space for the bottom-fixed search bar so the last cards aren't hidden */
    body.post-type-archive-sfwd-courses {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    /* Switch from sticky-top to fixed-bottom. Thumb-reach + iOS keyboard sits
       directly above the input when focused. */
    .qm-search-bar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 99; /* below cart-bar (100) — but cart-bar pushes us up via :has below */
        background: rgba(255, 253, 246, 0.94);
        backdrop-filter: blur(20px) saturate(1.6);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        border-top: 1px solid rgba(232, 228, 216, 0.55);
        border-bottom: 0;
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.5) inset,
            0 -10px 28px -16px rgba(5, 94, 85, 0.20),
            0 -2px 6px -4px rgba(5, 94, 85, 0.08);
        transition:
            bottom .35s cubic-bezier(0.32, 0.72, 0, 1),
            box-shadow .35s ease,
            background .25s ease;
    }

    /* On mobile the bar is always "stuck"-style — IntersectionObserver-driven
       .is-stuck class adds nothing here. */
    .qm-search-bar.is-stuck {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow:
            0 -1px 0 rgba(255, 255, 255, 0.5) inset,
            0 -10px 28px -16px rgba(5, 94, 85, 0.20),
            0 -2px 6px -4px rgba(5, 94, 85, 0.08);
    }

    /* Admin-bar at top doesn't affect bottom-fixed search bar */
    body.admin-bar .qm-search-bar {
        top: auto;
    }

    .qm-search-bar-inner {
        max-width: none;
        padding: 0;
    }

    /* Push the search bar above the cart bar when cart is active.
       Cart bar is 56px + safe-area; search rides on top of it. */
    body.qm-has-cart .qm-search-bar {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: 10px; /* cart bar already paid the safe-area cost */
    }

    /* Pill stays the same shape, slightly tighter */
    input.qm-search-input {
        height: 48px;
        padding-inline-end: 52px;
        padding-inline-start: 52px;
    }
    .qm-search-icon {
        inset-inline-end: 18px;
    }
    .qm-search-clear {
        inset-inline-start: 14px;
        width: 30px;
        height: 30px;
    }

    /* Push the filter FAB above the new bottom search bar.
       Search bar height ≈ 68px (10 top + 48 pill + 10 bottom).
       Original FAB at 88px → 88 + 68 = 156px (idle).
       With cart visible (orig 80px) → 80 + 56 + 68 = 204px... but cart-bar's safe-area
       is paid by the cart, so we only add cart_h + search_h ≈ 80 + 68 = 148px above the
       original 80. Use a single calc that accounts for both states cleanly. */
    .qm-filter-fab {
        bottom: calc(88px + 68px);
    }
    body.qm-has-cart .qm-filter-fab {
        bottom: calc(80px + 56px + 68px);
    }

    /* WhatsApp button (theme-level, .qimah-wa-btn @ bottom:16px) — push above
       the search bar, scoped to the archive page only so we don't move it
       site-wide. */
    body.post-type-archive-sfwd-courses .qimah-wa-btn {
        bottom: calc(16px + 68px + env(safe-area-inset-bottom, 0px));
        transition: bottom .35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    body.post-type-archive-sfwd-courses.qm-has-cart .qimah-wa-btn {
        bottom: calc(16px + 56px + 68px + env(safe-area-inset-bottom, 0px));
    }

    /* Back-to-top button (theme-level, .qimah-back-to-top @ bottom:24px) —
       push above the search bar so it doesn't overlap the magnifying-glass icon. */
    /* NOT shifted by the +64 the base rule takes: the feedback launcher hides
       at this width on the archive (four pieces of furniture already compete
       here), so back-to-top keeps the bottom rung and .qm-filter-fab keeps its
       calc(88px + 68px) above it. Shifting these would open a 64px gap under
       back-to-top and land it on top of the filter FAB. */
    body.post-type-archive-sfwd-courses .qimah-back-to-top {
        bottom: calc(24px + 68px + env(safe-area-inset-bottom, 0px));
    }
    body.post-type-archive-sfwd-courses.qm-has-cart .qimah-back-to-top {
        bottom: calc(24px + 56px + 68px + env(safe-area-inset-bottom, 0px));
    }
}

/* Reduced motion: drop transforms and long transitions */
@media (prefers-reduced-motion: reduce) {
    .qm-search-bar,
    .qm-search-icon,
    input.qm-search-input,
    .qm-search-clear {
        transition: none;
    }
    .qm-search-clear:hover,
    .qm-search-clear:focus-visible,
    .qm-search-clear:active,
    .qm-search-bar:focus-within .qm-search-icon {
        transform: none;
    }
}

/* =========================================================
   SEARCH BAR — Dark mode
========================================================= */

html[data-theme="dark"] .qm-search-bar {
    background: rgba(10, 22, 18, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .qm-search-bar.is-stuck {
    background: rgba(10, 22, 18, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 28px -14px rgba(0, 0, 0, 0.55),
        0 4px 10px -6px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .qm-search-icon {
    color: #6b8a7c;
}

html[data-theme="dark"] input.qm-search-input {
    background: #15352b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8f5ee;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 10px 24px -14px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] input.qm-search-input::placeholder {
    color: #6b8a7c;
}

html[data-theme="dark"] input.qm-search-input:hover {
    border-color: rgba(42, 138, 98, 0.55);
}

html[data-theme="dark"] input.qm-search-input:focus,
html[data-theme="dark"] input.qm-search-input:focus-visible {
    border-color: #2a8a62;
    box-shadow:
        0 0 0 4px rgba(42, 138, 98, 0.18),
        0 0 0 1px rgba(42, 138, 98, 0.65),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 18px 36px -18px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .qm-search-bar:focus-within .qm-search-icon {
    color: #2a8a62;
}

html[data-theme="dark"] .qm-search-clear {
    color: #8aab9c;
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .qm-search-clear:hover,
html[data-theme="dark"] .qm-search-clear:focus-visible {
    color: #FFFFFF;
    background: linear-gradient(135deg, #2a8a62 0%, #3aac7c 100%);
    box-shadow: 0 4px 12px -4px rgba(42, 138, 98, 0.5);
}