/*
 * LadeSofort - Startseite: Filter-/Dual-Range-Slider-Styles.
 * Ausgelagert aus pages/home/sections/search.php (SEO/Performance, cachebar).
 */
    .dual-range-wrapper {
        position: relative;
        height: 24px;
        width: 100%;
    }

    .dual-range {
        position: absolute;
        width: 100%;
        height: 6px;
        background: transparent;
        -webkit-appearance: none;
        appearance: none;
        pointer-events: none !important;
        border-radius: 3px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000 !important;
    }

    .dual-range::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #2eb873 !important;
        cursor: pointer !important;
        pointer-events: all !important;
        border: 3px solid white !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        margin-top: -7px !important;
        z-index: 10000 !important;
        position: relative !important;
        /* Zentriert den Thumb auf der Linie und über der Fill-Linie */
    }

    .dual-range::-moz-range-thumb {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #2eb873 !important;
        cursor: pointer !important;
        pointer-events: all !important;
        border: 3px solid white !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        margin-top: -7px !important;
        z-index: 10000 !important;
        position: relative !important;
        -moz-appearance: none !important;
    }

    .dual-range-track {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 3px !important;
        width: calc(100% - 6px) !important;
        height: 6px;
        background: #e5e7eb;
        border-radius: 3px;
        z-index: 1;
    }

    .dual-range-fill {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 6px;
        background: #2eb873;
        border-radius: 3px;
        z-index: 500 !important;
        pointer-events: none !important;
    }

    /* Verbesserte Hover-Effekte für Slider Thumbs */
    .dual-range::-webkit-slider-thumb:hover {
        background: #2eb873;
        transform: scale(1.1);
        transition: all 0.2s ease;
    }

    .dual-range::-moz-range-thumb:hover {
        background: #2eb873;
        transform: scale(1.1);
        transition: all 0.2s ease;
    }

    /* Firefox-spezifische Fixes für perfekte Zentrierung */
    .dual-range::-moz-range-track {
        background: transparent;
        border: none;
        height: 6px;
    }

    /* Zusätzliche Browser-Unterstützung */
    .dual-range::-ms-thumb {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #2eb873 !important;
        cursor: pointer !important;
        border: 3px solid white !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        z-index: 10000 !important;
        position: relative !important;
    }

    .dual-range::-ms-track {
        background: transparent;
        border-color: transparent;
        color: transparent;
        height: 6px;
    }

    /* AGGRESSIVE Z-INDEX FIX für Slider-Thumbs */
    .dual-range input[type="range"] {
        z-index: 9998 !important;
        position: relative !important;
    }

    .dual-range-wrapper input[type="range"]::-webkit-slider-thumb {
        z-index: 10000 !important;
        position: relative !important;
    }

    .dual-range-wrapper input[type="range"]::-moz-range-thumb {
        z-index: 10000 !important;
        position: relative !important;
    }

    .dual-range-wrapper input[type="range"]::-ms-thumb {
        z-index: 10000 !important;
        position: relative !important;
    }

    /* Tab Styles für erweiterte Filter */
    .filter-tab {
        position: relative;
        transition: all 0.2s ease;
    }

    .filter-tab.active {
        color: #1f2937;
        font-weight: 600;
        border-color: hsl(var(--primary)) !important;
    }

    .filter-tab:not(.active):hover {
        color: #1f2937;
    }

    .filter-tab-panel {
        animation: fadeIn 0.3s ease;
    }

    .filter-tab-panel.hidden {
        display: none !important;
    }

    /* Modal Animation Styles */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Enhanced Modal Styling */
    .modal-backdrop {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .modal-content {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }