/* ============================================================
   WC Smart Filter — Frontend CSS v2
   ============================================================ */

:root {
    --wcsmf-primary:     #6c63ff;
    --wcsmf-accent:      #ff6584;
    --wcsmf-bg:          #ffffff;
    --wcsmf-surface:     #f8f9fa;
    --wcsmf-border:      #e2e8f0;
    --wcsmf-text:        #1a202c;
    --wcsmf-muted:       #718096;
    --wcsmf-radius:      8px;
    --wcsmf-btn-radius:  6px;
    --wcsmf-transition:  .2s ease;
    --wcsmf-sidebar-w:   260px;
    --wcsmf-gap:         24px;
    --wcsmf-cols:        3;
}
.wcsmf-dark {
    --wcsmf-bg:      #1a1a2e;
    --wcsmf-surface: #252540;
    --wcsmf-border:  #3d3d5c;
    --wcsmf-text:    #e2e8f0;
    --wcsmf-muted:   #94a3b8;
}

/* ── Shop layout grid ──────────────────────────────────────── */
.wcsmf-shop-layout {
    display: grid;
    grid-template-columns: var(--wcsmf-sidebar-w) 1fr;
    gap: var(--wcsmf-gap);
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important; /* prevent theme margin conflicts */
}
.wcsmf-shop-layout.wcsmf-layout-horizontal {
    grid-template-columns: 1fr;
}
.wcsmf-sidebar-filter,
.wcsmf-main-content {
    min-width: 0;
}

/* ── Hidden filter source element ─────────────────────────── */
#wcsmf-filter-source {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ── Filter Panel ──────────────────────────────────────────── */
.wcsmf-filter-panel {
    background:    var(--wcsmf-bg);
    border:        1px solid var(--wcsmf-border);
    border-radius: var(--wcsmf-radius);
    font-family:   var(--wcsmf-font-family, inherit);
    font-size:     var(--wcsmf-font-size, 14px);
    color:         var(--wcsmf-text);
    overflow:      hidden;
    position:      sticky;
    top:           20px;
}
/* Inside mobile drawer: not sticky */
.wcsmf-drawer-body .wcsmf-filter-panel {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.wcsmf-filter-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    border-bottom:   1px solid var(--wcsmf-border);
    background:      var(--wcsmf-surface);
}
.wcsmf-filter-title { font-weight: 700; font-size: 14px; }
.wcsmf-reset-all {
    background: none; border: none;
    color: var(--wcsmf-primary); font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 3px 6px; border-radius: 4px;
    text-decoration: underline; transition: var(--wcsmf-transition);
}
.wcsmf-reset-all:hover { opacity: .7; }

/* Active filter tags */
.wcsmf-active-filters:not(:empty) {
    padding: 10px 16px; border-bottom: 1px solid var(--wcsmf-border);
}
.wcsmf-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.wcsmf-active-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(108,99,255,.1); border: 1px solid rgba(108,99,255,.25);
    border-radius: 999px; padding: 2px 8px;
    font-size: 11px; font-weight: 500; color: var(--wcsmf-primary);
}
.wcsmf-tag-remove {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}

/* ── Filter sections ───────────────────────────────────────── */
.wcsmf-filter-section { border-bottom: 1px solid var(--wcsmf-border); }
.wcsmf-filter-section:last-child { border-bottom: 0; }

.wcsmf-section-header {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 11px 16px; background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--wcsmf-text); text-align: left;
    transition: var(--wcsmf-transition);
}
.wcsmf-section-header:hover { background: var(--wcsmf-surface); }
.wcsmf-section-body { padding: 4px 16px 14px; }

/* Chevron arrow */
.wcsmf-chevron {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--wcsmf-muted);
    transition: transform var(--wcsmf-transition);
    flex-shrink: 0;
}
.wcsmf-section-header[aria-expanded="false"] .wcsmf-chevron {
    transform: rotate(-90deg);
}

