/**
 * lc-schaden-locator.css
 *
 * Stile für den Schaden-Locator-Block im Fluent-Forms-Step 2.
 *
 * Prinzip:
 *  - ASL-Advance-Filter (L&K / Kfz / Glas Checkboxen) per CSS ausblenden
 *    (zusätzlich zu advance_filter="1" im Shortcode, das die Klasse .no-asl-filters nicht setzt;
 *     advance_filter="1" lässt die Filter sichtbar – wir blenden sie selbst aus)
 *  - Bestehende Popup-Buttons ausblenden; nur .lc-choose-btn anzeigen
 *  - Dropdown und Bestätigungs-Box stylen
 */

/* =============================================================================
   Wrapper
   ============================================================================= */

.lc-locator-wrap {
    position: relative;
    width: 100%;
    max-width: 959px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* =============================================================================
   Fluent-Form-27: native Standort-Dropdowns ausblenden
   (werden per JS aus der Karte/Liste befüllt; nur noch als Versand-Empfänger-
    Quelle für die E-Mail-Notification relevant – {inputs.standort_*}).
   Markierung: die FF-Feldgruppe trägt die Custom-Klasse "standortliste".
   ============================================================================= */

.ff-el-group.standortliste {
    display: none !important;
}

/* "Gewählter Standort:"-Bestätigung ausblenden – aktive Karte/Liste zeigen
   die Auswahl bereits visuell. */
#lc-chosen-store {
    display: none !important;
}

/* Fluent-Forms-Step-Navigation:
   Kategorie: Weiter ausblenden, weil die Auswahl automatisch weiterführt.
   Standort: Zurück und Weiter ausblenden, weil Standortauswahl/Marker klickt. */
form.lc-hide-category-next .ff-btn-next,
form.lc-hide-category-next .step-nav.ff_step_nav_last,
form.lc-hide-location-nav .ff-btn-next,
form.lc-hide-location-nav .ff-btn-prev,
form.lc-hide-location-nav .ff-btn-previous {
    display: none !important;
}

/* YOOtheme setzt :focus-visible als gepunktete Box. Im Standort-Step landet der
   Fokus auf dem Custom-HTML-Intro; diese optische Box soll dort nicht erscheinen. */
form.lc-hide-location-nav .ff-el-group.form-max-width:focus,
form.lc-hide-location-nav .ff-el-group.form-max-width:focus-visible,
form.lc-hide-location-nav .ff-el-group.form-max-width [tabindex]:focus,
form.lc-hide-location-nav .ff-el-group.form-max-width [tabindex]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.frm-fluent-form .ff-el-group.form-max-width:focus,
.frm-fluent-form .ff-el-group.form-max-width:focus-visible,
.frm-fluent-form .ff-el-group.form-max-width[tabindex]:focus,
.frm-fluent-form .ff-el-group.form-max-width[tabindex]:focus-visible,
.frm-fluent-form .ff-el-group.form-max-width .ff-el-input--content:focus,
.frm-fluent-form .ff-el-group.form-max-width .ff-el-input--content:focus-visible,
.frm-fluent-form .ff-el-group.form-max-width .ff-custom_html:focus,
.frm-fluent-form .ff-el-group.form-max-width .ff-custom_html:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* =============================================================================
   Karten-Container
   ============================================================================= */

.lc-map-container {
    width: 100%;
    max-width: 959px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Karte auf sinnvolle Höhe begrenzen */
.lc-map-container #asl-map-canv {
    min-height: 380px;
    width: 100% !important;
}

/* =============================================================================
   ASL Advance-Filter ausblenden
   (L&K / Kfz / Glas-Checkboxen – wurden bereits vor der Standortauswahl
    implizit durch die Kategorie-Wahl bestimmt)
   ============================================================================= */

/* Alle Filter-Abschnitte innerhalb unseres Wrappers verstecken */
.lc-locator-wrap .Filter_section,
.lc-locator-wrap .asl-adv-ddl-cont,
.lc-locator-wrap .asl-ddl-filters,
.lc-locator-wrap .asl-advance-filter,
.lc-locator-wrap .advance_filter_section {
    display: none !important;
}

/* Die Filter-Section sitzt in einer eigenen Bootstrap-artigen ASL-Spalte
   (.pol-md-6.pol-lg-6). Der Inhalt ist per Regel oben versteckt, aber die
   leere Spalte würde weiterhin Breite reservieren und die Karte auf 50%
   halten. Über :has() die komplette Spalte entfernen. */
