/**
 * EV Filter v2.1 CSS
 */

:root {
    --evf-orange: #fb8104;
    --evf-dark: #1a2744;
    --evf-gray: #666;
    --evf-border: #e0e0e0;
    --evf-bg: #f8f9fa;
}

/* LAYOUT */
.evf-wrap { display: flex; gap: 30px; align-items: flex-start; }

/* SIDEBAR HEADER (Desktop only) */
.evf-sidebar-header {
    padding: 18px 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--evf-dark);
    border-bottom: 2px solid var(--evf-orange);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}
.evf-sidebar-icon {
    font-size: 20px;
    line-height: 1;
}
.evf-side { width: 300px; min-width: 300px; position: sticky; top: 100px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); max-height: calc(100vh - 120px); overflow-y: auto; }
.evf-main { flex: 1; min-width: 0; }

/* PRODUCT GRID — .evf-products-grid is tagged on the theme's .row, don't override its flex */
.evf-product-col { padding-bottom: 20px; }

/* SECTIONS */
.evf-section { border-bottom: 1px solid var(--evf-border); }
.evf-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--evf-dark); }
.evf-plus { width: 12px; height: 12px; position: relative; }
.evf-plus::before, .evf-plus::after { content: ''; position: absolute; background: var(--evf-gray); }
.evf-plus::before { width: 12px; height: 2px; top: 5px; left: 0; }
.evf-plus::after { width: 2px; height: 12px; top: 0; left: 5px; transition: 0.2s; }
.evf-section.open .evf-plus::after { transform: rotate(90deg); opacity: 0; }
.evf-body { display: none; padding: 0 20px 20px; }
.evf-section.open .evf-body { display: block; }
.evf-scroll { max-height: 200px; overflow-y: auto; }

/* CHECKBOXES */
.evf-check { display: flex; align-items: center; gap: 12px; padding: 10px 8px; cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.evf-check:hover { background: var(--evf-bg); }
.evf-check input { position: absolute; opacity: 0; pointer-events: none; }
.evf-box { width: 22px; height: 22px; min-width: 22px; border: 2px solid var(--evf-border); border-radius: 4px; position: relative; transition: 0.15s; }
.evf-box::after { content: ''; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.evf-check input:checked + .evf-box { background: var(--evf-orange); border-color: var(--evf-orange); }
.evf-check input:checked + .evf-box::after { opacity: 1; }
.evf-txt { flex: 1; font-size: 14px; color: #333; }

/* SLIDERS */
.evf-range { padding: 10px 0; }
.evf-vals { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--evf-dark); }
.evf-track { position: relative; height: 6px; background: var(--evf-border); border-radius: 3px; margin: 0 12px; }
.evf-fill { position: absolute; top: 0; height: 6px; background: var(--evf-orange); border-radius: 3px; }
.evf-smin, .evf-smax { position: absolute; top: -12px; left: -12px; width: calc(100% + 24px); height: 30px; background: transparent; -webkit-appearance: none; pointer-events: none; margin: 0; }
.evf-smin::-webkit-slider-thumb, .evf-smax::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: #fff; border: 3px solid var(--evf-orange); border-radius: 50%; cursor: pointer; pointer-events: all; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.evf-smin::-moz-range-thumb, .evf-smax::-moz-range-thumb { width: 28px; height: 28px; background: #fff; border: 3px solid var(--evf-orange); border-radius: 50%; cursor: pointer; pointer-events: all; }

/* DESKTOP ACTIONS */
.evf-actions { padding: 20px; border-top: 1px solid var(--evf-border); display: flex; flex-direction: column; gap: 10px; }
.evf-btn-apply-d { padding: 14px; background: var(--evf-orange); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.evf-btn-apply-d:hover { background: #e67300; }
.evf-btn-clear-d { padding: 12px; background: transparent; color: var(--evf-gray); border: 1px solid var(--evf-border); border-radius: 8px; font-size: 14px; cursor: pointer; }

/* LOADER */
.evf-loader { position: fixed; inset: 0; background: rgba(255,255,255,0.85); display: none; align-items: center; justify-content: center; z-index: 9999; }
.evf-loader.show { display: flex; }
.evf-spin { width: 50px; height: 50px; border: 4px solid var(--evf-border); border-top-color: var(--evf-orange); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* NO PRODUCTS */
.evf-no-products { text-align: center; padding: 60px 20px; color: var(--evf-gray); width: 100%; }
.evf-no-products h3 { margin: 0 0 10px; color: var(--evf-dark); }

/* PAGINATION */
.evf-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.evf-page-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--evf-border); border-radius: 8px; font-size: 14px; color: #333; cursor: pointer; text-decoration: none; }
.evf-page-link:hover { border-color: var(--evf-orange); color: var(--evf-orange); }
.evf-page-link.current { background: var(--evf-orange); border-color: var(--evf-orange); color: #fff; }

/* MOBILE - HIDDEN ON DESKTOP */
.evf-mobile-btn, .evf-mobile-overlay { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 991px) {
    .evf-wrap { display: block; }
    .evf-side { display: none !important; }
    
    /* Mobile button */
    .evf-mobile-btn {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        background: var(--evf-dark);
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        z-index: 998;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .evf-badge { display: none; min-width: 22px; height: 22px; background: var(--evf-orange); border-radius: 11px; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
    .evf-badge.active { display: inline-block; }
    
    /* Mobile overlay */
    .evf-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }
    .evf-mobile-overlay.show { opacity: 1; visibility: visible; }
    
    /* Mobile sheet */
    .evf-mobile-sheet {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 80vh;
        background: #fff;
        border-radius: 20px 20px 0 0;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s;
    }
    .evf-mobile-overlay.show .evf-mobile-sheet { transform: translateY(0); }
    
    /* Header */
    .evf-mobile-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--evf-border);
        font-size: 18px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .evf-mobile-x {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--evf-bg);
        border: none;
        border-radius: 50%;
        font-size: 28px;
        cursor: pointer;
    }
    
    /* Scroll area */
    .evf-mobile-scroll {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    
    /* FOOTER - FIXED */
    .evf-mobile-foot {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--evf-border);
        background: #fff;
        flex-shrink: 0;
    }
    
    .evf-btn-clear {
        padding: 14px 20px;
        background: transparent;
        color: var(--evf-gray);
        border: 1px solid var(--evf-border);
        border-radius: 8px;
        font-size: 15px;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .evf-btn-apply {
        flex: 1;
        padding: 14px 20px;
        background: var(--evf-orange);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    
    /* Prevent scroll — avoid position:fixed which causes scroll jump */
    body.evf-no-scroll { overflow: hidden; touch-action: none; height: 100%; }
}

/* Scrollbar */
.evf-scroll::-webkit-scrollbar, .evf-mobile-scroll::-webkit-scrollbar, .evf-side::-webkit-scrollbar { width: 6px; }
.evf-scroll::-webkit-scrollbar-thumb, .evf-mobile-scroll::-webkit-scrollbar-thumb, .evf-side::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }