/* =============================================================================
   MTF Store Locator – Child Theme Styles
   Ergänzt und überschreibt das WPSL-Plugin-Stylesheet (wp-store-locator/css/styles.css)
   ============================================================================= */


/* =============================================================================
   1. SCHRIFTARTEN
   ============================================================================= */

@font-face {
    font-family: 'SamsungSharpSans-Bold';
    src: url('../assets/fonts/SamsungSharpSans-Bold.woff2') format('woff2'),
         url('../assets/fonts/SamsungSharpSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SamsungOne-400';
    src: url('../assets/fonts/SamsungOne-400.woff2') format('woff2'),
         url('../assets/fonts/SamsungOne-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SamsungOne-700';
    src: url('../assets/fonts/SamsungOne-700.woff2') format('woff2'),
         url('../assets/fonts/SamsungOne-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =============================================================================
   2. ALLGEMEINES LAYOUT (Suchleiste, Karte, Ergebnisliste)
   ============================================================================= */

/* Suchleiste */
.wpsl-search {
    border-radius: 20px;
}

/* Karte */
#wpsl-gmap {
    border-radius: 20px;
}

/* Ergebnis-Karten */
#wpsl-wrap #wpsl-result-list ul li {
    background: #ededed;
    border-bottom: 1px dotted #ccc;
    padding: 20px;
    border-radius: 20px;
    margin: 0 10px 10px 0;
}


/* =============================================================================
   3. STORE-KARTE – Partnerbezeichnung, Titel, Kategorien
   ============================================================================= */

/* Partnerbezeichnung (z.B. "Werkskundendienst") über dem Firmennamen */
.wpsl-partner-label {
    display: block;
    font-size: 26px;
    font-family: 'SamsungSharpSans-Bold';
}

/* Firmenname */
#wpsl-result-list .wpsl-title {
    display: block;
    font-size: 18px;
    color: #0c3c74;
    margin: 10px 0;
}

/* Kategorie-Icons in der Karte */
.wpsl-store-categories {
    margin: 10px 0;
}

.wpsl-store-categories img {
    padding-right: 10px;
    height: 22.5px;
    width: auto;
}


/* =============================================================================
   4. KONTAKT-ICONS (expandierende Hover-Buttons)
   ============================================================================= */

.mtf-contact-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 20px;
}

/* Ausgangszustand: kompaktes Icon */
.mtf-contact-item {
    display: inline-flex;
    align-items: center;
    background: #cccccc;
    border-radius: 50px;
    padding: 7px;
    overflow: hidden;
    max-width: 36px;
    gap: 0;
    transition: max-width 0.35s ease, padding 0.35s ease, gap 0.35s ease;
    cursor: default;
}

/* Hover: expandiert mit Label */
.mtf-contact-item:hover {
    max-width: 260px;
    padding: 7px 14px 7px 10px;
    gap: 6px;
}

.mtf-contact-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Label ist zunächst unsichtbar und nimmt keinen Platz ein */
.mtf-contact-label {
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    font-size: 0.85em;
    transition: opacity 0.2s ease 0.1s, max-width 0.35s ease;
}

.mtf-contact-item:hover .mtf-contact-label {
    opacity: 1;
    max-width: 220px;
}

.mtf-contact-label a {
    color: inherit;
    text-decoration: none;
}

.mtf-contact-label a:hover {
    color: #000;
}


/* =============================================================================
   5. SUCHLEISTE – Formular-Layout
   ============================================================================= */

/* Form ist ein Flex-Container; Elemente werden linksbündig ausgerichtet */
#wpsl-search-wrap form {
    justify-content: flex-start;
}

/* Globaler margin-right-Reset für alle direkten Kinder */
#wpsl-search-wrap div {
    margin-right: 0;
}

/* --- Standort-Eingabefeld --- */
#wpsl-wrap .wpsl-input div,
#wpsl-wrap .wpsl-input input {
    display: block;
}

#wpsl-wrap .wpsl-input {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    width: 240px;
    margin-right: 20px;
}

#wpsl-wrap .wpsl-input div {
    width: 100%;
    margin-right: 0;
}

#wpsl-wrap .wpsl-input div label {
    width: auto;
}

#wpsl-wrap .wpsl-input input {
    border-radius: 10px;
    align-self: flex-end;
    width: 100%;
}

/* --- Suchradius-Dropdown --- */
#wpsl-search-wrap .wpsl-select-wrap {
    margin-bottom: 0;
    width: 105px;
    margin-right: 20px;
}

/* Flex-Wrapper damit Label oben und Dropdown unten fluchtet */
#wpsl-search-wrap .wpsl-select-wrap #wpsl-radius {
    height: 79px;
    display: flex;
    flex-wrap: wrap;
}

#wpsl-search-wrap .wpsl-select-wrap #wpsl-radius div {
    align-self: flex-end;
    width: 100%;
}

#wpsl-search-wrap .wpsl-dropdown {
    border-radius: 10px;
}


/* =============================================================================
   6. ANGEBOTSFILTER – Checkbox-Chips
   ============================================================================= */

/* Wrapper umschließt Label + Chip-Liste */
.wpsl-checkbox-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 410px;
}

/* "Angebotsfilter"-Label nimmt volle Breite ein */
#wpsl-search-wrap .wpsl-checkbox-filter-wrap label {
    width: 100%;
    margin-right: 0;
}

.mtf-category-filter-label {
    display: block;
    margin-bottom: 4px;
}

/* Chip-Liste */
#wpsl-checkbox-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    list-style: none;
    padding: 0;
    width: 100%;
    align-self: flex-end;
}

#wpsl-checkbox-filter li {
    margin: 0;
    padding: 0;
}

/* Einzelner Chip */
#wpsl-checkbox-filter label {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1.5px solid #c8c8c8;
    border-radius: 50px;
    background: #fff;
    color: #444;
    font-size: 0.85em;
    letter-spacing: 0; /* Avada setzt globales letter-spacing; hier zurücksetzen */
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

#wpsl-checkbox-filter label:hover {
    border-color: #0c3c74;
    color: #0c3c74;
}

/* Nativen Checkbox-Input verstecken (display:none damit kein Layout-Platz belegt wird) */
#wpsl-checkbox-filter input[type="checkbox"] {
    display: none;
}

/* Aktiver Chip – moderne Browser via :has() */
#wpsl-checkbox-filter label:has(input[type="checkbox"]:checked) {
    background: #0c3c74;
    border-color: #0c3c74;
    color: #fff;
}

/* Aktiver Chip – Fallback für ältere Browser (WPSL setzt .wpsl-selected per JS) */
#wpsl-checkbox-filter li.wpsl-selected label {
    background: #0c3c74;
    border-color: #0c3c74;
    color: #fff;
}


/* =============================================================================
   7. SUCH-BUTTON
   ============================================================================= */

/* Wrapper wird per margin-left: auto an den rechten Rand gedrückt */
.wpsl-search-btn-wrap {
    display: flex;
    width: 160px;
    margin-left: auto;
}

.wpsl-search-btn-wrap input {
    width: 100%;
}

.wpsl-search-btn-wrap #wpsl-search-btn {
    align-self: flex-end;
    background: #161d38;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'SamsungOne-700';
    padding: 10px 20px;
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

/* --- Mittlere Breiten: Angebotsfilter + Button auf Zeile 2 --- */
@media (max-width: 1160px) {
    #wpsl-search-wrap form {
        flex-wrap: wrap;
    }

    #wpsl-wrap .wpsl-input {
        width: calc((100% / 2) - 20px);
        margin-right: 40px;
        margin-bottom: 10px;
    }

    #wpsl-search-wrap .wpsl-select-wrap {
        width: calc((100% / 2) - 20px);
        margin-right: 0;
        margin-bottom: 10px;
    }

    #wpsl-search-wrap .wpsl-select-wrap #wpsl-radius {
        width: 100%;
    }

    .wpsl-checkbox-filter-wrap {
        width: calc((100% / 2) - 20px);
    }

    .wpsl-search-btn-wrap {
        width: calc((100% / 2) - 20px);
    }
}

/* --- Kleine Breiten: alle Elemente vollbreit untereinander --- */
@media (max-width: 768px) {
    #wpsl-wrap .wpsl-input {
        width: 100%;
        margin-right: 0;
    }

    #wpsl-search-wrap .wpsl-select-wrap {
        width: 100%;
        margin-right: 0;
    }

    #wpsl-search-wrap .wpsl-select-wrap #wpsl-radius {
        height: auto;
    }

    .wpsl-checkbox-filter-wrap {
        width: 100%;
    }

    .wpsl-search-btn-wrap {
        width: 100%;
        margin-left: 0;
    }

    .wpsl-search-btn-wrap #wpsl-search-btn {
        width: 100%;
    }
}