/* ── Checkboxes ────────────────────────────────────────────── */
.wcsmf-term-list { margin: 0; padding: 0; list-style: none; }
.wcsmf-term-item { margin-bottom: 1px; }
.wcsmf-checkbox-label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; padding: 4px 0; font-size: 13px;
    color: var(--wcsmf-text); transition: color var(--wcsmf-transition);
    flex: 1;
}
.wcsmf-checkbox-label:hover { color: var(--wcsmf-primary); }
.wcsmf-checkbox-label input { position: absolute; opacity: 0; pointer-events: none; }
.wcsmf-chk {
    width: 16px; height: 16px; flex-shrink: 0;
    border: 2px solid var(--wcsmf-border); border-radius: 4px;
    background: var(--wcsmf-bg); display: flex; align-items: center; justify-content: center;
    transition: var(--wcsmf-transition);
}
.wcsmf-checkbox-label input:checked ~ .wcsmf-chk {
    background: var(--wcsmf-primary); border-color: var(--wcsmf-primary);
}
.wcsmf-checkbox-label input:checked ~ .wcsmf-chk::after {
    content: ''; width: 4px; height: 7px;
    border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg) translateY(-1px); display: block;
}
.wcsmf-checkbox-label:has(input[type="radio"]) .wcsmf-chk { border-radius: 50%; }
.wcsmf-checkbox-label input[type="radio"]:checked ~ .wcsmf-chk::after {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; border: none; transform: none;
}
.wcsmf-count { margin-left: auto; font-size: 11px; color: var(--wcsmf-muted); }

/* ── Category expand ───────────────────────────────────────── */
.wcsmf-cat-row { display: flex; align-items: center; }
.wcsmf-expand {
    background: none; border: none; cursor: pointer;
    padding: 3px 5px; color: var(--wcsmf-muted); font-size: 10px;
    border-radius: 3px; transition: var(--wcsmf-transition); flex-shrink: 0;
}
.wcsmf-expand:hover,
.wcsmf-expand[aria-expanded="true"] { color: var(--wcsmf-primary); }
.wcsmf-expand-icon {
    display: inline-block;
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform var(--wcsmf-transition);
}
.wcsmf-expand[aria-expanded="true"] .wcsmf-expand-icon { transform: rotate(90deg); }
.wcsmf-children {
    list-style: none; margin: 3px 0 3px 16px;
    padding: 0 0 0 10px; border-left: 2px solid var(--wcsmf-border);
}
.wcsmf-children[hidden] { display: none; }

/* ── Price slider ──────────────────────────────────────────── */
.wcsmf-price-display {
    display: flex; gap: 8px; margin-bottom: 12px;
    font-weight: 600; font-size: 14px; color: var(--wcsmf-text);
}
.wcsmf-range-track {
    position: relative; height: 4px;
    background: var(--wcsmf-border); border-radius: 999px; margin: 10px 0 16px;
}
.wcsmf-range-fill {
    position: absolute; height: 100%;
    background: var(--wcsmf-primary); border-radius: 999px; pointer-events: none;
}
.wcsmf-range-min, .wcsmf-range-max {
    -webkit-appearance: none; appearance: none;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 100%; height: 4px; background: transparent;
    pointer-events: none; outline: none; margin: 0; padding: 0;
}
.wcsmf-range-min::-webkit-slider-thumb,
.wcsmf-range-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--wcsmf-primary); border: 2px solid #fff;
    box-shadow: 0 1px 5px rgba(108,99,255,.4);
    cursor: pointer; pointer-events: all;
}
.wcsmf-range-min::-moz-range-thumb,
.wcsmf-range-max::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--wcsmf-primary); border: 2px solid #fff;
    cursor: pointer; pointer-events: all;
}

/* ── Color swatches ────────────────────────────────────────── */
.wcsmf-swatches { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0; }
.wcsmf-swatch-label { cursor: pointer; }
.wcsmf-swatch-label input { position: absolute; opacity: 0; }
.wcsmf-swatch {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--wcsmf-border);
    font-size: 9px; font-weight: 700; color: #fff;
    background: var(--wcsmf-surface); transition: var(--wcsmf-transition);
}
.wcsmf-swatch-label input:checked ~ .wcsmf-swatch {
    outline: 3px solid var(--wcsmf-primary); outline-offset: 2px; transform: scale(1.1);
}

