/*
 * WP Store Locator – "Find an expert" (Seite 1506)
 *
 * Diese Regeln lagen bis 2026-08-22 im Custom-CSS-Feld des Elementor-
 * Shortcode-Widgets. Elementors `selector` ist hier durch die konkrete
 * Element-Klasse ersetzt; die Regeln greifen deshalb weiterhin nur auf
 * diesem einen Widget.
 *
 * Achtung: .elementor-element-78f0372 ist die von Elementor vergebene
 * Element-ID. Wird das Widget gelöscht und neu angelegt, ändert sie sich
 * und die Selektoren hier müssen nachgezogen werden.
 */

.elementor-element-78f0372 .wpsl-search {
    background-color: var(--e-global-color-50786b7);
    padding: 20px;
    box-shadow: 0px 5px 13px -10px #000000 !important;
    margin-bottom: 20px;
}

.elementor-element-78f0372 #wpsl-search-wrap .wpsl-input,
.elementor-element-78f0372 #wpsl-search-wrap #wpsl-radius,
.elementor-element-78f0372 #wpsl-search-wrap #wpsl-results {
    display: flex !important;
    align-items: center;
}

[data-elementor-device-mode="mobile"] .elementor-element-78f0372 .wpsl-select-wrap {
    display: flex !important;
    flex-direction: column;
}

.elementor-element-78f0372 #wpsl-search-btn {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-6c3fdfb);
    border-radius: 0px 0px 0px 0px;
    border: none;
    background-image: none;
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    padding: 12px 24px;
    line-height: 1;
}

.elementor-element-78f0372 label {
    width: auto !important;
}

.elementor-element-78f0372 #wpsl-category {
    display: none;
}

/*
 * Kartenhöhe.
 *
 * WP Store Locator schreibt die Höhe als Inline-<style> mit !important in
 * die Seite (Wert aus Store Locator → Einstellungen → Karte). Der Override
 * braucht deshalb ebenfalls !important und höhere Spezifität.
 *
 * 80vh mit 400px Untergrenze: min-height klemmt height nach unten ab, die
 * Karte wird also nie kleiner als 400px, auch nicht auf flachen Viewports.
 */
.elementor-element-78f0372 #wpsl-gmap {
    height: 80vh !important;
    min-height: 400px !important;
}

/*
 * Linke Spalte: Intro-Box über der Trefferliste.
 *
 * Die Spalte bekommt dieselbe Höhe wie die Karte und verteilt sie als
 * Flex-Container: die Box nimmt ihre natürliche Höhe, Trefferliste und
 * Routen-Panel füllen den Rest und scrollen darin. Ohne das würde die
 * Spalte um die Höhe der Box über die Karte hinauswachsen.
 *
 * height/min-height müssen auch hier !important tragen, weil WPSL die
 * 350px per Inline-<style> auf #wpsl-stores und #wpsl-direction-details setzt.
 */
.elementor-element-78f0372 #wpsl-result-list {
    display: flex;
    flex-direction: column;
    height: 80vh !important;
    min-height: 400px !important;
    margin-right: 20px;
}

.elementor-element-78f0372 #wpsl-stores,
.elementor-element-78f0372 #wpsl-direction-details {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
}

.elementor-element-78f0372 .esci-result-intro {
    flex: 0 0 auto;
    background-color: var(--e-global-color-50786b7);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 5px 13px -10px #000000;
}

/* Versalien als Darstellung, nicht als Inhalt – Screenreader lesen sonst
   buchstabierend vor. */
.elementor-element-78f0372 .esci-result-intro h3 {
    text-transform: uppercase;
    margin: 0 0 10px;
}

.elementor-element-78f0372 .esci-result-intro p {
    margin: 0 0 8px;
}

.elementor-element-78f0372 .esci-result-intro p:last-child {
    margin-bottom: 0;
}