.lc-locator-wrap [class*="pol-"]:has(> .Filter_section),
.lc-locator-wrap [class*="pol-"]:has(> .search_filter) {
    display: none !important;
}

/* Map-Spalte (ASL-Grid-Geschwister) auf volle Breite — greift, falls
   Layout-Klassen wie .pol-md-6/.pol-lg-6 am Map-Wrapper gesetzt sind. */
.lc-locator-wrap [class*="pol-"]:has(> .asl-map),
.lc-locator-wrap [class*="pol-"]:has(> #asl-map-canv),
.lc-locator-wrap [class*="pol-"]:has(.asl-map) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Store-Liste (linkes Panel) ausblenden – wir haben eigenes Dropdown */
.lc-locator-wrap .asl-panel,
.lc-locator-wrap #asl-panel {
    display: none !important;
}

/* Karte soll die volle Breite nutzen wenn Panel versteckt ist */
.lc-locator-wrap .asl-map {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* ASL setzt .sl-container auf width:90% — im Formular volle Breite */
.lc-locator-wrap .sl-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* ASL-Wrapper: kein extra Padding/Margin das Platz wegnimmt */
.lc-locator-wrap #asl-storelocator {
    padding: 0 !important;
    margin: 0 !important;
}

.lc-locator-wrap .asl-wrapper {
    padding: 0 !important;
}

.lc-locator-wrap .asl-store-locator,
.lc-locator-wrap .sl-main-cont,
.lc-locator-wrap .sl-main-row,
.lc-locator-wrap .sl-row {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* =============================================================================
   InfoBox: Nur Name/Adresse + "Diesen Standort wählen"-Button zeigen.
   Alles andere (Telefon, E-Mail, Links, Buttons) wird ausgeblendet.
   ============================================================================= */

/* Telefon / E-Mail / Logo Sektion */
.lc-locator-wrap .infoWindow .info-addr {
    display: none !important;
}

/* Original ASL-Buttons ("Schaden melden", "Zum Standort") */
.lc-locator-wrap .infoWindow .sl-row:not(.sl-addr-sec) {
    display: none !important;
}

/* InfoBox-Reduktion erfolgt in patchInfoBox() via JS. Der eigene
   "Standort wählen"-Button wird dort dynamisch eingefügt. */

.lc-locator-wrap .infoWindow .lc-choose-btn,
.lc-choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 2px;
    padding: 16px 22px;
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    background: #1d2327;
    color: #fff;
    border: 1px solid #1d2327;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.lc-locator-wrap .infoWindow .lc-choose-btn.uk-button-primary {
    background-color: #ffe500!important;
    color: #1c1c1c;
    border: 2px solid transparent;
}

.lc-locator-wrap .infoWindow .lc-choose-btn:hover,
.lc-locator-wrap .infoWindow .lc-choose-btn:focus,
.lc-choose-btn:hover,
.lc-choose-btn:focus {
    background: #3c434a;
    border-color: #3c434a;
    outline: none;
}

/* =============================================================================
   Suchleiste (Adresse + Geolocation)
   ============================================================================= */

.lc-search-bar {
    width: 100%;
    max-width: 959px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-bottom: 40px;
}

.lc-search-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 8px;
}

.lc-search-label {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 500;
    color: #1d2327;
    white-space: nowrap;
    line-height: 1.3;
}

.lc-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

.lc-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    pointer-events: none;
}

.lc-address-input {
    width: 100%;
    flex: 1;
    padding: 10px 40px 10px 40px;
    font-size: 15px;
    border: 1px solid #000;
    border-radius: 9999px;
    background: #fff;
    color: #1d2327;
    outline: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.lc-address-input::placeholder {
    color: #9ca3af;
}

.lc-address-input:focus {
    border-color: #1d2327;
    box-shadow: 0 0 0 3px rgba(29, 35, 39, 0.08);
}

.lc-address-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    color: #9ca3af;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    transition: color 0.15s;
}

.lc-address-clear-btn:hover,
.lc-address-clear-btn:focus {
    color: #4b5563;
    outline: none;
}

.lc-address-search-btn {
    display: none !important;
}

