/* ============================================
   UNIVERSAL FILTER - BASE STYLES
   Utilise les couleurs globales Elementor
   ============================================ */

/* Spacing (multiples de 4, préférence pour 12) */
:root {
    --uf-gap-xs: 4px;
    --uf-gap-sm: 8px;
    --uf-gap-md: 12px;
    --uf-gap-lg: 24px;
    --uf-gap-xl: 36px;
    --uf-gap-xxl: 48px;
}

/* Base Container */
.universalfilter-wrapper-a306c0a7 {
    display: flex;
    flex-direction: column;
    gap: var(--uf-gap-lg);
    font-family: system-ui, -apple-system, sans-serif;
}

.universalfilter-sidebar-a306c0a7 {
    width: 100%;
    background: #FAFAFA;
    padding: var(--uf-gap-lg);
    border-radius: 12px;
    border: 1px solid #E0E0E0;
}

/* Base Filters Container */
.universalfilter-basic-filters-a306c0a7 {
    display: flex;
    flex-wrap: wrap;
}

/* Filter Groups */
.filter-group-a306c0a7 {
    margin-bottom: var(--uf-gap-lg);
}

.filter-group-a306c0a7:last-child {
    margin-bottom: 0;
}

.filter-group-a306c0a7 h4 {
    margin: 0 0 var(--uf-gap-md) 0;
    font-size: 14px;
    font-weight: 600;
    color: currentColor;
}

/* Text Inputs, Number Inputs & Selects */
.filter-group-a306c0a7 input[type="text"],
.filter-group-a306c0a7 input[type="number"],
.filter-group-a306c0a7 select {
    width: 100%;
    padding: 10px var(--uf-gap-md);
    border: 1px solid #E0E0E0;
    border-radius: 12px !important;
    box-sizing: border-box;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #FFFFFF;
    color: currentColor;
}

.filter-group-a306c0a7 input[type="text"]:focus,
.filter-group-a306c0a7 input[type="number"]:focus,
.filter-group-a306c0a7 select:focus {
    outline: none;
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Checkboxes */
.checkbox-list-a306c0a7 {
    display: flex;
    flex-direction: column;
    gap: var(--uf-gap-sm);
}

.checkbox-item-a306c0a7 {
    display: flex;
    align-items: center;
    gap: var(--uf-gap-sm);
}

.checkbox-item-a306c0a7 input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--e-global-color-primary);
    cursor: pointer;
}

.checkbox-item-a306c0a7 label {
    font-size: 14px;
    cursor: pointer;
    color: currentColor;
    user-select: none;
}

/* Pills/Tags */
.pill-container-a306c0a7,
.pills-list-a306c0a7 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uf-gap-sm);
}

.pill-label-a306c0a7 {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--uf-gap-md);
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
    background: #FFFFFF;
    color: currentColor;
    border: 2px solid #E0E0E0;
}

.pill-label-a306c0a7:hover {
    border-color: var(--e-global-color-primary);
    color: var(--e-global-color-primary);
}

.pill-label-a306c0a7 input[type="checkbox"]:checked ~ .pill-label-a306c0a7,
.pill-label-a306c0a7.active {
    background: var(--e-global-color-primary);
    color: #FFFFFF;
    border-color: var(--e-global-color-primary);
}

.pill-label-a306c0a7 input[type="checkbox"] {
    display: none;
}

/* Dropdown Checkbox */
.dropdown-checkbox-a306c0a7 {
    position: relative;
    width: 100%;
}

.dropdown-toggle-a306c0a7 {
    width: 100%;
    padding: 10px var(--uf-gap-md);
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px !important;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s ease;
    color: currentColor;
}

.dropdown-toggle-a306c0a7:hover {
    border-color: var(--e-global-color-primary);
}

