/* =============================================================================
   WooCommerce Filter Widget – Frontend CSS  (v1.0.5)
   All rules scoped to .wcfw-filter-wrapper to prevent Avada theme conflicts.
   ============================================================================= */

:root {
    --wcfw-primary:    #2c2c2c;
    --wcfw-accent:     #e8b04b;
    --wcfw-radius:     6px;
    --wcfw-font-size:  14px;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.wcfw-filter-wrapper {
    font-family: inherit;
    font-size: var(--wcfw-font-size);
    color: #374151;
    line-height: 1.5;
}

/* ── Horizontal layout ────────────────────────────────────────────────────── */
.wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}
.wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filter-group {
    flex: 1 1 200px;
    min-width: 160px;
    border: 1px solid #e5e7eb;
    border-radius: var(--wcfw-radius);
    overflow: hidden;
}

/* ── Filter group ─────────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-filter-group {
    background: transparent;
}
.wcfw-filter-wrapper.wcfw-layout-vertical .wcfw-filter-group + .wcfw-filter-group {
    border-top: 1px solid #e5e7eb;
}
.wcfw-filter-wrapper.wcfw-layout-vertical .wcfw-filter-group {
    padding: 12px 0;
}

/* ── Filter title ─────────────────────────────────────────────────────────── */
/*
   We output a <div>, never a <button>, so Avada's global button CSS
   cannot apply. We still use !important on the key layout props as
   a safety net against any wildcard theme rules.
*/
.wcfw-filter-wrapper .wcfw-filter-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: var(--wcfw-font-size) !important;
    font-weight: 700 !important;
    color: var(--wcfw-primary) !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: default;
    user-select: none;
}

/* Collapsible title gets pointer cursor */
.wcfw-filter-wrapper .wcfw-filter-title.wcfw-is-toggle {
    cursor: pointer !important;
}
.wcfw-filter-wrapper .wcfw-filter-title.wcfw-is-toggle:hover {
    opacity: .8;
}

/* Horizontal: title bar with primary background */
.wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filter-title {
    padding: 10px 14px !important;
    background-color: var(--wcfw-primary) !important;
    color: #fff !important;
}

/* ── Chevron ──────────────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .25s ease;
    pointer-events: none;
    stroke: currentColor;
}
.wcfw-filter-wrapper .wcfw-chevron.wcfw-rotated {
    transform: rotate(-180deg);
}

/* ── Filter body ──────────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-filter-body {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height .3s ease, opacity .3s ease;
}
.wcfw-filter-wrapper .wcfw-filter-body.wcfw-collapsed {
    max-height: 0 !important;
    opacity: 0;
}
.wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filter-body {
    padding: 10px 14px;
}

/* ── Checkbox list ────────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wcfw-filter-wrapper .wcfw-list li {
    margin: 0 !important;
    padding: 0 !important;
}
.wcfw-filter-wrapper .wcfw-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    color: #374151 !important;
    font-size: var(--wcfw-font-size) !important;
    padding: 2px 0 !important;
    transition: color .15s;
    background: none !important;
    border: none !important;
}
.wcfw-filter-wrapper .wcfw-list li a:hover {
    color: var(--wcfw-primary) !important;
    background: none !important;
}
.wcfw-filter-wrapper .wcfw-list li.wcfw-active > a {
    color: var(--wcfw-primary) !important;
    font-weight: 600;
}
.wcfw-filter-wrapper .wcfw-list li.wcfw-empty > a {
    color: #9ca3af !important;
    pointer-events: none;
}

/* Sublist (child categories) */
.wcfw-filter-wrapper .wcfw-sublist {
    list-style: none !important;
    margin: 4px 0 0 22px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Custom checkbox ──────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid #d1d5db;
    border-radius: calc(var(--wcfw-radius) * 0.4);
    background: #fff;
    position: relative;
    transition: all .15s;
    flex-shrink: 0;
}
.wcfw-filter-wrapper .wcfw-list li a:hover .wcfw-checkbox {
    border-color: var(--wcfw-accent);
}
.wcfw-filter-wrapper .wcfw-checkbox.wcfw-checked {
    background: var(--wcfw-accent);
    border-color: var(--wcfw-accent);
}
.wcfw-filter-wrapper .wcfw-checkbox.wcfw-checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* ── Term name & count ────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-term-name {
    flex: 1;
}
.wcfw-filter-wrapper .wcfw-count {
    font-size: .85em;
    color: #9ca3af;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Inline colour icon (list view) ──────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-inline-icon {
    width: 20px;
    height: 20px;
    border-radius: calc(var(--wcfw-radius) * 0.4);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.1);
}