/* ── Rating ────────────────────────────────────────────────── */
.wcsmf-ratings { display: flex; flex-direction: column; gap: 3px; }
.wcsmf-rating-row {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; padding: 3px 0;
}
.wcsmf-rating-row input { position: absolute; opacity: 0; }
.wcsmf-stars { display: flex; gap: 1px; }
.wcsmf-star { font-size: 14px; }
.wcsmf-star.on  { color: #f59e0b; }
.wcsmf-star.off { color: var(--wcsmf-border); }
.wcsmf-rating-up { font-size: 11px; color: var(--wcsmf-muted); }

/* ── Stock dots ────────────────────────────────────────────── */
.wcsmf-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; display: inline-block;
}
.wcsmf-dot-instock     { background: #10b981; }
.wcsmf-dot-outofstock  { background: #ef4444; }
.wcsmf-dot-onbackorder { background: #f59e0b; }

/* ── Tags ──────────────────────────────────────────────────── */
.wcsmf-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.wcsmf-tag-item { cursor: pointer; }
.wcsmf-tag-item input { position: absolute; opacity: 0; }
.wcsmf-tag-pill {
    display: inline-block; padding: 3px 10px;
    border: 1.5px solid var(--wcsmf-border); border-radius: 999px;
    font-size: 12px; color: var(--wcsmf-muted);
    transition: var(--wcsmf-transition); background: var(--wcsmf-bg);
}
.wcsmf-tag-item input:checked ~ .wcsmf-tag-pill {
    background: var(--wcsmf-primary); border-color: var(--wcsmf-primary); color: #fff;
}

/* ── Presets ───────────────────────────────────────────────── */
.wcsmf-presets {
    display: flex; gap: 7px;
    padding: 12px 16px; border-top: 1px solid var(--wcsmf-border);
}
.wcsmf-presets input {
    flex: 1; padding: 6px 10px;
    border: 1.5px solid var(--wcsmf-border); border-radius: var(--wcsmf-btn-radius);
    font-size: 12px; background: var(--wcsmf-bg); color: var(--wcsmf-text); outline: none;
}
.wcsmf-presets input:focus { border-color: var(--wcsmf-primary); }

/* ── Buttons ───────────────────────────────────────────────── */
.wcsmf-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border: none; border-radius: var(--wcsmf-btn-radius);
    background: var(--wcsmf-primary); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--wcsmf-transition); white-space: nowrap; text-decoration: none;
}
.wcsmf-btn:hover { opacity: .88; }
.wcsmf-btn-sm { padding: 5px 10px; font-size: 12px; }
.wcsmf-btn-primary { background: var(--wcsmf-primary); color: #fff; }

/* ── Shop toolbar ──────────────────────────────────────────── */
.wcsmf-shop-toolbar {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.wcsmf-sort-wrap { display: flex; align-items: center; gap: 10px; }
.wcsmf-result-count { font-size: 13px; color: var(--wcsmf-muted); }
.wcsmf-sort-select {
    padding: 7px 10px; border: 1.5px solid var(--wcsmf-border);
    border-radius: var(--wcsmf-btn-radius); font-size: 13px;
    background: var(--wcsmf-bg); color: var(--wcsmf-text); cursor: pointer; outline: none;
}
.wcsmf-sort-select:focus { border-color: var(--wcsmf-primary); }

/* ── Product animations (AJAX) ─────────────────────────────── */
.wcsmf-animated {
    animation: wcsmfFadeUp .35s ease both;
}
@keyframes wcsmfFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
#wcsmf-products-container { transition: opacity .2s ease; position: relative; }

/* ── Loading ───────────────────────────────────────────────── */
.wcsmf-loading-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--wcsmf-radius);
}
.wcsmf-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(108,99,255,.2);
    border-top-color: var(--wcsmf-primary);
    border-radius: 50%;
    animation: wcsmfSpin .7s linear infinite;
}
@keyframes wcsmfSpin { to { transform: rotate(360deg); } }
.wcsmf-skel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 4px; }
.wcsmf-skel-card { border-radius: var(--wcsmf-radius); overflow: hidden; border: 1px solid var(--wcsmf-border); }
.wcsmf-skel-img  { aspect-ratio: 1; background: linear-gradient(90deg,var(--wcsmf-surface) 25%,var(--wcsmf-border) 50%,var(--wcsmf-surface) 75%); background-size: 200%; animation: wcsmfShimmer 1.4s infinite; }
.wcsmf-skel-line { height: 12px; margin: 10px 12px 5px; border-radius: 4px; background: linear-gradient(90deg,var(--wcsmf-surface) 25%,var(--wcsmf-border) 50%,var(--wcsmf-surface) 75%); background-size: 200%; animation: wcsmfShimmer 1.4s infinite; }
.wcsmf-skel-short { width: 55%; margin-top: 0; }
@keyframes wcsmfShimmer { to { background-position: -200% 0; } }

