/**
 * Fahrzeugmodell Filter Styles
 * 
 * Minimalistischer Schwarz-Weiß-Stil für den Fahrzeugmodell-Filter
 * Unterstützt horizontale und vertikale Layouts
 */

/* Grundlegendes Styling für den Filter-Container */
.fm-vehicle-filter {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 20px 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

.fm-filter-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding: 0;
    color: #333;
}

/* Formular-Styling */
.fm-filter-form {
    display: block;
    width: 100%;
}

/* Felder */
.fm-filter-fields {
    display: block;
    width: 100%;
}

    /* Leere p-Tags im Filter ausblenden (Workaround) */
    .fm-filter-field p:empty {
        display: none;
        margin: 0;
    }

.fm-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

/* Filter Field Container */
.fm-filter-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fm-filter-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.fm-select-wrapper {
    position: relative;
    width: 100%;
}

/* Select-Felder */
.fm-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%23333" d="M0 0h12L6 6z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}

.fm-select:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 1px #ddd;
}

/* Auto-Auswahl visuelles Feedback */
.fm-select.fm-auto-selected {
    border-color: #28a745;
    background-color: #f8fff9;
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.25);
    animation: fm-auto-select-pulse 1s ease-out;
}

@keyframes fm-auto-select-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Baujahr-Spezifisches Styling */
.fm-field-year {
    flex: 1;
}

.fm-year-slider-wrapper {
    padding: 5px 10px 15px;
}

.fm-year-inputs {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 8px;
}

.fm-year-inputs input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.fm-year-divider {
    color: #333;
    font-weight: 500;
}

/* noUiSlider Custom Styling */
#fm-year-slider {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 5px;
}

#fm-year-slider .noUi-connect {
    background: #333;
}

#fm-year-slider .noUi-handle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    top: -5px;
    right: -8px;
    outline: none;
}

#fm-year-slider .noUi-handle::before,
#fm-year-slider .noUi-handle::after {
    display: none;
}

/* Buttons */
.fm-filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: auto;
    min-width: 220px;
}

.fm-filter-button-container {
    display: flex;
    gap: 10px;
    align-items: flex-end; /* Richten Sie die Buttons am unteren Rand aus */
}

.fm-filter-button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 100px;
}

.fm-filter-submit {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
}

.fm-filter-submit:hover {
    background-color: #555;
    border-color: #555;
}