.dropdown-toggle-a306c0a7.is-open {
    border-color: var(--e-global-color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-toggle-a306c0a7 .arrow-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
    margin-left: var(--uf-gap-sm);
}

.dropdown-toggle-a306c0a7.is-open .arrow-icon {
    transform: rotate(180deg);
}

.dropdown-menu-a306c0a7 {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--e-global-color-primary);
    border-top: none;
    border-radius: 0 0 12px 12px !important;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-menu-a306c0a7 .checkbox-item-a306c0a7 {
    padding: var(--uf-gap-sm) var(--uf-gap-md);
    transition: background 0.2s ease;
}

.dropdown-menu-a306c0a7 .checkbox-item-a306c0a7:hover {
    background: #FAFAFA;
}

/* Range Slider Wrapper */
.range-slider-wrapper-a306c0a7 {
    width: 100%;
}

.range-slider-toggle-a306c0a7 {
    width: 100%;
    padding: 10px var(--uf-gap-md);
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px !important;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    color: currentColor;
}

.range-slider-toggle-a306c0a7:hover {
    border-color: var(--e-global-color-primary) !important;
    color: var(--e-global-color-primary) !important;
    background: #FFFFFF !important;
}

.range-slider-toggle-a306c0a7.is-open {
    border-color: var(--e-global-color-primary);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.range-slider-toggle-a306c0a7 .toggle-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    margin-left: var(--uf-gap-sm);
}

.range-slider-toggle-a306c0a7.is-open .toggle-arrow {
    transform: rotate(180deg);
}

.range-display-text {
    font-weight: 500;
    color: currentColor;
}

.range-slider-content-a306c0a7 {
    border: 1px solid var(--e-global-color-primary);
    border-top: none;
    border-radius: 0 0 12px 12px !important;
    padding: var(--uf-gap-lg);
    background: #FFFFFF;
    margin-top: -1px;
}

.range-slider-a306c0a7 {
    width: 100%;
}

.range-values-display-a306c0a7 {
    display: flex;
    justify-content: space-between;
    margin-top: var(--uf-gap-md);
    font-size: 13px;
    color: #666;
}

.range-values-display-a306c0a7 strong {
    color: var(--e-global-color-primary);
    font-weight: 600;
}

.range-slider-track-container-a306c0a7 {
    padding: 0 var(--uf-gap-md);
    margin: var(--uf-gap-lg) 0;
}

.range-slider-track-a306c0a7 {
    position: relative;
    height: 6px;
    background: #E0E0E0;
    border-radius: 3px !important;
}

.range-slider-progress-a306c0a7 {
    position: absolute;
    height: 100%;
    background: var(--e-global-color-primary);
    border-radius: 3px;
    left: 0;
    right: 0;
}

.range-slider-track-a306c0a7 input[type="range"] {
    position: absolute;
    width: 100%;
    height: 18px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

.range-slider-track-a306c0a7 input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--e-global-color-primary);
    cursor: pointer;
    pointer-events: all;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: 0;
}

.range-slider-track-a306c0a7 input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--e-global-color-primary);
    cursor: pointer;
    pointer-events: all;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: 0;
}

.range-slider-track-a306c0a7 input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.range-slider-track-a306c0a7 input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
}

/* Range Inputs */
.range-inputs-a306c0a7 {
    display: flex;
    gap: var(--uf-gap-md);
    align-items: center;
}

.range-input-wrapper {
    flex: 1;
}

.range-inputs-a306c0a7 input[type="number"] {
    width: 100%;
    padding: 10px var(--uf-gap-md);
    border: 1px solid #E0E0E0;
    border-radius: 12px !important;
    font-size: 14px;
    background: #FFFFFF;
    color: currentColor;
}

.range-inputs-a306c0a7 input[type="number"]:focus {
    outline: none;
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.range-separator {
    color: #999;
    font-size: 14px;
}

/* Action Buttons */
.universalfilter-actions-a306c0a7 {
    display: flex;
    gap: var(--uf-gap-md);
    margin-top: var(--uf-gap-lg);
}

.universalfilter-filter-btn-a306c0a7,
.universalfilter-reset-btn-a306c0a7 {
    flex: 1;
    padding: var(--uf-gap-md) var(--uf-gap-lg);
    border-radius: 12px !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Filter Button (Couleur principale du site) */
.universalfilter-filter-btn-a306c0a7 {
    background: var(--e-global-color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--e-global-color-primary) !important;
}

.universalfilter-filter-btn-a306c0a7:hover {
    background: #FFFFFF !important;
    color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}

.universalfilter-filter-btn-a306c0a7:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Reset Button (Black/White) */
.universalfilter-reset-btn-a306c0a7 {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border-color: #1A1A1A !important;
}

.universalfilter-reset-btn-a306c0a7:hover {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #1A1A1A !important;
}

/* Advanced Toggle - Couleur principale du site */
.universalfilter-advanced-toggle-a306c0a7 {
    width: 100%;
    padding: var(--uf-gap-md);
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px !important;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: var(--e-global-color-primary);
    margin-top: var(--uf-gap-lg);
    margin-bottom: var(--uf-gap-lg);
}

.universalfilter-advanced-toggle-a306c0a7:hover {
    background: #FFFFFF;
    border-color: var(--e-global-color-primary);
    color: var(--e-global-color-primary);
}

.universalfilter-advanced-toggle-a306c0a7.is-open {
    background: var(--e-global-color-primary);
    color: #FFFFFF;
    border-color: var(--e-global-color-primary);
}

.universalfilter-advanced-toggle-a306c0a7 span {
    margin-left: var(--uf-gap-sm);
    font-size: 10px;
}

/* Advanced Filters Container */
.universalfilter-advanced-filters-a306c0a7 {
    display: flex;
    flex-wrap: wrap;
    padding-top: var(--uf-gap-md);
}

/* Results Counter */
.universalfilter-results-info-a306c0a7 {
    text-align: center;
    padding: var(--uf-gap-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-primary);
}

/* Loading State */
.universalfilter-wrapper-a306c0a7.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    :root {
        --uf-gap-lg: 12px; /* 24px → 12px sur mobile */
    }
    
    .universalfilter-sidebar-a306c0a7 {
        padding: var(--uf-gap-md);
    }
    
    .universalfilter-actions-a306c0a7 {
        flex-direction: column;
    }
    
    .filter-item-dynamic-a306c0a7 {
        width: 100% !important;
    }
}