/* ── Mobile filter button ──────────────────────────────────── */
/* ALWAYS hidden on desktop. !important to beat Elementor/theme. */
.wcsmf-mobile-filter-btn {
    display:       none !important;
    align-items:   center;
    gap:           8px;
    padding:       9px 16px;
    background:    var(--wcsmf-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--wcsmf-btn-radius);
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    var(--wcsmf-transition);
    margin-bottom: 4px;
}
.wcsmf-mobile-filter-btn svg { flex-shrink: 0; }
.wcsmf-active-badge {
    background: rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    min-width: 16px;
    text-align: center;
}

/* ── Mobile drawer ─────────────────────────────────────────── */
/* Always hidden by default — only shows when is-open added by JS */
.wcsmf-mobile-drawer {
    /* [hidden] attribute + these properties together */
    position: fixed; inset: 0; z-index: 999999;
}
.wcsmf-mobile-drawer[hidden] { display: none !important; }
.wcsmf-mobile-drawer.is-open { display: flex !important; align-items: stretch; }
.wcsmf-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.wcsmf-drawer-panel {
    position: relative; z-index: 1;
    width: min(320px, 92vw); height: 100%;
    background: var(--wcsmf-bg);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 4px 0 28px rgba(0,0,0,.25);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.wcsmf-mobile-drawer.is-open .wcsmf-drawer-panel { transform: translateX(0); }
.wcsmf-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--wcsmf-border); flex-shrink: 0;
    background: var(--wcsmf-surface);
}
.wcsmf-drawer-title { font-weight: 700; font-size: 15px; }
.wcsmf-drawer-close {
    background: none; border: none; font-size: 18px;
    cursor: pointer; color: var(--wcsmf-muted); padding: 4px; line-height: 1;
}
.wcsmf-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wcsmf-drawer-footer {
    padding: 12px 16px; border-top: 1px solid var(--wcsmf-border); flex-shrink: 0;
}
.wcsmf-drawer-apply { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
body.wcsmf-no-scroll { overflow: hidden !important; }

/* ── Brand ─────────────────────────────────────────────────── */
.wcsmf-brand-logo { max-height: 20px; width: auto; object-fit: contain; }
.wcsmf-brand-link { color: var(--wcsmf-text); text-decoration: none; }
.wcsmf-brand-link:hover { color: var(--wcsmf-primary); }

/* ── Misc ──────────────────────────────────────────────────── */
.wcsmf-meta-input {
    width: 100%; padding: 7px 10px; box-sizing: border-box;
    border: 1.5px solid var(--wcsmf-border); border-radius: var(--wcsmf-btn-radius);
    font-size: 13px; background: var(--wcsmf-bg); color: var(--wcsmf-text); outline: none;
}
.wcsmf-meta-input:focus { border-color: var(--wcsmf-primary); }

/* Toast */
.wcsmf-toast {
    position: fixed; bottom: 20px; right: 20px; z-index: 999999;
    padding: 10px 16px; border-radius: var(--wcsmf-radius);
    font-size: 13px; font-weight: 600; color: #fff;
    opacity: 0; transform: translateY(8px); transition: var(--wcsmf-transition);
    pointer-events: none;
}
.wcsmf-toast-success { background: #10b981; }
.wcsmf-toast-error   { background: #ef4444; }
.wcsmf-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ── Accessibility ─────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--wcsmf-primary); outline-offset: 2px; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — Mobile ( ≤ 782px )
   ════════════════════════════════════════════════════ */
@media screen and (max-width: 782px) {
    /* Stack layout */
    .wcsmf-shop-layout {
        grid-template-columns: 1fr !important;
    }
    /* Hide desktop sidebar */
    .wcsmf-sidebar-filter   { display: none !important; }
    .wcsmf-horiz-filter     { display: none !important; }
    /* Show mobile button — override the !important above */
    .wcsmf-mobile-filter-btn { display: inline-flex !important; }
    /* Toolbar adjustments */
    .wcsmf-shop-toolbar     { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 480px) {
    .wcsmf-skel-grid { grid-template-columns: repeat(2,1fr); }
    .wcsmf-drawer-panel { width: 100vw; }
}