@media (max-width: 782px) {
    .lc-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .lc-search-label {
        white-space: normal;
    }

    .lc-geolocation-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   Nächste-Standorte-Liste – YOOtheme/ASL-nahes Card-Layout
   ============================================================================= */

.lc-nearest-section {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: none;
    margin: 56px -50vw 0;
    padding: 36px 24px 56px;
    background: #f2f2f2;
    box-shadow: 0 0 0 100vmax #f2f2f2;
    clip-path: inset(0 -100vmax);
    box-sizing: border-box;
}

.lc-nearest-section-inner {
    width: 100%;
    max-width: 965px;
    margin: 0 auto;
}

.lc-nearest-title {
    margin: 0 0 28px;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
}

.lc-nearest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lc-nearest-item {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}

.lc-nearest-list > .lc-nearest-item.uk-margin-top {
    margin-top: 0;
}

.lc-nearest-item + .lc-nearest-item {
    margin-top: 24px;
}

.lc-nearest-card {
    position: relative;
    padding: 28px 32px;
    background: #fff;
    color: #000;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.lc-nearest-card > .uk-panel.uk-margin {
    margin: 0;
}

.lc-nearest-item:hover .lc-nearest-card,
.lc-nearest-item:focus-visible .lc-nearest-card {
    border-color: rgba(255, 229, 0, 1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.lc-nearest-item.lc-nearest-active .lc-nearest-card {
    border-color: rgba(255, 229, 0, 1);
    box-shadow: 0 0 0 2px rgba(255, 229, 0, 0.65), 0 8px 22px rgba(0, 0, 0, 0.12);
}

.lc-nearest-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px 28px;
}

.lc-nearest-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
}

.lc-nearest-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
}

.lc-nearest-services {
    min-width: 0;
}

.lc-nearest-card .asl-services-headline {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.3;
    color: #000;
}

.lc-nearest-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #5f7585;
    border: 0;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

.lc-badge:first-child {
    background: #000;
}

.lc-nearest-badges .lc-badge:first-child {
    background: #ffe500;
    color: #000;
}

.lc-badge img,
.lc-badge svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.lc-badge svg,
.lc-badge svg * {
    max-width: 18px;
    max-height: 18px;
}

.lc-nearest-dist,
.lc-nearest-dist .s-distance {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.lc-nearest-dist svg {
    width: 22px;
    height: 22px;
    color: #000;
    flex-shrink: 0;
}

.lc-nearest-error {
    padding: 12px 14px;
    background: #fcf0f1;
    border: 1px solid #f1b0b2;
    border-radius: 4px;
    font-size: 14px;
    color: #d63638;
}

/* =============================================================================
   Geolocation-Button
   ============================================================================= */

.lc-geolocation-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    margin: 0;
    background: #fff;
    color: #1d2327;
    border: 1px solid #d0d5dd;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    line-height: 1.3;
}

.lc-geolocation-btn:hover,
.lc-geolocation-btn:focus {
    border-color: #1d2327;
    background: #f9fafb;
    outline: none;
}

.lc-geolocation-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.lc-geolocation-btn svg {
    flex-shrink: 0;
}

/* =============================================================================
   Dropdown
   ============================================================================= */

.lc-dropdown-wrap {
    margin-top: 16px;
}

.lc-dropdown-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1d2327;
}

.lc-store-select {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background: #fff;
    color: #1d2327;
    cursor: pointer;
    appearance: auto;
}

.lc-store-select:focus {
    outline: 2px solid #2271b1;
    outline-offset: 1px;
    border-color: #2271b1;
}

/* =============================================================================
   Bestätigung nach Auswahl
   ============================================================================= */

.lc-chosen-store {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f0faf0;
    border-left: 3px solid #1a8a1a;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    color: #1d2327;
    line-height: 1.4;
}

/* =============================================================================
   Fehlermeldung
   ============================================================================= */

.lc-locator-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fcf0f1;
    border-left: 3px solid #d63638;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    color: #3c434a;
}

/* =============================================================================
   Lade-Spinner
   ============================================================================= */

.lc-spinner {
    padding: 12px 0;
    font-size: 14px;
    color: #646970;
    font-style: italic;
}

.lc-loading #lc-map-container,
.lc-loading .lc-dropdown-wrap {
    opacity: 0.5;
    pointer-events: none;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 600px) {
    .lc-map-container #asl-map-canv {
        min-height: 260px;
    }

    .lc-nearest-section {
        margin-top: 36px;
        padding: 28px 18px 42px;
    }

    .lc-nearest-title {
        margin-bottom: 18px;
        font-size: 16px;
    }

    .lc-nearest-card {
        padding: 22px 20px;
    }

    .lc-nearest-card-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .lc-nearest-name {
        font-size: 18px;
    }

    .lc-nearest-card-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-top: 24px;
    }

    .lc-nearest-dist,
    .lc-nearest-dist .s-distance {
        font-size: 20px;
    }
}