/*
 * Karte der Objektliste: Hülle des Fensters, Filterblatt im Fenster, Popup eines Ortes mit
 * mehreren Unterkünften und Ladebalken. Farben kommen aus den Theme-Variablen (--color-*),
 * mit Rückfall auf neutrale Werte.
 *
 * Alles, was man in der Karte und der Liste sieht — Suchleiste, Schnellfilter, Preisschilder,
 * Cluster, Steuerung, Vorschau, Schublade, Ergebniskarte, Hinweis und Einwilligung —, steht in
 * `map-search.css` (Bauplan `MOCKUP-KARTENSUCHE-NEU.html`). Der Knopf in der Sortierzeile der
 * Seite öffnet das Fenster; am Telefon (bis 760 px) ist er der feste Knopf unten
 * (skeleton/css/accommodation.css).
 */

.accommodation-list__map-toggle {
    min-height: 2.75rem;
}

.accommodation-list__map-toggle[hidden] {
    display: none;
}

.accommodation-map {
    position: relative;
    margin: 0 0 1.5rem;
}

.accommodation-map[hidden],
.accommodation-map [hidden] {
    display: none;
}

.accommodation-map__frame {
    position: relative;
    height: 24rem;
    border: 1px solid var(--color-border, #e4e7ee);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-surface-alt, #f8fafc);
}

.accommodation-map__canvas {
    position: absolute;
    inset: 0;
}

.accommodation-map__area {
    fill: var(--color-primary, #3d5a92);
    fill-opacity: 0.15;
    stroke: var(--color-primary, #3d5a92);
    stroke-width: 1;
}

.accommodation-map__popup-wrap {
    max-width: calc(100vw - 32px);
}

.accommodation-map__popup-wrap .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #fff);
    color: var(--color-text, #1f2937);
}

.accommodation-map__popup-wrap .leaflet-popup-content {
    margin: 0;
    line-height: inherit;
}

.accommodation-map__popup {
    position: relative;
    max-width: 100%;
}

.accommodation-map__popup-close {
    position: absolute;
    top: var(--space-2, 8px);
    right: var(--space-2, 8px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
    color: var(--color-text, #1f2937);
    cursor: pointer;
}

.accommodation-map__popup-close:focus-visible {
    outline: 2px solid var(--color-primary, #3d5a92);
    outline-offset: -2px;
}

.accommodation-map__group-head {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--space-2, 8px) calc(44px + var(--space-4, 16px)) var(--space-2, 8px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-color, #d9dee2);
    font-size: 0.9375rem;
    font-weight: 500;
}

.accommodation-map__group-rows {
    max-height: 19.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.accommodation-map__group-rows .result-card {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    margin: 0;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 0;
    border-bottom: 1px solid var(--border-color, #d9dee2);
    border-radius: 0;
}

.accommodation-map__group-rows .result-card:last-child {
    border-bottom: 0;
}

.accommodation-map__group-rows .result-card__image {
    width: 64px;
    height: 64px;
    min-height: 0;
}

.accommodation-map__group-rows .result-card__image .accommodation-card__fav,
.accommodation-map__group-rows .result-card__place,
.accommodation-map__group-rows .result-card__rating,
.accommodation-map__group-rows .result-card__tag {
    display: none;
}

.accommodation-map__group-rows .result-card__title {
    overflow: hidden;
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accommodation-map__popup-error {
    display: grid;
    gap: var(--space-2, 8px);
    justify-items: start;
    padding: var(--space-4, 16px);
}

.accommodation-map__popup-error-text {
    margin: 0;
    padding-right: 44px;
}

@media (max-width: 760px) {
    .accommodation-map__frame {
        height: 20rem;
    }
}

/* ==========================================================================
   FENSTER DER KARTENSUCHE

   Die Hülle: Hintergrund 8100, Fenster 8101, Filterblatt am Telefon darin.
   Die Wähler für Zeitraum und Gäste hängen sich an den `body` und stehen mit
   9999 darüber. Innerhalb der Karte liegt alles, was Leaflet zeichnet, in
   einem eigenen Stapel (`isolation`, siehe `map-search.css`). Ab 761 px steht
   das Fenster mit Rand über der Seite, bis 760 px füllt es das Bild. Nichts
   davon kennt einen Dunkelmodus, weil das Frontend keinen kennt.
   ========================================================================== */

html.map-modal-open {
    overflow: hidden;
}

.map-modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 8100;
    background: color-mix(in srgb, var(--shadow-color, black) 45%, transparent);
}

.map-modal {
    position: fixed;
    inset: 24px;
    z-index: 8101;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--shadow-color, black) 35%, transparent);
    color: var(--color-text);
    overflow: hidden;
}

.map-modal-scrim[hidden],
.map-modal[hidden] {
    display: none;
}

.map-modal [hidden][hidden] {
    display: none;
}

@media (max-width: 760px) {
    .map-modal-scrim {
        display: none;
    }

    .map-modal {
        inset: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* --------------------------------------------------------------------------
   Filterblatt (das vorhandene Filterformular der Liste). Ort, Fläche und
   Lage stehen in `map-search.css` (`.map-search__side > .list-filter--panel`,
   `.map-search > .list-filter--panel`).
   -------------------------------------------------------------------------- */

.list-filter--panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background: var(--color-surface);
}

.list-filter--panel[hidden] {
    display: none;
}

.map-search form.list-filter.list-filter--panel:not([hidden]) {
    display: flex;
}

.list-filter--panel > .list-filter__head {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.list-filter--panel .list-sheet__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
}

.list-filter--panel .list-sheet__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}

.list-filter--panel .list-sheet__close svg {
    width: 20px;
    height: 20px;
}

.list-filter--panel .list-filter__reset {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-hover);
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.map-search form.list-filter--panel:not([hidden]) {
    animation: list-sheet-in var(--frontend-core-sheet-speed, 200ms) ease-out;
}

.map-search form.list-filter--panel.is-closing {
    pointer-events: none;
    animation: list-sheet-out var(--frontend-core-sheet-speed, 200ms) ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .map-search form.list-filter--panel:not([hidden]) {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
    }
}

.list-filter--panel > .list-filter__body {
    display: grid;
    flex: 1 1 auto;
    gap: var(--space-6);
    align-content: start;
    padding: var(--space-4);
    overflow-y: auto;
}

.list-filter--panel > .list-filter__foot {
    display: block;
    flex: none;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--color-surface);
}

.list-filter__group {
    display: grid;
}

.list-filter__group-title {
    margin-bottom: var(--space-1);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.list-filter__group .check {
    align-items: center;
    gap: var(--space-3);
    padding-top: 0;
}

.list-filter__group .check .text-muted {
    margin-left: auto;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.map-modal .list-filter--panel .widget-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Ladebalken der Karte (Zustand A6 des Bauplans)
   -------------------------------------------------------------------------- */

.accommodation-map__skeleton {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    height: 3px;
    background: var(--color-primary);
    transform-origin: left;
    animation: map-modal-loading-bar 2s ease-out forwards;
}

@keyframes map-modal-loading-bar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accommodation-map__skeleton {
        animation: none;
        transform: scaleX(0.6);
    }
}

/* --------------------------------------------------------------------------
   Kartenschalter der Trefferliste („Karte anzeigen“): ein Knopf mit Rahmen,
   Hintergrund und Kartensymbol, mit demselben Eckenradius wie das Sortierfeld daneben, kein nackter Text. Die
   Regeln stehen hier und nicht im Theme, weil Instanzen mit kopiertem Theme
   (files/layout/css) `.btn` ohne Rahmen und Hintergrund kennen.
   -------------------------------------------------------------------------- */

.accommodation-list .accommodation-list__map-toggle.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.accommodation-list .accommodation-list__sort-select {
    min-height: 44px;
}

.accommodation-list .accommodation-list__map-toggle.btn[hidden] {
    display: none;
}

.accommodation-list .accommodation-list__map-toggle.btn::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2zM9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.accommodation-list .accommodation-list__map-toggle.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Inhalt des Filterblatts (Formular aus dem Formulargenerator). Das Theme
   setzt für Felder, `fieldset` und `legend` eigene Regeln und lässt Spuren so
   breit wie ihren Mindestinhalt werden: Felder liefen rechts über den Rand, die
   Merkmale standen in einem Rahmen des Browsers, die Beschriftungen sahen je Art
   anders aus (gemessen: 15,2 px fett, 16 px normal, 14,4 px fett). Hier steht
   alles auf einer Spur mit `minmax(0, 1fr)`, `fieldset` und `legend` sind
   zurückgesetzt, alle Beschriftungen und Gruppentitel haben dieselbe Schrift
   (14 px, 500).
   -------------------------------------------------------------------------- */

.map-modal .list-filter--panel > .list-filter__body {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--space-4);
    overflow-x: hidden;
}

.map-modal .list-filter--panel .formbody {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.map-modal .list-filter--panel .widget {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
}

.map-modal .list-filter--panel :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, .pick__trigger) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.map-modal .list-filter--panel fieldset {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.map-modal .list-filter--panel :is(.widget > label, .pick__label, legend, .distances-filter__label) {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.map-modal .list-filter--panel fieldset span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
}

.map-modal .list-filter--panel fieldset span > label {
    font-size: 0.875rem;
    font-weight: 400;
}

.map-modal .list-filter--panel .widget-checkbox .checkbox_container {
    gap: var(--space-1);
}

.map-modal .list-filter--panel .widget-checkbox .checkbox_container > span {
    min-height: 24px;
    gap: var(--space-2);
}

.map-modal .list-filter--panel fieldset.checkbox_container > legend {
    margin-bottom: var(--space-1);
}

.map-modal .list-filter--panel .widget-distances .distances-filter {
    gap: var(--space-4);
}

.map-modal .list-filter--panel .widget-distances .distances-filter__row {
    gap: var(--space-1);
}