/* ── Colour swatches ──────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.wcfw-filter-wrapper .wcfw-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wcfw-radius);
    border: 2px solid #e5e7eb;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color .15s, transform .15s;
}
.wcfw-filter-wrapper .wcfw-swatch:hover {
    border-color: var(--wcfw-accent);
    transform: scale(1.08);
}
.wcfw-filter-wrapper .wcfw-swatch.wcfw-active {
    border-color: var(--wcfw-accent);
    box-shadow: 0 0 0 3px rgba(232,176,75,.3);
}
.wcfw-filter-wrapper .wcfw-swatch.wcfw-empty {
    opacity: .4;
    pointer-events: none;
}
.wcfw-filter-wrapper .wcfw-swatch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wcfw-filter-wrapper .wcfw-swatch-circle {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Dropdown select ──────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-select {
    display: block !important;
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    border-radius: var(--wcfw-radius) !important;
    padding: 8px 10px !important;
    font-size: var(--wcfw-font-size) !important;
    color: #374151 !important;
    background: #fff !important;
    background-color: #fff !important;
    cursor: pointer !important;
    transition: border-color .15s !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    box-shadow: none !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
.wcfw-filter-wrapper .wcfw-select:focus {
    outline: none !important;
    border-color: var(--wcfw-accent) !important;
    box-shadow: 0 0 0 3px rgba(232,176,75,.2) !important;
}

/* ── Active tags bar ──────────────────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-active-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: .9em;
}
.wcfw-filter-wrapper .wcfw-active-label {
    color: #6b7280;
    font-weight: 500;
}
.wcfw-filter-wrapper .wcfw-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    background: var(--wcfw-accent) !important;
    color: #fff !important;
    border-radius: 100px !important;
    font-size: .8em;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter .15s;
}
.wcfw-filter-wrapper .wcfw-tag:hover {
    filter: brightness(.9);
    color: #fff !important;
}
.wcfw-filter-wrapper .wcfw-clear-all {
    margin-left: auto;
    color: #ef4444 !important;
    font-size: .85em;
    font-weight: 600;
    text-decoration: none !important;
    padding: 3px 8px;
    border: 1px solid #fca5a5;
    border-radius: 100px;
    transition: all .15s;
}
.wcfw-filter-wrapper .wcfw-clear-all:hover {
    background: #fee2e2;
    color: #dc2626 !important;
}

/* ── Apply button (non-auto mode) ─────────────────────────────────────────── */
.wcfw-filter-wrapper .wcfw-submit-bar {
    padding: 12px 0 0;
}
.wcfw-filter-wrapper .wcfw-apply-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 20px !important;
    font-size: var(--wcfw-font-size) !important;
    font-weight: 600 !important;
    background: var(--wcfw-primary) !important;
    background-color: var(--wcfw-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--wcfw-radius) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity .15s !important;
}
.wcfw-filter-wrapper .wcfw-apply-btn:hover {
    opacity: .85 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filters-inner {
        flex-direction: column;
    }
    .wcfw-filter-wrapper.wcfw-layout-horizontal .wcfw-filter-group {
        min-width: 0;
        width: 100%;
    }
    .wcfw-filter-wrapper .wcfw-swatches { gap: 6px; }
    .wcfw-filter-wrapper .wcfw-swatch   { width: 32px; height: 32px; }
}