.fm-filter-reset {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.fm-filter-reset:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* Ergebnis-Bereich */
.fm-filter-results {
    margin-top: 30px;
}

.fm-filter-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.fm-filter-product {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fm-filter-product:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.fm-product-image {
    text-align: center;
    margin-bottom: 10px;
}

.fm-product-image img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.fm-product-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.fm-product-title a {
    color: #333;
    text-decoration: none;
}

.fm-product-title a:hover {
    color: #555;
    text-decoration: underline;
}

.fm-product-price {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.fm-product-button {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    transition: background-color 0.2s ease;
    text-align: center;
}

.fm-product-button:hover {
    background-color: #555;
}

.fm-no-results {
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    font-style: italic;
    text-align: center;
}

/* Lade-Animation */
.fm-loading {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.fm-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: fm-spinner 0.6s linear infinite;
}

@keyframes fm-spinner {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Lade-Indikator (Spinner) neben dem Select */
.fm-loading-indicator {
    /* display: inline-block; */ /* Nicht mehr benötigt */
    position: absolute; /* Position relativ zum Wrapper */
    right: 40px; /* Abstand vom rechten Rand (Platz für den Pfeil lassen) */
    top: 50%; /* Vertikal zentrieren */
    transform: translateY(-50%); /* Genaue vertikale Zentrierung */
    width: 16px;
    height: 16px;
    border: 2px solid #ddd; /* Hellerer Rand */
    border-top-color: #555; /* Etwas dunklerer Spinner-Teil */
    border-radius: 50%;
    animation: fm-spinner 0.6s linear infinite;
    /* vertical-align: middle; */ /* Nicht mehr benötigt */
    /* margin-left: 8px; */ /* Nicht mehr benötigt */
    z-index: 2; /* Sicherstellen, dass er über dem Select liegt, falls nötig */
}

/* Vertical Layout */
.fm-filter-vertical .fm-filter-row {
    flex-direction: column;
}

.fm-filter-vertical .fm-filter-field {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
}

.fm-filter-vertical .fm-filter-button-container {
    margin-top: 5px;
    width: 100%;
    justify-content: flex-start; /* Buttons links ausrichten */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .fm-vehicle-filter {
        padding: 15px;
    }
    
    .fm-filter-title {
        font-size: 16px;
    }
    
    .fm-filter-row {
        flex-direction: column;
        margin-right: 0;
    }
    
    .fm-filter-field {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
        min-width: 100%;
    }
    
    .fm-filter-button-container {
        flex-direction: column; /* Buttons untereinander */
        width: 100%;
        margin-top: 5px;
        gap: 10px; /* Abstand zwischen Buttons */
    }

    .fm-filter-button {
        width: 100%;
    }
    
    #fm-year-slider {
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
    }
}

/* Desktop-spezifisches Layout für Inline-Buttons */
@media (min-width: 769px) {
    .fm-filter-row {
        align-items: flex-end; /* Elemente am unteren Rand ausrichten */
    }

    .fm-filter-button-container {
        margin-left: auto; /* Buttons nach rechts schieben */
        margin-top: 0; /* Oberen Abstand zurücksetzen */
        /* Optional: Feinanpassung der vertikalen Ausrichtung */
        /* padding-bottom: 1px; */ 
        flex-direction: row; /* Buttons nebeneinander */
    }
}

/* Garage-Speichern Button */
.fm-garage-save {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.fm-garage-save-button {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fm-garage-save-button:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.fm-garage-save-success {
    margin-left: 10px;
    color: #4CAF50;
    font-weight: 500;
}

/* Garage Container */
.fm-garage-container {
    margin: 20px 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

.fm-garage-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #333;
}

.fm-garage-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.fm-garage-item {
    display: inline-flex;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 4px 8px 4px 10px;
    max-width: fit-content;
}

.fm-garage-item-content {
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    white-space: nowrap;
}

.fm-garage-item-actions {
    display: flex;
    gap: 2px;
}

.fm-garage-apply, .fm-garage-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.fm-garage-apply {
    color: #333;
}

.fm-garage-apply:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.fm-garage-remove {
    color: #f44336;
}

.fm-garage-remove:hover {
    background-color: rgba(244, 67, 54, 0.1);
}

.material-symbols-outlined {
    font-size: 18px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.fm-garage-empty {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

@media (max-width: 480px) {
    .fm-garage-items {
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .fm-garage-item {
        width: 100%;
    }
}

/* Collapsible Filter Styles for Mobile */
.fm-filter-toggle {
    display: none; /* Hidden by default on desktop */
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    background-color: #f5f5f5; /* Hellgrau */
    color: #333; /* Dunkelgrau */
    border: none;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    transition: background-color 0.2s;
}

.fm-filter-toggle:hover {
    background-color: #e5e5e5;
}

.fm-filter-toggle .fm-toggle-text {
    vertical-align: middle;
    margin-right: 10px; /* Space between text and icon */
}

.fm-filter-toggle .fm-toggle-icon {
    vertical-align: middle;
}

.fm-filter-collapsible-content {
    overflow: hidden; /* Hide content when collapsed */
    transition: max-height 0.3s ease-out;
}

.fm-filter-collapsible-content.collapsed {
    max-height: 0; /* Collapse the content */
}

/* Show toggle button and hide form fields on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .fm-vehicle-filter.fm-filter-vertical .fm-filter-toggle,
    .fm-vehicle-filter.fm-filter-horizontal .fm-filter-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        /* Full width breakout */
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* DEFAULT STATE: Collapsed */
    .fm-filter-collapsible-content {
        max-height: 0;
        overflow: hidden;
    }

    /* EXPANDED STATE (via JS) */
    .fm-filter-collapsible-content.expanded {
        max-height: 2000px;
    }

    /* ACTIVE FILTER STATE (via PHP) - Default Open */
    .fm-vehicle-filter.fm-filter-active .fm-filter-collapsible-content {
        max-height: 2000px;
    }
    
    /* Allow manual closing of active filter */
    .fm-vehicle-filter.fm-filter-active .fm-filter-collapsible-content.collapsed {
        max-height: 0;
    }
}