/* =========================================
   0. HIDE THEME NATIVE BUTTONS
   ========================================= */
.woodmart-filter-btn, .flatsome-filter-button, .shop-filter-toggle, 
.astra-shop-filter-button, .mobile-sidebar-toggle, .wd-shop-tools-filter,
.porto-product-filters-toggle, .sidebar-toggle {
    display: none !important;
}

/* =========================================
   1. LAYOUT INDEPENDENT (Grid Desktop)
   ========================================= */
#opro-shop-layout-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    width: 100%;
    margin-bottom: 40px;
}

#opro-sidebar-wrapper { width: 100%; }
#opro-products-container { width: 100%; min-width: 0; }

/* =========================================
   2. CONTAINER FILTRE (SaaS)
   ========================================= */
#opro-filter-container.widget {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 30px;
    background-color: #fff;
    overflow: hidden; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================
   3. HEADER GRUPURI (Compact)
   ========================================= */
#opro-filter-container .opro-filter-group {
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
    display: block;
}
#opro-filter-container .opro-filter-group:last-child { border-bottom: none; }

#opro-filter-container .opro-filter-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 14px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
    pointer-events: auto; 
}

#opro-filter-container .opro-filter-toggle * { pointer-events: none; }
#opro-filter-container .opro-filter-toggle:hover { background-color: #fcfcfc; color: #FC4700; }

.opro-filter-toggle .toggle-arrow {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.opro-filter-group.open > .opro-filter-toggle .toggle-arrow {
    transform: rotate(180deg);
    background-color: #FFF2ED;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FC4700'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}

/* =========================================
   4. CONȚINUT FILTRE (Fix Aliniere Centru)
   ========================================= */
#opro-filter-container .opro-filter-content {
    display: none;
    padding: 5px 20px 15px 20px;
    max-height: 280px;
    overflow-y: auto;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}
#opro-filter-container .opro-filter-group.open > .opro-filter-content { display: block; }

#opro-filter-container .opro-filter-content label {
    display: flex;
    align-items: center; /* FIX: Aliniere verticala perfecta */
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 2px;
    padding: 6px 8px; 
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px; 
    color: #444;
    line-height: 1.2; /* Resetam line-height pentru a nu impinge textul jos */
}
#opro-filter-container .opro-filter-content label:hover { background-color: #fafafa; }

/* FIX ALINIERE TEXT INTERIOR */
.opro-filter-content label span {
    display: flex;
    align-items: center;
    gap: 10px; /* Distanta intre casuta si text */
}

/* Casute (Checkbox) */
#opro-filter-container .opro-filter-content input[type="checkbox"],
#opro-filter-container .opro-filter-content input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 2px solid #ddd; border-radius: 4px;
    margin: 0; /* Resetam marginile care il impingeau */
    position: relative;
    cursor: pointer; transition: all 0.2s ease;
    background-color: #fff; flex-shrink: 0;
}

#opro-filter-container .opro-filter-content input[type="checkbox"]:checked,
#opro-filter-container .opro-filter-content input[type="radio"]:checked {
    background-color: #FC4700; border-color: #FC4700;
}

#opro-filter-container .opro-filter-content input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 9px; border: solid white;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}

#opro-filter-container .opro-filter-content input[type="radio"] { border-radius: 50%; }
#opro-filter-container .opro-filter-content input[type="radio"]:checked::after {
    content: ''; position: absolute; left: 5px; top: 5px;
    width: 4px; height: 4px; background: white;
    border-radius: 50%; border: none; transform: none;
}

.filter-count {
    color: #999; font-size: 11px; margin-left: auto;
    background: #f5f5f5; padding: 2px 8px;
    border-radius: 10px; font-weight: 500;
}
.opro-filter-content label:hover .filter-count { background: #fff; color: #FC4700; }

/* =========================================
   5. SLIDER PREȚ
   ========================================= */
.price_slider_wrapper { padding-top: 5px; width: 100%; box-sizing: border-box; }
.price_slider { margin-bottom: 25px; margin-top: 10px; position: relative; }
.ui-slider { position: relative; text-align: left; }
.ui-slider-horizontal { height: 6px; background: #eee; border-radius: 3px; border: none; width: 100%; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; top: 0; height: 100%; background: #FC4700; border-radius: 3px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 22px; height: 22px; top: -8px; margin-left: -11px; cursor: pointer; background: #fff; border: 2px solid #FC4700; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.1s; outline: none; touch-action: none; }
.ui-slider .ui-slider-handle:hover, .ui-slider .ui-slider-handle:focus { transform: scale(1.1); background: #FC4700; }

.price_slider_amount { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.price_label_group { width: 48%; }
.price_input_wrapper { width: 100%; position: relative; }
.price_input_wrapper input { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding-top: 6px !important; padding-bottom: 6px !important; padding-right: 6px !important; padding-left: 28px !important; font-size: 13px; color: #333; font-weight: 600; -moz-appearance: textfield; }
.price_input_wrapper span { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font-size: 12px; color: #aaa; pointer-events: none; white-space: nowrap; z-index: 5; }
.price_slider_amount .price-separator { display: none; }
.price_slider_amount input[type="number"]::-webkit-outer-spin-button, .price_slider_amount input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =========================================
   6. CĂUTARE & ALTELE
   ========================================= */
#opro_s_filter, .opro-attribute-search {
    width: 100%; padding: 10px 12px; font-size: 13px;
    border: 1px solid #e0e0e0; border-radius: 6px;
    background-color: #f9f9f9; transition: all 0.2s;
    box-shadow: none; -webkit-appearance: none; margin-bottom: 10px; box-sizing: border-box;
}
#opro_s_filter:focus, .opro-attribute-search:focus { background-color: #fff; border-color: #FC4700; outline: none; }
.opro-filter-content::-webkit-scrollbar { width: 4px; }
.opro-filter-content::-webkit-scrollbar-track { background: transparent; }
.opro-filter-content::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 10px; }

.opro-loading-overlay { background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); z-index: 9999; }
.opro-loading-overlay::after { content: ''; display: block; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; border: 4px solid #f3f3f3; border-top: 4px solid #FC4700; border-radius: 50%; animation: opro-spin 1s linear infinite; }
@keyframes opro-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.opro-filter-content label.opro-filter-disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================
   7. FILTRE ACTIVE (Sus deasupra produselor)
   ========================================= */
#opro-selected-filters-container { margin-bottom: 20px; width: 100%; }
.selected-filters-content { padding: 12px; border: 1px solid #eee; border-radius: 8px; background-color: #fff; }
.selected-filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; width: 100%; box-sizing: border-box; }
.selected-filters-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.opro-reset-filters { background-color: #fff0ea; border: 1px solid #FC4700; color: #FC4700; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.opro-reset-filters:hover { background-color: #f0f0f0; border-color: #b4b4b4; color: #000; }
.selected-filter-tag { display: inline-block; background-color: #FFF2ED; color: #FC4700; padding: 4px 10px; border-radius: 15px; margin-right: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 500; border: none; }
.remove-filter { margin-left: 6px; cursor: pointer; font-weight: 700; font-size: 14px; color: #FC4700; text-decoration: none; }

/* =========================================
   8. ELEMENTELE DE MOBIL ASCUNSE PE DESKTOP
   ========================================= */
.opro-universal-mobile-toggle { display: none; }
.opro-mobile-fullscreen-header { display: none; }
.opro-mobile-fullscreen-footer { display: none; }

/* =========================================
   9. RESPONSIVE / FULL-SCREEN PENTRU MOBIL
   ========================================= */
@media screen and (max-width: 992px) {
    #opro-shop-layout-wrapper { grid-template-columns: 1fr; }

    .opro-universal-mobile-toggle {
        display: flex; justify-content: center; align-items: center;
        width: 100%; background-color: #FC4700; color: #fff;
        border: none; padding: 10px 20px; font-size: 14px; font-weight: 700;
        text-transform: uppercase; border-radius: 8px; cursor: pointer;
        box-shadow: 0 4px 10px rgba(252, 71, 0, 0.2);
    }
    .opro-universal-mobile-toggle::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H3'/%3E%3Cpath d='M12 19H3'/%3E%3Cpath d='M14 3v4'/%3E%3Cpath d='M16 17v4'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M21 19h-5'/%3E%3Cpath d='M21 5h-7'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M8 12H3'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

    #opro-filter-container.widget { display: none; border-radius: 0; box-shadow: none; margin-bottom: 0; }

    /* Modul Full Screen. Z-index la valoarea maxima absoluta */
    #opro-filter-container.widget.opro-mobile-active {
        display: flex; flex-direction: column; position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh; height: -webkit-fill-available;
        z-index: 2147483647 !important; background-color: #fff;
    }

    #opro-filter-container .widget-title { display: none; }

    .opro-mobile-fullscreen-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 20px; background-color: #fff; border-bottom: 1px solid #eee;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 2147483647 !important; flex-shrink: 0;
    }
    .opro-mobile-title { font-size: 18px; font-weight: 700; color: #111; }
    .opro-mobile-close { font-size: 32px; line-height: 1; cursor: pointer; color: #888; padding: 0 10px; margin-right: -10px; }

    #opro-filter-form { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }

    .opro-filter-scrollable-area {
        flex-grow: 1; overflow-y: auto; padding-bottom: 90px; 
        background-color: #fff; -webkit-overflow-scrolling: touch; 
    }

    /* Footer cu buton. Z-index la valoarea maxima absoluta */
    .opro-mobile-fullscreen-footer {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 20px; background-color: #fff; border-top: 1px solid #eee;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.05); position: fixed;
        bottom: 0; left: 0; width: 100%; box-sizing: border-box;
        z-index: 2147483647 !important; 
    }
    .opro-mobile-reset { color: #666; text-decoration: underline; font-size: 15px; font-weight: 600; }
    .opro-mobile-apply {
        background-color: #FC4700; color: #fff; border: none;
        padding: 14px 25px; font-size: 15px; font-weight: 700;
        border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(252, 71, 0, 0.2); width: 60%;
    }
}

/* =========================================
   10. SCROLL LOCK & ANTI-WOOFLUX
   ========================================= */
html.opro-scroll-locked, body.opro-scroll-locked {
    overflow: hidden !important; height: 100% !important; 
    width: 100vw !important; position: fixed !important; 
    touch-action: none !important;
}

/* Ascundem COMPLET WOOflux sau orice alt meniu de jos cand filtrele sunt deschise */
body.opro-scroll-locked [class*="wooflux"], 
body.opro-scroll-locked [id*="wooflux"],
body.opro-scroll-locked .bottom-nav,
body.opro-scroll-locked .mobile-nav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -1 !important;
}