@extends('layouts.tailwind',['container_class'=>'container-fluid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8','header_right_menu'=>true])

@push('css')
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                    colors: {
                        brand: {
                            50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',
                            400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',
                            800:'#3730a3',900:'#312e81',950:'#1e1b4b',
                        },
                    },
                    boxShadow: {
                        'card':'0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06)',
                        'card-hover':'0 10px 20px -5px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05)',
                        'pop':'0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
                    },
                },
            },
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="{{ asset('dist/frontend/module/hotel/css/hotel.css?_ver='.config('app.asset_version')) }}" rel="stylesheet">

    <style>
        [x-cloak] { display: none !important; }
        html { scroll-behavior: smooth; }

        #mapcc, #bravo_results_map { height: 100%; min-height: 100%; width: 100%; }

        .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .thin-scroll::-webkit-scrollbar-track { background: transparent; }
        .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .bravo_topbar, .bravo_footer { display: none; }

        body.modal-open {
            overflow: hidden; position: fixed; inset: 0; width: 100%;
        }

        .thin-scroll, .mobile-search-scroll, .mobile-drawer-scroll {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .mobile-full-height {
            height: 100vh; height: 100dvh; max-height: 100dvh;
        }

        /* ---- Flatpickr brand theme ---- */
        .flatpickr-calendar {
            width: 340px !important; padding: 0 !important;
            border-radius: 20px !important;
            box-shadow: 0 24px 48px -12px rgba(15,23,42,0.20), 0 8px 16px -8px rgba(15,23,42,0.10) !important;
            border: 1px solid #e2e8f0 !important; margin-top: 12px !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            background: #fff !important; overflow: hidden;
        }
        .flatpickr-calendar.multiMonth,
        .flatpickr-calendar.rangeMode { width: 700px !important; }
        .flatpickr-calendar::before, .flatpickr-calendar::after,
        .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
        .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after {
            display: none !important; content: none !important;
        }
        .flatpickr-months {
            display: flex; align-items: center; position: relative;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            padding: 10px; gap: 6px;
        }
        .flatpickr-months .flatpickr-month {
            flex: 1 1 0; height: 36px; color: #fff; fill: #fff;
            display: flex; align-items: center; justify-content: center;
            background: transparent;
        }
        .flatpickr-months .flatpickr-prev-month,
        .flatpickr-months .flatpickr-next-month {
            position: static !important; top: auto !important; right: auto !important; left: auto !important;
            width: 36px; height: 36px; padding: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 10px; color: #fff; fill: #fff;
            transition: background .15s; z-index: 2;
        }
        .flatpickr-months .flatpickr-prev-month:hover,
        .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,0.16); }
        .flatpickr-months .flatpickr-prev-month svg,
        .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; }

        .flatpickr-current-month {
            width: 100%; height: 100%; padding: 0;
            font-size: 15px; font-weight: 700; letter-spacing: .01em;
            color: #fff; display: flex; align-items: center; justify-content: center; gap: 3px;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months {
            appearance: none; background: transparent !important; border: none;
            color: #fff !important; font-weight: 700; font-size: 15px;
            font-family: inherit; padding: 2px 4px; border-radius: 6px;
            cursor: pointer; transition: background .15s;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,0.14) !important; }
        .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: #1e293b; font-weight: 500; }
        .flatpickr-current-month .numInputWrapper { width: 56px; }
        .flatpickr-current-month .numInputWrapper:hover { background: rgba(255,255,255,0.14) !important; border-radius: 6px; }
        .flatpickr-current-month .numInputWrapper span { border: none; }
        .flatpickr-current-month .numInputWrapper span::after,
        .flatpickr-current-month .numInputWrapper span::before { border-color: #fff transparent transparent; }
        .flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 700; font-size: 15px; font-family: inherit; padding: 0 4px; }

        .flatpickr-innerContainer { padding: 14px 14px 12px; background: #fff; }
        .flatpickr-rContainer { width: 100%; }
        .flatpickr-weekdays { display: flex; align-items: center; margin-bottom: 6px; height: auto; }
        .flatpickr-weekdaycontainer { display: flex; flex: 1 1 0; gap: 4px; justify-content: flex-start; padding: 0; }
        .flatpickr-weekdays .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer { border-left: 12px solid transparent; }
        .flatpickr-weekday {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            background: transparent; color: #94a3b8; font-weight: 700; font-size: 10.5px;
            letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 30px;
        }
        .flatpickr-days { border: none !important; display: flex; justify-content: space-between; align-items: flex-start; padding: 0; }
        .flatpickr-days .dayContainer + .dayContainer { border-left: 12px solid transparent; }
        .dayContainer { display: flex; flex-wrap: wrap; padding: 0; gap: 4px; justify-content: flex-start; align-content: flex-start; }
        .flatpickr-day {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            height: 40px; line-height: 40px; margin: 0; padding: 0;
            border: none !important; border-radius: 10px;
            font-weight: 500; font-size: 13.5px; color: #1e293b;
            background: transparent; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-variant-numeric: tabular-nums;
        }
        .flatpickr-day:hover { background: #eef2ff; color: #4f46e5; }
        .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1; font-weight: 400; }
        .flatpickr-day.today { border: 1.5px solid #a5b4fc !important; font-weight: 700; color: #4f46e5; }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
            border-color: #4f46e5 !important; color: #fff !important;
            font-weight: 700; box-shadow: 0 4px 12px rgba(79,70,229,.35); z-index: 2;
        }
        .flatpickr-day.inRange { background: #e0e7ff; border-color: #e0e7ff; color: #4338ca; border-radius: 0; }
        .flatpickr-day.startRange { border-radius: 10px 0 0 10px; }
        .flatpickr-day.endRange   { border-radius: 0 10px 10px 0; }
        .flatpickr-day.startRange.endRange { border-radius: 10px; }
        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #e2e8f0; cursor: not-allowed; }
        @media (max-width: 767px) {
            .flatpickr-calendar, .flatpickr-calendar.multiMonth, .flatpickr-calendar.rangeMode {
                width: 100% !important; max-width: 360px !important; border-radius: 16px !important;
            }
            .flatpickr-day { height: 38px; line-height: 38px; font-size: 13px; }
            .flatpickr-weekday { line-height: 26px; font-size: 10px; }
            .flatpickr-innerContainer { padding: 12px 10px 10px; }
        }

        input[type="range"].brand-slider {
            -webkit-appearance: none; appearance: none;
            height: 4px; background: #e2e8f0; border-radius: 9999px; outline: none;
        }
        input[type="range"].brand-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }
        input[type="range"].brand-slider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }

        .card-media { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
        .group:hover .card-media { transform: scale(1.05); }

        .fade-in { animation: fadeIn .3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

        .shimmer {
            background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.6s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        .chip-enter { animation: chipIn .2s ease; }
        @keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

        #results img[data-src] {
            background-color: #f1f5f9;
            background-image: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.2s ease-in-out infinite;
        }

        /* Map panel sizing guard – keep Leaflet/Google from collapsing */
        #bravo_results_map { position: relative; }
        .leaflet-container { width: 100% !important; height: 100% !important; }
    </style>
@endpush

@section('content')
@php
    $locale      = session('website_locale', app()->getLocale());
    $searchRoute = 'hotel.search.' . $locale;
    $priceBounds = $hotel_min_max_price ?? [0, 500];

    // ── Map positioning: request wins, otherwise Germany default ──
    $reqLat      = request('map_lat');
    $reqLng      = request('map_lng');
    $defaultLat  = $reqLat ? (float) $reqLat : 51.1657;
    $defaultLng  = $reqLng ? (float) $reqLng : 10.4515;
    $defaultZoom = $reqLat ? 11 : 6;

    // ── Markers payload for the map ──
    $markersPayload = $markers ?? [];
@endphp

<div
    x-data="campsiteSearch({
        initial: {
            city_name:   {{ json_encode(request('city_name', '')) }},
            location_id: {{ json_encode(request('location_id', '')) }},
            map_lat:     {{ json_encode(request('map_lat', '')) }},
            map_lng:     {{ json_encode(request('map_lng', '')) }},
            start:       {{ json_encode(request('start', '')) }},
            end:         {{ json_encode(request('end', '')) }},
            adults:      {{ (int) request('adults', 2) }},
            children:    {{ (int) request('children', 0) }},
            pets:        {{ (int) request('pets', 0) }},
            price_min:   {{ (int) request('price_min', $priceBounds[0] ?? 0) }},
            price_max:   {{ (int) request('price_max', $priceBounds[1] ?? 500) }},
            orderby:     {{ json_encode(request('orderby', '')) }},
            attrs:       {{ json_encode((object) request('attrs', [])) }}
        },
        minPrice: {{ (int) ($priceBounds[0] ?? 0) }},
        maxPrice: {{ (int) ($priceBounds[1] ?? 500) }},
        totalResults: {{ $rows->total() }},
        mapLayout: {{ ($layout ?? 'normal') === 'map' ? 'true' : 'false' }},
        defaultLat:  {{ $defaultLat }},
        defaultLng:  {{ $defaultLng }},
        defaultZoom: {{ $defaultZoom }},
        attributes: {{ json_encode(
            ($attributes ?? collect())->map(function ($attr) {
                $tAttr = method_exists($attr, 'translate') ? optional($attr->translate()) : null;
                return [
                    'id'    => (int) $attr->id,
                    'name'  => $tAttr->name ?? $attr->name,
                    'terms' => $attr->terms->map(function ($term) {
                        $tTerm = method_exists($term, 'translate') ? optional($term->translate()) : null;
                        return [
                            'id'    => (int) $term->id,
                            'name'  => $tTerm->name ?? $term->name,
                            'count' => (int) ($term->hotel_count ?? 0),
                        ];
                    })->values()->all(),
                ];
            })->values()->all()
        ) }},
        locale: {{ json_encode(strtolower(substr($locale, 0, 2))) }}
    })"
    x-init="init()"
    x-cloak
    class="min-h-screen bg-slate-50 text-slate-900 antialiased"
    style="font-family: 'Inter', system-ui, sans-serif;"
>
    <h1 class="sr-only">{{ setting_item_with_lang("hotel_page_search_title") }}</h1>

    {{-- ═══════════════════ STICKY HEADER ═══════════════════ --}}
    <header class="sticky top-0 z-40 bg-white border-b border-slate-200/80 shadow-sm">
        <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-3">

            {{-- DESKTOP --}}
            <div class="hidden md:flex items-center gap-3 max-w-4xl mx-auto">

                <button type="button"
                        @click="toggleSidebar()"
                        :class="sidebarOpen
                            ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                            : 'bg-white text-slate-700 border-slate-200 hover:border-slate-400 hover:shadow-card'"
                        class="shrink-0 inline-flex items-center gap-2 px-4 py-3 rounded-full border font-semibold text-sm transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span>Filter</span>
                    <span x-show="appliedCount > 0" x-cloak
                          :class="sidebarOpen ? 'bg-white text-brand-600' : 'bg-brand-600 text-white'"
                          class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[10px] font-bold"
                          x-text="appliedCount"></span>
                </button>

                <form @submit.prevent="applyFilters()"
                      class="flex-1 flex items-center rounded-full border border-slate-200 bg-white hover:shadow-card focus-within:shadow-card transition-shadow">

                    <div class="flex-1 min-w-0 px-6 py-3 border-r border-slate-200 relative"
                         @click.outside="locationOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Standort</label>
                        <input type="text"
                               x-model="filters.city_name"
                               @input.debounce.350ms="_locationPicked = false; searchLocations()"
                               @focus="if (locationSuggestions.length) locationOpen = true"
                               @keydown.arrow-down.prevent="moveHighlight(1)"
                               @keydown.arrow-up.prevent="moveHighlight(-1)"
                               @keydown.enter.prevent="if (locationOpen && locationHighlight >= 0) { selectLocation(locationSuggestions[locationHighlight]); } else { applyFilters(); }"
                               @keydown.escape="locationOpen = false"
                               placeholder="Stadt oder Region"
                               autocomplete="off"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate">

                        <svg x-show="locationLoading" x-cloak
                             class="w-3.5 h-3.5 absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                             fill="none" viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                            <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                        </svg>

                        <div x-show="locationOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute left-0 right-0 top-full mt-3 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden z-[60]">

                            <template x-for="(s, idx) in locationSuggestions" :key="idx">
                                <button type="button"
                                        @click="selectLocation(s)"
                                        @mouseenter="locationHighlight = idx"
                                        class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0"
                                        :class="locationHighlight === idx ? 'bg-brand-50' : 'hover:bg-slate-50'">
                                    <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"
                                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                        <circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                        <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                                    </div>
                                    <span class="text-[10px] uppercase tracking-wider text-slate-400 font-bold shrink-0 mt-0.5"
                                          x-text="s.countrycode"></span>
                                </button>
                            </template>

                            <div x-show="!locationLoading && locationSuggestions.length === 0" x-cloak
                                 class="px-4 py-3 text-xs text-slate-500">
                                Keine Orte gefunden
                            </div>

                            <div class="px-4 py-2 border-t border-slate-100 bg-slate-50 text-[10px] text-slate-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                                </svg>
                                Suche powered by OpenStreetMap
                            </div>
                        </div>
                    </div>

                    <div class="flex-[1.35] min-w-0 px-6 py-3 relative border-r border-slate-200">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Reisezeitraum</label>
                        <input type="text" x-ref="desktopDateRange" placeholder="Daten wählen"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate cursor-pointer">
                        <p x-show="nights > 0" x-cloak
                           class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 bg-brand-50 text-brand-600 px-2 py-0.5 rounded-full text-[10px] font-semibold">
                            <span x-text="nights"></span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                            </svg>
                        </p>
                    </div>

                    <div class="flex-1 min-w-0 px-6 py-3 relative" @click.outside="guestsOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Gäste</label>
                        <button type="button" @click="guestsOpen = !guestsOpen"
                                class="w-full text-left text-sm font-medium text-slate-700 truncate flex items-center justify-between gap-2">
                            <span x-text="guestSummary" class="truncate"></span>
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0 transition-transform"
                                 :class="guestsOpen && 'rotate-180'"
                                 fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </button>

                        <div x-show="guestsOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-pop border border-slate-200 p-5 space-y-4 z-50 text-left">
                            <template x-for="row in guestRows" :key="row.key">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                        <p class="text-xs text-slate-500" x-text="row.hint"></p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <button type="button" @click="decGuest(row.key)"
                                                :disabled="filters[row.key] <= row.min"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                        <span class="w-5 text-center text-sm font-semibold text-slate-900" x-text="filters[row.key]"></span>
                                        <button type="button" @click="incGuest(row.key)"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="pr-2 pl-3">
                        <button type="submit"
                                class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-sm shadow-sm transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                            </svg>
                            <span>Suchen</span>
                        </button>
                    </div>
                </form>
            </div>

            {{-- MOBILE --}}
            <div class="md:hidden flex items-center gap-2">
                <button @click="openMobileSearch()"
                        class="flex-1 flex items-center gap-3 px-4 py-3 rounded-full border border-slate-200 bg-white hover:shadow-card transition-shadow">
                    <div class="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0 text-left">
                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="mobileTriggerPrimary"></p>
                        <p class="text-xs text-slate-500 truncate" x-text="mobileTriggerSecondary"></p>
                    </div>
                </button>

                <button type="button"
                        @click="mobileFiltersOpen = true"
                        :class="appliedCount > 0
                            ? 'bg-brand-600 text-white border-brand-600'
                            : 'bg-white text-slate-700 border-slate-200'"
                        class="relative shrink-0 w-12 h-12 rounded-full border flex items-center justify-center transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span x-show="appliedCount > 0" x-cloak
                          class="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[9px] font-bold ring-2 ring-white"
                          x-text="appliedCount"></span>
                </button>
            </div>
        </div>
    </header>

    {{-- ═══════════════════ MAIN LAYOUT ═══════════════════ --}}
    <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-6">
        <div :style="layoutStyle" class="gap-8">

            {{-- SIDEBAR --}}
            <aside class="hidden" :class="sidebarOpen ? 'lg:block' : 'lg:hidden'">
                <div class="sticky top-[110px] max-h-[calc(100vh-130px)] overflow-y-auto thin-scroll pr-1">

                    <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-200">
                        <div class="flex items-center gap-2">
                            <h2 class="text-base font-bold text-slate-900">Filter</h2>
                            <span x-show="appliedCount > 0" x-cloak
                                  class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-brand-600 text-white text-[10px] font-bold"
                                  x-text="appliedCount"></span>
                        </div>
                        <button x-show="appliedCount > 0" x-cloak
                                @click="resetFilters()"
                                class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition">
                            Alle löschen
                        </button>
                    </div>

                    <div x-show="appliedCount > 0" x-cloak class="flex flex-wrap gap-1.5 mb-4 pb-4 border-b border-slate-200">
                        <template x-for="chip in activeChips" :key="chip.key">
                            <button @click="removeChip(chip)"
                                    class="chip-enter inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold hover:bg-brand-100 transition">
                                <span x-text="chip.label"></span>
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path d="M18 6 6 18M6 6l12 12"/>
                                </svg>
                            </button>
                        </template>
                    </div>

                    {{-- Price --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                        <div class="flex items-center gap-2 mb-3">
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="filters.price_max"
                                           x-model.number="filters.price_min"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                            <div class="text-slate-300 pt-5">—</div>
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="maxPrice"
                                           x-model.number="filters.price_max"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                        </div>
                        <input type="range" class="brand-slider w-full"
                               :min="minPrice" :max="maxPrice" step="5"
                               x-model.number="filters.price_max"
                               @input.debounce.500ms="applyFilters()">
                        <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                            <span x-text="minPrice + ' €'"></span>
                            <span x-text="maxPrice + ' €'"></span>
                        </div>
                    </section>

                    {{-- Guests --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                        <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                            <button type="button"
                                    @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                    :disabled="filters.adults <= 1"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center text-lg font-medium transition">−</button>
                            <div class="flex-1 text-center">
                                <span class="text-lg font-bold text-slate-900" x-text="filters.adults"></span>
                                <p class="text-[10px] text-slate-500 font-medium" x-text="filters.adults === 1 ? 'Person' : 'Personen'"></p>
                            </div>
                            <button type="button"
                                    @click="filters.adults++; applyFilters()"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow flex items-center justify-center text-lg font-medium transition">+</button>
                        </div>
                    </section>

                    {{-- Attributes --}}
                    @if(isset($attributes) && $attributes->count())
                        <section class="pb-5 mb-5 border-b border-slate-200" x-data="{ open: true }">
                            <button @click="open = !open"
                                    class="w-full flex justify-between items-center mb-3 group">
                                <h3 class="text-sm font-bold text-slate-900 group-hover:text-brand-600 transition">Ausstattung & Typ</h3>
                                <svg class="w-4 h-4 text-slate-400 transition-transform"
                                     :class="open && 'rotate-180'"
                                     fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </button>
                            <div x-show="open" x-collapse>
                                <div class="space-y-5 max-h-[420px] overflow-y-auto thin-scroll pr-1">
                                    @foreach($attributes as $attr)
                                        @if($attr->terms->count())
                                            @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                            <div>
                                                <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                                <div class="flex flex-wrap gap-1.5 px-2.5">
                                                    @foreach($attr->terms as $term)
                                                        @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                        <button type="button"
                                                                @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                                :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                                    ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                            <span>{{ __($termName) }}</span>
                                                            @if(!empty($term->hotel_count))
                                                                <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                            @endif
                                                        </button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </section>
                    @endif

                    <label class="flex items-center gap-3 px-2.5 py-2 rounded-lg hover:bg-slate-100 cursor-pointer transition">
                        <input type="checkbox"
                               :checked="filters.pets > 0"
                               @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                               class="rounded border-slate-300 text-brand-600 focus:ring-brand-500 focus:ring-offset-0">
                        <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                    </label>
                </div>
            </aside>

            {{-- ═══════════════════ RESULTS COLUMN ═══════════════════ --}}
            <main class="min-w-0">

                <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
                    <div>
                        <p class="text-sm text-slate-600">
                            <span class="font-bold text-slate-900" x-text="totalResults"></span>
                            <span x-text="totalResults === 1 ? 'Campsite gefunden' : 'Campsites gefunden'"></span>
                            <template x-if="nights > 0">
                                <span class="text-slate-500">
                                    <span class="text-slate-400"> · </span>
                                    <span x-text="nights"></span>
                                    <svg class="w-3.5 h-3.5 inline-block -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                                    </svg>
                                </span>
                            </template>
                        </p>
                        <p class="text-xs text-slate-500 mt-0.5">Alle Preise pro Nacht inkl. MwSt.</p>
                    </div>

                    <div class="flex items-center gap-2">
                        <div class="inline-flex items-center p-1 bg-slate-100 rounded-xl">
                            <button type="button" @click="setView('list')"
                                    :class="isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="isListView"
                                    aria-label="{{ __('Listenansicht') }}"
                                    title="{{ __('Liste') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M4 6h16M4 12h16M4 18h16"/>
                                </svg>
                            </button>
                            <button type="button" @click="setView('grid')"
                                    :class="!isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="!isListView"
                                    aria-label="{{ __('Rasteransicht') }}"
                                    title="{{ __('Raster') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="14" width="7" height="7" rx="1.5"/>
                                </svg>
                            </button>
                        </div>

                        <button @click="toggleMap()"
                                :class="mapOpen
                                    ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'"
                                class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border text-sm font-semibold transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M9 4 3 7v13l6-3 6 3 6-3V4l-6 3-6-3z"/>
                                <path d="M9 4v13M15 7v13"/>
                            </svg>
                            <span class="hidden sm:inline" x-text="mapOpen ? 'Karte ausblenden' : 'Karte anzeigen'"></span>
                            <span class="sm:hidden">Karte</span>
                        </button>

                        <select x-model="filters.orderby" @change="applyFilters()"
                                class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-400 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
                            <option value="">Empfohlen</option>
                            <option value="price_low_high">Preis aufsteigend</option>
                            <option value="price_high_low">Preis absteigend</option>
                            <option value="rate_high_low">Beste Bewertung</option>
                        </select>
                    </div>
                </div>

                {{-- Loading skeleton --}}
                <div x-show="loading" :class="gridCols" class="grid gap-x-5 gap-y-8">
                    <template x-for="i in 8" :key="i">
                        <div>
                            <div class="aspect-[4/3] rounded-2xl shimmer"></div>
                            <div class="mt-3.5 h-4 rounded shimmer w-3/4"></div>
                            <div class="mt-2.5 h-3 rounded shimmer w-1/2"></div>
                            <div class="mt-2 h-3 rounded shimmer w-1/3"></div>
                            <div class="mt-3 pt-3 border-t border-slate-100">
                                <div class="h-4 rounded shimmer w-1/3"></div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Results --}}
                <div x-show="!loading" id="results" :class="gridCols" class="grid gap-x-5 gap-y-8">

                    {{-- Map payload rides along on every AJAX response --}}
                    <div id="bravo-map-markers-data"
                         data-markers="{{ json_encode($markersPayload, JSON_HEX_APOS | JSON_HEX_QUOT) }}"
                         data-lat="{{ $defaultLat }}"
                         data-lng="{{ $defaultLng }}"
                         data-zoom="{{ $defaultZoom }}"
                         class="hidden" aria-hidden="true"></div>

                    <div id="price-bounds"
                         data-min="{{ (int) ($priceBounds[0] ?? 0) }}"
                         data-max="{{ (int) ($priceBounds[1] ?? 500) }}"
                         class="hidden" aria-hidden="true"></div>

                    @forelse($rows as $row)
                        @php
                            $translation = $row->translate();
                            $detailUrl   = $row->getDetailUrl();
                            $schemaName  = $translation->title ?? $row->title ?? 'Campingplatz';

                            $location = !empty($row->location) ? $row->location->translate() : null;

                            $countryCode = !empty($row->country_code) ? strtoupper($row->country_code) : null;
                            $flagUrl     = $countryCode
                                ? get_public_url() . 'flags/' . strtolower($countryCode) . '.png'
                                : null;

                            $reviewData    = null;
                            $score_total   = null;
                            $total_reviews = 0;
                            if (setting_item('hotel_enable_review')) {
                                $reviewData    = $row->getScoreReview();
                                $score_total   = $reviewData['score_total']  ?? null;
                                $total_reviews = $reviewData['total_review'] ?? 0;
                            } else {
                                $score_total   = $row->review_score  ?? null;
                                $total_reviews = $row->reviews_count ?? 0;
                            }

                            $isWished         = $row->isWishList();
                            $termsByAttribute = $row->getAttributeInListingPage()
                                ? $row->termsByAttributeInListingPage
                                : collect();

                            $schema = [
                                '@context' => 'https://schema.org',
                                '@type'    => 'Campground',
                                '@id'      => $detailUrl . '#campground',
                                'name'     => $schemaName,
                                'url'      => $detailUrl,
                            ];

                            $distanceRaw = $row->distance ?? null; // metres? km? — see note below
                            $distanceKm  = null;
                            if ($distanceRaw !== null) {
                                // If your app stores distance in metres, convert. If already km, drop the /1000.
                                $distanceKm = distanceRaw;
                            }
                            if ($distanceKm !== null) {
                                $distanceText = $distanceKm >= 1
                                    ? number_format($distanceKm, 0, ',', '.')        // ≥ 1 km → no decimals
                                    : number_format($distanceKm, 2, ',', '.');       // < 1 km → 2 decimals
                            }
                        @endphp

                        <a href="{{ $detailUrl }}"
                           class="group relative block focus:outline-none fade-in"
                           data-listing-id="{{ $row->id }}"
                           @mouseenter="highlightMarker({{ $row->id }})"
                           x-data="{ fav: {{ $isWished ? 'true' : 'false' }} }">

                            <script type="application/ld+json">
                                {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
                            </script>

                            <div class="relative bg-white rounded-2xl overflow-hidden border border-slate-200/70
                                        shadow-card group-hover:shadow-card-hover group-hover:border-slate-300
                                        transition-all duration-300"
                                 :class="isListView
                                    ? 'flex flex-row gap-3 sm:gap-4 p-2 sm:p-3'
                                    : 'flex flex-col'">

                                {{-- Image --}}
                                <div class="relative overflow-hidden bg-slate-100 shrink-0"
                                     :class="isListView
                                        ? 'w-32 sm:w-48 md:w-56 aspect-[4/3] rounded-xl'
                                        : 'aspect-[4/3] w-full'">

                                    {!! get_image_tag_url(
                                        $row->image_id ?? '0.webp',
                                        'medium',
                                        [
                                            'class' => 'card-media absolute inset-0 w-full h-full object-cover lazyload',
                                            'alt'   => $schemaName,
                                            'sku'   => $row->sku,
                                        ]
                                    ) !!}

                                    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/30 to-transparent pointer-events-none"></div>

                                    <div class="absolute top-2 left-2 sm:top-3 sm:left-3 flex flex-wrap gap-1.5 max-w-[70%]">
                                        @if($row->is_featured)
                                            <span class="inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24"><path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/></svg>
                                                Top
                                            </span>
                                        @endif
                                        @if($row->discount_percent)
                                            <span class="bg-emerald-500 text-white text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm">
                                                {{ $row->discount_percent }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="absolute top-2 right-2 sm:top-3 sm:right-3 flex items-center gap-1.5">
                                        @if($row->is_instant)
                                            <span class="hidden sm:inline-flex items-center gap-1 bg-brand-600/95 backdrop-blur-md text-white text-[10px] font-extrabold uppercase tracking-wider px-2.5 py-1.5 rounded-full shadow-sm ring-1 ring-white/20">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>
                                                Sofort
                                            </span>
                                        @endif
                                        <button type="button"
                                                @click.prevent.stop="fav = !fav; toggleFavorite({{ $row->id }}, $event)"
                                                :aria-pressed="fav"
                                                aria-label="{{ __('Zu Favoriten hinzufügen') }}"
                                                class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/95 backdrop-blur-md hover:bg-white flex items-center justify-center shadow-sm ring-1 ring-black/5 hover:scale-110 active:scale-95 transition-transform">
                                            <svg class="w-4 h-4 sm:w-[18px] sm:h-[18px] transition-colors"
                                                 :class="fav ? 'fill-rose-500 stroke-rose-500' : 'fill-none stroke-slate-700'"
                                                 stroke-width="2" viewBox="0 0 24 24">
                                                <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8Z"/>
                                            </svg>
                                        </button>
                                    </div>

                                    @if($row->star_rate)
                                        <div class="absolute bottom-2 left-2 sm:bottom-3 sm:left-3 inline-flex items-center gap-0.5 bg-white/95 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full shadow-sm ring-1 ring-black/5"
                                             aria-label="{{ $row->star_rate }} stars">
                                            @for($star = 1; $star <= $row->star_rate; $star++)
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                                                    <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                    @endif

                                    @if($score_total !== null && $total_reviews > 0)
                                        <div class="absolute bottom-2 right-2 sm:bottom-3 sm:right-3 inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[11px] sm:text-xs font-bold px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                            <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-500 fill-current" viewBox="0 0 24 24">
                                                <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                            </svg>
                                            <span>{{ number_format((float) $score_total, 1) }}</span>
                                            <span class="text-slate-400 font-medium hidden sm:inline">({{ $total_reviews }})</span>
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="flex flex-col min-w-0 flex-1"
                                     :class="isListView ? 'py-1 pr-1' : 'p-4'">

                                    <h3 class="font-bold text-slate-900 leading-tight line-clamp-2 min-w-0
                                               group-hover:text-brand-700 transition-colors"
                                        :class="isListView ? 'text-[14px] sm:text-[15px]' : 'text-[15px]'">
                                        <span class="inline-flex items-start gap-1.5">
                                            @php
                                                $iso2 = strtolower($countryCode);
                                                if ($iso2 === 'uk') $iso2 = 'gb';
                                            @endphp

                                            <img src="https://flagcdn.com/w40/{{ $iso2 }}.png"
                                                 srcset="https://flagcdn.com/w40/{{ $iso2 }}.png 1x,
                                                         https://flagcdn.com/w80/{{ $iso2 }}.png 2x"
                                                 alt="{{ $countryCode }}"
                                                 width="20" height="14"
                                                 loading="lazy"
                                                 class="shrink-0 mt-[3px] w-5 h-3.5 object-cover rounded-sm ring-1 ring-black/5">
                                            <span class="line-clamp-2">{{ $schemaName }}</span>
                                        </span>
                                    </h3>

                                    <p class="flex items-center gap-1 text-[12px] sm:text-[13px] text-slate-500 mt-1 truncate">
                                        <svg class="w-3.5 h-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                            <circle cx="12" cy="10" r="3"/>
                                        </svg>
                                        <span class="truncate">
                                            {{strtoupper($countryCode)}} - {{ $location->name ?? '' }}{{ $row->city && $row->city !== ($location->name ?? '') ? ' · ' . $row->city : '' }} @if($distanceKm !== null) {{ $distanceText }} km @endif

                                        </span>
                                    </p>

                                    <div class="mt-2 flex items-center flex-wrap gap-x-3 gap-y-1 text-[11px] sm:text-[12px] text-slate-600">
                                        @if($row->max_guests)
                                            <span class="inline-flex items-center gap-1">
                                                <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                                    <circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                                                </svg>
                                                <span>{{ (int) $row->max_guests }} Gäste</span>
                                            </span>
                                        @endif

                                        @if($termsByAttribute && count($termsByAttribute))
                                            @foreach($termsByAttribute->take(2) as $term)
                                                @php $t = $term->translate(); @endphp
                                                <span class="inline-flex items-center gap-1">
                                                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                        <circle cx="12" cy="12" r="9"/><path d="m5 12 5 5L20 7"/>
                                                    </svg>
                                                    <span class="truncate">{{ $t->name }}</span>
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>

                                    @php
                                        $originalCurrency = strtoupper($row->currency ?: currency_base_code());
                                        $sessionCurrency  = currency_session_code();
                                        $showOriginal     = $originalCurrency !== $sessionCurrency;
                                        $convertedAmount  = convert_currency((float) $row->price, $originalCurrency);
                                        $noDecimalCurrencies = ['HUF','ISK','JPY','KRW','VND','CLP','IDR', 'ALL', 'RSD', 'MKD'];
                                        $originalAmount = number_format(
                                            (float) $row->price,
                                            in_array($originalCurrency, $noDecimalCurrencies, true) ? 0 : 2,
                                            ',',
                                            '.'
                                        );
                                    @endphp

                                    <div class="mt-auto pt-3 border-t border-slate-100"
                                         :class="isListView ? 'mt-2' : ''">
                                        <div class="flex items-end justify-between gap-2">

                                            <div class="flex flex-col min-w-0">
                                                <div class="flex items-baseline gap-1.5 flex-wrap">
                                                    <span class="font-extrabold text-slate-900 leading-none"
                                                          :class="isListView ? 'text-[16px] sm:text-[17px]' : 'text-[17px]'">
                                                        {{ number_format($convertedAmount, 2, ',', '.') }} {{ currency_symbol($sessionCurrency) }}
                                                    </span>
                                                    <span class="text-[11px] sm:text-[12px] text-slate-500 font-medium">/ Nacht</span>
                                                </div>

                                                @if($showOriginal)
                                                    <span class="mt-0.5 text-[11px] text-slate-400 font-medium tabular-nums truncate">
                                                        {{ $originalAmount }} {{ $row->currency }}
                                                    </span>
                                                @endif
                                            </div>

                                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-brand-700 bg-brand-50 group-hover:bg-brand-100 px-2.5 py-1.5 rounded-full transition-colors shrink-0">
                                                Details
                                                <svg class="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="col-span-full py-24 text-center fade-in">
                            <div class="w-24 h-24 mx-auto mb-6 rounded-3xl bg-brand-50 flex items-center justify-center">
                                <svg class="w-11 h-11 text-brand-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-2">Keine Campsites gefunden</h3>
                            <p class="text-slate-500 mb-7 max-w-md mx-auto text-sm leading-relaxed">
                                Wir konnten keine Campingplätze für deine Suche finden. Versuche es mit weniger Filtern oder einem anderen Zeitraum.
                            </p>
                            <button @click="resetFilters()"
                                    class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-lg font-semibold shadow-sm transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
                                </svg>
                                Filter zurücksetzen
                            </button>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if($rows->hasPages())
                    @php
                        $currentPage = $rows->currentPage();
                        $lastPage    = $rows->lastPage();
                        $window      = 1;
                        $pages       = [1];
                        for ($i = max(2, $currentPage - $window); $i <= min($lastPage - 1, $currentPage + $window); $i++) {
                            $pages[] = $i;
                        }
                        if ($lastPage > 1) $pages[] = $lastPage;
                        $pages = array_values(array_unique($pages));
                        sort($pages);
                    @endphp

                    <nav class="mt-14 flex flex-col items-center gap-3" aria-label="Pagination">
                        <ul class="flex items-center justify-center gap-1.5 flex-wrap">
                            <li>
                                @if($rows->onFirstPage())
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                @else
                                    <a href="{{ $rows->previousPageUrl() }}" @click.prevent="goToPage({{ $currentPage - 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </a>
                                @endif
                            </li>

                            @php $prev = 0; @endphp
                            @foreach($pages as $page)
                                @if($prev && $page - $prev > 1)
                                    <li><span class="inline-flex items-center justify-center w-10 h-10 text-slate-400 select-none">…</span></li>
                                @endif
                                <li>
                                    @if($page == $currentPage)
                                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-semibold shadow-sm ring-4 ring-brand-100">{{ $page }}</span>
                                    @else
                                        <a href="{{ $rows->url($page) }}" @click.prevent="goToPage({{ $page }})"
                                           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50 hover:border-slate-300 transition">{{ $page }}</a>
                                    @endif
                                </li>
                                @php $prev = $page; @endphp
                            @endforeach

                            <li>
                                @if($rows->hasMorePages())
                                    <a href="{{ $rows->nextPageUrl() }}" @click.prevent="goToPage({{ $currentPage + 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </a>
                                @else
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                @endif
                            </li>
                        </ul>

                        <p class="text-xs text-slate-500 font-medium">
                            Zeige <span class="text-slate-900 font-semibold">{{ $rows->firstItem() ?? 0 }}</span>–<span class="text-slate-900 font-semibold">{{ $rows->lastItem() ?? 0 }}</span>
                            von <span class="text-slate-900 font-semibold">{{ $rows->total() }}</span> Ergebnissen
                        </p>
                    </nav>
                @endif

                @if(!empty($seo_content))
                    <div class="mt-10 p-4 rounded-2xl bg-white border border-slate-200 blog-post text-slate-700 text-sm leading-relaxed description max-w-none
            [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-12 [&_h2]:mb-4
            [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-gray-900 [&_h3]:mt-8 [&_h3]:mb-3
            [&_p]:my-4 [&_p]:leading-relaxed
            [&_a]:text-blue-600 [&_a]:no-underline hover:[&_a]:underline
            [&_strong]:text-gray-900 [&_strong]:font-semibold
            [&_ul]:my-4 [&_ul]:pl-6 [&_ul]:list-disc
            [&_ol]:my-4 [&_ol]:pl-6 [&_ol]:list-decimal
            [&_li]:my-1
            ">
                        {!! $seo_content !!}
                    </div>
                @endif
            </main>

            {{-- ═══════════════════ MAP PANEL ═══════════════════ --}}
            <div x-show="mapOpen" x-cloak
                 :class="isDesktop
                    ? 'lg:block relative'
                    : 'fixed inset-0 z-50 flex flex-col justify-end'">

                <div x-show="!isDesktop" x-cloak
                     class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
                     @click="mapOpen = false"></div>

                <div :class="isDesktop
                        ? 'lg:sticky lg:top-[110px] h-[calc(100vh-140px)] max-h-[800px] rounded-2xl overflow-hidden border border-slate-200 shadow-card bg-slate-100 flex flex-col'
                        : 'relative bg-white rounded-t-3xl shadow-pop h-[85vh] flex flex-col overflow-hidden'">

                    <div x-show="!isDesktop" x-cloak
                         class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
                        <div>
                            <h3 class="font-bold text-slate-900">Karte</h3>
                            <p class="text-xs text-slate-500"><span x-text="totalResults"></span> Ergebnisse</p>
                        </div>
                        <button @click="mapOpen = false"
                                class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                            <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="flex-1 relative bg-slate-100">
                        <div id="mapcc" class="w-full h-full">
                            <div id="bravo_results_map" class="w-full h-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE SEARCH MODAL ═══════════════════ --}}
    <div x-show="mobileSearchOpen" x-cloak class="md:hidden fixed inset-0 z-[55] bg-white flex flex-col mobile-full-height">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
            <button @click="cancelMobileSearch()"
                    class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <h2 class="font-bold text-slate-900">Suche</h2>
            <button @click="resetMobileDraft()"
                    class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition px-2">
                Zurücksetzen
            </button>
        </div>

        <div class="flex-1 overflow-y-auto thin-scroll mobile-search-scroll">
            <div class="px-5 py-5 border-b border-slate-200 relative" @click.outside="mobileLocationOpen = false">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Standort</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                    <input type="text" x-model="mobileDraft.city_name"
                           @input.debounce.350ms="searchMobileLocations()"
                           @focus="if (mobileLocationSuggestions.length) mobileLocationOpen = true"
                           placeholder="Stadt oder Region eingeben"
                           autocomplete="off" inputmode="text"
                           class="w-full pl-12 pr-10 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">

                    <svg x-show="mobileLocationLoading" x-cloak
                         class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                         fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                        <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                    </svg>
                </div>

                <div x-show="mobileLocationOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="mt-2 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden max-h-[280px] overflow-y-auto thin-scroll z-20 relative">
                    <template x-for="(s, idx) in mobileLocationSuggestions" :key="idx">
                        <button type="button" @click="selectMobileLocation(s)"
                                class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0 hover:bg-slate-50 active:bg-brand-50">
                            <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                            </div>
                        </button>
                    </template>
                </div>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Reisezeitraum</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="3" y="4" width="18" height="18" rx="2"/>
                        <path d="M16 2v4M8 2v4M3 10h18"/>
                    </svg>
                    <input type="text" x-ref="mobileDateRange" placeholder="Anreise – Abreise"
                           class="w-full pl-12 pr-4 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none cursor-pointer">
                </div>
                <p x-show="mobileDraft.nights > 0" x-cloak class="text-xs text-brand-600 font-semibold mt-2 pl-1 inline-flex items-center gap-1">
                    <span x-text="mobileDraft.nights"></span>
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                    </svg>
                </p>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Gäste</label>
                <div class="space-y-4">
                    <template x-for="row in guestRows" :key="row.key">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                <p class="text-xs text-slate-500" x-text="row.hint"></p>
                            </div>
                            <div class="flex items-center gap-3">
                                <button type="button" @click="mobileDecGuest(row.key)"
                                        :disabled="mobileDraft[row.key] <= row.min"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                <span class="w-6 text-center text-sm font-semibold text-slate-900" x-text="mobileDraft[row.key]"></span>
                                <button type="button" @click="mobileIncGuest(row.key)"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <label class="flex items-center justify-between px-5 py-5 border-b border-slate-200 cursor-pointer">
                <div>
                    <p class="font-semibold text-sm text-slate-900">Haustiere erlaubt</p>
                    <p class="text-xs text-slate-500 mt-0.5">Nur Campsites mit Haustiererlaubnis</p>
                </div>
                <div class="relative shrink-0 ml-4">
                    <input type="checkbox" :checked="mobileDraft.pets_allowed > 0"
                           @change="mobileDraft.pets_allowed = $event.target.checked ? 1 : 0"
                           class="sr-only peer">
                    <div class="w-12 h-7 rounded-full bg-slate-200 peer-checked:bg-brand-600 transition-colors"></div>
                    <div class="absolute top-1 left-1 w-5 h-5 rounded-full bg-white shadow peer-checked:translate-x-5 transition-transform"></div>
                </div>
            </label>
        </div>

        <div class="shrink-0 border-t border-slate-200 p-4 bg-white safe-bottom">
            <button @click="applyMobileSearch()"
                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-base shadow-sm transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                </svg>
                Ergebnisse anzeigen
            </button>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE FILTER DRAWER ═══════════════════ --}}
    <div x-show="mobileFiltersOpen" x-cloak class="fixed inset-0 z-50 lg:hidden">
        <div x-show="mobileFiltersOpen" x-transition.opacity
             @click="mobileFiltersOpen = false"
             class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

        <div x-show="mobileFiltersOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-y-full"
             x-transition:enter-end="translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-y-0"
             x-transition:leave-end="translate-y-full"
             class="absolute bottom-0 inset-x-0 bg-white rounded-t-3xl max-h-[88vh] flex flex-col">

            <div class="flex-shrink-0 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <h2 class="font-bold text-lg text-slate-900">Filter</h2>
                    <span x-show="appliedCount > 0" x-cloak
                          class="inline-flex items-center justify-center min-w-[22px] h-6 px-2 rounded-full bg-brand-600 text-white text-xs font-bold"
                          x-text="appliedCount"></span>
                </div>
                <button @click="mobileFiltersOpen = false"
                        class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto thin-scroll mobile-drawer-scroll p-6 space-y-6">
                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                    <div class="flex items-center gap-2 mb-3">
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                            <input type="number" min="0" x-model.number="filters.price_min" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                            <input type="number" min="0" x-model.number="filters.price_max" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                    </div>
                    <input type="range" class="brand-slider w-full"
                           :min="minPrice" :max="maxPrice" step="5"
                           x-model.number="filters.price_max"
                           @input.debounce.500ms="applyFilters()">
                    <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                        <span x-text="minPrice + ' €'"></span>
                        <span x-text="maxPrice + ' €'"></span>
                    </div>
                </section>

                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                    <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                        <button type="button" @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                :disabled="filters.adults <= 1"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm disabled:opacity-40 flex items-center justify-center text-lg">−</button>
                        <div class="flex-1 text-center">
                            <span class="text-xl font-bold text-slate-900" x-text="filters.adults"></span>
                        </div>
                        <button type="button" @click="filters.adults++; applyFilters()"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center text-lg">+</button>
                    </div>
                </section>

                @if(isset($attributes) && $attributes->count())
                    <section>
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Ausstattung & Typ</h3>
                        <div class="space-y-5 max-h-[380px] overflow-y-auto thin-scroll pr-1">
                            @foreach($attributes as $attr)
                                @if($attr->terms->count())
                                    @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                    <div>
                                        <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                        <div class="flex flex-wrap gap-1.5 px-2.5">
                                            @foreach($attr->terms as $term)
                                                @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                <button type="button"
                                                        @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                        :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                            ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                            : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                    <span>{{ __($termName) }}</span>
                                                    @if(!empty($term->hotel_count))
                                                        <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                    @endif
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>
                @endif

                <label class="flex items-center gap-3 px-2.5 py-2.5 rounded-lg hover:bg-slate-100 cursor-pointer">
                    <input type="checkbox" :checked="filters.pets > 0"
                           @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                           class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                    <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                </label>
            </div>

            <div class="flex-shrink-0 border-t border-slate-200 p-4 flex gap-3 safe-bottom">
                <button @click="resetFilters()"
                        class="flex-1 border border-slate-300 rounded-lg py-3 font-semibold text-sm text-slate-700 hover:bg-slate-50 transition">
                    Zurücksetzen
                </button>
                <button @click="mobileFiltersOpen = false"
                        class="flex-1 bg-brand-600 hover:bg-brand-700 text-white rounded-lg py-3 font-semibold text-sm transition">
                    <span x-show="totalResults > 0" x-cloak>
                        <span x-text="totalResults"></span> Ergebnisse
                    </span>
                    <span x-show="totalResults === 0" x-cloak>Anwenden</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    {!! App\Helpers\MapEngine::scripts() !!}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>

    <script>
        var bravo_map_data = {
            markers: {!! json_encode($markersPayload ?? []) !!},
            map_lat_default: {{ $defaultLat }},
            map_lng_default: {{ $defaultLng }},
            map_zoom_default: {{ $defaultZoom }},
        };
    </script>

    <script src="{{ asset('js/filter-map.js?_ver='.config('app.asset_version')) }}"></script>

    <script>
        function campsiteSearch(config) {
            return {
                filters: Object.assign({
                    city_name: '', location_id: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0,
                    price_min: 0, price_max: 500, orderby: '',
                    attrs: {},
                    map_lat: '', map_lng: '',
                }, config.initial || {}),

                minPrice: config.minPrice,
                maxPrice: config.maxPrice,
                totalResults: config.totalResults,
                layout: config.mapLayout ? 'map' : 'list',
                loading: false,
                guestsOpen: false,

                sidebarOpen: false,
                mapOpen: false,
                mobileFiltersOpen: false,
                mobileSearchOpen: false,
                view: 'grid',

                isDesktop: window.matchMedia('(min-width: 1024px)').matches,
                attributes: config.attributes || [],
                locale: config.locale || 'en',

                defaultLat:  config.defaultLat  || 51.1657,
                defaultLng:  config.defaultLng  || 10.4515,
                defaultZoom: config.defaultZoom || 6,

                _desktopFP: null,
                _mobileFP: null,
                _resizeHandler: null,
                _scrollY: 0,
                _locationPicked: false,

                locationSuggestions: [],
                locationLoading: false,
                locationOpen: false,
                locationHighlight: -1,
                locationAbort: null,

                mobileLocationSuggestions: [],
                mobileLocationLoading: false,
                mobileLocationOpen: false,
                mobileLocationAbort: null,

                /* ══════════════ View state ══════════════ */
                get isListView() { return this.view === 'list'; },

                get gridCols() {
                    if (this.isListView) return 'grid-cols-1';

                    const both = this.sidebarOpen && this.mapOpen;
                    const one  = (this.sidebarOpen || this.mapOpen) && !both;

                    if (both) return 'grid-cols-1 sm:grid-cols-2';
                    if (one)  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
                    return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
                },

                setView(v) {
                    if (v !== 'grid' && v !== 'list') return;
                    this.view = v;
                    try { localStorage.setItem('campsiteView', v); } catch (e) {}
                },

                /* ══════════════ Lazy-load reinit ══════════════ */
                reinitLazyLoad() {
                    try {
                        if (window.lazySizes && typeof window.lazySizes.init === 'function') window.lazySizes.init();
                        if (window.lazyLoadInstance && typeof window.lazyLoadInstance.update === 'function') window.lazyLoadInstance.update();
                        if (typeof window.lozad === 'function') window.lozad('#results img[data-src]').observe();
                        if (typeof window.LazyLoad === 'function') new window.LazyLoad();
                        if (window.jQuery && typeof window.jQuery.fn.lazyload === 'function') {
                            window.jQuery('#results img[data-src]').lazyload();
                        }
                    } catch (e) {}

                    setTimeout(() => {
                        document.querySelectorAll('#results img[data-src]').forEach(img => {
                            const src = img.getAttribute('data-src');
                            if (!src) return;
                            img.src = src;
                            img.removeAttribute('data-src');
                            img.classList.add('lazyloaded', 'loaded');
                        });
                    }, 400);
                },

                /* ══════════════ Flatpickr ══════════════ */
                _buildFlatpickrLocale() {
                    const dr = window.daterangepickerLocale || {};
                    const fallbackDays   = ['Su','Mo','Tu','We','Th','Fr','Sa'];
                    const fallbackMonths = ['January','February','March','April','May','June','July','August','September','October','November','December'];
                    const weekdays = Array.isArray(dr.daysOfWeek) && dr.daysOfWeek.length === 7 ? dr.daysOfWeek : fallbackDays;
                    const months   = Array.isArray(dr.monthNames) && dr.monthNames.length === 12 ? dr.monthNames : fallbackMonths;
                    const rawFirst = parseInt(dr.first_day_of_week, 10);
                    const firstDay = Number.isNaN(rawFirst) ? 1 : Math.max(0, Math.min(6, rawFirst));
                    return {
                        weekdays: { shorthand: weekdays, longhand: weekdays },
                        months:   { shorthand: months.map(m => m.slice(0, 3)), longhand: months },
                        firstDayOfWeek: firstDay,
                        weekAbbreviation: dr.weekLabel || 'W',
                        rangeSeparator: ' – ',
                        scrollTitle: 'Scroll to increment',
                        toggleTitle: 'Click to toggle',
                    };
                },

                _fpOptions() {
                    return {
                        mode: 'range',
                        dateFormat: 'Y-m-d',
                        altInput: true,
                        altFormat: 'd.m.Y',
                        minDate: 'today',
                        locale: this._buildFlatpickrLocale(),
                    };
                },

                /* ══════════════ Location (Photon) ══════════════ */
                async searchLocations() {
                    const q = (this.filters.city_name || '').trim();
                    if (q.length < 3) {
                        this.locationSuggestions = [];
                        this.locationOpen = false;
                        this.locationLoading = false;
                        return;
                    }
                    if (this.locationAbort) { try { this.locationAbort.abort(); } catch (e) {} }
                    this.locationAbort = new AbortController();
                    this.locationLoading = true;
                    this.locationHighlight = -1;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.locationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.filters.city_name || '').trim() !== queryAtFetch) {
                            this.locationLoading = false;
                            return;
                        }

                        this.locationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                country: p.country || '',
                                countrycode: p.countrycode || '',
                                state: p.state || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.locationOpen = this.locationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.locationSuggestions = [];
                    } finally {
                        this.locationLoading = false;
                    }
                },

                _locationSubtitle(p) {
                    const parts = [];
                    if (p.state && p.state !== p.name) parts.push(p.state);
                    if (p.county && p.county !== p.name && p.county !== p.state) parts.push(p.county);
                    if (p.country && p.country !== p.name) parts.push(p.country);
                    return parts.join(', ');
                },

                selectLocation(s) {
                    if (!s) return;

                    this._locationPicked = true;
                    this.filters.city_name  = s.name;
                    this.filters.map_lat    = s.lat;
                    this.filters.map_lng    = s.lng;
                    this.filters.location_id = '';
                    this.locationOpen = false;
                    this.locationSuggestions = [];
                    this.locationHighlight = -1;

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                        this.$nextTick(() => setTimeout(() => {
                            if (this.mapOpen) this.centerMapOn(s.lat, s.lng, 11);
                        }, 250));
                    }

                    this.applyFilters();
                },

                moveHighlight(delta) {
                    if (!this.locationOpen || this.locationSuggestions.length === 0) return;
                    const n = this.locationSuggestions.length;
                    let next = this.locationHighlight + delta;
                    if (next < 0) next = n - 1;
                    if (next >= n) next = 0;
                    this.locationHighlight = next;
                },

                async searchMobileLocations() {
                    const q = (this.mobileDraft.city_name || '').trim();
                    if (q.length < 3) {
                        this.mobileLocationSuggestions = [];
                        this.mobileLocationOpen = false;
                        this.mobileLocationLoading = false;
                        return;
                    }
                    if (this.mobileLocationAbort) { try { this.mobileLocationAbort.abort(); } catch (e) {} }
                    this.mobileLocationAbort = new AbortController();
                    this.mobileLocationLoading = true;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.mobileLocationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.mobileDraft.city_name || '').trim() !== queryAtFetch) {
                            this.mobileLocationLoading = false;
                            return;
                        }

                        this.mobileLocationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                countrycode: p.countrycode || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.mobileLocationOpen = this.mobileLocationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.mobileLocationSuggestions = [];
                    } finally {
                        this.mobileLocationLoading = false;
                    }
                },

                selectMobileLocation(s) {
                    if (!s) return;
                    this.mobileDraft.city_name = s.name;
                    this.mobileDraft.map_lat   = s.lat;
                    this.mobileDraft.map_lng   = s.lng;
                    this.mobileLocationOpen = false;
                    this.mobileLocationSuggestions = [];

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                    }
                },

                /* ══════════════ Map helpers ══════════════ */
                _getMapInstance() {
                    const keys = ['bravo_map', 'gmap', 'map', 'googleMap', 'theMap', 'leafletMap', 'mapbox'];
                    for (const k of keys) {
                        const m = window[k];
                        if (m && typeof m === 'object') {
                            if (typeof m.setCenter === 'function') return { engine: 'google', map: m };
                            if (typeof m.setView === 'function' && typeof m.getZoom === 'function') return { engine: 'leaflet', map: m };
                            if (typeof m.flyTo === 'function' && typeof m.getSource === 'function') return { engine: 'mapbox', map: m };
                        }
                    }
                    return null;
                },

                _whenMapReady(cb, tries = 0) {
                    const found = this._getMapInstance();
                    if (found) { cb(found); return; }
                    if (tries > 60) return; // ~6s
                    setTimeout(() => this._whenMapReady(cb, tries + 1), 100);
                },

                centerMapOn(lat, lng, zoom) {
                    if (lat == null || lng == null || lat === '' || lng === '') return;
                    lat = parseFloat(lat); lng = parseFloat(lng);
                    if (Number.isNaN(lat) || Number.isNaN(lng)) return;

                    if (window.bravo_map_data) {
                        window.bravo_map_data.map_lat_default = lat;
                        window.bravo_map_data.map_lng_default = lng;
                        if (zoom) window.bravo_map_data.map_zoom_default = zoom;
                    }

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google') {
                                map.setCenter({ lat, lng });
                                if (zoom) map.setZoom(zoom);
                                if (window.google?.maps?.event) window.google.maps.event.trigger(map, 'resize');
                            } else if (engine === 'leaflet') {
                                map.setView([lat, lng], zoom || map.getZoom() || 10);
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                map.flyTo({ center: [lng, lat], zoom: zoom || map.getZoom() || 10 });
                            }
                        } catch (e) {}
                    });
                },

                fitBoundsToMarkers(markers, fallbackLat, fallbackLng, fallbackZoom) {
                    const list = (markers || [])
                        .map(m => ({ lat: parseFloat(m.lat), lng: parseFloat(m.lng) }))
                        .filter(m => !Number.isNaN(m.lat) && !Number.isNaN(m.lng));

                    if (!list.length) return this.centerMapOn(fallbackLat, fallbackLng, fallbackZoom);
                    if (list.length === 1) return this.centerMapOn(list[0].lat, list[0].lng, 13);

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                const b = new window.google.maps.LatLngBounds();
                                list.forEach(p => b.extend(p));
                                map.fitBounds(b, { padding: 48, maxZoom: 14 });
                            } else if (engine === 'leaflet' && window.L) {
                                const b = window.L.latLngBounds(list.map(p => [p.lat, p.lng]));
                                map.fitBounds(b, { padding: [40, 40], maxZoom: 14 });
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                const lngs = list.map(p => p.lng), lats = list.map(p => p.lat);
                                map.fitBounds(
                                    [[Math.min(...lngs), Math.min(...lats)],
                                     [Math.max(...lngs), Math.max(...lats)]],
                                    { padding: 48, maxZoom: 14 }
                                );
                            }
                        } catch (e) {}
                    });
                },

                refreshMapSize() {
                    window.dispatchEvent(new Event('resize'));
                    try {
                        if (window.google && window.google.maps && window.google.maps.event) {
                            ['bravo_map','gmap','map','googleMap','theMap'].forEach(key => {
                                const m = window[key];
                                if (m && typeof m === 'object' && typeof m.getCenter === 'function') {
                                    window.google.maps.event.trigger(m, 'resize');
                                }
                            });
                        }
                        if (window.L && window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize();
                        if (typeof window.refreshMapMarkers === 'function') window.refreshMapMarkers();
                    } catch (e) {}
                },

                /* ══════════════ Markers ══════════════ */
                extractMarkersFromDoc(doc) {
                    const el = doc.querySelector('#bravo-map-markers-data');
                    if (!el) return null;
                    try {
                        return {
                            markers: JSON.parse(el.dataset.markers || '[]'),
                            lat:  parseFloat(el.dataset.lat)  || this.defaultLat,
                            lng:  parseFloat(el.dataset.lng)  || this.defaultLng,
                            zoom: parseInt(el.dataset.zoom)   || this.defaultZoom,
                        };
                    } catch (e) { return null; }
                },

                _popupHtml(mk) {
                    return `
                        <div style="max-width:220px;font-family:Inter,system-ui,sans-serif">
                            ${mk.image ? `<img src="${mk.image}" style="width:100%;border-radius:8px;margin-bottom:6px">` : ''}
                            <strong style="font-size:13px;color:#0f172a">${mk.title || ''}</strong>
                            ${mk.price ? `<div style="margin-top:4px;color:#4f46e5;font-weight:700;font-size:13px">${mk.price}</div>` : ''}
                        </div>`;
                },

                syncMapMarkers(payload) {
                    if (!payload) return;

                    window.bravo_map_data = window.bravo_map_data || {};
                    window.bravo_map_data.markers           = payload.markers;
                    window.bravo_map_data.map_lat_default   = payload.lat;
                    window.bravo_map_data.map_lng_default   = payload.lng;
                    window.bravo_map_data.map_zoom_default  = payload.zoom;

                    const fallback = {
                        lat:  payload.lat  || this.defaultLat,
                        lng:  payload.lng  || this.defaultLng,
                        zoom: payload.zoom || this.defaultZoom,
                    };

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                (map.__bravoMarkers || []).forEach(mk => mk.setMap && mk.setMap(null));
                                map.__bravoMarkers = [];

                                const info = map.__bravoInfo ||
                                             (map.__bravoInfo = new window.google.maps.InfoWindow());

                                payload.markers.forEach(mk => {
                                    const marker = new window.google.maps.Marker({
                                        position: { lat: parseFloat(mk.lat), lng: parseFloat(mk.lng) },
                                        map,
                                        title: mk.title || '',
                                    });
                                    marker.__id = mk.id;

                                    if (mk.title || mk.image) {
                                        marker.addListener('click', () => {
                                            info.setContent(this._popupHtml(mk));
                                            info.open(map, marker);
                                        });
                                    }
                                    map.__bravoMarkers.push(marker);
                                });

                                if (payload.markers.length === 1 && map.__bravoMarkers[0]) {
                                    const m = map.__bravoMarkers[0];
                                    const mk = payload.markers[0];
                                    if (mk.title || mk.image) {
                                        info.setContent(this._popupHtml(mk));
                                        info.open(map, m);
                                    }
                                }
                            }
                            else if (engine === 'leaflet' && window.L) {
                                if (map.__bravoLayer) map.removeLayer(map.__bravoLayer);
                                const layer = window.L.layerGroup().addTo(map);
                                payload.markers.forEach(mk => {
                                    const marker = window.L.marker([parseFloat(mk.lat), parseFloat(mk.lng)]).addTo(layer);
                                    marker.__id = mk.id;
                                    if (mk.title || mk.image) marker.bindPopup(this._popupHtml(mk));
                                });
                                map.__bravoLayer = layer;
                                if (payload.markers.length === 1) {
                                    const first = layer.getLayers()[0];
                                    if (first && first.openPopup) first.openPopup();
                                }
                            }
                            else if (engine === 'mapbox' && window.mapboxgl) {
                                const geojson = {
                                    type: 'FeatureCollection',
                                    features: payload.markers.map(mk => ({
                                        type: 'Feature',
                                        geometry: { type: 'Point', coordinates: [parseFloat(mk.lng), parseFloat(mk.lat)] },
                                        properties: { title: mk.title || '', id: mk.id, image: mk.image || '', price: mk.price || '' }
                                    }))
                                };
                                if (map.getSource('bravo-markers')) {
                                    map.getSource('bravo-markers').setData(geojson);
                                } else {
                                    map.addSource('bravo-markers', { type: 'geojson', data: geojson });
                                    map.addLayer({
                                        id: 'bravo-markers', type: 'circle', source: 'bravo-markers',
                                        paint: { 'circle-radius': 8, 'circle-color': '#4f46e5',
                                                 'circle-stroke-color': '#fff', 'circle-stroke-width': 2 }
                                    });
                                }
                            }
                        } catch (e) {}

                        // Prefer markers bounds; when none, fall back to lat/lng/zoom
                        this.fitBoundsToMarkers(payload.markers, fallback.lat, fallback.lng, fallback.zoom);
                        this.refreshMapSize();
                    });
                },

                // Card hover → open matching marker popup
                highlightMarker(id) {
                    if (id == null) return;
                    const found = this._getMapInstance();
                    if (!found) return;
                    const { engine, map } = found;
                    try {
                        if (engine === 'google') {
                            const marker = (map.__bravoMarkers || []).find(m => String(m.__id) === String(id));
                            if (marker && window.google?.maps?.event) {
                                window.google.maps.event.trigger(marker, 'click');
                            }
                        } else if (engine === 'leaflet' && map.__bravoLayer) {
                            const layer = map.__bravoLayer.getLayers().find(m => String(m.__id) === String(id));
                            if (layer && layer.openPopup) layer.openPopup();
                        }
                    } catch (e) {}
                },

                /* ══════════════ Mobile draft ══════════════ */
                mobileDraft: {
                    city_name: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0, pets_allowed: 0,
                    map_lat: '', map_lng: '',
                    get nights() {
                        if (!this.start || !this.end) return 0;
                        const n = Math.round((new Date(this.end) - new Date(this.start)) / 86400000);
                        return n > 0 ? n : 0;
                    },
                },

                guestRows: [
                    { key: 'adults',   label: 'Erwachsene', hint: '13+ Jahre',     min: 1 },
                    { key: 'children', label: 'Kinder',     hint: '2–12 Jahre',    min: 0 },
                    { key: 'pets',     label: 'Haustiere',  hint: 'Katzen, Hunde', min: 0 },
                ],

                get guestSummary() {
                    const parts = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) parts.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) parts.push(`${this.filters.pets} 🐾`);
                    return parts.join(' · ');
                },

                get nights() {
                    const s = this._toIso(this.filters.start);
                    const e = this._toIso(this.filters.end);
                    if (!s || !e) return 0;
                    const n = Math.round((new Date(e) - new Date(s)) / 86400000);
                    return n > 0 ? n : 0;
                },

                _toIso(input) {
                    if (!input) return '';
                    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input;
                    if (/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) {
                        const [d, m, y] = input.split('.');
                        return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const dd = String(input.getDate()).padStart(2, '0');
                        return `${y}-${m}-${dd}`;
                    }
                    return '';
                },

                get mobileTriggerPrimary() { return this.filters.city_name || 'Wohin?'; },

                get mobileTriggerSecondary() {
                    const parts = [];
                    if (this.filters.start && this.filters.end) {
                        parts.push(`${this.fmtDate(this.filters.start)} – ${this.fmtDate(this.filters.end)}`);
                    } else { parts.push('Wann?'); }
                    const g = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) g.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) g.push(`${this.filters.pets} 🐾`);
                    parts.push(g.join(' · '));
                    return parts.join(' · ');
                },

                get layoutStyle() {
                    if (!this.isDesktop) return 'display: block;';
                    if (this.sidebarOpen && this.mapOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr) 420px;';
                    if (this.sidebarOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr);';
                    if (this.mapOpen) return 'display: grid; grid-template-columns: minmax(0, 1fr) 420px;';
                    return 'display: block;';
                },

                get appliedCount() {
                    let n = 0;
                    if (this.filters.city_name) n++;
                    if (this.filters.start && this.filters.end) n++;
                    if (this.filters.adults > 2) n++;
                    if (this.filters.children > 0) n++;
                    if (this.filters.pets > 0) n++;
                    if (this.filters.price_min > this.minPrice) n++;
                    if (this.filters.price_max < this.maxPrice) n++;
                    if (this.filters.orderby) n++;
                    for (const t of Object.values(this.filters.attrs || {})) n += (t || []).length;
                    return n;
                },

                get activeChips() {
                    const chips = [];
                    if (this.filters.city_name) chips.push({ key: 'city', label: this.filters.city_name });
                    if (this.filters.start && this.filters.end) {
                        chips.push({ key: 'dates', label: `${this.fmtDate(this.filters.start)} → ${this.fmtDate(this.filters.end)}` });
                    }
                    if (this.filters.price_min > this.minPrice || this.filters.price_max < this.maxPrice) {
                        chips.push({ key: 'price', label: `${this.filters.price_min}€ – ${this.filters.price_max}€` });
                    }
                    if (this.filters.pets > 0) chips.push({ key: 'pets', label: 'Haustiere' });
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        const attr = (this.attributes || []).find(a => a.id == attrId);
                        if (!attr) continue;
                        (termIds || []).forEach(termId => {
                            const term = (attr.terms || []).find(t => t.id == termId);
                            if (!term) return;
                            chips.push({ key: `attr_${attrId}_${termId}`, label: term.name, attrId: parseInt(attrId, 10), termId: parseInt(termId, 10) });
                        });
                    }
                    return chips;
                },

                fmtDate(input) {
                    if (!input) return '';
                    if (typeof input === 'string' && /^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) return input;
                    if (typeof input === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(input)) {
                        const [y, m, d] = input.split('-');
                        return `${d}.${m}.${y}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const d = String(input.getDate()).padStart(2, '0');
                        return `${d}.${m}.${y}`;
                    }
                    return '';
                },

                toIso(input) { return this._toIso(input); },

                isAttrChecked(attrId, termId) { return (this.filters.attrs[attrId] || []).includes(termId); },
                toggleAttr(attrId, termId, checked) {
                    if (!this.filters.attrs[attrId]) this.filters.attrs[attrId] = [];
                    const arr = this.filters.attrs[attrId];
                    const i = arr.indexOf(termId);
                    if (checked && i === -1)       arr.push(termId);
                    else if (!checked && i !== -1) arr.splice(i, 1);
                    if (arr.length === 0) delete this.filters.attrs[attrId];
                    this.applyFilters();
                },

                init() {
                    const desktop = window.matchMedia('(min-width: 1024px)').matches;

                    let savedView = null;
                    try { savedView = localStorage.getItem('campsiteView'); } catch (e) {}
                    const hasSavedView = savedView === 'grid' || savedView === 'list';

                    this.view = hasSavedView ? savedView : (desktop ? 'grid' : 'list');

                    if (desktop) { this.sidebarOpen = true; this.mapOpen = true; }
                    else         { this.sidebarOpen = false; this.mapOpen = false; }

                    this.$watch(
                        () => this.mobileSearchOpen || this.mobileFiltersOpen || (this.mapOpen && !this.isDesktop),
                        (locked) => {
                            if (locked) {
                                this._scrollY = window.scrollY || window.pageYOffset || 0;
                                document.body.style.top = `-${this._scrollY}px`;
                                document.body.classList.add('modal-open');
                            } else {
                                document.body.classList.remove('modal-open');
                                document.body.style.top = '';
                                if (this._scrollY) { window.scrollTo(0, this._scrollY); this._scrollY = 0; }
                            }
                        }
                    );

                    this.filters.start = this.toIso(this.filters.start);
                    this.filters.end   = this.toIso(this.filters.end);

                    const mq = window.matchMedia('(min-width: 1024px)');
                    const update = () => { this.isDesktop = mq.matches; };
                    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
                    update();

                    if (this.$refs.desktopDateRange) {
                        this._desktopFP = flatpickr(this.$refs.desktopDateRange, {
                            ...this._fpOptions(),
                            showMonths: window.matchMedia('(max-width: 767px)').matches ? 1 : 2,
                            defaultDate: (this.filters.start && this.filters.end) ? [this.filters.start, this.filters.end] : null,
                            onChange: (dates) => {
                                if (dates.length === 2) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = this.toIso(dates[1]);
                                    this.applyFilters();
                                } else if (dates.length === 1) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = '';
                                } else {
                                    this.filters.start = ''; this.filters.end = '';
                                    this.applyFilters();
                                }
                            },
                        });
                    }

                    this._initMobileFP();

                    this._resizeHandler = () => {
                        if (!this._desktopFP) return;
                        const want = window.matchMedia('(max-width: 767px)').matches ? 1 : 2;
                        if (this._desktopFP.config.showMonths !== want) this._desktopFP.set('showMonths', want);
                    };
                    window.addEventListener('resize', this._resizeHandler);

                    this.$nextTick(() => {
                        this.readBoundsFromDom();
                        this.reinitLazyLoad();
                        if (this.mapOpen) {
                            setTimeout(() => this.refreshMapSize(), 250);
                            setTimeout(() => this.refreshMapSize(), 800);
                        }
                    });

                    // ═══ Map positioning on first load ═══
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                            const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                            const payload = this.extractMarkersFromDoc(document);

                            if (hasLat && hasLng) {
                                this.filters.map_lat = parseFloat(this.filters.map_lat);
                                this.filters.map_lng = parseFloat(this.filters.map_lng);
                                this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                            } else {
                                this.filters.map_lat = this.defaultLat;
                                this.filters.map_lng = this.defaultLng;
                                if (payload && payload.markers.length) {
                                    this.fitBoundsToMarkers(payload.markers, this.defaultLat, this.defaultLng, this.defaultZoom);
                                } else {
                                    this.centerMapOn(this.defaultLat, this.defaultLng, this.defaultZoom);
                                }
                            }

                            if (payload) {
                                setTimeout(() => this.syncMapMarkers(payload), 200);
                            }
                        }, 600);
                    });
                },

                _initMobileFP() {
                    if (!this.$refs.mobileDateRange) return;
                    if (this.$refs.mobileDateRange._flatpickr) return;
                    this._mobileFP = flatpickr(this.$refs.mobileDateRange, {
                        ...this._fpOptions(),
                        showMonths: 1,
                        onChange: (dates) => {
                            if (dates.length === 2) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = this.toIso(dates[1]);
                            } else if (dates.length === 1) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = '';
                            } else {
                                this.mobileDraft.start = ''; this.mobileDraft.end = '';
                            }
                        },
                    });
                },

                readBoundsFromDom() {
                    const bounds = document.querySelector('#price-bounds');
                    if (!bounds) return;
                    const m = parseInt(bounds.dataset.min || '0', 10);
                    const M = parseInt(bounds.dataset.max || '0', 10);
                    if (M > 0 && M >= m) { this.minPrice = m; this.maxPrice = M; }
                },

                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                    if (this.sidebarOpen && this.mapOpen) this.refreshMapSize();
                },

                toggleMap() {
                    this.mapOpen = !this.mapOpen;
                    if (this.mapOpen) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                                const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                                this.syncMapMarkers(this.extractMarkersFromDoc(document));

                                if (hasLat && hasLng) {
                                    setTimeout(() => this.centerMapOn(
                                        parseFloat(this.filters.map_lat),
                                        parseFloat(this.filters.map_lng),
                                        11
                                    ), 220);
                                }

                                this.refreshMapSize();
                                setTimeout(() => this.refreshMapSize(), 250);
                            }, 120);
                        });
                    }
                },

                openMobileSearch() {
                    this.mobileDraft.city_name    = this.filters.city_name || '';
                    this.mobileDraft.start        = this.toIso(this.filters.start);
                    this.mobileDraft.end          = this.toIso(this.filters.end);
                    this.mobileDraft.adults       = this.filters.adults || 2;
                    this.mobileDraft.children     = this.filters.children || 0;
                    this.mobileDraft.pets         = this.filters.pets || 0;
                    this.mobileDraft.pets_allowed = this.filters.pets > 0 ? 1 : 0;
                    this.mobileDraft.map_lat      = this.filters.map_lat || '';
                    this.mobileDraft.map_lng      = this.filters.map_lng || '';
                    this.mobileSearchOpen = true;
                    this.$nextTick(() => {
                        this._initMobileFP();
                        if (this._mobileFP && this.mobileDraft.start && this.mobileDraft.end) {
                            this._mobileFP.setDate([this.mobileDraft.start, this.mobileDraft.end], false);
                        }
                    });
                },
                cancelMobileSearch() {
                    this.mobileSearchOpen = false;
                    this.mobileLocationOpen = false;
                },
                resetMobileDraft() {
                    this.mobileDraft.city_name = '';
                    this.mobileDraft.start = '';
                    this.mobileDraft.end = '';
                    this.mobileDraft.adults = 2;
                    this.mobileDraft.children = 0;
                    this.mobileDraft.pets = 0;
                    this.mobileDraft.pets_allowed = 0;
                    this.mobileDraft.map_lat = '';
                    this.mobileDraft.map_lng = '';
                    this.mobileLocationSuggestions = [];
                    this.mobileLocationOpen = false;
                    if (this._mobileFP) this._mobileFP.clear();
                },
                applyMobileSearch() {
                    this.filters.city_name = this.mobileDraft.city_name;
                    this.filters.start     = this.toIso(this.mobileDraft.start);
                    this.filters.end       = this.toIso(this.mobileDraft.end);
                    this.filters.adults    = this.mobileDraft.adults;
                    this.filters.children  = this.mobileDraft.children;
                    this.filters.pets      = this.mobileDraft.pets_allowed ? Math.max(1, this.mobileDraft.pets) : 0;
                    this.filters.map_lat   = this.mobileDraft.map_lat;
                    this.filters.map_lng   = this.mobileDraft.map_lng;
                    this.cancelMobileSearch();

                    // Center only when the map is visible
                    if (this.mapOpen && this.filters.map_lat && this.filters.map_lng) {
                        this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                    }

                    this.applyFilters();
                },
                mobileIncGuest(key) {
                    this.mobileDraft[key] = (this.mobileDraft[key] || 0) + 1;
                    if (key === 'pets' && this.mobileDraft.pets > 0) this.mobileDraft.pets_allowed = 1;
                },
                mobileDecGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.mobileDraft[key] || 0) > min) {
                        this.mobileDraft[key] = (this.mobileDraft[key] || 0) - 1;
                        if (key === 'pets' && this.mobileDraft.pets === 0) this.mobileDraft.pets_allowed = 0;
                    }
                },
                incGuest(key) { this.filters[key] = (this.filters[key] || 0) + 1; this.applyFilters(); },
                decGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.filters[key] || 0) > min) {
                        this.filters[key] = (this.filters[key] || 0) - 1;
                        this.applyFilters();
                    }
                },

                removeChip(chip) {
                    switch (chip.key) {
                        case 'city':
                            this.filters.city_name = '';
                            this.filters.map_lat = '';
                            this.filters.map_lng = '';
                            this.filters.location_id = '';
                            break;
                        case 'dates':
                            this.filters.start = ''; this.filters.end = '';
                            if (this._desktopFP) this._desktopFP.clear();
                            break;
                        case 'price':
                            this.filters.price_min = this.minPrice;
                            this.filters.price_max = this.maxPrice;
                            break;
                        case 'pets': this.filters.pets = 0; break;
                        default:
                            if (chip.key.startsWith('attr_')) {
                                const arr = this.filters.attrs[chip.attrId] || [];
                                const i = arr.indexOf(chip.termId);
                                if (i !== -1) arr.splice(i, 1);
                                if (arr.length === 0) delete this.filters.attrs[chip.attrId];
                            }
                    }
                    this.applyFilters();
                },

                resetFilters() {
                    this.filters = {
                        city_name: '', location_id: '', start: '', end: '',
                        adults: 2, children: 0, pets: 0,
                        price_min: this.minPrice, price_max: this.maxPrice,
                        orderby: '', attrs: {},
                        map_lat: this.defaultLat, map_lng: this.defaultLng,
                    };
                    if (this._desktopFP) this._desktopFP.clear();
                    this.applyFilters();
                },

                buildParams() {
                    const p = new URLSearchParams();
                    for (let [k, v] of Object.entries(this.filters)) {
                        if (k === 'attrs') continue;
                        if ((k === 'start' || k === 'end') && v) v = this.toIso(v);
                        if (v !== '' && v !== null && v !== undefined) p.set(k, v);
                    }
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        (termIds || []).forEach(id => p.append(`attrs[${attrId}][]`, id));
                    }
                    return p;
                },

                swapResults(doc, url) {
                    const newResults = doc.querySelector('#results');
                    const curResults = document.querySelector('#results');
                    if (newResults && curResults) curResults.innerHTML = newResults.innerHTML;

                    // Pull marker payload + re-render markers with fresh data
                    const markerPayload = this.extractMarkersFromDoc(doc);
                    this.syncMapMarkers(markerPayload);

                    this.$nextTick(() => {
                        if (curResults && window.Alpine && typeof Alpine.initTree === 'function') {
                            try { Alpine.initTree(curResults); } catch (e) {}
                        }
                        this.reinitLazyLoad();
                    });

                    const bounds = doc.querySelector('#price-bounds');
                    if (bounds) {
                        const newMin = parseInt(bounds.dataset.min || '0', 10);
                        const newMax = parseInt(bounds.dataset.max || '0', 10);
                        if (newMax > 0 && newMax >= newMin) {
                            this.minPrice = newMin;
                            this.maxPrice = newMax;
                            if (this.filters.price_min < newMin || this.filters.price_min > newMax) this.filters.price_min = newMin;
                            if (this.filters.price_max > newMax || this.filters.price_max < newMin) this.filters.price_max = newMax;
                            if (this.filters.price_min > this.filters.price_max) {
                                this.filters.price_min = newMin; this.filters.price_max = newMax;
                            }
                        }
                    }

                    const newPag = doc.querySelector('nav[aria-label="Pagination"]');
                    const curPag = document.querySelector('nav[aria-label="Pagination"]');
                    if (newPag) {
                        if (curPag) curPag.replaceWith(newPag);
                        else if (curResults) curResults.insertAdjacentElement('afterend', newPag);
                        this.$nextTick(() => {
                            if (window.Alpine && typeof Alpine.initTree === 'function') {
                                try { Alpine.initTree(newPag); } catch (e) {}
                            }
                        });
                    } else if (curPag) curPag.remove();

                    history.replaceState(null, '', url);

                    const countEl = doc.querySelector('[x-text="totalResults"]');
                    if (countEl) {
                        const m = (countEl.textContent || '').match(/\d+/);
                        if (m) this.totalResults = parseInt(m[0], 10);
                    }

                    // Honour URL map_lat/map_lng on every swap
                    const params = new URLSearchParams(url.split('?')[1] || '');
                    const lat = params.get('map_lat');
                    const lng = params.get('map_lng');
                    if (lat && lng) {
                        setTimeout(() => this.centerMapOn(lat, lng, 11), 400);
                    }
                },

                applyFilters() {
                    this.loading = true;
                    const params = this.buildParams();
                    params.delete('page');
                    const url = `${window.location.pathname}?${params}`;

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                goToPage(page) {
                    const params = this.buildParams();
                    if (page > 1) params.set('page', page); else params.delete('page');
                    const url = `${window.location.pathname}?${params}`;
                    this.loading = true;
                    window.scrollTo({ top: 0, behavior: 'smooth' });

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                toggleFavorite(id, ev) {
                    // Wire to your wishlist endpoint, e.g.:
                    // fetch('/wishlist/toggle', { method: 'POST', headers: { 'X-CSRF-TOKEN': '...' }, body: ... })
                },
            };
        }
    </script>
@endpush@extends('layouts.tailwind',['container_class'=>'container-fluid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8','header_right_menu'=>true])

@push('css')
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                    colors: {
                        brand: {
                            50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',
                            400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',
                            800:'#3730a3',900:'#312e81',950:'#1e1b4b',
                        },
                    },
                    boxShadow: {
                        'card':'0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06)',
                        'card-hover':'0 10px 20px -5px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05)',
                        'pop':'0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
                    },
                },
            },
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="{{ asset('dist/frontend/module/hotel/css/hotel.css?_ver='.config('app.asset_version')) }}" rel="stylesheet">

    <style>
        [x-cloak] { display: none !important; }
        html { scroll-behavior: smooth; }

        #mapcc, #bravo_results_map { height: 100%; min-height: 100%; width: 100%; }

        .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .thin-scroll::-webkit-scrollbar-track { background: transparent; }
        .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .bravo_topbar, .bravo_footer { display: none; }

        body.modal-open {
            overflow: hidden; position: fixed; inset: 0; width: 100%;
        }

        .thin-scroll, .mobile-search-scroll, .mobile-drawer-scroll {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .mobile-full-height {
            height: 100vh; height: 100dvh; max-height: 100dvh;
        }

        /* ---- Flatpickr brand theme ---- */
        .flatpickr-calendar {
            width: 340px !important; padding: 0 !important;
            border-radius: 20px !important;
            box-shadow: 0 24px 48px -12px rgba(15,23,42,0.20), 0 8px 16px -8px rgba(15,23,42,0.10) !important;
            border: 1px solid #e2e8f0 !important; margin-top: 12px !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            background: #fff !important; overflow: hidden;
        }
        .flatpickr-calendar.multiMonth,
        .flatpickr-calendar.rangeMode { width: 700px !important; }
        .flatpickr-calendar::before, .flatpickr-calendar::after,
        .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
        .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after {
            display: none !important; content: none !important;
        }
        .flatpickr-months {
            display: flex; align-items: center; position: relative;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            padding: 10px; gap: 6px;
        }
        .flatpickr-months .flatpickr-month {
            flex: 1 1 0; height: 36px; color: #fff; fill: #fff;
            display: flex; align-items: center; justify-content: center;
            background: transparent;
        }
        .flatpickr-months .flatpickr-prev-month,
        .flatpickr-months .flatpickr-next-month {
            position: static !important; top: auto !important; right: auto !important; left: auto !important;
            width: 36px; height: 36px; padding: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 10px; color: #fff; fill: #fff;
            transition: background .15s; z-index: 2;
        }
        .flatpickr-months .flatpickr-prev-month:hover,
        .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,0.16); }
        .flatpickr-months .flatpickr-prev-month svg,
        .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; }

        .flatpickr-current-month {
            width: 100%; height: 100%; padding: 0;
            font-size: 15px; font-weight: 700; letter-spacing: .01em;
            color: #fff; display: flex; align-items: center; justify-content: center; gap: 3px;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months {
            appearance: none; background: transparent !important; border: none;
            color: #fff !important; font-weight: 700; font-size: 15px;
            font-family: inherit; padding: 2px 4px; border-radius: 6px;
            cursor: pointer; transition: background .15s;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,0.14) !important; }
        .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: #1e293b; font-weight: 500; }
        .flatpickr-current-month .numInputWrapper { width: 56px; }
        .flatpickr-current-month .numInputWrapper:hover { background: rgba(255,255,255,0.14) !important; border-radius: 6px; }
        .flatpickr-current-month .numInputWrapper span { border: none; }
        .flatpickr-current-month .numInputWrapper span::after,
        .flatpickr-current-month .numInputWrapper span::before { border-color: #fff transparent transparent; }
        .flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 700; font-size: 15px; font-family: inherit; padding: 0 4px; }

        .flatpickr-innerContainer { padding: 14px 14px 12px; background: #fff; }
        .flatpickr-rContainer { width: 100%; }
        .flatpickr-weekdays { display: flex; align-items: center; margin-bottom: 6px; height: auto; }
        .flatpickr-weekdaycontainer { display: flex; flex: 1 1 0; gap: 4px; justify-content: flex-start; padding: 0; }
        .flatpickr-weekdays .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer { border-left: 12px solid transparent; }
        .flatpickr-weekday {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            background: transparent; color: #94a3b8; font-weight: 700; font-size: 10.5px;
            letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 30px;
        }
        .flatpickr-days { border: none !important; display: flex; justify-content: space-between; align-items: flex-start; padding: 0; }
        .flatpickr-days .dayContainer + .dayContainer { border-left: 12px solid transparent; }
        .dayContainer { display: flex; flex-wrap: wrap; padding: 0; gap: 4px; justify-content: flex-start; align-content: flex-start; }
        .flatpickr-day {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            height: 40px; line-height: 40px; margin: 0; padding: 0;
            border: none !important; border-radius: 10px;
            font-weight: 500; font-size: 13.5px; color: #1e293b;
            background: transparent; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-variant-numeric: tabular-nums;
        }
        .flatpickr-day:hover { background: #eef2ff; color: #4f46e5; }
        .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1; font-weight: 400; }
        .flatpickr-day.today { border: 1.5px solid #a5b4fc !important; font-weight: 700; color: #4f46e5; }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
            border-color: #4f46e5 !important; color: #fff !important;
            font-weight: 700; box-shadow: 0 4px 12px rgba(79,70,229,.35); z-index: 2;
        }
        .flatpickr-day.inRange { background: #e0e7ff; border-color: #e0e7ff; color: #4338ca; border-radius: 0; }
        .flatpickr-day.startRange { border-radius: 10px 0 0 10px; }
        .flatpickr-day.endRange   { border-radius: 0 10px 10px 0; }
        .flatpickr-day.startRange.endRange { border-radius: 10px; }
        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #e2e8f0; cursor: not-allowed; }
        @media (max-width: 767px) {
            .flatpickr-calendar, .flatpickr-calendar.multiMonth, .flatpickr-calendar.rangeMode {
                width: 100% !important; max-width: 360px !important; border-radius: 16px !important;
            }
            .flatpickr-day { height: 38px; line-height: 38px; font-size: 13px; }
            .flatpickr-weekday { line-height: 26px; font-size: 10px; }
            .flatpickr-innerContainer { padding: 12px 10px 10px; }
        }

        input[type="range"].brand-slider {
            -webkit-appearance: none; appearance: none;
            height: 4px; background: #e2e8f0; border-radius: 9999px; outline: none;
        }
        input[type="range"].brand-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }
        input[type="range"].brand-slider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }

        .card-media { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
        .group:hover .card-media { transform: scale(1.05); }

        .fade-in { animation: fadeIn .3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

        .shimmer {
            background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.6s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        .chip-enter { animation: chipIn .2s ease; }
        @keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

        #results img[data-src] {
            background-color: #f1f5f9;
            background-image: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.2s ease-in-out infinite;
        }

        /* Map panel sizing guard – keep Leaflet/Google from collapsing */
        #bravo_results_map { position: relative; }
        .leaflet-container { width: 100% !important; height: 100% !important; }
    </style>
@endpush

@section('content')
@php
    $locale      = session('website_locale', app()->getLocale());
    $searchRoute = 'hotel.search.' . $locale;
    $priceBounds = $hotel_min_max_price ?? [0, 500];

    // ── Map positioning: request wins, otherwise Germany default ──
    $reqLat      = request('map_lat');
    $reqLng      = request('map_lng');
    $defaultLat  = $reqLat ? (float) $reqLat : 51.1657;
    $defaultLng  = $reqLng ? (float) $reqLng : 10.4515;
    $defaultZoom = $reqLat ? 11 : 6;

    // ── Markers payload for the map ──
    $markersPayload = $markers ?? [];
@endphp

<div
    x-data="campsiteSearch({
        initial: {
            city_name:   {{ json_encode(request('city_name', '')) }},
            location_id: {{ json_encode(request('location_id', '')) }},
            map_lat:     {{ json_encode(request('map_lat', '')) }},
            map_lng:     {{ json_encode(request('map_lng', '')) }},
            start:       {{ json_encode(request('start', '')) }},
            end:         {{ json_encode(request('end', '')) }},
            adults:      {{ (int) request('adults', 2) }},
            children:    {{ (int) request('children', 0) }},
            pets:        {{ (int) request('pets', 0) }},
            price_min:   {{ (int) request('price_min', $priceBounds[0] ?? 0) }},
            price_max:   {{ (int) request('price_max', $priceBounds[1] ?? 500) }},
            orderby:     {{ json_encode(request('orderby', '')) }},
            attrs:       {{ json_encode((object) request('attrs', [])) }}
        },
        minPrice: {{ (int) ($priceBounds[0] ?? 0) }},
        maxPrice: {{ (int) ($priceBounds[1] ?? 500) }},
        totalResults: {{ $rows->total() }},
        mapLayout: {{ ($layout ?? 'normal') === 'map' ? 'true' : 'false' }},
        defaultLat:  {{ $defaultLat }},
        defaultLng:  {{ $defaultLng }},
        defaultZoom: {{ $defaultZoom }},
        attributes: {{ json_encode(
            ($attributes ?? collect())->map(function ($attr) {
                $tAttr = method_exists($attr, 'translate') ? optional($attr->translate()) : null;
                return [
                    'id'    => (int) $attr->id,
                    'name'  => $tAttr->name ?? $attr->name,
                    'terms' => $attr->terms->map(function ($term) {
                        $tTerm = method_exists($term, 'translate') ? optional($term->translate()) : null;
                        return [
                            'id'    => (int) $term->id,
                            'name'  => $tTerm->name ?? $term->name,
                            'count' => (int) ($term->hotel_count ?? 0),
                        ];
                    })->values()->all(),
                ];
            })->values()->all()
        ) }},
        locale: {{ json_encode(strtolower(substr($locale, 0, 2))) }}
    })"
    x-init="init()"
    x-cloak
    class="min-h-screen bg-slate-50 text-slate-900 antialiased"
    style="font-family: 'Inter', system-ui, sans-serif;"
>
    <h1 class="sr-only">{{ setting_item_with_lang("hotel_page_search_title") }}</h1>

    {{-- ═══════════════════ STICKY HEADER ═══════════════════ --}}
    <header class="sticky top-0 z-40 bg-white border-b border-slate-200/80 shadow-sm">
        <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-3">

            {{-- DESKTOP --}}
            <div class="hidden md:flex items-center gap-3 max-w-4xl mx-auto">

                <button type="button"
                        @click="toggleSidebar()"
                        :class="sidebarOpen
                            ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                            : 'bg-white text-slate-700 border-slate-200 hover:border-slate-400 hover:shadow-card'"
                        class="shrink-0 inline-flex items-center gap-2 px-4 py-3 rounded-full border font-semibold text-sm transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span>Filter</span>
                    <span x-show="appliedCount > 0" x-cloak
                          :class="sidebarOpen ? 'bg-white text-brand-600' : 'bg-brand-600 text-white'"
                          class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[10px] font-bold"
                          x-text="appliedCount"></span>
                </button>

                <form @submit.prevent="applyFilters()"
                      class="flex-1 flex items-center rounded-full border border-slate-200 bg-white hover:shadow-card focus-within:shadow-card transition-shadow">

                    <div class="flex-1 min-w-0 px-6 py-3 border-r border-slate-200 relative"
                         @click.outside="locationOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Standort</label>
                        <input type="text"
                               x-model="filters.city_name"
                               @input.debounce.350ms="_locationPicked = false; searchLocations()"
                               @focus="if (locationSuggestions.length) locationOpen = true"
                               @keydown.arrow-down.prevent="moveHighlight(1)"
                               @keydown.arrow-up.prevent="moveHighlight(-1)"
                               @keydown.enter.prevent="if (locationOpen && locationHighlight >= 0) { selectLocation(locationSuggestions[locationHighlight]); } else { applyFilters(); }"
                               @keydown.escape="locationOpen = false"
                               placeholder="Stadt oder Region"
                               autocomplete="off"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate">

                        <svg x-show="locationLoading" x-cloak
                             class="w-3.5 h-3.5 absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                             fill="none" viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                            <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                        </svg>

                        <div x-show="locationOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute left-0 right-0 top-full mt-3 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden z-[60]">

                            <template x-for="(s, idx) in locationSuggestions" :key="idx">
                                <button type="button"
                                        @click="selectLocation(s)"
                                        @mouseenter="locationHighlight = idx"
                                        class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0"
                                        :class="locationHighlight === idx ? 'bg-brand-50' : 'hover:bg-slate-50'">
                                    <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"
                                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                        <circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                        <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                                    </div>
                                    <span class="text-[10px] uppercase tracking-wider text-slate-400 font-bold shrink-0 mt-0.5"
                                          x-text="s.countrycode"></span>
                                </button>
                            </template>

                            <div x-show="!locationLoading && locationSuggestions.length === 0" x-cloak
                                 class="px-4 py-3 text-xs text-slate-500">
                                Keine Orte gefunden
                            </div>

                            <div class="px-4 py-2 border-t border-slate-100 bg-slate-50 text-[10px] text-slate-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                                </svg>
                                Suche powered by OpenStreetMap
                            </div>
                        </div>
                    </div>

                    <div class="flex-[1.35] min-w-0 px-6 py-3 relative border-r border-slate-200">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Reisezeitraum</label>
                        <input type="text" x-ref="desktopDateRange" placeholder="Daten wählen"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate cursor-pointer">
                        <p x-show="nights > 0" x-cloak
                           class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 bg-brand-50 text-brand-600 px-2 py-0.5 rounded-full text-[10px] font-semibold">
                            <span x-text="nights"></span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                            </svg>
                        </p>
                    </div>

                    <div class="flex-1 min-w-0 px-6 py-3 relative" @click.outside="guestsOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Gäste</label>
                        <button type="button" @click="guestsOpen = !guestsOpen"
                                class="w-full text-left text-sm font-medium text-slate-700 truncate flex items-center justify-between gap-2">
                            <span x-text="guestSummary" class="truncate"></span>
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0 transition-transform"
                                 :class="guestsOpen && 'rotate-180'"
                                 fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </button>

                        <div x-show="guestsOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-pop border border-slate-200 p-5 space-y-4 z-50 text-left">
                            <template x-for="row in guestRows" :key="row.key">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                        <p class="text-xs text-slate-500" x-text="row.hint"></p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <button type="button" @click="decGuest(row.key)"
                                                :disabled="filters[row.key] <= row.min"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                        <span class="w-5 text-center text-sm font-semibold text-slate-900" x-text="filters[row.key]"></span>
                                        <button type="button" @click="incGuest(row.key)"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="pr-2 pl-3">
                        <button type="submit"
                                class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-sm shadow-sm transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                            </svg>
                            <span>Suchen</span>
                        </button>
                    </div>
                </form>
            </div>

            {{-- MOBILE --}}
            <div class="md:hidden flex items-center gap-2">
                <button @click="openMobileSearch()"
                        class="flex-1 flex items-center gap-3 px-4 py-3 rounded-full border border-slate-200 bg-white hover:shadow-card transition-shadow">
                    <div class="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0 text-left">
                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="mobileTriggerPrimary"></p>
                        <p class="text-xs text-slate-500 truncate" x-text="mobileTriggerSecondary"></p>
                    </div>
                </button>

                <button type="button"
                        @click="mobileFiltersOpen = true"
                        :class="appliedCount > 0
                            ? 'bg-brand-600 text-white border-brand-600'
                            : 'bg-white text-slate-700 border-slate-200'"
                        class="relative shrink-0 w-12 h-12 rounded-full border flex items-center justify-center transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span x-show="appliedCount > 0" x-cloak
                          class="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[9px] font-bold ring-2 ring-white"
                          x-text="appliedCount"></span>
                </button>
            </div>
        </div>
    </header>

    {{-- ═══════════════════ MAIN LAYOUT ═══════════════════ --}}
    <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-6">
        <div :style="layoutStyle" class="gap-8">

            {{-- SIDEBAR --}}
            <aside class="hidden" :class="sidebarOpen ? 'lg:block' : 'lg:hidden'">
                <div class="sticky top-[110px] max-h-[calc(100vh-130px)] overflow-y-auto thin-scroll pr-1">

                    <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-200">
                        <div class="flex items-center gap-2">
                            <h2 class="text-base font-bold text-slate-900">Filter</h2>
                            <span x-show="appliedCount > 0" x-cloak
                                  class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-brand-600 text-white text-[10px] font-bold"
                                  x-text="appliedCount"></span>
                        </div>
                        <button x-show="appliedCount > 0" x-cloak
                                @click="resetFilters()"
                                class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition">
                            Alle löschen
                        </button>
                    </div>

                    <div x-show="appliedCount > 0" x-cloak class="flex flex-wrap gap-1.5 mb-4 pb-4 border-b border-slate-200">
                        <template x-for="chip in activeChips" :key="chip.key">
                            <button @click="removeChip(chip)"
                                    class="chip-enter inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold hover:bg-brand-100 transition">
                                <span x-text="chip.label"></span>
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path d="M18 6 6 18M6 6l12 12"/>
                                </svg>
                            </button>
                        </template>
                    </div>

                    {{-- Price --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                        <div class="flex items-center gap-2 mb-3">
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="filters.price_max"
                                           x-model.number="filters.price_min"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                            <div class="text-slate-300 pt-5">—</div>
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="maxPrice"
                                           x-model.number="filters.price_max"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                        </div>
                        <input type="range" class="brand-slider w-full"
                               :min="minPrice" :max="maxPrice" step="5"
                               x-model.number="filters.price_max"
                               @input.debounce.500ms="applyFilters()">
                        <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                            <span x-text="minPrice + ' €'"></span>
                            <span x-text="maxPrice + ' €'"></span>
                        </div>
                    </section>

                    {{-- Guests --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                        <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                            <button type="button"
                                    @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                    :disabled="filters.adults <= 1"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center text-lg font-medium transition">−</button>
                            <div class="flex-1 text-center">
                                <span class="text-lg font-bold text-slate-900" x-text="filters.adults"></span>
                                <p class="text-[10px] text-slate-500 font-medium" x-text="filters.adults === 1 ? 'Person' : 'Personen'"></p>
                            </div>
                            <button type="button"
                                    @click="filters.adults++; applyFilters()"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow flex items-center justify-center text-lg font-medium transition">+</button>
                        </div>
                    </section>

                    {{-- Attributes --}}
                    @if(isset($attributes) && $attributes->count())
                        <section class="pb-5 mb-5 border-b border-slate-200" x-data="{ open: true }">
                            <button @click="open = !open"
                                    class="w-full flex justify-between items-center mb-3 group">
                                <h3 class="text-sm font-bold text-slate-900 group-hover:text-brand-600 transition">Ausstattung & Typ</h3>
                                <svg class="w-4 h-4 text-slate-400 transition-transform"
                                     :class="open && 'rotate-180'"
                                     fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </button>
                            <div x-show="open" x-collapse>
                                <div class="space-y-5 max-h-[420px] overflow-y-auto thin-scroll pr-1">
                                    @foreach($attributes as $attr)
                                        @if($attr->terms->count())
                                            @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                            <div>
                                                <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                                <div class="flex flex-wrap gap-1.5 px-2.5">
                                                    @foreach($attr->terms as $term)
                                                        @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                        <button type="button"
                                                                @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                                :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                                    ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                            <span>{{ __($termName) }}</span>
                                                            @if(!empty($term->hotel_count))
                                                                <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                            @endif
                                                        </button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </section>
                    @endif

                    <label class="flex items-center gap-3 px-2.5 py-2 rounded-lg hover:bg-slate-100 cursor-pointer transition">
                        <input type="checkbox"
                               :checked="filters.pets > 0"
                               @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                               class="rounded border-slate-300 text-brand-600 focus:ring-brand-500 focus:ring-offset-0">
                        <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                    </label>
                </div>
            </aside>

            {{-- ═══════════════════ RESULTS COLUMN ═══════════════════ --}}
            <main class="min-w-0">

                <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
                    <div>
                        <p class="text-sm text-slate-600">
                            <span class="font-bold text-slate-900" x-text="totalResults"></span>
                            <span x-text="totalResults === 1 ? 'Campsite gefunden' : 'Campsites gefunden'"></span>
                            <template x-if="nights > 0">
                                <span class="text-slate-500">
                                    <span class="text-slate-400"> · </span>
                                    <span x-text="nights"></span>
                                    <svg class="w-3.5 h-3.5 inline-block -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                                    </svg>
                                </span>
                            </template>
                        </p>
                        <p class="text-xs text-slate-500 mt-0.5">Alle Preise pro Nacht inkl. MwSt.</p>
                    </div>

                    <div class="flex items-center gap-2">
                        <div class="inline-flex items-center p-1 bg-slate-100 rounded-xl">
                            <button type="button" @click="setView('list')"
                                    :class="isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="isListView"
                                    aria-label="{{ __('Listenansicht') }}"
                                    title="{{ __('Liste') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M4 6h16M4 12h16M4 18h16"/>
                                </svg>
                            </button>
                            <button type="button" @click="setView('grid')"
                                    :class="!isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="!isListView"
                                    aria-label="{{ __('Rasteransicht') }}"
                                    title="{{ __('Raster') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="14" width="7" height="7" rx="1.5"/>
                                </svg>
                            </button>
                        </div>

                        <button @click="toggleMap()"
                                :class="mapOpen
                                    ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'"
                                class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border text-sm font-semibold transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M9 4 3 7v13l6-3 6 3 6-3V4l-6 3-6-3z"/>
                                <path d="M9 4v13M15 7v13"/>
                            </svg>
                            <span class="hidden sm:inline" x-text="mapOpen ? 'Karte ausblenden' : 'Karte anzeigen'"></span>
                            <span class="sm:hidden">Karte</span>
                        </button>

                        <select x-model="filters.orderby" @change="applyFilters()"
                                class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-400 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
                            <option value="">Empfohlen</option>
                            <option value="price_low_high">Preis aufsteigend</option>
                            <option value="price_high_low">Preis absteigend</option>
                            <option value="rate_high_low">Beste Bewertung</option>
                        </select>
                    </div>
                </div>

                {{-- Loading skeleton --}}
                <div x-show="loading" :class="gridCols" class="grid gap-x-5 gap-y-8">
                    <template x-for="i in 8" :key="i">
                        <div>
                            <div class="aspect-[4/3] rounded-2xl shimmer"></div>
                            <div class="mt-3.5 h-4 rounded shimmer w-3/4"></div>
                            <div class="mt-2.5 h-3 rounded shimmer w-1/2"></div>
                            <div class="mt-2 h-3 rounded shimmer w-1/3"></div>
                            <div class="mt-3 pt-3 border-t border-slate-100">
                                <div class="h-4 rounded shimmer w-1/3"></div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Results --}}
                <div x-show="!loading" id="results" :class="gridCols" class="grid gap-x-5 gap-y-8">

                    {{-- Map payload rides along on every AJAX response --}}
                    <div id="bravo-map-markers-data"
                         data-markers="{{ json_encode($markersPayload, JSON_HEX_APOS | JSON_HEX_QUOT) }}"
                         data-lat="{{ $defaultLat }}"
                         data-lng="{{ $defaultLng }}"
                         data-zoom="{{ $defaultZoom }}"
                         class="hidden" aria-hidden="true"></div>

                    <div id="price-bounds"
                         data-min="{{ (int) ($priceBounds[0] ?? 0) }}"
                         data-max="{{ (int) ($priceBounds[1] ?? 500) }}"
                         class="hidden" aria-hidden="true"></div>

                    @forelse($rows as $row)
                        @php
                            $translation = $row->translate();
                            $detailUrl   = $row->getDetailUrl();
                            $schemaName  = $translation->title ?? $row->title ?? 'Campingplatz';

                            $location = !empty($row->location) ? $row->location->translate() : null;

                            $countryCode = !empty($row->country_code) ? strtoupper($row->country_code) : null;
                            $flagUrl     = $countryCode
                                ? get_public_url() . 'flags/' . strtolower($countryCode) . '.png'
                                : null;

                            $reviewData    = null;
                            $score_total   = null;
                            $total_reviews = 0;
                            if (setting_item('hotel_enable_review')) {
                                $reviewData    = $row->getScoreReview();
                                $score_total   = $reviewData['score_total']  ?? null;
                                $total_reviews = $reviewData['total_review'] ?? 0;
                            } else {
                                $score_total   = $row->review_score  ?? null;
                                $total_reviews = $row->reviews_count ?? 0;
                            }

                            $isWished         = $row->isWishList();
                            $termsByAttribute = $row->getAttributeInListingPage()
                                ? $row->termsByAttributeInListingPage
                                : collect();

                            $schema = [
                                '@context' => 'https://schema.org',
                                '@type'    => 'Campground',
                                '@id'      => $detailUrl . '#campground',
                                'name'     => $schemaName,
                                'url'      => $detailUrl,
                            ];

                            $distanceRaw = $row->distance ?? null; // metres? km? — see note below
                            $distanceKm  = null;
                            if ($distanceRaw !== null) {
                                // If your app stores distance in metres, convert. If already km, drop the /1000.
                                $distanceKm = distanceRaw;
                            }
                            if ($distanceKm !== null) {
                                $distanceText = $distanceKm >= 1
                                    ? number_format($distanceKm, 0, ',', '.')        // ≥ 1 km → no decimals
                                    : number_format($distanceKm, 2, ',', '.');       // < 1 km → 2 decimals
                            }
                        @endphp

                        <a href="{{ $detailUrl }}"
                           class="group relative block focus:outline-none fade-in"
                           data-listing-id="{{ $row->id }}"
                           @mouseenter="highlightMarker({{ $row->id }})"
                           x-data="{ fav: {{ $isWished ? 'true' : 'false' }} }">

                            <script type="application/ld+json">
                                {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
                            </script>

                            <div class="relative bg-white rounded-2xl overflow-hidden border border-slate-200/70
                                        shadow-card group-hover:shadow-card-hover group-hover:border-slate-300
                                        transition-all duration-300"
                                 :class="isListView
                                    ? 'flex flex-row gap-3 sm:gap-4 p-2 sm:p-3'
                                    : 'flex flex-col'">

                                {{-- Image --}}
                                <div class="relative overflow-hidden bg-slate-100 shrink-0"
                                     :class="isListView
                                        ? 'w-32 sm:w-48 md:w-56 aspect-[4/3] rounded-xl'
                                        : 'aspect-[4/3] w-full'">

                                    {!! get_image_tag_url(
                                        $row->image_id ?? '0.webp',
                                        'medium',
                                        [
                                            'class' => 'card-media absolute inset-0 w-full h-full object-cover lazyload',
                                            'alt'   => $schemaName,
                                            'sku'   => $row->sku,
                                        ]
                                    ) !!}

                                    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/30 to-transparent pointer-events-none"></div>

                                    <div class="absolute top-2 left-2 sm:top-3 sm:left-3 flex flex-wrap gap-1.5 max-w-[70%]">
                                        @if($row->is_featured)
                                            <span class="inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24"><path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/></svg>
                                                Top
                                            </span>
                                        @endif
                                        @if($row->discount_percent)
                                            <span class="bg-emerald-500 text-white text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm">
                                                {{ $row->discount_percent }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="absolute top-2 right-2 sm:top-3 sm:right-3 flex items-center gap-1.5">
                                        @if($row->is_instant)
                                            <span class="hidden sm:inline-flex items-center gap-1 bg-brand-600/95 backdrop-blur-md text-white text-[10px] font-extrabold uppercase tracking-wider px-2.5 py-1.5 rounded-full shadow-sm ring-1 ring-white/20">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>
                                                Sofort
                                            </span>
                                        @endif
                                        <button type="button"
                                                @click.prevent.stop="fav = !fav; toggleFavorite({{ $row->id }}, $event)"
                                                :aria-pressed="fav"
                                                aria-label="{{ __('Zu Favoriten hinzufügen') }}"
                                                class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/95 backdrop-blur-md hover:bg-white flex items-center justify-center shadow-sm ring-1 ring-black/5 hover:scale-110 active:scale-95 transition-transform">
                                            <svg class="w-4 h-4 sm:w-[18px] sm:h-[18px] transition-colors"
                                                 :class="fav ? 'fill-rose-500 stroke-rose-500' : 'fill-none stroke-slate-700'"
                                                 stroke-width="2" viewBox="0 0 24 24">
                                                <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8Z"/>
                                            </svg>
                                        </button>
                                    </div>

                                    @if($row->star_rate)
                                        <div class="absolute bottom-2 left-2 sm:bottom-3 sm:left-3 inline-flex items-center gap-0.5 bg-white/95 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full shadow-sm ring-1 ring-black/5"
                                             aria-label="{{ $row->star_rate }} stars">
                                            @for($star = 1; $star <= $row->star_rate; $star++)
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                                                    <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                    @endif

                                    @if($score_total !== null && $total_reviews > 0)
                                        <div class="absolute bottom-2 right-2 sm:bottom-3 sm:right-3 inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[11px] sm:text-xs font-bold px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                            <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-500 fill-current" viewBox="0 0 24 24">
                                                <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                            </svg>
                                            <span>{{ number_format((float) $score_total, 1) }}</span>
                                            <span class="text-slate-400 font-medium hidden sm:inline">({{ $total_reviews }})</span>
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="flex flex-col min-w-0 flex-1"
                                     :class="isListView ? 'py-1 pr-1' : 'p-4'">

                                    <h3 class="font-bold text-slate-900 leading-tight line-clamp-2 min-w-0
                                               group-hover:text-brand-700 transition-colors"
                                        :class="isListView ? 'text-[14px] sm:text-[15px]' : 'text-[15px]'">
                                        <span class="inline-flex items-start gap-1.5">
                                            @php
                                                $iso2 = strtolower($countryCode);
                                                if ($iso2 === 'uk') $iso2 = 'gb';
                                            @endphp

                                            <img src="https://flagcdn.com/w40/{{ $iso2 }}.png"
                                                 srcset="https://flagcdn.com/w40/{{ $iso2 }}.png 1x,
                                                         https://flagcdn.com/w80/{{ $iso2 }}.png 2x"
                                                 alt="{{ $countryCode }}"
                                                 width="20" height="14"
                                                 loading="lazy"
                                                 class="shrink-0 mt-[3px] w-5 h-3.5 object-cover rounded-sm ring-1 ring-black/5">
                                            <span class="line-clamp-2">{{ $schemaName }}</span>
                                        </span>
                                    </h3>

                                    <p class="flex items-center gap-1 text-[12px] sm:text-[13px] text-slate-500 mt-1 truncate">
                                        <svg class="w-3.5 h-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                            <circle cx="12" cy="10" r="3"/>
                                        </svg>
                                        <span class="truncate">
                                            {{strtoupper($countryCode)}} - {{ $location->name ?? '' }}{{ $row->city && $row->city !== ($location->name ?? '') ? ' · ' . $row->city : '' }} @if($distanceKm !== null) {{ $distanceText }} km @endif

                                        </span>
                                    </p>

                                    <div class="mt-2 flex items-center flex-wrap gap-x-3 gap-y-1 text-[11px] sm:text-[12px] text-slate-600">
                                        @if($row->max_guests)
                                            <span class="inline-flex items-center gap-1">
                                                <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                                    <circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                                                </svg>
                                                <span>{{ (int) $row->max_guests }} Gäste</span>
                                            </span>
                                        @endif

                                        @if($termsByAttribute && count($termsByAttribute))
                                            @foreach($termsByAttribute->take(2) as $term)
                                                @php $t = $term->translate(); @endphp
                                                <span class="inline-flex items-center gap-1">
                                                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                        <circle cx="12" cy="12" r="9"/><path d="m5 12 5 5L20 7"/>
                                                    </svg>
                                                    <span class="truncate">{{ $t->name }}</span>
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>

                                    @php
                                        $originalCurrency = strtoupper($row->currency ?: currency_base_code());
                                        $sessionCurrency  = currency_session_code();
                                        $showOriginal     = $originalCurrency !== $sessionCurrency;
                                        $convertedAmount  = convert_currency((float) $row->price, $originalCurrency);
                                        $noDecimalCurrencies = ['HUF','ISK','JPY','KRW','VND','CLP','IDR', 'ALL', 'RSD', 'MKD'];
                                        $originalAmount = number_format(
                                            (float) $row->price,
                                            in_array($originalCurrency, $noDecimalCurrencies, true) ? 0 : 2,
                                            ',',
                                            '.'
                                        );
                                    @endphp

                                    <div class="mt-auto pt-3 border-t border-slate-100"
                                         :class="isListView ? 'mt-2' : ''">
                                        <div class="flex items-end justify-between gap-2">

                                            <div class="flex flex-col min-w-0">
                                                <div class="flex items-baseline gap-1.5 flex-wrap">
                                                    <span class="font-extrabold text-slate-900 leading-none"
                                                          :class="isListView ? 'text-[16px] sm:text-[17px]' : 'text-[17px]'">
                                                        {{ number_format($convertedAmount, 2, ',', '.') }} {{ currency_symbol($sessionCurrency) }}
                                                    </span>
                                                    <span class="text-[11px] sm:text-[12px] text-slate-500 font-medium">/ Nacht</span>
                                                </div>

                                                @if($showOriginal)
                                                    <span class="mt-0.5 text-[11px] text-slate-400 font-medium tabular-nums truncate">
                                                        {{ $originalAmount }} {{ $row->currency }}
                                                    </span>
                                                @endif
                                            </div>

                                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-brand-700 bg-brand-50 group-hover:bg-brand-100 px-2.5 py-1.5 rounded-full transition-colors shrink-0">
                                                Details
                                                <svg class="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="col-span-full py-24 text-center fade-in">
                            <div class="w-24 h-24 mx-auto mb-6 rounded-3xl bg-brand-50 flex items-center justify-center">
                                <svg class="w-11 h-11 text-brand-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-2">Keine Campsites gefunden</h3>
                            <p class="text-slate-500 mb-7 max-w-md mx-auto text-sm leading-relaxed">
                                Wir konnten keine Campingplätze für deine Suche finden. Versuche es mit weniger Filtern oder einem anderen Zeitraum.
                            </p>
                            <button @click="resetFilters()"
                                    class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-lg font-semibold shadow-sm transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
                                </svg>
                                Filter zurücksetzen
                            </button>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if($rows->hasPages())
                    @php
                        $currentPage = $rows->currentPage();
                        $lastPage    = $rows->lastPage();
                        $window      = 1;
                        $pages       = [1];
                        for ($i = max(2, $currentPage - $window); $i <= min($lastPage - 1, $currentPage + $window); $i++) {
                            $pages[] = $i;
                        }
                        if ($lastPage > 1) $pages[] = $lastPage;
                        $pages = array_values(array_unique($pages));
                        sort($pages);
                    @endphp

                    <nav class="mt-14 flex flex-col items-center gap-3" aria-label="Pagination">
                        <ul class="flex items-center justify-center gap-1.5 flex-wrap">
                            <li>
                                @if($rows->onFirstPage())
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                @else
                                    <a href="{{ $rows->previousPageUrl() }}" @click.prevent="goToPage({{ $currentPage - 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </a>
                                @endif
                            </li>

                            @php $prev = 0; @endphp
                            @foreach($pages as $page)
                                @if($prev && $page - $prev > 1)
                                    <li><span class="inline-flex items-center justify-center w-10 h-10 text-slate-400 select-none">…</span></li>
                                @endif
                                <li>
                                    @if($page == $currentPage)
                                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-semibold shadow-sm ring-4 ring-brand-100">{{ $page }}</span>
                                    @else
                                        <a href="{{ $rows->url($page) }}" @click.prevent="goToPage({{ $page }})"
                                           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50 hover:border-slate-300 transition">{{ $page }}</a>
                                    @endif
                                </li>
                                @php $prev = $page; @endphp
                            @endforeach

                            <li>
                                @if($rows->hasMorePages())
                                    <a href="{{ $rows->nextPageUrl() }}" @click.prevent="goToPage({{ $currentPage + 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </a>
                                @else
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                @endif
                            </li>
                        </ul>

                        <p class="text-xs text-slate-500 font-medium">
                            Zeige <span class="text-slate-900 font-semibold">{{ $rows->firstItem() ?? 0 }}</span>–<span class="text-slate-900 font-semibold">{{ $rows->lastItem() ?? 0 }}</span>
                            von <span class="text-slate-900 font-semibold">{{ $rows->total() }}</span> Ergebnissen
                        </p>
                    </nav>
                @endif

                @if(!empty($seo_content))
                    <div class="mt-10 p-4 rounded-2xl bg-white border border-slate-200 blog-post text-slate-700 text-sm leading-relaxed description max-w-none
            [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-12 [&_h2]:mb-4
            [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-gray-900 [&_h3]:mt-8 [&_h3]:mb-3
            [&_p]:my-4 [&_p]:leading-relaxed
            [&_a]:text-blue-600 [&_a]:no-underline hover:[&_a]:underline
            [&_strong]:text-gray-900 [&_strong]:font-semibold
            [&_ul]:my-4 [&_ul]:pl-6 [&_ul]:list-disc
            [&_ol]:my-4 [&_ol]:pl-6 [&_ol]:list-decimal
            [&_li]:my-1
            ">
                        {!! $seo_content !!}
                    </div>
                @endif
            </main>

            {{-- ═══════════════════ MAP PANEL ═══════════════════ --}}
            <div x-show="mapOpen" x-cloak
                 :class="isDesktop
                    ? 'lg:block relative'
                    : 'fixed inset-0 z-50 flex flex-col justify-end'">

                <div x-show="!isDesktop" x-cloak
                     class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
                     @click="mapOpen = false"></div>

                <div :class="isDesktop
                        ? 'lg:sticky lg:top-[110px] h-[calc(100vh-140px)] max-h-[800px] rounded-2xl overflow-hidden border border-slate-200 shadow-card bg-slate-100 flex flex-col'
                        : 'relative bg-white rounded-t-3xl shadow-pop h-[85vh] flex flex-col overflow-hidden'">

                    <div x-show="!isDesktop" x-cloak
                         class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
                        <div>
                            <h3 class="font-bold text-slate-900">Karte</h3>
                            <p class="text-xs text-slate-500"><span x-text="totalResults"></span> Ergebnisse</p>
                        </div>
                        <button @click="mapOpen = false"
                                class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                            <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="flex-1 relative bg-slate-100">
                        <div id="mapcc" class="w-full h-full">
                            <div id="bravo_results_map" class="w-full h-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE SEARCH MODAL ═══════════════════ --}}
    <div x-show="mobileSearchOpen" x-cloak class="md:hidden fixed inset-0 z-[55] bg-white flex flex-col mobile-full-height">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
            <button @click="cancelMobileSearch()"
                    class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <h2 class="font-bold text-slate-900">Suche</h2>
            <button @click="resetMobileDraft()"
                    class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition px-2">
                Zurücksetzen
            </button>
        </div>

        <div class="flex-1 overflow-y-auto thin-scroll mobile-search-scroll">
            <div class="px-5 py-5 border-b border-slate-200 relative" @click.outside="mobileLocationOpen = false">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Standort</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                    <input type="text" x-model="mobileDraft.city_name"
                           @input.debounce.350ms="searchMobileLocations()"
                           @focus="if (mobileLocationSuggestions.length) mobileLocationOpen = true"
                           placeholder="Stadt oder Region eingeben"
                           autocomplete="off" inputmode="text"
                           class="w-full pl-12 pr-10 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">

                    <svg x-show="mobileLocationLoading" x-cloak
                         class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                         fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                        <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                    </svg>
                </div>

                <div x-show="mobileLocationOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="mt-2 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden max-h-[280px] overflow-y-auto thin-scroll z-20 relative">
                    <template x-for="(s, idx) in mobileLocationSuggestions" :key="idx">
                        <button type="button" @click="selectMobileLocation(s)"
                                class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0 hover:bg-slate-50 active:bg-brand-50">
                            <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                            </div>
                        </button>
                    </template>
                </div>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Reisezeitraum</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="3" y="4" width="18" height="18" rx="2"/>
                        <path d="M16 2v4M8 2v4M3 10h18"/>
                    </svg>
                    <input type="text" x-ref="mobileDateRange" placeholder="Anreise – Abreise"
                           class="w-full pl-12 pr-4 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none cursor-pointer">
                </div>
                <p x-show="mobileDraft.nights > 0" x-cloak class="text-xs text-brand-600 font-semibold mt-2 pl-1 inline-flex items-center gap-1">
                    <span x-text="mobileDraft.nights"></span>
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                    </svg>
                </p>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Gäste</label>
                <div class="space-y-4">
                    <template x-for="row in guestRows" :key="row.key">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                <p class="text-xs text-slate-500" x-text="row.hint"></p>
                            </div>
                            <div class="flex items-center gap-3">
                                <button type="button" @click="mobileDecGuest(row.key)"
                                        :disabled="mobileDraft[row.key] <= row.min"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                <span class="w-6 text-center text-sm font-semibold text-slate-900" x-text="mobileDraft[row.key]"></span>
                                <button type="button" @click="mobileIncGuest(row.key)"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <label class="flex items-center justify-between px-5 py-5 border-b border-slate-200 cursor-pointer">
                <div>
                    <p class="font-semibold text-sm text-slate-900">Haustiere erlaubt</p>
                    <p class="text-xs text-slate-500 mt-0.5">Nur Campsites mit Haustiererlaubnis</p>
                </div>
                <div class="relative shrink-0 ml-4">
                    <input type="checkbox" :checked="mobileDraft.pets_allowed > 0"
                           @change="mobileDraft.pets_allowed = $event.target.checked ? 1 : 0"
                           class="sr-only peer">
                    <div class="w-12 h-7 rounded-full bg-slate-200 peer-checked:bg-brand-600 transition-colors"></div>
                    <div class="absolute top-1 left-1 w-5 h-5 rounded-full bg-white shadow peer-checked:translate-x-5 transition-transform"></div>
                </div>
            </label>
        </div>

        <div class="shrink-0 border-t border-slate-200 p-4 bg-white safe-bottom">
            <button @click="applyMobileSearch()"
                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-base shadow-sm transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                </svg>
                Ergebnisse anzeigen
            </button>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE FILTER DRAWER ═══════════════════ --}}
    <div x-show="mobileFiltersOpen" x-cloak class="fixed inset-0 z-50 lg:hidden">
        <div x-show="mobileFiltersOpen" x-transition.opacity
             @click="mobileFiltersOpen = false"
             class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

        <div x-show="mobileFiltersOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-y-full"
             x-transition:enter-end="translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-y-0"
             x-transition:leave-end="translate-y-full"
             class="absolute bottom-0 inset-x-0 bg-white rounded-t-3xl max-h-[88vh] flex flex-col">

            <div class="flex-shrink-0 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <h2 class="font-bold text-lg text-slate-900">Filter</h2>
                    <span x-show="appliedCount > 0" x-cloak
                          class="inline-flex items-center justify-center min-w-[22px] h-6 px-2 rounded-full bg-brand-600 text-white text-xs font-bold"
                          x-text="appliedCount"></span>
                </div>
                <button @click="mobileFiltersOpen = false"
                        class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto thin-scroll mobile-drawer-scroll p-6 space-y-6">
                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                    <div class="flex items-center gap-2 mb-3">
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                            <input type="number" min="0" x-model.number="filters.price_min" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                            <input type="number" min="0" x-model.number="filters.price_max" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                    </div>
                    <input type="range" class="brand-slider w-full"
                           :min="minPrice" :max="maxPrice" step="5"
                           x-model.number="filters.price_max"
                           @input.debounce.500ms="applyFilters()">
                    <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                        <span x-text="minPrice + ' €'"></span>
                        <span x-text="maxPrice + ' €'"></span>
                    </div>
                </section>

                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                    <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                        <button type="button" @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                :disabled="filters.adults <= 1"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm disabled:opacity-40 flex items-center justify-center text-lg">−</button>
                        <div class="flex-1 text-center">
                            <span class="text-xl font-bold text-slate-900" x-text="filters.adults"></span>
                        </div>
                        <button type="button" @click="filters.adults++; applyFilters()"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center text-lg">+</button>
                    </div>
                </section>

                @if(isset($attributes) && $attributes->count())
                    <section>
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Ausstattung & Typ</h3>
                        <div class="space-y-5 max-h-[380px] overflow-y-auto thin-scroll pr-1">
                            @foreach($attributes as $attr)
                                @if($attr->terms->count())
                                    @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                    <div>
                                        <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                        <div class="flex flex-wrap gap-1.5 px-2.5">
                                            @foreach($attr->terms as $term)
                                                @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                <button type="button"
                                                        @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                        :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                            ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                            : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                    <span>{{ __($termName) }}</span>
                                                    @if(!empty($term->hotel_count))
                                                        <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                    @endif
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>
                @endif

                <label class="flex items-center gap-3 px-2.5 py-2.5 rounded-lg hover:bg-slate-100 cursor-pointer">
                    <input type="checkbox" :checked="filters.pets > 0"
                           @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                           class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                    <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                </label>
            </div>

            <div class="flex-shrink-0 border-t border-slate-200 p-4 flex gap-3 safe-bottom">
                <button @click="resetFilters()"
                        class="flex-1 border border-slate-300 rounded-lg py-3 font-semibold text-sm text-slate-700 hover:bg-slate-50 transition">
                    Zurücksetzen
                </button>
                <button @click="mobileFiltersOpen = false"
                        class="flex-1 bg-brand-600 hover:bg-brand-700 text-white rounded-lg py-3 font-semibold text-sm transition">
                    <span x-show="totalResults > 0" x-cloak>
                        <span x-text="totalResults"></span> Ergebnisse
                    </span>
                    <span x-show="totalResults === 0" x-cloak>Anwenden</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    {!! App\Helpers\MapEngine::scripts() !!}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>

    <script>
        var bravo_map_data = {
            markers: {!! json_encode($markersPayload ?? []) !!},
            map_lat_default: {{ $defaultLat }},
            map_lng_default: {{ $defaultLng }},
            map_zoom_default: {{ $defaultZoom }},
        };
    </script>

    <script src="{{ asset('js/filter-map.js?_ver='.config('app.asset_version')) }}"></script>

    <script>
        function campsiteSearch(config) {
            return {
                filters: Object.assign({
                    city_name: '', location_id: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0,
                    price_min: 0, price_max: 500, orderby: '',
                    attrs: {},
                    map_lat: '', map_lng: '',
                }, config.initial || {}),

                minPrice: config.minPrice,
                maxPrice: config.maxPrice,
                totalResults: config.totalResults,
                layout: config.mapLayout ? 'map' : 'list',
                loading: false,
                guestsOpen: false,

                sidebarOpen: false,
                mapOpen: false,
                mobileFiltersOpen: false,
                mobileSearchOpen: false,
                view: 'grid',

                isDesktop: window.matchMedia('(min-width: 1024px)').matches,
                attributes: config.attributes || [],
                locale: config.locale || 'en',

                defaultLat:  config.defaultLat  || 51.1657,
                defaultLng:  config.defaultLng  || 10.4515,
                defaultZoom: config.defaultZoom || 6,

                _desktopFP: null,
                _mobileFP: null,
                _resizeHandler: null,
                _scrollY: 0,
                _locationPicked: false,

                locationSuggestions: [],
                locationLoading: false,
                locationOpen: false,
                locationHighlight: -1,
                locationAbort: null,

                mobileLocationSuggestions: [],
                mobileLocationLoading: false,
                mobileLocationOpen: false,
                mobileLocationAbort: null,

                /* ══════════════ View state ══════════════ */
                get isListView() { return this.view === 'list'; },

                get gridCols() {
                    if (this.isListView) return 'grid-cols-1';

                    const both = this.sidebarOpen && this.mapOpen;
                    const one  = (this.sidebarOpen || this.mapOpen) && !both;

                    if (both) return 'grid-cols-1 sm:grid-cols-2';
                    if (one)  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
                    return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
                },

                setView(v) {
                    if (v !== 'grid' && v !== 'list') return;
                    this.view = v;
                    try { localStorage.setItem('campsiteView', v); } catch (e) {}
                },

                /* ══════════════ Lazy-load reinit ══════════════ */
                reinitLazyLoad() {
                    try {
                        if (window.lazySizes && typeof window.lazySizes.init === 'function') window.lazySizes.init();
                        if (window.lazyLoadInstance && typeof window.lazyLoadInstance.update === 'function') window.lazyLoadInstance.update();
                        if (typeof window.lozad === 'function') window.lozad('#results img[data-src]').observe();
                        if (typeof window.LazyLoad === 'function') new window.LazyLoad();
                        if (window.jQuery && typeof window.jQuery.fn.lazyload === 'function') {
                            window.jQuery('#results img[data-src]').lazyload();
                        }
                    } catch (e) {}

                    setTimeout(() => {
                        document.querySelectorAll('#results img[data-src]').forEach(img => {
                            const src = img.getAttribute('data-src');
                            if (!src) return;
                            img.src = src;
                            img.removeAttribute('data-src');
                            img.classList.add('lazyloaded', 'loaded');
                        });
                    }, 400);
                },

                /* ══════════════ Flatpickr ══════════════ */
                _buildFlatpickrLocale() {
                    const dr = window.daterangepickerLocale || {};
                    const fallbackDays   = ['Su','Mo','Tu','We','Th','Fr','Sa'];
                    const fallbackMonths = ['January','February','March','April','May','June','July','August','September','October','November','December'];
                    const weekdays = Array.isArray(dr.daysOfWeek) && dr.daysOfWeek.length === 7 ? dr.daysOfWeek : fallbackDays;
                    const months   = Array.isArray(dr.monthNames) && dr.monthNames.length === 12 ? dr.monthNames : fallbackMonths;
                    const rawFirst = parseInt(dr.first_day_of_week, 10);
                    const firstDay = Number.isNaN(rawFirst) ? 1 : Math.max(0, Math.min(6, rawFirst));
                    return {
                        weekdays: { shorthand: weekdays, longhand: weekdays },
                        months:   { shorthand: months.map(m => m.slice(0, 3)), longhand: months },
                        firstDayOfWeek: firstDay,
                        weekAbbreviation: dr.weekLabel || 'W',
                        rangeSeparator: ' – ',
                        scrollTitle: 'Scroll to increment',
                        toggleTitle: 'Click to toggle',
                    };
                },

                _fpOptions() {
                    return {
                        mode: 'range',
                        dateFormat: 'Y-m-d',
                        altInput: true,
                        altFormat: 'd.m.Y',
                        minDate: 'today',
                        locale: this._buildFlatpickrLocale(),
                    };
                },

                /* ══════════════ Location (Photon) ══════════════ */
                async searchLocations() {
                    const q = (this.filters.city_name || '').trim();
                    if (q.length < 3) {
                        this.locationSuggestions = [];
                        this.locationOpen = false;
                        this.locationLoading = false;
                        return;
                    }
                    if (this.locationAbort) { try { this.locationAbort.abort(); } catch (e) {} }
                    this.locationAbort = new AbortController();
                    this.locationLoading = true;
                    this.locationHighlight = -1;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.locationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.filters.city_name || '').trim() !== queryAtFetch) {
                            this.locationLoading = false;
                            return;
                        }

                        this.locationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                country: p.country || '',
                                countrycode: p.countrycode || '',
                                state: p.state || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.locationOpen = this.locationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.locationSuggestions = [];
                    } finally {
                        this.locationLoading = false;
                    }
                },

                _locationSubtitle(p) {
                    const parts = [];
                    if (p.state && p.state !== p.name) parts.push(p.state);
                    if (p.county && p.county !== p.name && p.county !== p.state) parts.push(p.county);
                    if (p.country && p.country !== p.name) parts.push(p.country);
                    return parts.join(', ');
                },

                selectLocation(s) {
                    if (!s) return;

                    this._locationPicked = true;
                    this.filters.city_name  = s.name;
                    this.filters.map_lat    = s.lat;
                    this.filters.map_lng    = s.lng;
                    this.filters.location_id = '';
                    this.locationOpen = false;
                    this.locationSuggestions = [];
                    this.locationHighlight = -1;

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                        this.$nextTick(() => setTimeout(() => {
                            if (this.mapOpen) this.centerMapOn(s.lat, s.lng, 11);
                        }, 250));
                    }

                    this.applyFilters();
                },

                moveHighlight(delta) {
                    if (!this.locationOpen || this.locationSuggestions.length === 0) return;
                    const n = this.locationSuggestions.length;
                    let next = this.locationHighlight + delta;
                    if (next < 0) next = n - 1;
                    if (next >= n) next = 0;
                    this.locationHighlight = next;
                },

                async searchMobileLocations() {
                    const q = (this.mobileDraft.city_name || '').trim();
                    if (q.length < 3) {
                        this.mobileLocationSuggestions = [];
                        this.mobileLocationOpen = false;
                        this.mobileLocationLoading = false;
                        return;
                    }
                    if (this.mobileLocationAbort) { try { this.mobileLocationAbort.abort(); } catch (e) {} }
                    this.mobileLocationAbort = new AbortController();
                    this.mobileLocationLoading = true;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.mobileLocationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.mobileDraft.city_name || '').trim() !== queryAtFetch) {
                            this.mobileLocationLoading = false;
                            return;
                        }

                        this.mobileLocationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                countrycode: p.countrycode || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.mobileLocationOpen = this.mobileLocationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.mobileLocationSuggestions = [];
                    } finally {
                        this.mobileLocationLoading = false;
                    }
                },

                selectMobileLocation(s) {
                    if (!s) return;
                    this.mobileDraft.city_name = s.name;
                    this.mobileDraft.map_lat   = s.lat;
                    this.mobileDraft.map_lng   = s.lng;
                    this.mobileLocationOpen = false;
                    this.mobileLocationSuggestions = [];

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                    }
                },

                /* ══════════════ Map helpers ══════════════ */
                _getMapInstance() {
                    const keys = ['bravo_map', 'gmap', 'map', 'googleMap', 'theMap', 'leafletMap', 'mapbox'];
                    for (const k of keys) {
                        const m = window[k];
                        if (m && typeof m === 'object') {
                            if (typeof m.setCenter === 'function') return { engine: 'google', map: m };
                            if (typeof m.setView === 'function' && typeof m.getZoom === 'function') return { engine: 'leaflet', map: m };
                            if (typeof m.flyTo === 'function' && typeof m.getSource === 'function') return { engine: 'mapbox', map: m };
                        }
                    }
                    return null;
                },

                _whenMapReady(cb, tries = 0) {
                    const found = this._getMapInstance();
                    if (found) { cb(found); return; }
                    if (tries > 60) return; // ~6s
                    setTimeout(() => this._whenMapReady(cb, tries + 1), 100);
                },

                centerMapOn(lat, lng, zoom) {
                    if (lat == null || lng == null || lat === '' || lng === '') return;
                    lat = parseFloat(lat); lng = parseFloat(lng);
                    if (Number.isNaN(lat) || Number.isNaN(lng)) return;

                    if (window.bravo_map_data) {
                        window.bravo_map_data.map_lat_default = lat;
                        window.bravo_map_data.map_lng_default = lng;
                        if (zoom) window.bravo_map_data.map_zoom_default = zoom;
                    }

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google') {
                                map.setCenter({ lat, lng });
                                if (zoom) map.setZoom(zoom);
                                if (window.google?.maps?.event) window.google.maps.event.trigger(map, 'resize');
                            } else if (engine === 'leaflet') {
                                map.setView([lat, lng], zoom || map.getZoom() || 10);
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                map.flyTo({ center: [lng, lat], zoom: zoom || map.getZoom() || 10 });
                            }
                        } catch (e) {}
                    });
                },

                fitBoundsToMarkers(markers, fallbackLat, fallbackLng, fallbackZoom) {
                    const list = (markers || [])
                        .map(m => ({ lat: parseFloat(m.lat), lng: parseFloat(m.lng) }))
                        .filter(m => !Number.isNaN(m.lat) && !Number.isNaN(m.lng));

                    if (!list.length) return this.centerMapOn(fallbackLat, fallbackLng, fallbackZoom);
                    if (list.length === 1) return this.centerMapOn(list[0].lat, list[0].lng, 13);

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                const b = new window.google.maps.LatLngBounds();
                                list.forEach(p => b.extend(p));
                                map.fitBounds(b, { padding: 48, maxZoom: 14 });
                            } else if (engine === 'leaflet' && window.L) {
                                const b = window.L.latLngBounds(list.map(p => [p.lat, p.lng]));
                                map.fitBounds(b, { padding: [40, 40], maxZoom: 14 });
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                const lngs = list.map(p => p.lng), lats = list.map(p => p.lat);
                                map.fitBounds(
                                    [[Math.min(...lngs), Math.min(...lats)],
                                     [Math.max(...lngs), Math.max(...lats)]],
                                    { padding: 48, maxZoom: 14 }
                                );
                            }
                        } catch (e) {}
                    });
                },

                refreshMapSize() {
                    window.dispatchEvent(new Event('resize'));
                    try {
                        if (window.google && window.google.maps && window.google.maps.event) {
                            ['bravo_map','gmap','map','googleMap','theMap'].forEach(key => {
                                const m = window[key];
                                if (m && typeof m === 'object' && typeof m.getCenter === 'function') {
                                    window.google.maps.event.trigger(m, 'resize');
                                }
                            });
                        }
                        if (window.L && window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize();
                        if (typeof window.refreshMapMarkers === 'function') window.refreshMapMarkers();
                    } catch (e) {}
                },

                /* ══════════════ Markers ══════════════ */
                extractMarkersFromDoc(doc) {
                    const el = doc.querySelector('#bravo-map-markers-data');
                    if (!el) return null;
                    try {
                        return {
                            markers: JSON.parse(el.dataset.markers || '[]'),
                            lat:  parseFloat(el.dataset.lat)  || this.defaultLat,
                            lng:  parseFloat(el.dataset.lng)  || this.defaultLng,
                            zoom: parseInt(el.dataset.zoom)   || this.defaultZoom,
                        };
                    } catch (e) { return null; }
                },

                _popupHtml(mk) {
                    return `
                        <div style="max-width:220px;font-family:Inter,system-ui,sans-serif">
                            ${mk.image ? `<img src="${mk.image}" style="width:100%;border-radius:8px;margin-bottom:6px">` : ''}
                            <strong style="font-size:13px;color:#0f172a">${mk.title || ''}</strong>
                            ${mk.price ? `<div style="margin-top:4px;color:#4f46e5;font-weight:700;font-size:13px">${mk.price}</div>` : ''}
                        </div>`;
                },

                syncMapMarkers(payload) {
                    if (!payload) return;

                    window.bravo_map_data = window.bravo_map_data || {};
                    window.bravo_map_data.markers           = payload.markers;
                    window.bravo_map_data.map_lat_default   = payload.lat;
                    window.bravo_map_data.map_lng_default   = payload.lng;
                    window.bravo_map_data.map_zoom_default  = payload.zoom;

                    const fallback = {
                        lat:  payload.lat  || this.defaultLat,
                        lng:  payload.lng  || this.defaultLng,
                        zoom: payload.zoom || this.defaultZoom,
                    };

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                (map.__bravoMarkers || []).forEach(mk => mk.setMap && mk.setMap(null));
                                map.__bravoMarkers = [];

                                const info = map.__bravoInfo ||
                                             (map.__bravoInfo = new window.google.maps.InfoWindow());

                                payload.markers.forEach(mk => {
                                    const marker = new window.google.maps.Marker({
                                        position: { lat: parseFloat(mk.lat), lng: parseFloat(mk.lng) },
                                        map,
                                        title: mk.title || '',
                                    });
                                    marker.__id = mk.id;

                                    if (mk.title || mk.image) {
                                        marker.addListener('click', () => {
                                            info.setContent(this._popupHtml(mk));
                                            info.open(map, marker);
                                        });
                                    }
                                    map.__bravoMarkers.push(marker);
                                });

                                if (payload.markers.length === 1 && map.__bravoMarkers[0]) {
                                    const m = map.__bravoMarkers[0];
                                    const mk = payload.markers[0];
                                    if (mk.title || mk.image) {
                                        info.setContent(this._popupHtml(mk));
                                        info.open(map, m);
                                    }
                                }
                            }
                            else if (engine === 'leaflet' && window.L) {
                                if (map.__bravoLayer) map.removeLayer(map.__bravoLayer);
                                const layer = window.L.layerGroup().addTo(map);
                                payload.markers.forEach(mk => {
                                    const marker = window.L.marker([parseFloat(mk.lat), parseFloat(mk.lng)]).addTo(layer);
                                    marker.__id = mk.id;
                                    if (mk.title || mk.image) marker.bindPopup(this._popupHtml(mk));
                                });
                                map.__bravoLayer = layer;
                                if (payload.markers.length === 1) {
                                    const first = layer.getLayers()[0];
                                    if (first && first.openPopup) first.openPopup();
                                }
                            }
                            else if (engine === 'mapbox' && window.mapboxgl) {
                                const geojson = {
                                    type: 'FeatureCollection',
                                    features: payload.markers.map(mk => ({
                                        type: 'Feature',
                                        geometry: { type: 'Point', coordinates: [parseFloat(mk.lng), parseFloat(mk.lat)] },
                                        properties: { title: mk.title || '', id: mk.id, image: mk.image || '', price: mk.price || '' }
                                    }))
                                };
                                if (map.getSource('bravo-markers')) {
                                    map.getSource('bravo-markers').setData(geojson);
                                } else {
                                    map.addSource('bravo-markers', { type: 'geojson', data: geojson });
                                    map.addLayer({
                                        id: 'bravo-markers', type: 'circle', source: 'bravo-markers',
                                        paint: { 'circle-radius': 8, 'circle-color': '#4f46e5',
                                                 'circle-stroke-color': '#fff', 'circle-stroke-width': 2 }
                                    });
                                }
                            }
                        } catch (e) {}

                        // Prefer markers bounds; when none, fall back to lat/lng/zoom
                        this.fitBoundsToMarkers(payload.markers, fallback.lat, fallback.lng, fallback.zoom);
                        this.refreshMapSize();
                    });
                },

                // Card hover → open matching marker popup
                highlightMarker(id) {
                    if (id == null) return;
                    const found = this._getMapInstance();
                    if (!found) return;
                    const { engine, map } = found;
                    try {
                        if (engine === 'google') {
                            const marker = (map.__bravoMarkers || []).find(m => String(m.__id) === String(id));
                            if (marker && window.google?.maps?.event) {
                                window.google.maps.event.trigger(marker, 'click');
                            }
                        } else if (engine === 'leaflet' && map.__bravoLayer) {
                            const layer = map.__bravoLayer.getLayers().find(m => String(m.__id) === String(id));
                            if (layer && layer.openPopup) layer.openPopup();
                        }
                    } catch (e) {}
                },

                /* ══════════════ Mobile draft ══════════════ */
                mobileDraft: {
                    city_name: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0, pets_allowed: 0,
                    map_lat: '', map_lng: '',
                    get nights() {
                        if (!this.start || !this.end) return 0;
                        const n = Math.round((new Date(this.end) - new Date(this.start)) / 86400000);
                        return n > 0 ? n : 0;
                    },
                },

                guestRows: [
                    { key: 'adults',   label: 'Erwachsene', hint: '13+ Jahre',     min: 1 },
                    { key: 'children', label: 'Kinder',     hint: '2–12 Jahre',    min: 0 },
                    { key: 'pets',     label: 'Haustiere',  hint: 'Katzen, Hunde', min: 0 },
                ],

                get guestSummary() {
                    const parts = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) parts.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) parts.push(`${this.filters.pets} 🐾`);
                    return parts.join(' · ');
                },

                get nights() {
                    const s = this._toIso(this.filters.start);
                    const e = this._toIso(this.filters.end);
                    if (!s || !e) return 0;
                    const n = Math.round((new Date(e) - new Date(s)) / 86400000);
                    return n > 0 ? n : 0;
                },

                _toIso(input) {
                    if (!input) return '';
                    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input;
                    if (/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) {
                        const [d, m, y] = input.split('.');
                        return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const dd = String(input.getDate()).padStart(2, '0');
                        return `${y}-${m}-${dd}`;
                    }
                    return '';
                },

                get mobileTriggerPrimary() { return this.filters.city_name || 'Wohin?'; },

                get mobileTriggerSecondary() {
                    const parts = [];
                    if (this.filters.start && this.filters.end) {
                        parts.push(`${this.fmtDate(this.filters.start)} – ${this.fmtDate(this.filters.end)}`);
                    } else { parts.push('Wann?'); }
                    const g = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) g.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) g.push(`${this.filters.pets} 🐾`);
                    parts.push(g.join(' · '));
                    return parts.join(' · ');
                },

                get layoutStyle() {
                    if (!this.isDesktop) return 'display: block;';
                    if (this.sidebarOpen && this.mapOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr) 420px;';
                    if (this.sidebarOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr);';
                    if (this.mapOpen) return 'display: grid; grid-template-columns: minmax(0, 1fr) 420px;';
                    return 'display: block;';
                },

                get appliedCount() {
                    let n = 0;
                    if (this.filters.city_name) n++;
                    if (this.filters.start && this.filters.end) n++;
                    if (this.filters.adults > 2) n++;
                    if (this.filters.children > 0) n++;
                    if (this.filters.pets > 0) n++;
                    if (this.filters.price_min > this.minPrice) n++;
                    if (this.filters.price_max < this.maxPrice) n++;
                    if (this.filters.orderby) n++;
                    for (const t of Object.values(this.filters.attrs || {})) n += (t || []).length;
                    return n;
                },

                get activeChips() {
                    const chips = [];
                    if (this.filters.city_name) chips.push({ key: 'city', label: this.filters.city_name });
                    if (this.filters.start && this.filters.end) {
                        chips.push({ key: 'dates', label: `${this.fmtDate(this.filters.start)} → ${this.fmtDate(this.filters.end)}` });
                    }
                    if (this.filters.price_min > this.minPrice || this.filters.price_max < this.maxPrice) {
                        chips.push({ key: 'price', label: `${this.filters.price_min}€ – ${this.filters.price_max}€` });
                    }
                    if (this.filters.pets > 0) chips.push({ key: 'pets', label: 'Haustiere' });
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        const attr = (this.attributes || []).find(a => a.id == attrId);
                        if (!attr) continue;
                        (termIds || []).forEach(termId => {
                            const term = (attr.terms || []).find(t => t.id == termId);
                            if (!term) return;
                            chips.push({ key: `attr_${attrId}_${termId}`, label: term.name, attrId: parseInt(attrId, 10), termId: parseInt(termId, 10) });
                        });
                    }
                    return chips;
                },

                fmtDate(input) {
                    if (!input) return '';
                    if (typeof input === 'string' && /^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) return input;
                    if (typeof input === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(input)) {
                        const [y, m, d] = input.split('-');
                        return `${d}.${m}.${y}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const d = String(input.getDate()).padStart(2, '0');
                        return `${d}.${m}.${y}`;
                    }
                    return '';
                },

                toIso(input) { return this._toIso(input); },

                isAttrChecked(attrId, termId) { return (this.filters.attrs[attrId] || []).includes(termId); },
                toggleAttr(attrId, termId, checked) {
                    if (!this.filters.attrs[attrId]) this.filters.attrs[attrId] = [];
                    const arr = this.filters.attrs[attrId];
                    const i = arr.indexOf(termId);
                    if (checked && i === -1)       arr.push(termId);
                    else if (!checked && i !== -1) arr.splice(i, 1);
                    if (arr.length === 0) delete this.filters.attrs[attrId];
                    this.applyFilters();
                },

                init() {
                    const desktop = window.matchMedia('(min-width: 1024px)').matches;

                    let savedView = null;
                    try { savedView = localStorage.getItem('campsiteView'); } catch (e) {}
                    const hasSavedView = savedView === 'grid' || savedView === 'list';

                    this.view = hasSavedView ? savedView : (desktop ? 'grid' : 'list');

                    if (desktop) { this.sidebarOpen = true; this.mapOpen = true; }
                    else         { this.sidebarOpen = false; this.mapOpen = false; }

                    this.$watch(
                        () => this.mobileSearchOpen || this.mobileFiltersOpen || (this.mapOpen && !this.isDesktop),
                        (locked) => {
                            if (locked) {
                                this._scrollY = window.scrollY || window.pageYOffset || 0;
                                document.body.style.top = `-${this._scrollY}px`;
                                document.body.classList.add('modal-open');
                            } else {
                                document.body.classList.remove('modal-open');
                                document.body.style.top = '';
                                if (this._scrollY) { window.scrollTo(0, this._scrollY); this._scrollY = 0; }
                            }
                        }
                    );

                    this.filters.start = this.toIso(this.filters.start);
                    this.filters.end   = this.toIso(this.filters.end);

                    const mq = window.matchMedia('(min-width: 1024px)');
                    const update = () => { this.isDesktop = mq.matches; };
                    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
                    update();

                    if (this.$refs.desktopDateRange) {
                        this._desktopFP = flatpickr(this.$refs.desktopDateRange, {
                            ...this._fpOptions(),
                            showMonths: window.matchMedia('(max-width: 767px)').matches ? 1 : 2,
                            defaultDate: (this.filters.start && this.filters.end) ? [this.filters.start, this.filters.end] : null,
                            onChange: (dates) => {
                                if (dates.length === 2) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = this.toIso(dates[1]);
                                    this.applyFilters();
                                } else if (dates.length === 1) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = '';
                                } else {
                                    this.filters.start = ''; this.filters.end = '';
                                    this.applyFilters();
                                }
                            },
                        });
                    }

                    this._initMobileFP();

                    this._resizeHandler = () => {
                        if (!this._desktopFP) return;
                        const want = window.matchMedia('(max-width: 767px)').matches ? 1 : 2;
                        if (this._desktopFP.config.showMonths !== want) this._desktopFP.set('showMonths', want);
                    };
                    window.addEventListener('resize', this._resizeHandler);

                    this.$nextTick(() => {
                        this.readBoundsFromDom();
                        this.reinitLazyLoad();
                        if (this.mapOpen) {
                            setTimeout(() => this.refreshMapSize(), 250);
                            setTimeout(() => this.refreshMapSize(), 800);
                        }
                    });

                    // ═══ Map positioning on first load ═══
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                            const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                            const payload = this.extractMarkersFromDoc(document);

                            if (hasLat && hasLng) {
                                this.filters.map_lat = parseFloat(this.filters.map_lat);
                                this.filters.map_lng = parseFloat(this.filters.map_lng);
                                this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                            } else {
                                this.filters.map_lat = this.defaultLat;
                                this.filters.map_lng = this.defaultLng;
                                if (payload && payload.markers.length) {
                                    this.fitBoundsToMarkers(payload.markers, this.defaultLat, this.defaultLng, this.defaultZoom);
                                } else {
                                    this.centerMapOn(this.defaultLat, this.defaultLng, this.defaultZoom);
                                }
                            }

                            if (payload) {
                                setTimeout(() => this.syncMapMarkers(payload), 200);
                            }
                        }, 600);
                    });
                },

                _initMobileFP() {
                    if (!this.$refs.mobileDateRange) return;
                    if (this.$refs.mobileDateRange._flatpickr) return;
                    this._mobileFP = flatpickr(this.$refs.mobileDateRange, {
                        ...this._fpOptions(),
                        showMonths: 1,
                        onChange: (dates) => {
                            if (dates.length === 2) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = this.toIso(dates[1]);
                            } else if (dates.length === 1) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = '';
                            } else {
                                this.mobileDraft.start = ''; this.mobileDraft.end = '';
                            }
                        },
                    });
                },

                readBoundsFromDom() {
                    const bounds = document.querySelector('#price-bounds');
                    if (!bounds) return;
                    const m = parseInt(bounds.dataset.min || '0', 10);
                    const M = parseInt(bounds.dataset.max || '0', 10);
                    if (M > 0 && M >= m) { this.minPrice = m; this.maxPrice = M; }
                },

                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                    if (this.sidebarOpen && this.mapOpen) this.refreshMapSize();
                },

                toggleMap() {
                    this.mapOpen = !this.mapOpen;
                    if (this.mapOpen) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                                const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                                this.syncMapMarkers(this.extractMarkersFromDoc(document));

                                if (hasLat && hasLng) {
                                    setTimeout(() => this.centerMapOn(
                                        parseFloat(this.filters.map_lat),
                                        parseFloat(this.filters.map_lng),
                                        11
                                    ), 220);
                                }

                                this.refreshMapSize();
                                setTimeout(() => this.refreshMapSize(), 250);
                            }, 120);
                        });
                    }
                },

                openMobileSearch() {
                    this.mobileDraft.city_name    = this.filters.city_name || '';
                    this.mobileDraft.start        = this.toIso(this.filters.start);
                    this.mobileDraft.end          = this.toIso(this.filters.end);
                    this.mobileDraft.adults       = this.filters.adults || 2;
                    this.mobileDraft.children     = this.filters.children || 0;
                    this.mobileDraft.pets         = this.filters.pets || 0;
                    this.mobileDraft.pets_allowed = this.filters.pets > 0 ? 1 : 0;
                    this.mobileDraft.map_lat      = this.filters.map_lat || '';
                    this.mobileDraft.map_lng      = this.filters.map_lng || '';
                    this.mobileSearchOpen = true;
                    this.$nextTick(() => {
                        this._initMobileFP();
                        if (this._mobileFP && this.mobileDraft.start && this.mobileDraft.end) {
                            this._mobileFP.setDate([this.mobileDraft.start, this.mobileDraft.end], false);
                        }
                    });
                },
                cancelMobileSearch() {
                    this.mobileSearchOpen = false;
                    this.mobileLocationOpen = false;
                },
                resetMobileDraft() {
                    this.mobileDraft.city_name = '';
                    this.mobileDraft.start = '';
                    this.mobileDraft.end = '';
                    this.mobileDraft.adults = 2;
                    this.mobileDraft.children = 0;
                    this.mobileDraft.pets = 0;
                    this.mobileDraft.pets_allowed = 0;
                    this.mobileDraft.map_lat = '';
                    this.mobileDraft.map_lng = '';
                    this.mobileLocationSuggestions = [];
                    this.mobileLocationOpen = false;
                    if (this._mobileFP) this._mobileFP.clear();
                },
                applyMobileSearch() {
                    this.filters.city_name = this.mobileDraft.city_name;
                    this.filters.start     = this.toIso(this.mobileDraft.start);
                    this.filters.end       = this.toIso(this.mobileDraft.end);
                    this.filters.adults    = this.mobileDraft.adults;
                    this.filters.children  = this.mobileDraft.children;
                    this.filters.pets      = this.mobileDraft.pets_allowed ? Math.max(1, this.mobileDraft.pets) : 0;
                    this.filters.map_lat   = this.mobileDraft.map_lat;
                    this.filters.map_lng   = this.mobileDraft.map_lng;
                    this.cancelMobileSearch();

                    // Center only when the map is visible
                    if (this.mapOpen && this.filters.map_lat && this.filters.map_lng) {
                        this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                    }

                    this.applyFilters();
                },
                mobileIncGuest(key) {
                    this.mobileDraft[key] = (this.mobileDraft[key] || 0) + 1;
                    if (key === 'pets' && this.mobileDraft.pets > 0) this.mobileDraft.pets_allowed = 1;
                },
                mobileDecGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.mobileDraft[key] || 0) > min) {
                        this.mobileDraft[key] = (this.mobileDraft[key] || 0) - 1;
                        if (key === 'pets' && this.mobileDraft.pets === 0) this.mobileDraft.pets_allowed = 0;
                    }
                },
                incGuest(key) { this.filters[key] = (this.filters[key] || 0) + 1; this.applyFilters(); },
                decGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.filters[key] || 0) > min) {
                        this.filters[key] = (this.filters[key] || 0) - 1;
                        this.applyFilters();
                    }
                },

                removeChip(chip) {
                    switch (chip.key) {
                        case 'city':
                            this.filters.city_name = '';
                            this.filters.map_lat = '';
                            this.filters.map_lng = '';
                            this.filters.location_id = '';
                            break;
                        case 'dates':
                            this.filters.start = ''; this.filters.end = '';
                            if (this._desktopFP) this._desktopFP.clear();
                            break;
                        case 'price':
                            this.filters.price_min = this.minPrice;
                            this.filters.price_max = this.maxPrice;
                            break;
                        case 'pets': this.filters.pets = 0; break;
                        default:
                            if (chip.key.startsWith('attr_')) {
                                const arr = this.filters.attrs[chip.attrId] || [];
                                const i = arr.indexOf(chip.termId);
                                if (i !== -1) arr.splice(i, 1);
                                if (arr.length === 0) delete this.filters.attrs[chip.attrId];
                            }
                    }
                    this.applyFilters();
                },

                resetFilters() {
                    this.filters = {
                        city_name: '', location_id: '', start: '', end: '',
                        adults: 2, children: 0, pets: 0,
                        price_min: this.minPrice, price_max: this.maxPrice,
                        orderby: '', attrs: {},
                        map_lat: this.defaultLat, map_lng: this.defaultLng,
                    };
                    if (this._desktopFP) this._desktopFP.clear();
                    this.applyFilters();
                },

                buildParams() {
                    const p = new URLSearchParams();
                    for (let [k, v] of Object.entries(this.filters)) {
                        if (k === 'attrs') continue;
                        if ((k === 'start' || k === 'end') && v) v = this.toIso(v);
                        if (v !== '' && v !== null && v !== undefined) p.set(k, v);
                    }
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        (termIds || []).forEach(id => p.append(`attrs[${attrId}][]`, id));
                    }
                    return p;
                },

                swapResults(doc, url) {
                    const newResults = doc.querySelector('#results');
                    const curResults = document.querySelector('#results');
                    if (newResults && curResults) curResults.innerHTML = newResults.innerHTML;

                    // Pull marker payload + re-render markers with fresh data
                    const markerPayload = this.extractMarkersFromDoc(doc);
                    this.syncMapMarkers(markerPayload);

                    this.$nextTick(() => {
                        if (curResults && window.Alpine && typeof Alpine.initTree === 'function') {
                            try { Alpine.initTree(curResults); } catch (e) {}
                        }
                        this.reinitLazyLoad();
                    });

                    const bounds = doc.querySelector('#price-bounds');
                    if (bounds) {
                        const newMin = parseInt(bounds.dataset.min || '0', 10);
                        const newMax = parseInt(bounds.dataset.max || '0', 10);
                        if (newMax > 0 && newMax >= newMin) {
                            this.minPrice = newMin;
                            this.maxPrice = newMax;
                            if (this.filters.price_min < newMin || this.filters.price_min > newMax) this.filters.price_min = newMin;
                            if (this.filters.price_max > newMax || this.filters.price_max < newMin) this.filters.price_max = newMax;
                            if (this.filters.price_min > this.filters.price_max) {
                                this.filters.price_min = newMin; this.filters.price_max = newMax;
                            }
                        }
                    }

                    const newPag = doc.querySelector('nav[aria-label="Pagination"]');
                    const curPag = document.querySelector('nav[aria-label="Pagination"]');
                    if (newPag) {
                        if (curPag) curPag.replaceWith(newPag);
                        else if (curResults) curResults.insertAdjacentElement('afterend', newPag);
                        this.$nextTick(() => {
                            if (window.Alpine && typeof Alpine.initTree === 'function') {
                                try { Alpine.initTree(newPag); } catch (e) {}
                            }
                        });
                    } else if (curPag) curPag.remove();

                    history.replaceState(null, '', url);

                    const countEl = doc.querySelector('[x-text="totalResults"]');
                    if (countEl) {
                        const m = (countEl.textContent || '').match(/\d+/);
                        if (m) this.totalResults = parseInt(m[0], 10);
                    }

                    // Honour URL map_lat/map_lng on every swap
                    const params = new URLSearchParams(url.split('?')[1] || '');
                    const lat = params.get('map_lat');
                    const lng = params.get('map_lng');
                    if (lat && lng) {
                        setTimeout(() => this.centerMapOn(lat, lng, 11), 400);
                    }
                },

                applyFilters() {
                    this.loading = true;
                    const params = this.buildParams();
                    params.delete('page');
                    const url = `${window.location.pathname}?${params}`;

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                goToPage(page) {
                    const params = this.buildParams();
                    if (page > 1) params.set('page', page); else params.delete('page');
                    const url = `${window.location.pathname}?${params}`;
                    this.loading = true;
                    window.scrollTo({ top: 0, behavior: 'smooth' });

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                toggleFavorite(id, ev) {
                    // Wire to your wishlist endpoint, e.g.:
                    // fetch('/wishlist/toggle', { method: 'POST', headers: { 'X-CSRF-TOKEN': '...' }, body: ... })
                },
            };
        }
    </script>
@endpush@extends('layouts.tailwind',['container_class'=>'container-fluid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8','header_right_menu'=>true])

@push('css')
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                    colors: {
                        brand: {
                            50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',
                            400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',
                            800:'#3730a3',900:'#312e81',950:'#1e1b4b',
                        },
                    },
                    boxShadow: {
                        'card':'0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06)',
                        'card-hover':'0 10px 20px -5px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05)',
                        'pop':'0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
                    },
                },
            },
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="{{ asset('dist/frontend/module/hotel/css/hotel.css?_ver='.config('app.asset_version')) }}" rel="stylesheet">

    <style>
        [x-cloak] { display: none !important; }
        html { scroll-behavior: smooth; }

        #mapcc, #bravo_results_map { height: 100%; min-height: 100%; width: 100%; }

        .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .thin-scroll::-webkit-scrollbar-track { background: transparent; }
        .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .bravo_topbar, .bravo_footer { display: none; }

        body.modal-open {
            overflow: hidden; position: fixed; inset: 0; width: 100%;
        }

        .thin-scroll, .mobile-search-scroll, .mobile-drawer-scroll {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .mobile-full-height {
            height: 100vh; height: 100dvh; max-height: 100dvh;
        }

        /* ---- Flatpickr brand theme ---- */
        .flatpickr-calendar {
            width: 340px !important; padding: 0 !important;
            border-radius: 20px !important;
            box-shadow: 0 24px 48px -12px rgba(15,23,42,0.20), 0 8px 16px -8px rgba(15,23,42,0.10) !important;
            border: 1px solid #e2e8f0 !important; margin-top: 12px !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            background: #fff !important; overflow: hidden;
        }
        .flatpickr-calendar.multiMonth,
        .flatpickr-calendar.rangeMode { width: 700px !important; }
        .flatpickr-calendar::before, .flatpickr-calendar::after,
        .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
        .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after {
            display: none !important; content: none !important;
        }
        .flatpickr-months {
            display: flex; align-items: center; position: relative;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            padding: 10px; gap: 6px;
        }
        .flatpickr-months .flatpickr-month {
            flex: 1 1 0; height: 36px; color: #fff; fill: #fff;
            display: flex; align-items: center; justify-content: center;
            background: transparent;
        }
        .flatpickr-months .flatpickr-prev-month,
        .flatpickr-months .flatpickr-next-month {
            position: static !important; top: auto !important; right: auto !important; left: auto !important;
            width: 36px; height: 36px; padding: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 10px; color: #fff; fill: #fff;
            transition: background .15s; z-index: 2;
        }
        .flatpickr-months .flatpickr-prev-month:hover,
        .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,0.16); }
        .flatpickr-months .flatpickr-prev-month svg,
        .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; }

        .flatpickr-current-month {
            width: 100%; height: 100%; padding: 0;
            font-size: 15px; font-weight: 700; letter-spacing: .01em;
            color: #fff; display: flex; align-items: center; justify-content: center; gap: 3px;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months {
            appearance: none; background: transparent !important; border: none;
            color: #fff !important; font-weight: 700; font-size: 15px;
            font-family: inherit; padding: 2px 4px; border-radius: 6px;
            cursor: pointer; transition: background .15s;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,0.14) !important; }
        .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: #1e293b; font-weight: 500; }
        .flatpickr-current-month .numInputWrapper { width: 56px; }
        .flatpickr-current-month .numInputWrapper:hover { background: rgba(255,255,255,0.14) !important; border-radius: 6px; }
        .flatpickr-current-month .numInputWrapper span { border: none; }
        .flatpickr-current-month .numInputWrapper span::after,
        .flatpickr-current-month .numInputWrapper span::before { border-color: #fff transparent transparent; }
        .flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 700; font-size: 15px; font-family: inherit; padding: 0 4px; }

        .flatpickr-innerContainer { padding: 14px 14px 12px; background: #fff; }
        .flatpickr-rContainer { width: 100%; }
        .flatpickr-weekdays { display: flex; align-items: center; margin-bottom: 6px; height: auto; }
        .flatpickr-weekdaycontainer { display: flex; flex: 1 1 0; gap: 4px; justify-content: flex-start; padding: 0; }
        .flatpickr-weekdays .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer { border-left: 12px solid transparent; }
        .flatpickr-weekday {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            background: transparent; color: #94a3b8; font-weight: 700; font-size: 10.5px;
            letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 30px;
        }
        .flatpickr-days { border: none !important; display: flex; justify-content: space-between; align-items: flex-start; padding: 0; }
        .flatpickr-days .dayContainer + .dayContainer { border-left: 12px solid transparent; }
        .dayContainer { display: flex; flex-wrap: wrap; padding: 0; gap: 4px; justify-content: flex-start; align-content: flex-start; }
        .flatpickr-day {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            height: 40px; line-height: 40px; margin: 0; padding: 0;
            border: none !important; border-radius: 10px;
            font-weight: 500; font-size: 13.5px; color: #1e293b;
            background: transparent; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-variant-numeric: tabular-nums;
        }
        .flatpickr-day:hover { background: #eef2ff; color: #4f46e5; }
        .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1; font-weight: 400; }
        .flatpickr-day.today { border: 1.5px solid #a5b4fc !important; font-weight: 700; color: #4f46e5; }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
            border-color: #4f46e5 !important; color: #fff !important;
            font-weight: 700; box-shadow: 0 4px 12px rgba(79,70,229,.35); z-index: 2;
        }
        .flatpickr-day.inRange { background: #e0e7ff; border-color: #e0e7ff; color: #4338ca; border-radius: 0; }
        .flatpickr-day.startRange { border-radius: 10px 0 0 10px; }
        .flatpickr-day.endRange   { border-radius: 0 10px 10px 0; }
        .flatpickr-day.startRange.endRange { border-radius: 10px; }
        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #e2e8f0; cursor: not-allowed; }
        @media (max-width: 767px) {
            .flatpickr-calendar, .flatpickr-calendar.multiMonth, .flatpickr-calendar.rangeMode {
                width: 100% !important; max-width: 360px !important; border-radius: 16px !important;
            }
            .flatpickr-day { height: 38px; line-height: 38px; font-size: 13px; }
            .flatpickr-weekday { line-height: 26px; font-size: 10px; }
            .flatpickr-innerContainer { padding: 12px 10px 10px; }
        }

        input[type="range"].brand-slider {
            -webkit-appearance: none; appearance: none;
            height: 4px; background: #e2e8f0; border-radius: 9999px; outline: none;
        }
        input[type="range"].brand-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }
        input[type="range"].brand-slider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }

        .card-media { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
        .group:hover .card-media { transform: scale(1.05); }

        .fade-in { animation: fadeIn .3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

        .shimmer {
            background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.6s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        .chip-enter { animation: chipIn .2s ease; }
        @keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

        #results img[data-src] {
            background-color: #f1f5f9;
            background-image: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.2s ease-in-out infinite;
        }

        /* Map panel sizing guard – keep Leaflet/Google from collapsing */
        #bravo_results_map { position: relative; }
        .leaflet-container { width: 100% !important; height: 100% !important; }
    </style>
@endpush

@section('content')
@php
    $locale      = session('website_locale', app()->getLocale());
    $searchRoute = 'hotel.search.' . $locale;
    $priceBounds = $hotel_min_max_price ?? [0, 500];

    // ── Map positioning: request wins, otherwise Germany default ──
    $reqLat      = request('map_lat');
    $reqLng      = request('map_lng');
    $defaultLat  = $reqLat ? (float) $reqLat : 51.1657;
    $defaultLng  = $reqLng ? (float) $reqLng : 10.4515;
    $defaultZoom = $reqLat ? 11 : 6;

    // ── Markers payload for the map ──
    $markersPayload = $markers ?? [];
@endphp

<div
    x-data="campsiteSearch({
        initial: {
            city_name:   {{ json_encode(request('city_name', '')) }},
            location_id: {{ json_encode(request('location_id', '')) }},
            map_lat:     {{ json_encode(request('map_lat', '')) }},
            map_lng:     {{ json_encode(request('map_lng', '')) }},
            start:       {{ json_encode(request('start', '')) }},
            end:         {{ json_encode(request('end', '')) }},
            adults:      {{ (int) request('adults', 2) }},
            children:    {{ (int) request('children', 0) }},
            pets:        {{ (int) request('pets', 0) }},
            price_min:   {{ (int) request('price_min', $priceBounds[0] ?? 0) }},
            price_max:   {{ (int) request('price_max', $priceBounds[1] ?? 500) }},
            orderby:     {{ json_encode(request('orderby', '')) }},
            attrs:       {{ json_encode((object) request('attrs', [])) }}
        },
        minPrice: {{ (int) ($priceBounds[0] ?? 0) }},
        maxPrice: {{ (int) ($priceBounds[1] ?? 500) }},
        totalResults: {{ $rows->total() }},
        mapLayout: {{ ($layout ?? 'normal') === 'map' ? 'true' : 'false' }},
        defaultLat:  {{ $defaultLat }},
        defaultLng:  {{ $defaultLng }},
        defaultZoom: {{ $defaultZoom }},
        attributes: {{ json_encode(
            ($attributes ?? collect())->map(function ($attr) {
                $tAttr = method_exists($attr, 'translate') ? optional($attr->translate()) : null;
                return [
                    'id'    => (int) $attr->id,
                    'name'  => $tAttr->name ?? $attr->name,
                    'terms' => $attr->terms->map(function ($term) {
                        $tTerm = method_exists($term, 'translate') ? optional($term->translate()) : null;
                        return [
                            'id'    => (int) $term->id,
                            'name'  => $tTerm->name ?? $term->name,
                            'count' => (int) ($term->hotel_count ?? 0),
                        ];
                    })->values()->all(),
                ];
            })->values()->all()
        ) }},
        locale: {{ json_encode(strtolower(substr($locale, 0, 2))) }}
    })"
    x-init="init()"
    x-cloak
    class="min-h-screen bg-slate-50 text-slate-900 antialiased"
    style="font-family: 'Inter', system-ui, sans-serif;"
>
    <h1 class="sr-only">{{ setting_item_with_lang("hotel_page_search_title") }}</h1>

    {{-- ═══════════════════ STICKY HEADER ═══════════════════ --}}
    <header class="sticky top-0 z-40 bg-white border-b border-slate-200/80 shadow-sm">
        <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-3">

            {{-- DESKTOP --}}
            <div class="hidden md:flex items-center gap-3 max-w-4xl mx-auto">

                <button type="button"
                        @click="toggleSidebar()"
                        :class="sidebarOpen
                            ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                            : 'bg-white text-slate-700 border-slate-200 hover:border-slate-400 hover:shadow-card'"
                        class="shrink-0 inline-flex items-center gap-2 px-4 py-3 rounded-full border font-semibold text-sm transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span>Filter</span>
                    <span x-show="appliedCount > 0" x-cloak
                          :class="sidebarOpen ? 'bg-white text-brand-600' : 'bg-brand-600 text-white'"
                          class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[10px] font-bold"
                          x-text="appliedCount"></span>
                </button>

                <form @submit.prevent="applyFilters()"
                      class="flex-1 flex items-center rounded-full border border-slate-200 bg-white hover:shadow-card focus-within:shadow-card transition-shadow">

                    <div class="flex-1 min-w-0 px-6 py-3 border-r border-slate-200 relative"
                         @click.outside="locationOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Standort</label>
                        <input type="text"
                               x-model="filters.city_name"
                               @input.debounce.350ms="_locationPicked = false; searchLocations()"
                               @focus="if (locationSuggestions.length) locationOpen = true"
                               @keydown.arrow-down.prevent="moveHighlight(1)"
                               @keydown.arrow-up.prevent="moveHighlight(-1)"
                               @keydown.enter.prevent="if (locationOpen && locationHighlight >= 0) { selectLocation(locationSuggestions[locationHighlight]); } else { applyFilters(); }"
                               @keydown.escape="locationOpen = false"
                               placeholder="Stadt oder Region"
                               autocomplete="off"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate">

                        <svg x-show="locationLoading" x-cloak
                             class="w-3.5 h-3.5 absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                             fill="none" viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                            <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                        </svg>

                        <div x-show="locationOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute left-0 right-0 top-full mt-3 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden z-[60]">

                            <template x-for="(s, idx) in locationSuggestions" :key="idx">
                                <button type="button"
                                        @click="selectLocation(s)"
                                        @mouseenter="locationHighlight = idx"
                                        class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0"
                                        :class="locationHighlight === idx ? 'bg-brand-50' : 'hover:bg-slate-50'">
                                    <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"
                                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                        <circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                        <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                                    </div>
                                    <span class="text-[10px] uppercase tracking-wider text-slate-400 font-bold shrink-0 mt-0.5"
                                          x-text="s.countrycode"></span>
                                </button>
                            </template>

                            <div x-show="!locationLoading && locationSuggestions.length === 0" x-cloak
                                 class="px-4 py-3 text-xs text-slate-500">
                                Keine Orte gefunden
                            </div>

                            <div class="px-4 py-2 border-t border-slate-100 bg-slate-50 text-[10px] text-slate-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                                </svg>
                                Suche powered by OpenStreetMap
                            </div>
                        </div>
                    </div>

                    <div class="flex-[1.35] min-w-0 px-6 py-3 relative border-r border-slate-200">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Reisezeitraum</label>
                        <input type="text" x-ref="desktopDateRange" placeholder="Daten wählen"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate cursor-pointer">
                        <p x-show="nights > 0" x-cloak
                           class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 bg-brand-50 text-brand-600 px-2 py-0.5 rounded-full text-[10px] font-semibold">
                            <span x-text="nights"></span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                            </svg>
                        </p>
                    </div>

                    <div class="flex-1 min-w-0 px-6 py-3 relative" @click.outside="guestsOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Gäste</label>
                        <button type="button" @click="guestsOpen = !guestsOpen"
                                class="w-full text-left text-sm font-medium text-slate-700 truncate flex items-center justify-between gap-2">
                            <span x-text="guestSummary" class="truncate"></span>
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0 transition-transform"
                                 :class="guestsOpen && 'rotate-180'"
                                 fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </button>

                        <div x-show="guestsOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-pop border border-slate-200 p-5 space-y-4 z-50 text-left">
                            <template x-for="row in guestRows" :key="row.key">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                        <p class="text-xs text-slate-500" x-text="row.hint"></p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <button type="button" @click="decGuest(row.key)"
                                                :disabled="filters[row.key] <= row.min"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                        <span class="w-5 text-center text-sm font-semibold text-slate-900" x-text="filters[row.key]"></span>
                                        <button type="button" @click="incGuest(row.key)"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="pr-2 pl-3">
                        <button type="submit"
                                class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-sm shadow-sm transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                            </svg>
                            <span>Suchen</span>
                        </button>
                    </div>
                </form>
            </div>

            {{-- MOBILE --}}
            <div class="md:hidden flex items-center gap-2">
                <button @click="openMobileSearch()"
                        class="flex-1 flex items-center gap-3 px-4 py-3 rounded-full border border-slate-200 bg-white hover:shadow-card transition-shadow">
                    <div class="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0 text-left">
                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="mobileTriggerPrimary"></p>
                        <p class="text-xs text-slate-500 truncate" x-text="mobileTriggerSecondary"></p>
                    </div>
                </button>

                <button type="button"
                        @click="mobileFiltersOpen = true"
                        :class="appliedCount > 0
                            ? 'bg-brand-600 text-white border-brand-600'
                            : 'bg-white text-slate-700 border-slate-200'"
                        class="relative shrink-0 w-12 h-12 rounded-full border flex items-center justify-center transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span x-show="appliedCount > 0" x-cloak
                          class="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[9px] font-bold ring-2 ring-white"
                          x-text="appliedCount"></span>
                </button>
            </div>
        </div>
    </header>

    {{-- ═══════════════════ MAIN LAYOUT ═══════════════════ --}}
    <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-6">
        <div :style="layoutStyle" class="gap-8">

            {{-- SIDEBAR --}}
            <aside class="hidden" :class="sidebarOpen ? 'lg:block' : 'lg:hidden'">
                <div class="sticky top-[110px] max-h-[calc(100vh-130px)] overflow-y-auto thin-scroll pr-1">

                    <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-200">
                        <div class="flex items-center gap-2">
                            <h2 class="text-base font-bold text-slate-900">Filter</h2>
                            <span x-show="appliedCount > 0" x-cloak
                                  class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-brand-600 text-white text-[10px] font-bold"
                                  x-text="appliedCount"></span>
                        </div>
                        <button x-show="appliedCount > 0" x-cloak
                                @click="resetFilters()"
                                class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition">
                            Alle löschen
                        </button>
                    </div>

                    <div x-show="appliedCount > 0" x-cloak class="flex flex-wrap gap-1.5 mb-4 pb-4 border-b border-slate-200">
                        <template x-for="chip in activeChips" :key="chip.key">
                            <button @click="removeChip(chip)"
                                    class="chip-enter inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold hover:bg-brand-100 transition">
                                <span x-text="chip.label"></span>
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path d="M18 6 6 18M6 6l12 12"/>
                                </svg>
                            </button>
                        </template>
                    </div>

                    {{-- Price --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                        <div class="flex items-center gap-2 mb-3">
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="filters.price_max"
                                           x-model.number="filters.price_min"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                            <div class="text-slate-300 pt-5">—</div>
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="maxPrice"
                                           x-model.number="filters.price_max"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                        </div>
                        <input type="range" class="brand-slider w-full"
                               :min="minPrice" :max="maxPrice" step="5"
                               x-model.number="filters.price_max"
                               @input.debounce.500ms="applyFilters()">
                        <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                            <span x-text="minPrice + ' €'"></span>
                            <span x-text="maxPrice + ' €'"></span>
                        </div>
                    </section>

                    {{-- Guests --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                        <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                            <button type="button"
                                    @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                    :disabled="filters.adults <= 1"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center text-lg font-medium transition">−</button>
                            <div class="flex-1 text-center">
                                <span class="text-lg font-bold text-slate-900" x-text="filters.adults"></span>
                                <p class="text-[10px] text-slate-500 font-medium" x-text="filters.adults === 1 ? 'Person' : 'Personen'"></p>
                            </div>
                            <button type="button"
                                    @click="filters.adults++; applyFilters()"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow flex items-center justify-center text-lg font-medium transition">+</button>
                        </div>
                    </section>

                    {{-- Attributes --}}
                    @if(isset($attributes) && $attributes->count())
                        <section class="pb-5 mb-5 border-b border-slate-200" x-data="{ open: true }">
                            <button @click="open = !open"
                                    class="w-full flex justify-between items-center mb-3 group">
                                <h3 class="text-sm font-bold text-slate-900 group-hover:text-brand-600 transition">Ausstattung & Typ</h3>
                                <svg class="w-4 h-4 text-slate-400 transition-transform"
                                     :class="open && 'rotate-180'"
                                     fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </button>
                            <div x-show="open" x-collapse>
                                <div class="space-y-5 max-h-[420px] overflow-y-auto thin-scroll pr-1">
                                    @foreach($attributes as $attr)
                                        @if($attr->terms->count())
                                            @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                            <div>
                                                <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                                <div class="flex flex-wrap gap-1.5 px-2.5">
                                                    @foreach($attr->terms as $term)
                                                        @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                        <button type="button"
                                                                @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                                :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                                    ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                            <span>{{ __($termName) }}</span>
                                                            @if(!empty($term->hotel_count))
                                                                <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                            @endif
                                                        </button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </section>
                    @endif

                    <label class="flex items-center gap-3 px-2.5 py-2 rounded-lg hover:bg-slate-100 cursor-pointer transition">
                        <input type="checkbox"
                               :checked="filters.pets > 0"
                               @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                               class="rounded border-slate-300 text-brand-600 focus:ring-brand-500 focus:ring-offset-0">
                        <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                    </label>
                </div>
            </aside>

            {{-- ═══════════════════ RESULTS COLUMN ═══════════════════ --}}
            <main class="min-w-0">

                <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
                    <div>
                        <p class="text-sm text-slate-600">
                            <span class="font-bold text-slate-900" x-text="totalResults"></span>
                            <span x-text="totalResults === 1 ? 'Campsite gefunden' : 'Campsites gefunden'"></span>
                            <template x-if="nights > 0">
                                <span class="text-slate-500">
                                    <span class="text-slate-400"> · </span>
                                    <span x-text="nights"></span>
                                    <svg class="w-3.5 h-3.5 inline-block -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                                    </svg>
                                </span>
                            </template>
                        </p>
                        <p class="text-xs text-slate-500 mt-0.5">Alle Preise pro Nacht inkl. MwSt.</p>
                    </div>

                    <div class="flex items-center gap-2">
                        <div class="inline-flex items-center p-1 bg-slate-100 rounded-xl">
                            <button type="button" @click="setView('list')"
                                    :class="isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="isListView"
                                    aria-label="{{ __('Listenansicht') }}"
                                    title="{{ __('Liste') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M4 6h16M4 12h16M4 18h16"/>
                                </svg>
                            </button>
                            <button type="button" @click="setView('grid')"
                                    :class="!isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="!isListView"
                                    aria-label="{{ __('Rasteransicht') }}"
                                    title="{{ __('Raster') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="14" width="7" height="7" rx="1.5"/>
                                </svg>
                            </button>
                        </div>

                        <button @click="toggleMap()"
                                :class="mapOpen
                                    ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'"
                                class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border text-sm font-semibold transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M9 4 3 7v13l6-3 6 3 6-3V4l-6 3-6-3z"/>
                                <path d="M9 4v13M15 7v13"/>
                            </svg>
                            <span class="hidden sm:inline" x-text="mapOpen ? 'Karte ausblenden' : 'Karte anzeigen'"></span>
                            <span class="sm:hidden">Karte</span>
                        </button>

                        <select x-model="filters.orderby" @change="applyFilters()"
                                class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-400 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
                            <option value="">Empfohlen</option>
                            <option value="price_low_high">Preis aufsteigend</option>
                            <option value="price_high_low">Preis absteigend</option>
                            <option value="rate_high_low">Beste Bewertung</option>
                        </select>
                    </div>
                </div>

                {{-- Loading skeleton --}}
                <div x-show="loading" :class="gridCols" class="grid gap-x-5 gap-y-8">
                    <template x-for="i in 8" :key="i">
                        <div>
                            <div class="aspect-[4/3] rounded-2xl shimmer"></div>
                            <div class="mt-3.5 h-4 rounded shimmer w-3/4"></div>
                            <div class="mt-2.5 h-3 rounded shimmer w-1/2"></div>
                            <div class="mt-2 h-3 rounded shimmer w-1/3"></div>
                            <div class="mt-3 pt-3 border-t border-slate-100">
                                <div class="h-4 rounded shimmer w-1/3"></div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Results --}}
                <div x-show="!loading" id="results" :class="gridCols" class="grid gap-x-5 gap-y-8">

                    {{-- Map payload rides along on every AJAX response --}}
                    <div id="bravo-map-markers-data"
                         data-markers="{{ json_encode($markersPayload, JSON_HEX_APOS | JSON_HEX_QUOT) }}"
                         data-lat="{{ $defaultLat }}"
                         data-lng="{{ $defaultLng }}"
                         data-zoom="{{ $defaultZoom }}"
                         class="hidden" aria-hidden="true"></div>

                    <div id="price-bounds"
                         data-min="{{ (int) ($priceBounds[0] ?? 0) }}"
                         data-max="{{ (int) ($priceBounds[1] ?? 500) }}"
                         class="hidden" aria-hidden="true"></div>

                    @forelse($rows as $row)
                        @php
                            $translation = $row->translate();
                            $detailUrl   = $row->getDetailUrl();
                            $schemaName  = $translation->title ?? $row->title ?? 'Campingplatz';

                            $location = !empty($row->location) ? $row->location->translate() : null;

                            $countryCode = !empty($row->country_code) ? strtoupper($row->country_code) : null;
                            $flagUrl     = $countryCode
                                ? get_public_url() . 'flags/' . strtolower($countryCode) . '.png'
                                : null;

                            $reviewData    = null;
                            $score_total   = null;
                            $total_reviews = 0;
                            if (setting_item('hotel_enable_review')) {
                                $reviewData    = $row->getScoreReview();
                                $score_total   = $reviewData['score_total']  ?? null;
                                $total_reviews = $reviewData['total_review'] ?? 0;
                            } else {
                                $score_total   = $row->review_score  ?? null;
                                $total_reviews = $row->reviews_count ?? 0;
                            }

                            $isWished         = $row->isWishList();
                            $termsByAttribute = $row->getAttributeInListingPage()
                                ? $row->termsByAttributeInListingPage
                                : collect();

                            $schema = [
                                '@context' => 'https://schema.org',
                                '@type'    => 'Campground',
                                '@id'      => $detailUrl . '#campground',
                                'name'     => $schemaName,
                                'url'      => $detailUrl,
                            ];

                            $distanceRaw = $row->distance ?? null; // metres? km? — see note below
                            $distanceKm  = null;
                            if ($distanceRaw !== null) {
                                // If your app stores distance in metres, convert. If already km, drop the /1000.
                                $distanceKm = distanceRaw;
                            }
                            if ($distanceKm !== null) {
                                $distanceText = $distanceKm >= 1
                                    ? number_format($distanceKm, 0, ',', '.')        // ≥ 1 km → no decimals
                                    : number_format($distanceKm, 2, ',', '.');       // < 1 km → 2 decimals
                            }
                        @endphp

                        <a href="{{ $detailUrl }}"
                           class="group relative block focus:outline-none fade-in"
                           data-listing-id="{{ $row->id }}"
                           @mouseenter="highlightMarker({{ $row->id }})"
                           x-data="{ fav: {{ $isWished ? 'true' : 'false' }} }">

                            <script type="application/ld+json">
                                {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
                            </script>

                            <div class="relative bg-white rounded-2xl overflow-hidden border border-slate-200/70
                                        shadow-card group-hover:shadow-card-hover group-hover:border-slate-300
                                        transition-all duration-300"
                                 :class="isListView
                                    ? 'flex flex-row gap-3 sm:gap-4 p-2 sm:p-3'
                                    : 'flex flex-col'">

                                {{-- Image --}}
                                <div class="relative overflow-hidden bg-slate-100 shrink-0"
                                     :class="isListView
                                        ? 'w-32 sm:w-48 md:w-56 aspect-[4/3] rounded-xl'
                                        : 'aspect-[4/3] w-full'">

                                    {!! get_image_tag_url(
                                        $row->image_id ?? '0.webp',
                                        'medium',
                                        [
                                            'class' => 'card-media absolute inset-0 w-full h-full object-cover lazyload',
                                            'alt'   => $schemaName,
                                            'sku'   => $row->sku,
                                        ]
                                    ) !!}

                                    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/30 to-transparent pointer-events-none"></div>

                                    <div class="absolute top-2 left-2 sm:top-3 sm:left-3 flex flex-wrap gap-1.5 max-w-[70%]">
                                        @if($row->is_featured)
                                            <span class="inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24"><path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/></svg>
                                                Top
                                            </span>
                                        @endif
                                        @if($row->discount_percent)
                                            <span class="bg-emerald-500 text-white text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm">
                                                {{ $row->discount_percent }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="absolute top-2 right-2 sm:top-3 sm:right-3 flex items-center gap-1.5">
                                        @if($row->is_instant)
                                            <span class="hidden sm:inline-flex items-center gap-1 bg-brand-600/95 backdrop-blur-md text-white text-[10px] font-extrabold uppercase tracking-wider px-2.5 py-1.5 rounded-full shadow-sm ring-1 ring-white/20">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>
                                                Sofort
                                            </span>
                                        @endif
                                        <button type="button"
                                                @click.prevent.stop="fav = !fav; toggleFavorite({{ $row->id }}, $event)"
                                                :aria-pressed="fav"
                                                aria-label="{{ __('Zu Favoriten hinzufügen') }}"
                                                class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/95 backdrop-blur-md hover:bg-white flex items-center justify-center shadow-sm ring-1 ring-black/5 hover:scale-110 active:scale-95 transition-transform">
                                            <svg class="w-4 h-4 sm:w-[18px] sm:h-[18px] transition-colors"
                                                 :class="fav ? 'fill-rose-500 stroke-rose-500' : 'fill-none stroke-slate-700'"
                                                 stroke-width="2" viewBox="0 0 24 24">
                                                <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8Z"/>
                                            </svg>
                                        </button>
                                    </div>

                                    @if($row->star_rate)
                                        <div class="absolute bottom-2 left-2 sm:bottom-3 sm:left-3 inline-flex items-center gap-0.5 bg-white/95 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full shadow-sm ring-1 ring-black/5"
                                             aria-label="{{ $row->star_rate }} stars">
                                            @for($star = 1; $star <= $row->star_rate; $star++)
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                                                    <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                    @endif

                                    @if($score_total !== null && $total_reviews > 0)
                                        <div class="absolute bottom-2 right-2 sm:bottom-3 sm:right-3 inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[11px] sm:text-xs font-bold px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                            <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-500 fill-current" viewBox="0 0 24 24">
                                                <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                            </svg>
                                            <span>{{ number_format((float) $score_total, 1) }}</span>
                                            <span class="text-slate-400 font-medium hidden sm:inline">({{ $total_reviews }})</span>
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="flex flex-col min-w-0 flex-1"
                                     :class="isListView ? 'py-1 pr-1' : 'p-4'">

                                    <h3 class="font-bold text-slate-900 leading-tight line-clamp-2 min-w-0
                                               group-hover:text-brand-700 transition-colors"
                                        :class="isListView ? 'text-[14px] sm:text-[15px]' : 'text-[15px]'">
                                        <span class="inline-flex items-start gap-1.5">
                                            @php
                                                $iso2 = strtolower($countryCode);
                                                if ($iso2 === 'uk') $iso2 = 'gb';
                                            @endphp

                                            <img src="https://flagcdn.com/w40/{{ $iso2 }}.png"
                                                 srcset="https://flagcdn.com/w40/{{ $iso2 }}.png 1x,
                                                         https://flagcdn.com/w80/{{ $iso2 }}.png 2x"
                                                 alt="{{ $countryCode }}"
                                                 width="20" height="14"
                                                 loading="lazy"
                                                 class="shrink-0 mt-[3px] w-5 h-3.5 object-cover rounded-sm ring-1 ring-black/5">
                                            <span class="line-clamp-2">{{ $schemaName }}</span>
                                        </span>
                                    </h3>

                                    <p class="flex items-center gap-1 text-[12px] sm:text-[13px] text-slate-500 mt-1 truncate">
                                        <svg class="w-3.5 h-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                            <circle cx="12" cy="10" r="3"/>
                                        </svg>
                                        <span class="truncate">
                                            {{strtoupper($countryCode)}} - {{ $location->name ?? '' }}{{ $row->city && $row->city !== ($location->name ?? '') ? ' · ' . $row->city : '' }} @if($distanceKm !== null) {{ $distanceText }} km @endif

                                        </span>
                                    </p>

                                    <div class="mt-2 flex items-center flex-wrap gap-x-3 gap-y-1 text-[11px] sm:text-[12px] text-slate-600">
                                        @if($row->max_guests)
                                            <span class="inline-flex items-center gap-1">
                                                <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                                    <circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                                                </svg>
                                                <span>{{ (int) $row->max_guests }} Gäste</span>
                                            </span>
                                        @endif

                                        @if($termsByAttribute && count($termsByAttribute))
                                            @foreach($termsByAttribute->take(2) as $term)
                                                @php $t = $term->translate(); @endphp
                                                <span class="inline-flex items-center gap-1">
                                                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                        <circle cx="12" cy="12" r="9"/><path d="m5 12 5 5L20 7"/>
                                                    </svg>
                                                    <span class="truncate">{{ $t->name }}</span>
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>

                                    @php
                                        $originalCurrency = strtoupper($row->currency ?: currency_base_code());
                                        $sessionCurrency  = currency_session_code();
                                        $showOriginal     = $originalCurrency !== $sessionCurrency;
                                        $convertedAmount  = convert_currency((float) $row->price, $originalCurrency);
                                        $noDecimalCurrencies = ['HUF','ISK','JPY','KRW','VND','CLP','IDR', 'ALL', 'RSD', 'MKD'];
                                        $originalAmount = number_format(
                                            (float) $row->price,
                                            in_array($originalCurrency, $noDecimalCurrencies, true) ? 0 : 2,
                                            ',',
                                            '.'
                                        );
                                    @endphp

                                    <div class="mt-auto pt-3 border-t border-slate-100"
                                         :class="isListView ? 'mt-2' : ''">
                                        <div class="flex items-end justify-between gap-2">

                                            <div class="flex flex-col min-w-0">
                                                <div class="flex items-baseline gap-1.5 flex-wrap">
                                                    <span class="font-extrabold text-slate-900 leading-none"
                                                          :class="isListView ? 'text-[16px] sm:text-[17px]' : 'text-[17px]'">
                                                        {{ number_format($convertedAmount, 2, ',', '.') }} {{ currency_symbol($sessionCurrency) }}
                                                    </span>
                                                    <span class="text-[11px] sm:text-[12px] text-slate-500 font-medium">/ Nacht</span>
                                                </div>

                                                @if($showOriginal)
                                                    <span class="mt-0.5 text-[11px] text-slate-400 font-medium tabular-nums truncate">
                                                        {{ $originalAmount }} {{ $row->currency }}
                                                    </span>
                                                @endif
                                            </div>

                                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-brand-700 bg-brand-50 group-hover:bg-brand-100 px-2.5 py-1.5 rounded-full transition-colors shrink-0">
                                                Details
                                                <svg class="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="col-span-full py-24 text-center fade-in">
                            <div class="w-24 h-24 mx-auto mb-6 rounded-3xl bg-brand-50 flex items-center justify-center">
                                <svg class="w-11 h-11 text-brand-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-2">Keine Campsites gefunden</h3>
                            <p class="text-slate-500 mb-7 max-w-md mx-auto text-sm leading-relaxed">
                                Wir konnten keine Campingplätze für deine Suche finden. Versuche es mit weniger Filtern oder einem anderen Zeitraum.
                            </p>
                            <button @click="resetFilters()"
                                    class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-lg font-semibold shadow-sm transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
                                </svg>
                                Filter zurücksetzen
                            </button>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if($rows->hasPages())
                    @php
                        $currentPage = $rows->currentPage();
                        $lastPage    = $rows->lastPage();
                        $window      = 1;
                        $pages       = [1];
                        for ($i = max(2, $currentPage - $window); $i <= min($lastPage - 1, $currentPage + $window); $i++) {
                            $pages[] = $i;
                        }
                        if ($lastPage > 1) $pages[] = $lastPage;
                        $pages = array_values(array_unique($pages));
                        sort($pages);
                    @endphp

                    <nav class="mt-14 flex flex-col items-center gap-3" aria-label="Pagination">
                        <ul class="flex items-center justify-center gap-1.5 flex-wrap">
                            <li>
                                @if($rows->onFirstPage())
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                @else
                                    <a href="{{ $rows->previousPageUrl() }}" @click.prevent="goToPage({{ $currentPage - 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </a>
                                @endif
                            </li>

                            @php $prev = 0; @endphp
                            @foreach($pages as $page)
                                @if($prev && $page - $prev > 1)
                                    <li><span class="inline-flex items-center justify-center w-10 h-10 text-slate-400 select-none">…</span></li>
                                @endif
                                <li>
                                    @if($page == $currentPage)
                                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-semibold shadow-sm ring-4 ring-brand-100">{{ $page }}</span>
                                    @else
                                        <a href="{{ $rows->url($page) }}" @click.prevent="goToPage({{ $page }})"
                                           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50 hover:border-slate-300 transition">{{ $page }}</a>
                                    @endif
                                </li>
                                @php $prev = $page; @endphp
                            @endforeach

                            <li>
                                @if($rows->hasMorePages())
                                    <a href="{{ $rows->nextPageUrl() }}" @click.prevent="goToPage({{ $currentPage + 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </a>
                                @else
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                @endif
                            </li>
                        </ul>

                        <p class="text-xs text-slate-500 font-medium">
                            Zeige <span class="text-slate-900 font-semibold">{{ $rows->firstItem() ?? 0 }}</span>–<span class="text-slate-900 font-semibold">{{ $rows->lastItem() ?? 0 }}</span>
                            von <span class="text-slate-900 font-semibold">{{ $rows->total() }}</span> Ergebnissen
                        </p>
                    </nav>
                @endif

                @if(!empty($seo_content))
                    <div class="mt-10 p-4 rounded-2xl bg-white border border-slate-200 blog-post text-slate-700 text-sm leading-relaxed description max-w-none
            [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-12 [&_h2]:mb-4
            [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-gray-900 [&_h3]:mt-8 [&_h3]:mb-3
            [&_p]:my-4 [&_p]:leading-relaxed
            [&_a]:text-blue-600 [&_a]:no-underline hover:[&_a]:underline
            [&_strong]:text-gray-900 [&_strong]:font-semibold
            [&_ul]:my-4 [&_ul]:pl-6 [&_ul]:list-disc
            [&_ol]:my-4 [&_ol]:pl-6 [&_ol]:list-decimal
            [&_li]:my-1
            ">
                        {!! $seo_content !!}
                    </div>
                @endif
            </main>

            {{-- ═══════════════════ MAP PANEL ═══════════════════ --}}
            <div x-show="mapOpen" x-cloak
                 :class="isDesktop
                    ? 'lg:block relative'
                    : 'fixed inset-0 z-50 flex flex-col justify-end'">

                <div x-show="!isDesktop" x-cloak
                     class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
                     @click="mapOpen = false"></div>

                <div :class="isDesktop
                        ? 'lg:sticky lg:top-[110px] h-[calc(100vh-140px)] max-h-[800px] rounded-2xl overflow-hidden border border-slate-200 shadow-card bg-slate-100 flex flex-col'
                        : 'relative bg-white rounded-t-3xl shadow-pop h-[85vh] flex flex-col overflow-hidden'">

                    <div x-show="!isDesktop" x-cloak
                         class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
                        <div>
                            <h3 class="font-bold text-slate-900">Karte</h3>
                            <p class="text-xs text-slate-500"><span x-text="totalResults"></span> Ergebnisse</p>
                        </div>
                        <button @click="mapOpen = false"
                                class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                            <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="flex-1 relative bg-slate-100">
                        <div id="mapcc" class="w-full h-full">
                            <div id="bravo_results_map" class="w-full h-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE SEARCH MODAL ═══════════════════ --}}
    <div x-show="mobileSearchOpen" x-cloak class="md:hidden fixed inset-0 z-[55] bg-white flex flex-col mobile-full-height">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
            <button @click="cancelMobileSearch()"
                    class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <h2 class="font-bold text-slate-900">Suche</h2>
            <button @click="resetMobileDraft()"
                    class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition px-2">
                Zurücksetzen
            </button>
        </div>

        <div class="flex-1 overflow-y-auto thin-scroll mobile-search-scroll">
            <div class="px-5 py-5 border-b border-slate-200 relative" @click.outside="mobileLocationOpen = false">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Standort</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                    <input type="text" x-model="mobileDraft.city_name"
                           @input.debounce.350ms="searchMobileLocations()"
                           @focus="if (mobileLocationSuggestions.length) mobileLocationOpen = true"
                           placeholder="Stadt oder Region eingeben"
                           autocomplete="off" inputmode="text"
                           class="w-full pl-12 pr-10 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">

                    <svg x-show="mobileLocationLoading" x-cloak
                         class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                         fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                        <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                    </svg>
                </div>

                <div x-show="mobileLocationOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="mt-2 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden max-h-[280px] overflow-y-auto thin-scroll z-20 relative">
                    <template x-for="(s, idx) in mobileLocationSuggestions" :key="idx">
                        <button type="button" @click="selectMobileLocation(s)"
                                class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0 hover:bg-slate-50 active:bg-brand-50">
                            <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                            </div>
                        </button>
                    </template>
                </div>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Reisezeitraum</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="3" y="4" width="18" height="18" rx="2"/>
                        <path d="M16 2v4M8 2v4M3 10h18"/>
                    </svg>
                    <input type="text" x-ref="mobileDateRange" placeholder="Anreise – Abreise"
                           class="w-full pl-12 pr-4 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none cursor-pointer">
                </div>
                <p x-show="mobileDraft.nights > 0" x-cloak class="text-xs text-brand-600 font-semibold mt-2 pl-1 inline-flex items-center gap-1">
                    <span x-text="mobileDraft.nights"></span>
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                    </svg>
                </p>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Gäste</label>
                <div class="space-y-4">
                    <template x-for="row in guestRows" :key="row.key">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                <p class="text-xs text-slate-500" x-text="row.hint"></p>
                            </div>
                            <div class="flex items-center gap-3">
                                <button type="button" @click="mobileDecGuest(row.key)"
                                        :disabled="mobileDraft[row.key] <= row.min"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                <span class="w-6 text-center text-sm font-semibold text-slate-900" x-text="mobileDraft[row.key]"></span>
                                <button type="button" @click="mobileIncGuest(row.key)"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <label class="flex items-center justify-between px-5 py-5 border-b border-slate-200 cursor-pointer">
                <div>
                    <p class="font-semibold text-sm text-slate-900">Haustiere erlaubt</p>
                    <p class="text-xs text-slate-500 mt-0.5">Nur Campsites mit Haustiererlaubnis</p>
                </div>
                <div class="relative shrink-0 ml-4">
                    <input type="checkbox" :checked="mobileDraft.pets_allowed > 0"
                           @change="mobileDraft.pets_allowed = $event.target.checked ? 1 : 0"
                           class="sr-only peer">
                    <div class="w-12 h-7 rounded-full bg-slate-200 peer-checked:bg-brand-600 transition-colors"></div>
                    <div class="absolute top-1 left-1 w-5 h-5 rounded-full bg-white shadow peer-checked:translate-x-5 transition-transform"></div>
                </div>
            </label>
        </div>

        <div class="shrink-0 border-t border-slate-200 p-4 bg-white safe-bottom">
            <button @click="applyMobileSearch()"
                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-base shadow-sm transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                </svg>
                Ergebnisse anzeigen
            </button>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE FILTER DRAWER ═══════════════════ --}}
    <div x-show="mobileFiltersOpen" x-cloak class="fixed inset-0 z-50 lg:hidden">
        <div x-show="mobileFiltersOpen" x-transition.opacity
             @click="mobileFiltersOpen = false"
             class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

        <div x-show="mobileFiltersOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-y-full"
             x-transition:enter-end="translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-y-0"
             x-transition:leave-end="translate-y-full"
             class="absolute bottom-0 inset-x-0 bg-white rounded-t-3xl max-h-[88vh] flex flex-col">

            <div class="flex-shrink-0 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <h2 class="font-bold text-lg text-slate-900">Filter</h2>
                    <span x-show="appliedCount > 0" x-cloak
                          class="inline-flex items-center justify-center min-w-[22px] h-6 px-2 rounded-full bg-brand-600 text-white text-xs font-bold"
                          x-text="appliedCount"></span>
                </div>
                <button @click="mobileFiltersOpen = false"
                        class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto thin-scroll mobile-drawer-scroll p-6 space-y-6">
                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                    <div class="flex items-center gap-2 mb-3">
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                            <input type="number" min="0" x-model.number="filters.price_min" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                            <input type="number" min="0" x-model.number="filters.price_max" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                    </div>
                    <input type="range" class="brand-slider w-full"
                           :min="minPrice" :max="maxPrice" step="5"
                           x-model.number="filters.price_max"
                           @input.debounce.500ms="applyFilters()">
                    <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                        <span x-text="minPrice + ' €'"></span>
                        <span x-text="maxPrice + ' €'"></span>
                    </div>
                </section>

                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                    <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                        <button type="button" @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                :disabled="filters.adults <= 1"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm disabled:opacity-40 flex items-center justify-center text-lg">−</button>
                        <div class="flex-1 text-center">
                            <span class="text-xl font-bold text-slate-900" x-text="filters.adults"></span>
                        </div>
                        <button type="button" @click="filters.adults++; applyFilters()"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center text-lg">+</button>
                    </div>
                </section>

                @if(isset($attributes) && $attributes->count())
                    <section>
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Ausstattung & Typ</h3>
                        <div class="space-y-5 max-h-[380px] overflow-y-auto thin-scroll pr-1">
                            @foreach($attributes as $attr)
                                @if($attr->terms->count())
                                    @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                    <div>
                                        <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                        <div class="flex flex-wrap gap-1.5 px-2.5">
                                            @foreach($attr->terms as $term)
                                                @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                <button type="button"
                                                        @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                        :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                            ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                            : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                    <span>{{ __($termName) }}</span>
                                                    @if(!empty($term->hotel_count))
                                                        <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                    @endif
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>
                @endif

                <label class="flex items-center gap-3 px-2.5 py-2.5 rounded-lg hover:bg-slate-100 cursor-pointer">
                    <input type="checkbox" :checked="filters.pets > 0"
                           @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                           class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                    <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                </label>
            </div>

            <div class="flex-shrink-0 border-t border-slate-200 p-4 flex gap-3 safe-bottom">
                <button @click="resetFilters()"
                        class="flex-1 border border-slate-300 rounded-lg py-3 font-semibold text-sm text-slate-700 hover:bg-slate-50 transition">
                    Zurücksetzen
                </button>
                <button @click="mobileFiltersOpen = false"
                        class="flex-1 bg-brand-600 hover:bg-brand-700 text-white rounded-lg py-3 font-semibold text-sm transition">
                    <span x-show="totalResults > 0" x-cloak>
                        <span x-text="totalResults"></span> Ergebnisse
                    </span>
                    <span x-show="totalResults === 0" x-cloak>Anwenden</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    {!! App\Helpers\MapEngine::scripts() !!}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>

    <script>
        var bravo_map_data = {
            markers: {!! json_encode($markersPayload ?? []) !!},
            map_lat_default: {{ $defaultLat }},
            map_lng_default: {{ $defaultLng }},
            map_zoom_default: {{ $defaultZoom }},
        };
    </script>

    <script src="{{ asset('js/filter-map.js?_ver='.config('app.asset_version')) }}"></script>

    <script>
        function campsiteSearch(config) {
            return {
                filters: Object.assign({
                    city_name: '', location_id: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0,
                    price_min: 0, price_max: 500, orderby: '',
                    attrs: {},
                    map_lat: '', map_lng: '',
                }, config.initial || {}),

                minPrice: config.minPrice,
                maxPrice: config.maxPrice,
                totalResults: config.totalResults,
                layout: config.mapLayout ? 'map' : 'list',
                loading: false,
                guestsOpen: false,

                sidebarOpen: false,
                mapOpen: false,
                mobileFiltersOpen: false,
                mobileSearchOpen: false,
                view: 'grid',

                isDesktop: window.matchMedia('(min-width: 1024px)').matches,
                attributes: config.attributes || [],
                locale: config.locale || 'en',

                defaultLat:  config.defaultLat  || 51.1657,
                defaultLng:  config.defaultLng  || 10.4515,
                defaultZoom: config.defaultZoom || 6,

                _desktopFP: null,
                _mobileFP: null,
                _resizeHandler: null,
                _scrollY: 0,
                _locationPicked: false,

                locationSuggestions: [],
                locationLoading: false,
                locationOpen: false,
                locationHighlight: -1,
                locationAbort: null,

                mobileLocationSuggestions: [],
                mobileLocationLoading: false,
                mobileLocationOpen: false,
                mobileLocationAbort: null,

                /* ══════════════ View state ══════════════ */
                get isListView() { return this.view === 'list'; },

                get gridCols() {
                    if (this.isListView) return 'grid-cols-1';

                    const both = this.sidebarOpen && this.mapOpen;
                    const one  = (this.sidebarOpen || this.mapOpen) && !both;

                    if (both) return 'grid-cols-1 sm:grid-cols-2';
                    if (one)  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
                    return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
                },

                setView(v) {
                    if (v !== 'grid' && v !== 'list') return;
                    this.view = v;
                    try { localStorage.setItem('campsiteView', v); } catch (e) {}
                },

                /* ══════════════ Lazy-load reinit ══════════════ */
                reinitLazyLoad() {
                    try {
                        if (window.lazySizes && typeof window.lazySizes.init === 'function') window.lazySizes.init();
                        if (window.lazyLoadInstance && typeof window.lazyLoadInstance.update === 'function') window.lazyLoadInstance.update();
                        if (typeof window.lozad === 'function') window.lozad('#results img[data-src]').observe();
                        if (typeof window.LazyLoad === 'function') new window.LazyLoad();
                        if (window.jQuery && typeof window.jQuery.fn.lazyload === 'function') {
                            window.jQuery('#results img[data-src]').lazyload();
                        }
                    } catch (e) {}

                    setTimeout(() => {
                        document.querySelectorAll('#results img[data-src]').forEach(img => {
                            const src = img.getAttribute('data-src');
                            if (!src) return;
                            img.src = src;
                            img.removeAttribute('data-src');
                            img.classList.add('lazyloaded', 'loaded');
                        });
                    }, 400);
                },

                /* ══════════════ Flatpickr ══════════════ */
                _buildFlatpickrLocale() {
                    const dr = window.daterangepickerLocale || {};
                    const fallbackDays   = ['Su','Mo','Tu','We','Th','Fr','Sa'];
                    const fallbackMonths = ['January','February','March','April','May','June','July','August','September','October','November','December'];
                    const weekdays = Array.isArray(dr.daysOfWeek) && dr.daysOfWeek.length === 7 ? dr.daysOfWeek : fallbackDays;
                    const months   = Array.isArray(dr.monthNames) && dr.monthNames.length === 12 ? dr.monthNames : fallbackMonths;
                    const rawFirst = parseInt(dr.first_day_of_week, 10);
                    const firstDay = Number.isNaN(rawFirst) ? 1 : Math.max(0, Math.min(6, rawFirst));
                    return {
                        weekdays: { shorthand: weekdays, longhand: weekdays },
                        months:   { shorthand: months.map(m => m.slice(0, 3)), longhand: months },
                        firstDayOfWeek: firstDay,
                        weekAbbreviation: dr.weekLabel || 'W',
                        rangeSeparator: ' – ',
                        scrollTitle: 'Scroll to increment',
                        toggleTitle: 'Click to toggle',
                    };
                },

                _fpOptions() {
                    return {
                        mode: 'range',
                        dateFormat: 'Y-m-d',
                        altInput: true,
                        altFormat: 'd.m.Y',
                        minDate: 'today',
                        locale: this._buildFlatpickrLocale(),
                    };
                },

                /* ══════════════ Location (Photon) ══════════════ */
                async searchLocations() {
                    const q = (this.filters.city_name || '').trim();
                    if (q.length < 3) {
                        this.locationSuggestions = [];
                        this.locationOpen = false;
                        this.locationLoading = false;
                        return;
                    }
                    if (this.locationAbort) { try { this.locationAbort.abort(); } catch (e) {} }
                    this.locationAbort = new AbortController();
                    this.locationLoading = true;
                    this.locationHighlight = -1;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.locationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.filters.city_name || '').trim() !== queryAtFetch) {
                            this.locationLoading = false;
                            return;
                        }

                        this.locationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                country: p.country || '',
                                countrycode: p.countrycode || '',
                                state: p.state || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.locationOpen = this.locationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.locationSuggestions = [];
                    } finally {
                        this.locationLoading = false;
                    }
                },

                _locationSubtitle(p) {
                    const parts = [];
                    if (p.state && p.state !== p.name) parts.push(p.state);
                    if (p.county && p.county !== p.name && p.county !== p.state) parts.push(p.county);
                    if (p.country && p.country !== p.name) parts.push(p.country);
                    return parts.join(', ');
                },

                selectLocation(s) {
                    if (!s) return;

                    this._locationPicked = true;
                    this.filters.city_name  = s.name;
                    this.filters.map_lat    = s.lat;
                    this.filters.map_lng    = s.lng;
                    this.filters.location_id = '';
                    this.locationOpen = false;
                    this.locationSuggestions = [];
                    this.locationHighlight = -1;

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                        this.$nextTick(() => setTimeout(() => {
                            if (this.mapOpen) this.centerMapOn(s.lat, s.lng, 11);
                        }, 250));
                    }

                    this.applyFilters();
                },

                moveHighlight(delta) {
                    if (!this.locationOpen || this.locationSuggestions.length === 0) return;
                    const n = this.locationSuggestions.length;
                    let next = this.locationHighlight + delta;
                    if (next < 0) next = n - 1;
                    if (next >= n) next = 0;
                    this.locationHighlight = next;
                },

                async searchMobileLocations() {
                    const q = (this.mobileDraft.city_name || '').trim();
                    if (q.length < 3) {
                        this.mobileLocationSuggestions = [];
                        this.mobileLocationOpen = false;
                        this.mobileLocationLoading = false;
                        return;
                    }
                    if (this.mobileLocationAbort) { try { this.mobileLocationAbort.abort(); } catch (e) {} }
                    this.mobileLocationAbort = new AbortController();
                    this.mobileLocationLoading = true;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.mobileLocationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.mobileDraft.city_name || '').trim() !== queryAtFetch) {
                            this.mobileLocationLoading = false;
                            return;
                        }

                        this.mobileLocationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                countrycode: p.countrycode || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.mobileLocationOpen = this.mobileLocationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.mobileLocationSuggestions = [];
                    } finally {
                        this.mobileLocationLoading = false;
                    }
                },

                selectMobileLocation(s) {
                    if (!s) return;
                    this.mobileDraft.city_name = s.name;
                    this.mobileDraft.map_lat   = s.lat;
                    this.mobileDraft.map_lng   = s.lng;
                    this.mobileLocationOpen = false;
                    this.mobileLocationSuggestions = [];

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                    }
                },

                /* ══════════════ Map helpers ══════════════ */
                _getMapInstance() {
                    const keys = ['bravo_map', 'gmap', 'map', 'googleMap', 'theMap', 'leafletMap', 'mapbox'];
                    for (const k of keys) {
                        const m = window[k];
                        if (m && typeof m === 'object') {
                            if (typeof m.setCenter === 'function') return { engine: 'google', map: m };
                            if (typeof m.setView === 'function' && typeof m.getZoom === 'function') return { engine: 'leaflet', map: m };
                            if (typeof m.flyTo === 'function' && typeof m.getSource === 'function') return { engine: 'mapbox', map: m };
                        }
                    }
                    return null;
                },

                _whenMapReady(cb, tries = 0) {
                    const found = this._getMapInstance();
                    if (found) { cb(found); return; }
                    if (tries > 60) return; // ~6s
                    setTimeout(() => this._whenMapReady(cb, tries + 1), 100);
                },

                centerMapOn(lat, lng, zoom) {
                    if (lat == null || lng == null || lat === '' || lng === '') return;
                    lat = parseFloat(lat); lng = parseFloat(lng);
                    if (Number.isNaN(lat) || Number.isNaN(lng)) return;

                    if (window.bravo_map_data) {
                        window.bravo_map_data.map_lat_default = lat;
                        window.bravo_map_data.map_lng_default = lng;
                        if (zoom) window.bravo_map_data.map_zoom_default = zoom;
                    }

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google') {
                                map.setCenter({ lat, lng });
                                if (zoom) map.setZoom(zoom);
                                if (window.google?.maps?.event) window.google.maps.event.trigger(map, 'resize');
                            } else if (engine === 'leaflet') {
                                map.setView([lat, lng], zoom || map.getZoom() || 10);
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                map.flyTo({ center: [lng, lat], zoom: zoom || map.getZoom() || 10 });
                            }
                        } catch (e) {}
                    });
                },

                fitBoundsToMarkers(markers, fallbackLat, fallbackLng, fallbackZoom) {
                    const list = (markers || [])
                        .map(m => ({ lat: parseFloat(m.lat), lng: parseFloat(m.lng) }))
                        .filter(m => !Number.isNaN(m.lat) && !Number.isNaN(m.lng));

                    if (!list.length) return this.centerMapOn(fallbackLat, fallbackLng, fallbackZoom);
                    if (list.length === 1) return this.centerMapOn(list[0].lat, list[0].lng, 13);

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                const b = new window.google.maps.LatLngBounds();
                                list.forEach(p => b.extend(p));
                                map.fitBounds(b, { padding: 48, maxZoom: 14 });
                            } else if (engine === 'leaflet' && window.L) {
                                const b = window.L.latLngBounds(list.map(p => [p.lat, p.lng]));
                                map.fitBounds(b, { padding: [40, 40], maxZoom: 14 });
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                const lngs = list.map(p => p.lng), lats = list.map(p => p.lat);
                                map.fitBounds(
                                    [[Math.min(...lngs), Math.min(...lats)],
                                     [Math.max(...lngs), Math.max(...lats)]],
                                    { padding: 48, maxZoom: 14 }
                                );
                            }
                        } catch (e) {}
                    });
                },

                refreshMapSize() {
                    window.dispatchEvent(new Event('resize'));
                    try {
                        if (window.google && window.google.maps && window.google.maps.event) {
                            ['bravo_map','gmap','map','googleMap','theMap'].forEach(key => {
                                const m = window[key];
                                if (m && typeof m === 'object' && typeof m.getCenter === 'function') {
                                    window.google.maps.event.trigger(m, 'resize');
                                }
                            });
                        }
                        if (window.L && window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize();
                        if (typeof window.refreshMapMarkers === 'function') window.refreshMapMarkers();
                    } catch (e) {}
                },

                /* ══════════════ Markers ══════════════ */
                extractMarkersFromDoc(doc) {
                    const el = doc.querySelector('#bravo-map-markers-data');
                    if (!el) return null;
                    try {
                        return {
                            markers: JSON.parse(el.dataset.markers || '[]'),
                            lat:  parseFloat(el.dataset.lat)  || this.defaultLat,
                            lng:  parseFloat(el.dataset.lng)  || this.defaultLng,
                            zoom: parseInt(el.dataset.zoom)   || this.defaultZoom,
                        };
                    } catch (e) { return null; }
                },

                _popupHtml(mk) {
                    return `
                        <div style="max-width:220px;font-family:Inter,system-ui,sans-serif">
                            ${mk.image ? `<img src="${mk.image}" style="width:100%;border-radius:8px;margin-bottom:6px">` : ''}
                            <strong style="font-size:13px;color:#0f172a">${mk.title || ''}</strong>
                            ${mk.price ? `<div style="margin-top:4px;color:#4f46e5;font-weight:700;font-size:13px">${mk.price}</div>` : ''}
                        </div>`;
                },

                syncMapMarkers(payload) {
                    if (!payload) return;

                    window.bravo_map_data = window.bravo_map_data || {};
                    window.bravo_map_data.markers           = payload.markers;
                    window.bravo_map_data.map_lat_default   = payload.lat;
                    window.bravo_map_data.map_lng_default   = payload.lng;
                    window.bravo_map_data.map_zoom_default  = payload.zoom;

                    const fallback = {
                        lat:  payload.lat  || this.defaultLat,
                        lng:  payload.lng  || this.defaultLng,
                        zoom: payload.zoom || this.defaultZoom,
                    };

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                (map.__bravoMarkers || []).forEach(mk => mk.setMap && mk.setMap(null));
                                map.__bravoMarkers = [];

                                const info = map.__bravoInfo ||
                                             (map.__bravoInfo = new window.google.maps.InfoWindow());

                                payload.markers.forEach(mk => {
                                    const marker = new window.google.maps.Marker({
                                        position: { lat: parseFloat(mk.lat), lng: parseFloat(mk.lng) },
                                        map,
                                        title: mk.title || '',
                                    });
                                    marker.__id = mk.id;

                                    if (mk.title || mk.image) {
                                        marker.addListener('click', () => {
                                            info.setContent(this._popupHtml(mk));
                                            info.open(map, marker);
                                        });
                                    }
                                    map.__bravoMarkers.push(marker);
                                });

                                if (payload.markers.length === 1 && map.__bravoMarkers[0]) {
                                    const m = map.__bravoMarkers[0];
                                    const mk = payload.markers[0];
                                    if (mk.title || mk.image) {
                                        info.setContent(this._popupHtml(mk));
                                        info.open(map, m);
                                    }
                                }
                            }
                            else if (engine === 'leaflet' && window.L) {
                                if (map.__bravoLayer) map.removeLayer(map.__bravoLayer);
                                const layer = window.L.layerGroup().addTo(map);
                                payload.markers.forEach(mk => {
                                    const marker = window.L.marker([parseFloat(mk.lat), parseFloat(mk.lng)]).addTo(layer);
                                    marker.__id = mk.id;
                                    if (mk.title || mk.image) marker.bindPopup(this._popupHtml(mk));
                                });
                                map.__bravoLayer = layer;
                                if (payload.markers.length === 1) {
                                    const first = layer.getLayers()[0];
                                    if (first && first.openPopup) first.openPopup();
                                }
                            }
                            else if (engine === 'mapbox' && window.mapboxgl) {
                                const geojson = {
                                    type: 'FeatureCollection',
                                    features: payload.markers.map(mk => ({
                                        type: 'Feature',
                                        geometry: { type: 'Point', coordinates: [parseFloat(mk.lng), parseFloat(mk.lat)] },
                                        properties: { title: mk.title || '', id: mk.id, image: mk.image || '', price: mk.price || '' }
                                    }))
                                };
                                if (map.getSource('bravo-markers')) {
                                    map.getSource('bravo-markers').setData(geojson);
                                } else {
                                    map.addSource('bravo-markers', { type: 'geojson', data: geojson });
                                    map.addLayer({
                                        id: 'bravo-markers', type: 'circle', source: 'bravo-markers',
                                        paint: { 'circle-radius': 8, 'circle-color': '#4f46e5',
                                                 'circle-stroke-color': '#fff', 'circle-stroke-width': 2 }
                                    });
                                }
                            }
                        } catch (e) {}

                        // Prefer markers bounds; when none, fall back to lat/lng/zoom
                        this.fitBoundsToMarkers(payload.markers, fallback.lat, fallback.lng, fallback.zoom);
                        this.refreshMapSize();
                    });
                },

                // Card hover → open matching marker popup
                highlightMarker(id) {
                    if (id == null) return;
                    const found = this._getMapInstance();
                    if (!found) return;
                    const { engine, map } = found;
                    try {
                        if (engine === 'google') {
                            const marker = (map.__bravoMarkers || []).find(m => String(m.__id) === String(id));
                            if (marker && window.google?.maps?.event) {
                                window.google.maps.event.trigger(marker, 'click');
                            }
                        } else if (engine === 'leaflet' && map.__bravoLayer) {
                            const layer = map.__bravoLayer.getLayers().find(m => String(m.__id) === String(id));
                            if (layer && layer.openPopup) layer.openPopup();
                        }
                    } catch (e) {}
                },

                /* ══════════════ Mobile draft ══════════════ */
                mobileDraft: {
                    city_name: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0, pets_allowed: 0,
                    map_lat: '', map_lng: '',
                    get nights() {
                        if (!this.start || !this.end) return 0;
                        const n = Math.round((new Date(this.end) - new Date(this.start)) / 86400000);
                        return n > 0 ? n : 0;
                    },
                },

                guestRows: [
                    { key: 'adults',   label: 'Erwachsene', hint: '13+ Jahre',     min: 1 },
                    { key: 'children', label: 'Kinder',     hint: '2–12 Jahre',    min: 0 },
                    { key: 'pets',     label: 'Haustiere',  hint: 'Katzen, Hunde', min: 0 },
                ],

                get guestSummary() {
                    const parts = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) parts.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) parts.push(`${this.filters.pets} 🐾`);
                    return parts.join(' · ');
                },

                get nights() {
                    const s = this._toIso(this.filters.start);
                    const e = this._toIso(this.filters.end);
                    if (!s || !e) return 0;
                    const n = Math.round((new Date(e) - new Date(s)) / 86400000);
                    return n > 0 ? n : 0;
                },

                _toIso(input) {
                    if (!input) return '';
                    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input;
                    if (/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) {
                        const [d, m, y] = input.split('.');
                        return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const dd = String(input.getDate()).padStart(2, '0');
                        return `${y}-${m}-${dd}`;
                    }
                    return '';
                },

                get mobileTriggerPrimary() { return this.filters.city_name || 'Wohin?'; },

                get mobileTriggerSecondary() {
                    const parts = [];
                    if (this.filters.start && this.filters.end) {
                        parts.push(`${this.fmtDate(this.filters.start)} – ${this.fmtDate(this.filters.end)}`);
                    } else { parts.push('Wann?'); }
                    const g = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) g.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) g.push(`${this.filters.pets} 🐾`);
                    parts.push(g.join(' · '));
                    return parts.join(' · ');
                },

                get layoutStyle() {
                    if (!this.isDesktop) return 'display: block;';
                    if (this.sidebarOpen && this.mapOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr) 420px;';
                    if (this.sidebarOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr);';
                    if (this.mapOpen) return 'display: grid; grid-template-columns: minmax(0, 1fr) 420px;';
                    return 'display: block;';
                },

                get appliedCount() {
                    let n = 0;
                    if (this.filters.city_name) n++;
                    if (this.filters.start && this.filters.end) n++;
                    if (this.filters.adults > 2) n++;
                    if (this.filters.children > 0) n++;
                    if (this.filters.pets > 0) n++;
                    if (this.filters.price_min > this.minPrice) n++;
                    if (this.filters.price_max < this.maxPrice) n++;
                    if (this.filters.orderby) n++;
                    for (const t of Object.values(this.filters.attrs || {})) n += (t || []).length;
                    return n;
                },

                get activeChips() {
                    const chips = [];
                    if (this.filters.city_name) chips.push({ key: 'city', label: this.filters.city_name });
                    if (this.filters.start && this.filters.end) {
                        chips.push({ key: 'dates', label: `${this.fmtDate(this.filters.start)} → ${this.fmtDate(this.filters.end)}` });
                    }
                    if (this.filters.price_min > this.minPrice || this.filters.price_max < this.maxPrice) {
                        chips.push({ key: 'price', label: `${this.filters.price_min}€ – ${this.filters.price_max}€` });
                    }
                    if (this.filters.pets > 0) chips.push({ key: 'pets', label: 'Haustiere' });
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        const attr = (this.attributes || []).find(a => a.id == attrId);
                        if (!attr) continue;
                        (termIds || []).forEach(termId => {
                            const term = (attr.terms || []).find(t => t.id == termId);
                            if (!term) return;
                            chips.push({ key: `attr_${attrId}_${termId}`, label: term.name, attrId: parseInt(attrId, 10), termId: parseInt(termId, 10) });
                        });
                    }
                    return chips;
                },

                fmtDate(input) {
                    if (!input) return '';
                    if (typeof input === 'string' && /^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) return input;
                    if (typeof input === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(input)) {
                        const [y, m, d] = input.split('-');
                        return `${d}.${m}.${y}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const d = String(input.getDate()).padStart(2, '0');
                        return `${d}.${m}.${y}`;
                    }
                    return '';
                },

                toIso(input) { return this._toIso(input); },

                isAttrChecked(attrId, termId) { return (this.filters.attrs[attrId] || []).includes(termId); },
                toggleAttr(attrId, termId, checked) {
                    if (!this.filters.attrs[attrId]) this.filters.attrs[attrId] = [];
                    const arr = this.filters.attrs[attrId];
                    const i = arr.indexOf(termId);
                    if (checked && i === -1)       arr.push(termId);
                    else if (!checked && i !== -1) arr.splice(i, 1);
                    if (arr.length === 0) delete this.filters.attrs[attrId];
                    this.applyFilters();
                },

                init() {
                    const desktop = window.matchMedia('(min-width: 1024px)').matches;

                    let savedView = null;
                    try { savedView = localStorage.getItem('campsiteView'); } catch (e) {}
                    const hasSavedView = savedView === 'grid' || savedView === 'list';

                    this.view = hasSavedView ? savedView : (desktop ? 'grid' : 'list');

                    if (desktop) { this.sidebarOpen = true; this.mapOpen = true; }
                    else         { this.sidebarOpen = false; this.mapOpen = false; }

                    this.$watch(
                        () => this.mobileSearchOpen || this.mobileFiltersOpen || (this.mapOpen && !this.isDesktop),
                        (locked) => {
                            if (locked) {
                                this._scrollY = window.scrollY || window.pageYOffset || 0;
                                document.body.style.top = `-${this._scrollY}px`;
                                document.body.classList.add('modal-open');
                            } else {
                                document.body.classList.remove('modal-open');
                                document.body.style.top = '';
                                if (this._scrollY) { window.scrollTo(0, this._scrollY); this._scrollY = 0; }
                            }
                        }
                    );

                    this.filters.start = this.toIso(this.filters.start);
                    this.filters.end   = this.toIso(this.filters.end);

                    const mq = window.matchMedia('(min-width: 1024px)');
                    const update = () => { this.isDesktop = mq.matches; };
                    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
                    update();

                    if (this.$refs.desktopDateRange) {
                        this._desktopFP = flatpickr(this.$refs.desktopDateRange, {
                            ...this._fpOptions(),
                            showMonths: window.matchMedia('(max-width: 767px)').matches ? 1 : 2,
                            defaultDate: (this.filters.start && this.filters.end) ? [this.filters.start, this.filters.end] : null,
                            onChange: (dates) => {
                                if (dates.length === 2) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = this.toIso(dates[1]);
                                    this.applyFilters();
                                } else if (dates.length === 1) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = '';
                                } else {
                                    this.filters.start = ''; this.filters.end = '';
                                    this.applyFilters();
                                }
                            },
                        });
                    }

                    this._initMobileFP();

                    this._resizeHandler = () => {
                        if (!this._desktopFP) return;
                        const want = window.matchMedia('(max-width: 767px)').matches ? 1 : 2;
                        if (this._desktopFP.config.showMonths !== want) this._desktopFP.set('showMonths', want);
                    };
                    window.addEventListener('resize', this._resizeHandler);

                    this.$nextTick(() => {
                        this.readBoundsFromDom();
                        this.reinitLazyLoad();
                        if (this.mapOpen) {
                            setTimeout(() => this.refreshMapSize(), 250);
                            setTimeout(() => this.refreshMapSize(), 800);
                        }
                    });

                    // ═══ Map positioning on first load ═══
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                            const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                            const payload = this.extractMarkersFromDoc(document);

                            if (hasLat && hasLng) {
                                this.filters.map_lat = parseFloat(this.filters.map_lat);
                                this.filters.map_lng = parseFloat(this.filters.map_lng);
                                this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                            } else {
                                this.filters.map_lat = this.defaultLat;
                                this.filters.map_lng = this.defaultLng;
                                if (payload && payload.markers.length) {
                                    this.fitBoundsToMarkers(payload.markers, this.defaultLat, this.defaultLng, this.defaultZoom);
                                } else {
                                    this.centerMapOn(this.defaultLat, this.defaultLng, this.defaultZoom);
                                }
                            }

                            if (payload) {
                                setTimeout(() => this.syncMapMarkers(payload), 200);
                            }
                        }, 600);
                    });
                },

                _initMobileFP() {
                    if (!this.$refs.mobileDateRange) return;
                    if (this.$refs.mobileDateRange._flatpickr) return;
                    this._mobileFP = flatpickr(this.$refs.mobileDateRange, {
                        ...this._fpOptions(),
                        showMonths: 1,
                        onChange: (dates) => {
                            if (dates.length === 2) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = this.toIso(dates[1]);
                            } else if (dates.length === 1) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = '';
                            } else {
                                this.mobileDraft.start = ''; this.mobileDraft.end = '';
                            }
                        },
                    });
                },

                readBoundsFromDom() {
                    const bounds = document.querySelector('#price-bounds');
                    if (!bounds) return;
                    const m = parseInt(bounds.dataset.min || '0', 10);
                    const M = parseInt(bounds.dataset.max || '0', 10);
                    if (M > 0 && M >= m) { this.minPrice = m; this.maxPrice = M; }
                },

                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                    if (this.sidebarOpen && this.mapOpen) this.refreshMapSize();
                },

                toggleMap() {
                    this.mapOpen = !this.mapOpen;
                    if (this.mapOpen) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                                const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                                this.syncMapMarkers(this.extractMarkersFromDoc(document));

                                if (hasLat && hasLng) {
                                    setTimeout(() => this.centerMapOn(
                                        parseFloat(this.filters.map_lat),
                                        parseFloat(this.filters.map_lng),
                                        11
                                    ), 220);
                                }

                                this.refreshMapSize();
                                setTimeout(() => this.refreshMapSize(), 250);
                            }, 120);
                        });
                    }
                },

                openMobileSearch() {
                    this.mobileDraft.city_name    = this.filters.city_name || '';
                    this.mobileDraft.start        = this.toIso(this.filters.start);
                    this.mobileDraft.end          = this.toIso(this.filters.end);
                    this.mobileDraft.adults       = this.filters.adults || 2;
                    this.mobileDraft.children     = this.filters.children || 0;
                    this.mobileDraft.pets         = this.filters.pets || 0;
                    this.mobileDraft.pets_allowed = this.filters.pets > 0 ? 1 : 0;
                    this.mobileDraft.map_lat      = this.filters.map_lat || '';
                    this.mobileDraft.map_lng      = this.filters.map_lng || '';
                    this.mobileSearchOpen = true;
                    this.$nextTick(() => {
                        this._initMobileFP();
                        if (this._mobileFP && this.mobileDraft.start && this.mobileDraft.end) {
                            this._mobileFP.setDate([this.mobileDraft.start, this.mobileDraft.end], false);
                        }
                    });
                },
                cancelMobileSearch() {
                    this.mobileSearchOpen = false;
                    this.mobileLocationOpen = false;
                },
                resetMobileDraft() {
                    this.mobileDraft.city_name = '';
                    this.mobileDraft.start = '';
                    this.mobileDraft.end = '';
                    this.mobileDraft.adults = 2;
                    this.mobileDraft.children = 0;
                    this.mobileDraft.pets = 0;
                    this.mobileDraft.pets_allowed = 0;
                    this.mobileDraft.map_lat = '';
                    this.mobileDraft.map_lng = '';
                    this.mobileLocationSuggestions = [];
                    this.mobileLocationOpen = false;
                    if (this._mobileFP) this._mobileFP.clear();
                },
                applyMobileSearch() {
                    this.filters.city_name = this.mobileDraft.city_name;
                    this.filters.start     = this.toIso(this.mobileDraft.start);
                    this.filters.end       = this.toIso(this.mobileDraft.end);
                    this.filters.adults    = this.mobileDraft.adults;
                    this.filters.children  = this.mobileDraft.children;
                    this.filters.pets      = this.mobileDraft.pets_allowed ? Math.max(1, this.mobileDraft.pets) : 0;
                    this.filters.map_lat   = this.mobileDraft.map_lat;
                    this.filters.map_lng   = this.mobileDraft.map_lng;
                    this.cancelMobileSearch();

                    // Center only when the map is visible
                    if (this.mapOpen && this.filters.map_lat && this.filters.map_lng) {
                        this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                    }

                    this.applyFilters();
                },
                mobileIncGuest(key) {
                    this.mobileDraft[key] = (this.mobileDraft[key] || 0) + 1;
                    if (key === 'pets' && this.mobileDraft.pets > 0) this.mobileDraft.pets_allowed = 1;
                },
                mobileDecGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.mobileDraft[key] || 0) > min) {
                        this.mobileDraft[key] = (this.mobileDraft[key] || 0) - 1;
                        if (key === 'pets' && this.mobileDraft.pets === 0) this.mobileDraft.pets_allowed = 0;
                    }
                },
                incGuest(key) { this.filters[key] = (this.filters[key] || 0) + 1; this.applyFilters(); },
                decGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.filters[key] || 0) > min) {
                        this.filters[key] = (this.filters[key] || 0) - 1;
                        this.applyFilters();
                    }
                },

                removeChip(chip) {
                    switch (chip.key) {
                        case 'city':
                            this.filters.city_name = '';
                            this.filters.map_lat = '';
                            this.filters.map_lng = '';
                            this.filters.location_id = '';
                            break;
                        case 'dates':
                            this.filters.start = ''; this.filters.end = '';
                            if (this._desktopFP) this._desktopFP.clear();
                            break;
                        case 'price':
                            this.filters.price_min = this.minPrice;
                            this.filters.price_max = this.maxPrice;
                            break;
                        case 'pets': this.filters.pets = 0; break;
                        default:
                            if (chip.key.startsWith('attr_')) {
                                const arr = this.filters.attrs[chip.attrId] || [];
                                const i = arr.indexOf(chip.termId);
                                if (i !== -1) arr.splice(i, 1);
                                if (arr.length === 0) delete this.filters.attrs[chip.attrId];
                            }
                    }
                    this.applyFilters();
                },

                resetFilters() {
                    this.filters = {
                        city_name: '', location_id: '', start: '', end: '',
                        adults: 2, children: 0, pets: 0,
                        price_min: this.minPrice, price_max: this.maxPrice,
                        orderby: '', attrs: {},
                        map_lat: this.defaultLat, map_lng: this.defaultLng,
                    };
                    if (this._desktopFP) this._desktopFP.clear();
                    this.applyFilters();
                },

                buildParams() {
                    const p = new URLSearchParams();
                    for (let [k, v] of Object.entries(this.filters)) {
                        if (k === 'attrs') continue;
                        if ((k === 'start' || k === 'end') && v) v = this.toIso(v);
                        if (v !== '' && v !== null && v !== undefined) p.set(k, v);
                    }
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        (termIds || []).forEach(id => p.append(`attrs[${attrId}][]`, id));
                    }
                    return p;
                },

                swapResults(doc, url) {
                    const newResults = doc.querySelector('#results');
                    const curResults = document.querySelector('#results');
                    if (newResults && curResults) curResults.innerHTML = newResults.innerHTML;

                    // Pull marker payload + re-render markers with fresh data
                    const markerPayload = this.extractMarkersFromDoc(doc);
                    this.syncMapMarkers(markerPayload);

                    this.$nextTick(() => {
                        if (curResults && window.Alpine && typeof Alpine.initTree === 'function') {
                            try { Alpine.initTree(curResults); } catch (e) {}
                        }
                        this.reinitLazyLoad();
                    });

                    const bounds = doc.querySelector('#price-bounds');
                    if (bounds) {
                        const newMin = parseInt(bounds.dataset.min || '0', 10);
                        const newMax = parseInt(bounds.dataset.max || '0', 10);
                        if (newMax > 0 && newMax >= newMin) {
                            this.minPrice = newMin;
                            this.maxPrice = newMax;
                            if (this.filters.price_min < newMin || this.filters.price_min > newMax) this.filters.price_min = newMin;
                            if (this.filters.price_max > newMax || this.filters.price_max < newMin) this.filters.price_max = newMax;
                            if (this.filters.price_min > this.filters.price_max) {
                                this.filters.price_min = newMin; this.filters.price_max = newMax;
                            }
                        }
                    }

                    const newPag = doc.querySelector('nav[aria-label="Pagination"]');
                    const curPag = document.querySelector('nav[aria-label="Pagination"]');
                    if (newPag) {
                        if (curPag) curPag.replaceWith(newPag);
                        else if (curResults) curResults.insertAdjacentElement('afterend', newPag);
                        this.$nextTick(() => {
                            if (window.Alpine && typeof Alpine.initTree === 'function') {
                                try { Alpine.initTree(newPag); } catch (e) {}
                            }
                        });
                    } else if (curPag) curPag.remove();

                    history.replaceState(null, '', url);

                    const countEl = doc.querySelector('[x-text="totalResults"]');
                    if (countEl) {
                        const m = (countEl.textContent || '').match(/\d+/);
                        if (m) this.totalResults = parseInt(m[0], 10);
                    }

                    // Honour URL map_lat/map_lng on every swap
                    const params = new URLSearchParams(url.split('?')[1] || '');
                    const lat = params.get('map_lat');
                    const lng = params.get('map_lng');
                    if (lat && lng) {
                        setTimeout(() => this.centerMapOn(lat, lng, 11), 400);
                    }
                },

                applyFilters() {
                    this.loading = true;
                    const params = this.buildParams();
                    params.delete('page');
                    const url = `${window.location.pathname}?${params}`;

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                goToPage(page) {
                    const params = this.buildParams();
                    if (page > 1) params.set('page', page); else params.delete('page');
                    const url = `${window.location.pathname}?${params}`;
                    this.loading = true;
                    window.scrollTo({ top: 0, behavior: 'smooth' });

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                toggleFavorite(id, ev) {
                    // Wire to your wishlist endpoint, e.g.:
                    // fetch('/wishlist/toggle', { method: 'POST', headers: { 'X-CSRF-TOKEN': '...' }, body: ... })
                },
            };
        }
    </script>
@endpush@extends('layouts.tailwind',['container_class'=>'container-fluid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8','header_right_menu'=>true])

@push('css')
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                    colors: {
                        brand: {
                            50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',
                            400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',
                            800:'#3730a3',900:'#312e81',950:'#1e1b4b',
                        },
                    },
                    boxShadow: {
                        'card':'0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06)',
                        'card-hover':'0 10px 20px -5px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05)',
                        'pop':'0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
                    },
                },
            },
        };
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link href="{{ asset('dist/frontend/module/hotel/css/hotel.css?_ver='.config('app.asset_version')) }}" rel="stylesheet">

    <style>
        [x-cloak] { display: none !important; }
        html { scroll-behavior: smooth; }

        #mapcc, #bravo_results_map { height: 100%; min-height: 100%; width: 100%; }

        .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .thin-scroll::-webkit-scrollbar-track { background: transparent; }
        .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .bravo_topbar, .bravo_footer { display: none; }

        body.modal-open {
            overflow: hidden; position: fixed; inset: 0; width: 100%;
        }

        .thin-scroll, .mobile-search-scroll, .mobile-drawer-scroll {
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        .mobile-full-height {
            height: 100vh; height: 100dvh; max-height: 100dvh;
        }

        /* ---- Flatpickr brand theme ---- */
        .flatpickr-calendar {
            width: 340px !important; padding: 0 !important;
            border-radius: 20px !important;
            box-shadow: 0 24px 48px -12px rgba(15,23,42,0.20), 0 8px 16px -8px rgba(15,23,42,0.10) !important;
            border: 1px solid #e2e8f0 !important; margin-top: 12px !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            background: #fff !important; overflow: hidden;
        }
        .flatpickr-calendar.multiMonth,
        .flatpickr-calendar.rangeMode { width: 700px !important; }
        .flatpickr-calendar::before, .flatpickr-calendar::after,
        .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
        .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after {
            display: none !important; content: none !important;
        }
        .flatpickr-months {
            display: flex; align-items: center; position: relative;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            padding: 10px; gap: 6px;
        }
        .flatpickr-months .flatpickr-month {
            flex: 1 1 0; height: 36px; color: #fff; fill: #fff;
            display: flex; align-items: center; justify-content: center;
            background: transparent;
        }
        .flatpickr-months .flatpickr-prev-month,
        .flatpickr-months .flatpickr-next-month {
            position: static !important; top: auto !important; right: auto !important; left: auto !important;
            width: 36px; height: 36px; padding: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 10px; color: #fff; fill: #fff;
            transition: background .15s; z-index: 2;
        }
        .flatpickr-months .flatpickr-prev-month:hover,
        .flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,0.16); }
        .flatpickr-months .flatpickr-prev-month svg,
        .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; stroke: #fff; }

        .flatpickr-current-month {
            width: 100%; height: 100%; padding: 0;
            font-size: 15px; font-weight: 700; letter-spacing: .01em;
            color: #fff; display: flex; align-items: center; justify-content: center; gap: 3px;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months {
            appearance: none; background: transparent !important; border: none;
            color: #fff !important; font-weight: 700; font-size: 15px;
            font-family: inherit; padding: 2px 4px; border-radius: 6px;
            cursor: pointer; transition: background .15s;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(255,255,255,0.14) !important; }
        .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: #1e293b; font-weight: 500; }
        .flatpickr-current-month .numInputWrapper { width: 56px; }
        .flatpickr-current-month .numInputWrapper:hover { background: rgba(255,255,255,0.14) !important; border-radius: 6px; }
        .flatpickr-current-month .numInputWrapper span { border: none; }
        .flatpickr-current-month .numInputWrapper span::after,
        .flatpickr-current-month .numInputWrapper span::before { border-color: #fff transparent transparent; }
        .flatpickr-current-month input.cur-year { color: #fff !important; font-weight: 700; font-size: 15px; font-family: inherit; padding: 0 4px; }

        .flatpickr-innerContainer { padding: 14px 14px 12px; background: #fff; }
        .flatpickr-rContainer { width: 100%; }
        .flatpickr-weekdays { display: flex; align-items: center; margin-bottom: 6px; height: auto; }
        .flatpickr-weekdaycontainer { display: flex; flex: 1 1 0; gap: 4px; justify-content: flex-start; padding: 0; }
        .flatpickr-weekdays .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer { border-left: 12px solid transparent; }
        .flatpickr-weekday {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            background: transparent; color: #94a3b8; font-weight: 700; font-size: 10.5px;
            letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 30px;
        }
        .flatpickr-days { border: none !important; display: flex; justify-content: space-between; align-items: flex-start; padding: 0; }
        .flatpickr-days .dayContainer + .dayContainer { border-left: 12px solid transparent; }
        .dayContainer { display: flex; flex-wrap: wrap; padding: 0; gap: 4px; justify-content: flex-start; align-content: flex-start; }
        .flatpickr-day {
            flex: 0 0 calc((100% - 6 * 4px) / 7); max-width: calc((100% - 6 * 4px) / 7);
            height: 40px; line-height: 40px; margin: 0; padding: 0;
            border: none !important; border-radius: 10px;
            font-weight: 500; font-size: 13.5px; color: #1e293b;
            background: transparent; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-variant-numeric: tabular-nums;
        }
        .flatpickr-day:hover { background: #eef2ff; color: #4f46e5; }
        .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1; font-weight: 400; }
        .flatpickr-day.today { border: 1.5px solid #a5b4fc !important; font-weight: 700; color: #4f46e5; }
        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
            border-color: #4f46e5 !important; color: #fff !important;
            font-weight: 700; box-shadow: 0 4px 12px rgba(79,70,229,.35); z-index: 2;
        }
        .flatpickr-day.inRange { background: #e0e7ff; border-color: #e0e7ff; color: #4338ca; border-radius: 0; }
        .flatpickr-day.startRange { border-radius: 10px 0 0 10px; }
        .flatpickr-day.endRange   { border-radius: 0 10px 10px 0; }
        .flatpickr-day.startRange.endRange { border-radius: 10px; }
        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #e2e8f0; cursor: not-allowed; }
        @media (max-width: 767px) {
            .flatpickr-calendar, .flatpickr-calendar.multiMonth, .flatpickr-calendar.rangeMode {
                width: 100% !important; max-width: 360px !important; border-radius: 16px !important;
            }
            .flatpickr-day { height: 38px; line-height: 38px; font-size: 13px; }
            .flatpickr-weekday { line-height: 26px; font-size: 10px; }
            .flatpickr-innerContainer { padding: 12px 10px 10px; }
        }

        input[type="range"].brand-slider {
            -webkit-appearance: none; appearance: none;
            height: 4px; background: #e2e8f0; border-radius: 9999px; outline: none;
        }
        input[type="range"].brand-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }
        input[type="range"].brand-slider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%;
            background: #4f46e5; border: 3px solid #fff;
            box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
        }

        .card-media { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
        .group:hover .card-media { transform: scale(1.05); }

        .fade-in { animation: fadeIn .3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

        .shimmer {
            background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.6s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
        .chip-enter { animation: chipIn .2s ease; }
        @keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

        #results img[data-src] {
            background-color: #f1f5f9;
            background-image: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
            background-size: 200% 100%;
            animation: shimmer 1.2s ease-in-out infinite;
        }

        /* Map panel sizing guard – keep Leaflet/Google from collapsing */
        #bravo_results_map { position: relative; }
        .leaflet-container { width: 100% !important; height: 100% !important; }
    </style>
@endpush

@section('content')
@php
    $locale      = session('website_locale', app()->getLocale());
    $searchRoute = 'hotel.search.' . $locale;
    $priceBounds = $hotel_min_max_price ?? [0, 500];

    // ── Map positioning: request wins, otherwise Germany default ──
    $reqLat      = request('map_lat');
    $reqLng      = request('map_lng');
    $defaultLat  = $reqLat ? (float) $reqLat : 51.1657;
    $defaultLng  = $reqLng ? (float) $reqLng : 10.4515;
    $defaultZoom = $reqLat ? 11 : 6;

    // ── Markers payload for the map ──
    $markersPayload = $markers ?? [];
@endphp

<div
    x-data="campsiteSearch({
        initial: {
            city_name:   {{ json_encode(request('city_name', '')) }},
            location_id: {{ json_encode(request('location_id', '')) }},
            map_lat:     {{ json_encode(request('map_lat', '')) }},
            map_lng:     {{ json_encode(request('map_lng', '')) }},
            start:       {{ json_encode(request('start', '')) }},
            end:         {{ json_encode(request('end', '')) }},
            adults:      {{ (int) request('adults', 2) }},
            children:    {{ (int) request('children', 0) }},
            pets:        {{ (int) request('pets', 0) }},
            price_min:   {{ (int) request('price_min', $priceBounds[0] ?? 0) }},
            price_max:   {{ (int) request('price_max', $priceBounds[1] ?? 500) }},
            orderby:     {{ json_encode(request('orderby', '')) }},
            attrs:       {{ json_encode((object) request('attrs', [])) }}
        },
        minPrice: {{ (int) ($priceBounds[0] ?? 0) }},
        maxPrice: {{ (int) ($priceBounds[1] ?? 500) }},
        totalResults: {{ $rows->total() }},
        mapLayout: {{ ($layout ?? 'normal') === 'map' ? 'true' : 'false' }},
        defaultLat:  {{ $defaultLat }},
        defaultLng:  {{ $defaultLng }},
        defaultZoom: {{ $defaultZoom }},
        attributes: {{ json_encode(
            ($attributes ?? collect())->map(function ($attr) {
                $tAttr = method_exists($attr, 'translate') ? optional($attr->translate()) : null;
                return [
                    'id'    => (int) $attr->id,
                    'name'  => $tAttr->name ?? $attr->name,
                    'terms' => $attr->terms->map(function ($term) {
                        $tTerm = method_exists($term, 'translate') ? optional($term->translate()) : null;
                        return [
                            'id'    => (int) $term->id,
                            'name'  => $tTerm->name ?? $term->name,
                            'count' => (int) ($term->hotel_count ?? 0),
                        ];
                    })->values()->all(),
                ];
            })->values()->all()
        ) }},
        locale: {{ json_encode(strtolower(substr($locale, 0, 2))) }}
    })"
    x-init="init()"
    x-cloak
    class="min-h-screen bg-slate-50 text-slate-900 antialiased"
    style="font-family: 'Inter', system-ui, sans-serif;"
>
    <h1 class="sr-only">{{ setting_item_with_lang("hotel_page_search_title") }}</h1>

    {{-- ═══════════════════ STICKY HEADER ═══════════════════ --}}
    <header class="sticky top-0 z-40 bg-white border-b border-slate-200/80 shadow-sm">
        <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-3">

            {{-- DESKTOP --}}
            <div class="hidden md:flex items-center gap-3 max-w-4xl mx-auto">

                <button type="button"
                        @click="toggleSidebar()"
                        :class="sidebarOpen
                            ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                            : 'bg-white text-slate-700 border-slate-200 hover:border-slate-400 hover:shadow-card'"
                        class="shrink-0 inline-flex items-center gap-2 px-4 py-3 rounded-full border font-semibold text-sm transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span>Filter</span>
                    <span x-show="appliedCount > 0" x-cloak
                          :class="sidebarOpen ? 'bg-white text-brand-600' : 'bg-brand-600 text-white'"
                          class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[10px] font-bold"
                          x-text="appliedCount"></span>
                </button>

                <form @submit.prevent="applyFilters()"
                      class="flex-1 flex items-center rounded-full border border-slate-200 bg-white hover:shadow-card focus-within:shadow-card transition-shadow">

                    <div class="flex-1 min-w-0 px-6 py-3 border-r border-slate-200 relative"
                         @click.outside="locationOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Standort</label>
                        <input type="text"
                               x-model="filters.city_name"
                               @input.debounce.350ms="_locationPicked = false; searchLocations()"
                               @focus="if (locationSuggestions.length) locationOpen = true"
                               @keydown.arrow-down.prevent="moveHighlight(1)"
                               @keydown.arrow-up.prevent="moveHighlight(-1)"
                               @keydown.enter.prevent="if (locationOpen && locationHighlight >= 0) { selectLocation(locationSuggestions[locationHighlight]); } else { applyFilters(); }"
                               @keydown.escape="locationOpen = false"
                               placeholder="Stadt oder Region"
                               autocomplete="off"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate">

                        <svg x-show="locationLoading" x-cloak
                             class="w-3.5 h-3.5 absolute right-3 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                             fill="none" viewBox="0 0 24 24">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                            <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                        </svg>

                        <div x-show="locationOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute left-0 right-0 top-full mt-3 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden z-[60]">

                            <template x-for="(s, idx) in locationSuggestions" :key="idx">
                                <button type="button"
                                        @click="selectLocation(s)"
                                        @mouseenter="locationHighlight = idx"
                                        class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0"
                                        :class="locationHighlight === idx ? 'bg-brand-50' : 'hover:bg-slate-50'">
                                    <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"
                                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                        <circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                        <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                                    </div>
                                    <span class="text-[10px] uppercase tracking-wider text-slate-400 font-bold shrink-0 mt-0.5"
                                          x-text="s.countrycode"></span>
                                </button>
                            </template>

                            <div x-show="!locationLoading && locationSuggestions.length === 0" x-cloak
                                 class="px-4 py-3 text-xs text-slate-500">
                                Keine Orte gefunden
                            </div>

                            <div class="px-4 py-2 border-t border-slate-100 bg-slate-50 text-[10px] text-slate-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                                </svg>
                                Suche powered by OpenStreetMap
                            </div>
                        </div>
                    </div>

                    <div class="flex-[1.35] min-w-0 px-6 py-3 relative border-r border-slate-200">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Reisezeitraum</label>
                        <input type="text" x-ref="desktopDateRange" placeholder="Daten wählen"
                               class="w-full bg-transparent text-sm font-medium outline-none placeholder-slate-400 truncate cursor-pointer">
                        <p x-show="nights > 0" x-cloak
                           class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-1 bg-brand-50 text-brand-600 px-2 py-0.5 rounded-full text-[10px] font-semibold">
                            <span x-text="nights"></span>
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                            </svg>
                        </p>
                    </div>

                    <div class="flex-1 min-w-0 px-6 py-3 relative" @click.outside="guestsOpen = false">
                        <label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-0.5">Gäste</label>
                        <button type="button" @click="guestsOpen = !guestsOpen"
                                class="w-full text-left text-sm font-medium text-slate-700 truncate flex items-center justify-between gap-2">
                            <span x-text="guestSummary" class="truncate"></span>
                            <svg class="w-3.5 h-3.5 text-slate-400 shrink-0 transition-transform"
                                 :class="guestsOpen && 'rotate-180'"
                                 fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path d="m6 9 6 6 6-6"/>
                            </svg>
                        </button>

                        <div x-show="guestsOpen" x-cloak
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-pop border border-slate-200 p-5 space-y-4 z-50 text-left">
                            <template x-for="row in guestRows" :key="row.key">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                        <p class="text-xs text-slate-500" x-text="row.hint"></p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <button type="button" @click="decGuest(row.key)"
                                                :disabled="filters[row.key] <= row.min"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                        <span class="w-5 text-center text-sm font-semibold text-slate-900" x-text="filters[row.key]"></span>
                                        <button type="button" @click="incGuest(row.key)"
                                                class="w-8 h-8 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="pr-2 pl-3">
                        <button type="submit"
                                class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-sm shadow-sm transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                            </svg>
                            <span>Suchen</span>
                        </button>
                    </div>
                </form>
            </div>

            {{-- MOBILE --}}
            <div class="md:hidden flex items-center gap-2">
                <button @click="openMobileSearch()"
                        class="flex-1 flex items-center gap-3 px-4 py-3 rounded-full border border-slate-200 bg-white hover:shadow-card transition-shadow">
                    <div class="w-9 h-9 rounded-full bg-brand-50 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0 text-left">
                        <p class="text-sm font-semibold text-slate-900 truncate" x-text="mobileTriggerPrimary"></p>
                        <p class="text-xs text-slate-500 truncate" x-text="mobileTriggerSecondary"></p>
                    </div>
                </button>

                <button type="button"
                        @click="mobileFiltersOpen = true"
                        :class="appliedCount > 0
                            ? 'bg-brand-600 text-white border-brand-600'
                            : 'bg-white text-slate-700 border-slate-200'"
                        class="relative shrink-0 w-12 h-12 rounded-full border flex items-center justify-center transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M3 6h18M6 12h12M10 18h4"/>
                    </svg>
                    <span x-show="appliedCount > 0" x-cloak
                          class="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[9px] font-bold ring-2 ring-white"
                          x-text="appliedCount"></span>
                </button>
            </div>
        </div>
    </header>

    {{-- ═══════════════════ MAIN LAYOUT ═══════════════════ --}}
    <div class="max-w-[1600px] mx-auto px-4 lg:px-6 py-6">
        <div :style="layoutStyle" class="gap-8">

            {{-- SIDEBAR --}}
            <aside class="hidden" :class="sidebarOpen ? 'lg:block' : 'lg:hidden'">
                <div class="sticky top-[110px] max-h-[calc(100vh-130px)] overflow-y-auto thin-scroll pr-1">

                    <div class="flex items-center justify-between pb-4 mb-4 border-b border-slate-200">
                        <div class="flex items-center gap-2">
                            <h2 class="text-base font-bold text-slate-900">Filter</h2>
                            <span x-show="appliedCount > 0" x-cloak
                                  class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-brand-600 text-white text-[10px] font-bold"
                                  x-text="appliedCount"></span>
                        </div>
                        <button x-show="appliedCount > 0" x-cloak
                                @click="resetFilters()"
                                class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition">
                            Alle löschen
                        </button>
                    </div>

                    <div x-show="appliedCount > 0" x-cloak class="flex flex-wrap gap-1.5 mb-4 pb-4 border-b border-slate-200">
                        <template x-for="chip in activeChips" :key="chip.key">
                            <button @click="removeChip(chip)"
                                    class="chip-enter inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold hover:bg-brand-100 transition">
                                <span x-text="chip.label"></span>
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                    <path d="M18 6 6 18M6 6l12 12"/>
                                </svg>
                            </button>
                        </template>
                    </div>

                    {{-- Price --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                        <div class="flex items-center gap-2 mb-3">
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="filters.price_max"
                                           x-model.number="filters.price_min"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                            <div class="text-slate-300 pt-5">—</div>
                            <div class="flex-1">
                                <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                                <div class="relative">
                                    <input type="number" min="0" :max="maxPrice"
                                           x-model.number="filters.price_max"
                                           @change="applyFilters()"
                                           class="w-full rounded-lg border border-slate-300 pl-3 pr-7 py-2 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">€</span>
                                </div>
                            </div>
                        </div>
                        <input type="range" class="brand-slider w-full"
                               :min="minPrice" :max="maxPrice" step="5"
                               x-model.number="filters.price_max"
                               @input.debounce.500ms="applyFilters()">
                        <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                            <span x-text="minPrice + ' €'"></span>
                            <span x-text="maxPrice + ' €'"></span>
                        </div>
                    </section>

                    {{-- Guests --}}
                    <section class="pb-5 mb-5 border-b border-slate-200">
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                        <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                            <button type="button"
                                    @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                    :disabled="filters.adults <= 1"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center text-lg font-medium transition">−</button>
                            <div class="flex-1 text-center">
                                <span class="text-lg font-bold text-slate-900" x-text="filters.adults"></span>
                                <p class="text-[10px] text-slate-500 font-medium" x-text="filters.adults === 1 ? 'Person' : 'Personen'"></p>
                            </div>
                            <button type="button"
                                    @click="filters.adults++; applyFilters()"
                                    class="w-9 h-9 rounded-lg bg-white shadow-sm hover:shadow flex items-center justify-center text-lg font-medium transition">+</button>
                        </div>
                    </section>

                    {{-- Attributes --}}
                    @if(isset($attributes) && $attributes->count())
                        <section class="pb-5 mb-5 border-b border-slate-200" x-data="{ open: true }">
                            <button @click="open = !open"
                                    class="w-full flex justify-between items-center mb-3 group">
                                <h3 class="text-sm font-bold text-slate-900 group-hover:text-brand-600 transition">Ausstattung & Typ</h3>
                                <svg class="w-4 h-4 text-slate-400 transition-transform"
                                     :class="open && 'rotate-180'"
                                     fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </button>
                            <div x-show="open" x-collapse>
                                <div class="space-y-5 max-h-[420px] overflow-y-auto thin-scroll pr-1">
                                    @foreach($attributes as $attr)
                                        @if($attr->terms->count())
                                            @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                            <div>
                                                <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                                <div class="flex flex-wrap gap-1.5 px-2.5">
                                                    @foreach($attr->terms as $term)
                                                        @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                        <button type="button"
                                                                @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                                :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                                    ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                            <span>{{ __($termName) }}</span>
                                                            @if(!empty($term->hotel_count))
                                                                <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                            @endif
                                                        </button>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </section>
                    @endif

                    <label class="flex items-center gap-3 px-2.5 py-2 rounded-lg hover:bg-slate-100 cursor-pointer transition">
                        <input type="checkbox"
                               :checked="filters.pets > 0"
                               @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                               class="rounded border-slate-300 text-brand-600 focus:ring-brand-500 focus:ring-offset-0">
                        <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                    </label>
                </div>
            </aside>

            {{-- ═══════════════════ RESULTS COLUMN ═══════════════════ --}}
            <main class="min-w-0">

                <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
                    <div>
                        <p class="text-sm text-slate-600">
                            <span class="font-bold text-slate-900" x-text="totalResults"></span>
                            <span x-text="totalResults === 1 ? 'Campsite gefunden' : 'Campsites gefunden'"></span>
                            <template x-if="nights > 0">
                                <span class="text-slate-500">
                                    <span class="text-slate-400"> · </span>
                                    <span x-text="nights"></span>
                                    <svg class="w-3.5 h-3.5 inline-block -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                                    </svg>
                                </span>
                            </template>
                        </p>
                        <p class="text-xs text-slate-500 mt-0.5">Alle Preise pro Nacht inkl. MwSt.</p>
                    </div>

                    <div class="flex items-center gap-2">
                        <div class="inline-flex items-center p-1 bg-slate-100 rounded-xl">
                            <button type="button" @click="setView('list')"
                                    :class="isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="isListView"
                                    aria-label="{{ __('Listenansicht') }}"
                                    title="{{ __('Liste') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M4 6h16M4 12h16M4 18h16"/>
                                </svg>
                            </button>
                            <button type="button" @click="setView('grid')"
                                    :class="!isListView ? 'bg-white text-brand-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-sm transition"
                                    :aria-pressed="!isListView"
                                    aria-label="{{ __('Rasteransicht') }}"
                                    title="{{ __('Raster') }}">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <rect x="3" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="3" width="7" height="7" rx="1.5"/>
                                    <rect x="3" y="14" width="7" height="7" rx="1.5"/>
                                    <rect x="14" y="14" width="7" height="7" rx="1.5"/>
                                </svg>
                            </button>
                        </div>

                        <button @click="toggleMap()"
                                :class="mapOpen
                                    ? 'bg-brand-600 text-white border-brand-600 hover:bg-brand-700'
                                    : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400'"
                                class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg border text-sm font-semibold transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M9 4 3 7v13l6-3 6 3 6-3V4l-6 3-6-3z"/>
                                <path d="M9 4v13M15 7v13"/>
                            </svg>
                            <span class="hidden sm:inline" x-text="mapOpen ? 'Karte ausblenden' : 'Karte anzeigen'"></span>
                            <span class="sm:hidden">Karte</span>
                        </button>

                        <select x-model="filters.orderby" @change="applyFilters()"
                                class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:border-slate-400 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition">
                            <option value="">Empfohlen</option>
                            <option value="price_low_high">Preis aufsteigend</option>
                            <option value="price_high_low">Preis absteigend</option>
                            <option value="rate_high_low">Beste Bewertung</option>
                        </select>
                    </div>
                </div>

                {{-- Loading skeleton --}}
                <div x-show="loading" :class="gridCols" class="grid gap-x-5 gap-y-8">
                    <template x-for="i in 8" :key="i">
                        <div>
                            <div class="aspect-[4/3] rounded-2xl shimmer"></div>
                            <div class="mt-3.5 h-4 rounded shimmer w-3/4"></div>
                            <div class="mt-2.5 h-3 rounded shimmer w-1/2"></div>
                            <div class="mt-2 h-3 rounded shimmer w-1/3"></div>
                            <div class="mt-3 pt-3 border-t border-slate-100">
                                <div class="h-4 rounded shimmer w-1/3"></div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Results --}}
                <div x-show="!loading" id="results" :class="gridCols" class="grid gap-x-5 gap-y-8">

                    {{-- Map payload rides along on every AJAX response --}}
                    <div id="bravo-map-markers-data"
                         data-markers="{{ json_encode($markersPayload, JSON_HEX_APOS | JSON_HEX_QUOT) }}"
                         data-lat="{{ $defaultLat }}"
                         data-lng="{{ $defaultLng }}"
                         data-zoom="{{ $defaultZoom }}"
                         class="hidden" aria-hidden="true"></div>

                    <div id="price-bounds"
                         data-min="{{ (int) ($priceBounds[0] ?? 0) }}"
                         data-max="{{ (int) ($priceBounds[1] ?? 500) }}"
                         class="hidden" aria-hidden="true"></div>

                    @forelse($rows as $row)
                        @php
                            $translation = $row->translate();
                            $detailUrl   = $row->getDetailUrl();
                            $schemaName  = $translation->title ?? $row->title ?? 'Campingplatz';

                            $location = !empty($row->location) ? $row->location->translate() : null;

                            $countryCode = !empty($row->country_code) ? strtoupper($row->country_code) : null;
                            $flagUrl     = $countryCode
                                ? get_public_url() . 'flags/' . strtolower($countryCode) . '.png'
                                : null;

                            $reviewData    = null;
                            $score_total   = null;
                            $total_reviews = 0;
                            if (setting_item('hotel_enable_review')) {
                                $reviewData    = $row->getScoreReview();
                                $score_total   = $reviewData['score_total']  ?? null;
                                $total_reviews = $reviewData['total_review'] ?? 0;
                            } else {
                                $score_total   = $row->review_score  ?? null;
                                $total_reviews = $row->reviews_count ?? 0;
                            }

                            $isWished         = $row->isWishList();
                            $termsByAttribute = $row->getAttributeInListingPage()
                                ? $row->termsByAttributeInListingPage
                                : collect();

                            $schema = [
                                '@context' => 'https://schema.org',
                                '@type'    => 'Campground',
                                '@id'      => $detailUrl . '#campground',
                                'name'     => $schemaName,
                                'url'      => $detailUrl,
                            ];

                            $distanceRaw = $row->distance ?? null; // metres? km? — see note below
                            $distanceKm  = null;
                            if ($distanceRaw !== null) {
                                // If your app stores distance in metres, convert. If already km, drop the /1000.
                                $distanceKm = distanceRaw;
                            }
                            if ($distanceKm !== null) {
                                $distanceText = $distanceKm >= 1
                                    ? number_format($distanceKm, 0, ',', '.')        // ≥ 1 km → no decimals
                                    : number_format($distanceKm, 2, ',', '.');       // < 1 km → 2 decimals
                            }
                        @endphp

                        <a href="{{ $detailUrl }}"
                           class="group relative block focus:outline-none fade-in"
                           data-listing-id="{{ $row->id }}"
                           @mouseenter="highlightMarker({{ $row->id }})"
                           x-data="{ fav: {{ $isWished ? 'true' : 'false' }} }">

                            <script type="application/ld+json">
                                {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
                            </script>

                            <div class="relative bg-white rounded-2xl overflow-hidden border border-slate-200/70
                                        shadow-card group-hover:shadow-card-hover group-hover:border-slate-300
                                        transition-all duration-300"
                                 :class="isListView
                                    ? 'flex flex-row gap-3 sm:gap-4 p-2 sm:p-3'
                                    : 'flex flex-col'">

                                {{-- Image --}}
                                <div class="relative overflow-hidden bg-slate-100 shrink-0"
                                     :class="isListView
                                        ? 'w-32 sm:w-48 md:w-56 aspect-[4/3] rounded-xl'
                                        : 'aspect-[4/3] w-full'">

                                    {!! get_image_tag_url(
                                        $row->image_id ?? '0.webp',
                                        'medium',
                                        [
                                            'class' => 'card-media absolute inset-0 w-full h-full object-cover lazyload',
                                            'alt'   => $schemaName,
                                            'sku'   => $row->sku,
                                        ]
                                    ) !!}

                                    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/30 to-transparent pointer-events-none"></div>

                                    <div class="absolute top-2 left-2 sm:top-3 sm:left-3 flex flex-wrap gap-1.5 max-w-[70%]">
                                        @if($row->is_featured)
                                            <span class="inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24"><path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/></svg>
                                                Top
                                            </span>
                                        @endif
                                        @if($row->discount_percent)
                                            <span class="bg-emerald-500 text-white text-[10px] font-extrabold uppercase tracking-wider px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm">
                                                {{ $row->discount_percent }}
                                            </span>
                                        @endif
                                    </div>

                                    <div class="absolute top-2 right-2 sm:top-3 sm:right-3 flex items-center gap-1.5">
                                        @if($row->is_instant)
                                            <span class="hidden sm:inline-flex items-center gap-1 bg-brand-600/95 backdrop-blur-md text-white text-[10px] font-extrabold uppercase tracking-wider px-2.5 py-1.5 rounded-full shadow-sm ring-1 ring-white/20">
                                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/></svg>
                                                Sofort
                                            </span>
                                        @endif
                                        <button type="button"
                                                @click.prevent.stop="fav = !fav; toggleFavorite({{ $row->id }}, $event)"
                                                :aria-pressed="fav"
                                                aria-label="{{ __('Zu Favoriten hinzufügen') }}"
                                                class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-white/95 backdrop-blur-md hover:bg-white flex items-center justify-center shadow-sm ring-1 ring-black/5 hover:scale-110 active:scale-95 transition-transform">
                                            <svg class="w-4 h-4 sm:w-[18px] sm:h-[18px] transition-colors"
                                                 :class="fav ? 'fill-rose-500 stroke-rose-500' : 'fill-none stroke-slate-700'"
                                                 stroke-width="2" viewBox="0 0 24 24">
                                                <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8Z"/>
                                            </svg>
                                        </button>
                                    </div>

                                    @if($row->star_rate)
                                        <div class="absolute bottom-2 left-2 sm:bottom-3 sm:left-3 inline-flex items-center gap-0.5 bg-white/95 backdrop-blur-md px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full shadow-sm ring-1 ring-black/5"
                                             aria-label="{{ $row->star_rate }} stars">
                                            @for($star = 1; $star <= $row->star_rate; $star++)
                                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-amber-500 fill-current" viewBox="0 0 24 24" aria-hidden="true">
                                                    <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                                </svg>
                                            @endfor
                                        </div>
                                    @endif

                                    @if($score_total !== null && $total_reviews > 0)
                                        <div class="absolute bottom-2 right-2 sm:bottom-3 sm:right-3 inline-flex items-center gap-1 bg-white/95 backdrop-blur-md text-slate-900 text-[11px] sm:text-xs font-bold px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-full shadow-sm ring-1 ring-black/5">
                                            <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5 text-amber-500 fill-current" viewBox="0 0 24 24">
                                                <path d="M12 2 15 9l7 .6-5.3 4.6 1.6 6.8L12 17.8 5.7 21l1.6-6.8L2 9.6 9 9z"/>
                                            </svg>
                                            <span>{{ number_format((float) $score_total, 1) }}</span>
                                            <span class="text-slate-400 font-medium hidden sm:inline">({{ $total_reviews }})</span>
                                        </div>
                                    @endif
                                </div>

                                {{-- Content --}}
                                <div class="flex flex-col min-w-0 flex-1"
                                     :class="isListView ? 'py-1 pr-1' : 'p-4'">

                                    <h3 class="font-bold text-slate-900 leading-tight line-clamp-2 min-w-0
                                               group-hover:text-brand-700 transition-colors"
                                        :class="isListView ? 'text-[14px] sm:text-[15px]' : 'text-[15px]'">
                                        <span class="inline-flex items-start gap-1.5">
                                            @php
                                                $iso2 = strtolower($countryCode);
                                                if ($iso2 === 'uk') $iso2 = 'gb';
                                            @endphp

                                            <img src="https://flagcdn.com/w40/{{ $iso2 }}.png"
                                                 srcset="https://flagcdn.com/w40/{{ $iso2 }}.png 1x,
                                                         https://flagcdn.com/w80/{{ $iso2 }}.png 2x"
                                                 alt="{{ $countryCode }}"
                                                 width="20" height="14"
                                                 loading="lazy"
                                                 class="shrink-0 mt-[3px] w-5 h-3.5 object-cover rounded-sm ring-1 ring-black/5">
                                            <span class="line-clamp-2">{{ $schemaName }}</span>
                                        </span>
                                    </h3>

                                    <p class="flex items-center gap-1 text-[12px] sm:text-[13px] text-slate-500 mt-1 truncate">
                                        <svg class="w-3.5 h-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                            <circle cx="12" cy="10" r="3"/>
                                        </svg>
                                        <span class="truncate">
                                            {{strtoupper($countryCode)}} - {{ $location->name ?? '' }}{{ $row->city && $row->city !== ($location->name ?? '') ? ' · ' . $row->city : '' }} @if($distanceKm !== null) {{ $distanceText }} km @endif

                                        </span>
                                    </p>

                                    <div class="mt-2 flex items-center flex-wrap gap-x-3 gap-y-1 text-[11px] sm:text-[12px] text-slate-600">
                                        @if($row->max_guests)
                                            <span class="inline-flex items-center gap-1">
                                                <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                                                    <circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
                                                </svg>
                                                <span>{{ (int) $row->max_guests }} Gäste</span>
                                            </span>
                                        @endif

                                        @if($termsByAttribute && count($termsByAttribute))
                                            @foreach($termsByAttribute->take(2) as $term)
                                                @php $t = $term->translate(); @endphp
                                                <span class="inline-flex items-center gap-1">
                                                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                                        <circle cx="12" cy="12" r="9"/><path d="m5 12 5 5L20 7"/>
                                                    </svg>
                                                    <span class="truncate">{{ $t->name }}</span>
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>

                                    @php
                                        $originalCurrency = strtoupper($row->currency ?: currency_base_code());
                                        $sessionCurrency  = currency_session_code();
                                        $showOriginal     = $originalCurrency !== $sessionCurrency;
                                        $convertedAmount  = convert_currency((float) $row->price, $originalCurrency);
                                        $noDecimalCurrencies = ['HUF','ISK','JPY','KRW','VND','CLP','IDR', 'ALL', 'RSD', 'MKD'];
                                        $originalAmount = number_format(
                                            (float) $row->price,
                                            in_array($originalCurrency, $noDecimalCurrencies, true) ? 0 : 2,
                                            ',',
                                            '.'
                                        );
                                    @endphp

                                    <div class="mt-auto pt-3 border-t border-slate-100"
                                         :class="isListView ? 'mt-2' : ''">
                                        <div class="flex items-end justify-between gap-2">

                                            <div class="flex flex-col min-w-0">
                                                <div class="flex items-baseline gap-1.5 flex-wrap">
                                                    <span class="font-extrabold text-slate-900 leading-none"
                                                          :class="isListView ? 'text-[16px] sm:text-[17px]' : 'text-[17px]'">
                                                        {{ number_format($convertedAmount, 2, ',', '.') }} {{ currency_symbol($sessionCurrency) }}
                                                    </span>
                                                    <span class="text-[11px] sm:text-[12px] text-slate-500 font-medium">/ Nacht</span>
                                                </div>

                                                @if($showOriginal)
                                                    <span class="mt-0.5 text-[11px] text-slate-400 font-medium tabular-nums truncate">
                                                        {{ $originalAmount }} {{ $row->currency }}
                                                    </span>
                                                @endif
                                            </div>

                                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-brand-700 bg-brand-50 group-hover:bg-brand-100 px-2.5 py-1.5 rounded-full transition-colors shrink-0">
                                                Details
                                                <svg class="w-3 h-3 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="col-span-full py-24 text-center fade-in">
                            <div class="w-24 h-24 mx-auto mb-6 rounded-3xl bg-brand-50 flex items-center justify-center">
                                <svg class="w-11 h-11 text-brand-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900 mb-2">Keine Campsites gefunden</h3>
                            <p class="text-slate-500 mb-7 max-w-md mx-auto text-sm leading-relaxed">
                                Wir konnten keine Campingplätze für deine Suche finden. Versuche es mit weniger Filtern oder einem anderen Zeitraum.
                            </p>
                            <button @click="resetFilters()"
                                    class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-lg font-semibold shadow-sm transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>
                                </svg>
                                Filter zurücksetzen
                            </button>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if($rows->hasPages())
                    @php
                        $currentPage = $rows->currentPage();
                        $lastPage    = $rows->lastPage();
                        $window      = 1;
                        $pages       = [1];
                        for ($i = max(2, $currentPage - $window); $i <= min($lastPage - 1, $currentPage + $window); $i++) {
                            $pages[] = $i;
                        }
                        if ($lastPage > 1) $pages[] = $lastPage;
                        $pages = array_values(array_unique($pages));
                        sort($pages);
                    @endphp

                    <nav class="mt-14 flex flex-col items-center gap-3" aria-label="Pagination">
                        <ul class="flex items-center justify-center gap-1.5 flex-wrap">
                            <li>
                                @if($rows->onFirstPage())
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                @else
                                    <a href="{{ $rows->previousPageUrl() }}" @click.prevent="goToPage({{ $currentPage - 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
                                    </a>
                                @endif
                            </li>

                            @php $prev = 0; @endphp
                            @foreach($pages as $page)
                                @if($prev && $page - $prev > 1)
                                    <li><span class="inline-flex items-center justify-center w-10 h-10 text-slate-400 select-none">…</span></li>
                                @endif
                                <li>
                                    @if($page == $currentPage)
                                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-brand-600 text-white font-semibold shadow-sm ring-4 ring-brand-100">{{ $page }}</span>
                                    @else
                                        <a href="{{ $rows->url($page) }}" @click.prevent="goToPage({{ $page }})"
                                           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50 hover:border-slate-300 transition">{{ $page }}</a>
                                    @endif
                                </li>
                                @php $prev = $page; @endphp
                            @endforeach

                            <li>
                                @if($rows->hasMorePages())
                                    <a href="{{ $rows->nextPageUrl() }}" @click.prevent="goToPage({{ $currentPage + 1 }})"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </a>
                                @else
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-slate-200 bg-white text-slate-300 cursor-not-allowed">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                @endif
                            </li>
                        </ul>

                        <p class="text-xs text-slate-500 font-medium">
                            Zeige <span class="text-slate-900 font-semibold">{{ $rows->firstItem() ?? 0 }}</span>–<span class="text-slate-900 font-semibold">{{ $rows->lastItem() ?? 0 }}</span>
                            von <span class="text-slate-900 font-semibold">{{ $rows->total() }}</span> Ergebnissen
                        </p>
                    </nav>
                @endif

                @if(!empty($seo_content))
                    <div class="mt-10 p-4 rounded-2xl bg-white border border-slate-200 blog-post text-slate-700 text-sm leading-relaxed description max-w-none
            [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-gray-900 [&_h2]:mt-12 [&_h2]:mb-4
            [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-gray-900 [&_h3]:mt-8 [&_h3]:mb-3
            [&_p]:my-4 [&_p]:leading-relaxed
            [&_a]:text-blue-600 [&_a]:no-underline hover:[&_a]:underline
            [&_strong]:text-gray-900 [&_strong]:font-semibold
            [&_ul]:my-4 [&_ul]:pl-6 [&_ul]:list-disc
            [&_ol]:my-4 [&_ol]:pl-6 [&_ol]:list-decimal
            [&_li]:my-1
            ">
                        {!! $seo_content !!}
                    </div>
                @endif
            </main>

            {{-- ═══════════════════ MAP PANEL ═══════════════════ --}}
            <div x-show="mapOpen" x-cloak
                 :class="isDesktop
                    ? 'lg:block relative'
                    : 'fixed inset-0 z-50 flex flex-col justify-end'">

                <div x-show="!isDesktop" x-cloak
                     class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
                     @click="mapOpen = false"></div>

                <div :class="isDesktop
                        ? 'lg:sticky lg:top-[110px] h-[calc(100vh-140px)] max-h-[800px] rounded-2xl overflow-hidden border border-slate-200 shadow-card bg-slate-100 flex flex-col'
                        : 'relative bg-white rounded-t-3xl shadow-pop h-[85vh] flex flex-col overflow-hidden'">

                    <div x-show="!isDesktop" x-cloak
                         class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
                        <div>
                            <h3 class="font-bold text-slate-900">Karte</h3>
                            <p class="text-xs text-slate-500"><span x-text="totalResults"></span> Ergebnisse</p>
                        </div>
                        <button @click="mapOpen = false"
                                class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                            <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="flex-1 relative bg-slate-100">
                        <div id="mapcc" class="w-full h-full">
                            <div id="bravo_results_map" class="w-full h-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE SEARCH MODAL ═══════════════════ --}}
    <div x-show="mobileSearchOpen" x-cloak class="md:hidden fixed inset-0 z-[55] bg-white flex flex-col mobile-full-height">
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 shrink-0">
            <button @click="cancelMobileSearch()"
                    class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <h2 class="font-bold text-slate-900">Suche</h2>
            <button @click="resetMobileDraft()"
                    class="text-xs font-semibold text-brand-600 hover:text-brand-700 transition px-2">
                Zurücksetzen
            </button>
        </div>

        <div class="flex-1 overflow-y-auto thin-scroll mobile-search-scroll">
            <div class="px-5 py-5 border-b border-slate-200 relative" @click.outside="mobileLocationOpen = false">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Standort</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                    <input type="text" x-model="mobileDraft.city_name"
                           @input.debounce.350ms="searchMobileLocations()"
                           @focus="if (mobileLocationSuggestions.length) mobileLocationOpen = true"
                           placeholder="Stadt oder Region eingeben"
                           autocomplete="off" inputmode="text"
                           class="w-full pl-12 pr-10 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">

                    <svg x-show="mobileLocationLoading" x-cloak
                         class="w-4 h-4 absolute right-4 top-1/2 -translate-y-1/2 animate-spin text-brand-500"
                         fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/>
                        <path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="3"/>
                    </svg>
                </div>

                <div x-show="mobileLocationOpen" x-cloak
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="mt-2 bg-white rounded-2xl shadow-pop border border-slate-200 overflow-hidden max-h-[280px] overflow-y-auto thin-scroll z-20 relative">
                    <template x-for="(s, idx) in mobileLocationSuggestions" :key="idx">
                        <button type="button" @click="selectMobileLocation(s)"
                                class="w-full text-left px-4 py-3 flex items-start gap-3 transition-colors border-b border-slate-100 last:border-b-0 hover:bg-slate-50 active:bg-brand-50">
                            <svg class="w-4 h-4 text-brand-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-slate-900 truncate" x-text="s.name"></p>
                                <p x-show="s.subtitle" class="text-xs text-slate-500 truncate" x-text="s.subtitle"></p>
                            </div>
                        </button>
                    </template>
                </div>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Reisezeitraum</label>
                <div class="relative">
                    <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10"
                         fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <rect x="3" y="4" width="18" height="18" rx="2"/>
                        <path d="M16 2v4M8 2v4M3 10h18"/>
                    </svg>
                    <input type="text" x-ref="mobileDateRange" placeholder="Anreise – Abreise"
                           class="w-full pl-12 pr-4 py-3.5 rounded-xl border border-slate-300 text-sm font-medium focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none cursor-pointer">
                </div>
                <p x-show="mobileDraft.nights > 0" x-cloak class="text-xs text-brand-600 font-semibold mt-2 pl-1 inline-flex items-center gap-1">
                    <span x-text="mobileDraft.nights"></span>
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                    </svg>
                </p>
            </div>

            <div class="px-5 py-5 border-b border-slate-200">
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-3">Gäste</label>
                <div class="space-y-4">
                    <template x-for="row in guestRows" :key="row.key">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-semibold text-sm text-slate-900" x-text="row.label"></p>
                                <p class="text-xs text-slate-500" x-text="row.hint"></p>
                            </div>
                            <div class="flex items-center gap-3">
                                <button type="button" @click="mobileDecGuest(row.key)"
                                        :disabled="mobileDraft[row.key] <= row.min"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 disabled:opacity-30 flex items-center justify-center text-lg leading-none transition">−</button>
                                <span class="w-6 text-center text-sm font-semibold text-slate-900" x-text="mobileDraft[row.key]"></span>
                                <button type="button" @click="mobileIncGuest(row.key)"
                                        class="w-9 h-9 rounded-full border border-slate-300 hover:border-slate-900 flex items-center justify-center text-lg leading-none transition">+</button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <label class="flex items-center justify-between px-5 py-5 border-b border-slate-200 cursor-pointer">
                <div>
                    <p class="font-semibold text-sm text-slate-900">Haustiere erlaubt</p>
                    <p class="text-xs text-slate-500 mt-0.5">Nur Campsites mit Haustiererlaubnis</p>
                </div>
                <div class="relative shrink-0 ml-4">
                    <input type="checkbox" :checked="mobileDraft.pets_allowed > 0"
                           @change="mobileDraft.pets_allowed = $event.target.checked ? 1 : 0"
                           class="sr-only peer">
                    <div class="w-12 h-7 rounded-full bg-slate-200 peer-checked:bg-brand-600 transition-colors"></div>
                    <div class="absolute top-1 left-1 w-5 h-5 rounded-full bg-white shadow peer-checked:translate-x-5 transition-transform"></div>
                </div>
            </label>
        </div>

        <div class="shrink-0 border-t border-slate-200 p-4 bg-white safe-bottom">
            <button @click="applyMobileSearch()"
                    class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-700 active:bg-brand-800 text-white font-semibold text-base shadow-sm transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
                </svg>
                Ergebnisse anzeigen
            </button>
        </div>
    </div>

    {{-- ═══════════════════ MOBILE FILTER DRAWER ═══════════════════ --}}
    <div x-show="mobileFiltersOpen" x-cloak class="fixed inset-0 z-50 lg:hidden">
        <div x-show="mobileFiltersOpen" x-transition.opacity
             @click="mobileFiltersOpen = false"
             class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"></div>

        <div x-show="mobileFiltersOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-y-full"
             x-transition:enter-end="translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-y-0"
             x-transition:leave-end="translate-y-full"
             class="absolute bottom-0 inset-x-0 bg-white rounded-t-3xl max-h-[88vh] flex flex-col">

            <div class="flex-shrink-0 px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <h2 class="font-bold text-lg text-slate-900">Filter</h2>
                    <span x-show="appliedCount > 0" x-cloak
                          class="inline-flex items-center justify-center min-w-[22px] h-6 px-2 rounded-full bg-brand-600 text-white text-xs font-bold"
                          x-text="appliedCount"></span>
                </div>
                <button @click="mobileFiltersOpen = false"
                        class="w-9 h-9 rounded-full hover:bg-slate-100 flex items-center justify-center transition">
                    <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto thin-scroll mobile-drawer-scroll p-6 space-y-6">
                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Preis pro Nacht</h3>
                    <div class="flex items-center gap-2 mb-3">
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Min</label>
                            <input type="number" min="0" x-model.number="filters.price_min" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                        <div class="flex-1">
                            <label class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1">Max</label>
                            <input type="number" min="0" x-model.number="filters.price_max" @change="applyFilters()"
                                   class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
                        </div>
                    </div>
                    <input type="range" class="brand-slider w-full"
                           :min="minPrice" :max="maxPrice" step="5"
                           x-model.number="filters.price_max"
                           @input.debounce.500ms="applyFilters()">
                    <div class="flex justify-between text-[10px] text-slate-400 mt-1">
                        <span x-text="minPrice + ' €'"></span>
                        <span x-text="maxPrice + ' €'"></span>
                    </div>
                </section>

                <section>
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Gäste</h3>
                    <div class="flex items-center gap-2 p-1 bg-slate-100 rounded-xl">
                        <button type="button" @click="filters.adults > 1 && (filters.adults--, applyFilters())"
                                :disabled="filters.adults <= 1"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm disabled:opacity-40 flex items-center justify-center text-lg">−</button>
                        <div class="flex-1 text-center">
                            <span class="text-xl font-bold text-slate-900" x-text="filters.adults"></span>
                        </div>
                        <button type="button" @click="filters.adults++; applyFilters()"
                                class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center text-lg">+</button>
                    </div>
                </section>

                @if(isset($attributes) && $attributes->count())
                    <section>
                        <h3 class="text-sm font-bold text-slate-900 mb-3">Ausstattung & Typ</h3>
                        <div class="space-y-5 max-h-[380px] overflow-y-auto thin-scroll pr-1">
                            @foreach($attributes as $attr)
                                @if($attr->terms->count())
                                    @php $attrName = optional($attr->translate())->name ?? $attr->name; @endphp
                                    <div>
                                        <p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold mb-2 px-2.5">{{ __($attrName) }}</p>
                                        <div class="flex flex-wrap gap-1.5 px-2.5">
                                            @foreach($attr->terms as $term)
                                                @php $termName = optional($term->translate())->name ?? $term->name; @endphp
                                                <button type="button"
                                                        @click="toggleAttr({{ $attr->id }}, {{ $term->id }}, !isAttrChecked({{ $attr->id }}, {{ $term->id }}))"
                                                        :class="isAttrChecked({{ $attr->id }}, {{ $term->id }})
                                                            ? 'bg-brand-600 text-white border-brand-600 shadow-sm'
                                                            : 'bg-white text-slate-700 border-slate-300 hover:border-slate-400 hover:bg-slate-50'"
                                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-150 active:scale-95">
                                                    <span>{{ __($termName) }}</span>
                                                    @if(!empty($term->hotel_count))
                                                        <span class="text-[10px] opacity-70 tabular-nums">{{ $term->hotel_count }}</span>
                                                    @endif
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </section>
                @endif

                <label class="flex items-center gap-3 px-2.5 py-2.5 rounded-lg hover:bg-slate-100 cursor-pointer">
                    <input type="checkbox" :checked="filters.pets > 0"
                           @change="filters.pets = $event.target.checked ? 1 : 0; applyFilters()"
                           class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                    <span class="text-sm font-medium text-slate-700">Haustiere erlaubt</span>
                </label>
            </div>

            <div class="flex-shrink-0 border-t border-slate-200 p-4 flex gap-3 safe-bottom">
                <button @click="resetFilters()"
                        class="flex-1 border border-slate-300 rounded-lg py-3 font-semibold text-sm text-slate-700 hover:bg-slate-50 transition">
                    Zurücksetzen
                </button>
                <button @click="mobileFiltersOpen = false"
                        class="flex-1 bg-brand-600 hover:bg-brand-700 text-white rounded-lg py-3 font-semibold text-sm transition">
                    <span x-show="totalResults > 0" x-cloak>
                        <span x-text="totalResults"></span> Ergebnisse
                    </span>
                    <span x-show="totalResults === 0" x-cloak>Anwenden</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
    {!! App\Helpers\MapEngine::scripts() !!}
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>

    <script>
        var bravo_map_data = {
            markers: {!! json_encode($markersPayload ?? []) !!},
            map_lat_default: {{ $defaultLat }},
            map_lng_default: {{ $defaultLng }},
            map_zoom_default: {{ $defaultZoom }},
        };
    </script>

    <script src="{{ asset('js/filter-map.js?_ver='.config('app.asset_version')) }}"></script>

    <script>
        function campsiteSearch(config) {
            return {
                filters: Object.assign({
                    city_name: '', location_id: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0,
                    price_min: 0, price_max: 500, orderby: '',
                    attrs: {},
                    map_lat: '', map_lng: '',
                }, config.initial || {}),

                minPrice: config.minPrice,
                maxPrice: config.maxPrice,
                totalResults: config.totalResults,
                layout: config.mapLayout ? 'map' : 'list',
                loading: false,
                guestsOpen: false,

                sidebarOpen: false,
                mapOpen: false,
                mobileFiltersOpen: false,
                mobileSearchOpen: false,
                view: 'grid',

                isDesktop: window.matchMedia('(min-width: 1024px)').matches,
                attributes: config.attributes || [],
                locale: config.locale || 'en',

                defaultLat:  config.defaultLat  || 51.1657,
                defaultLng:  config.defaultLng  || 10.4515,
                defaultZoom: config.defaultZoom || 6,

                _desktopFP: null,
                _mobileFP: null,
                _resizeHandler: null,
                _scrollY: 0,
                _locationPicked: false,

                locationSuggestions: [],
                locationLoading: false,
                locationOpen: false,
                locationHighlight: -1,
                locationAbort: null,

                mobileLocationSuggestions: [],
                mobileLocationLoading: false,
                mobileLocationOpen: false,
                mobileLocationAbort: null,

                /* ══════════════ View state ══════════════ */
                get isListView() { return this.view === 'list'; },

                get gridCols() {
                    if (this.isListView) return 'grid-cols-1';

                    const both = this.sidebarOpen && this.mapOpen;
                    const one  = (this.sidebarOpen || this.mapOpen) && !both;

                    if (both) return 'grid-cols-1 sm:grid-cols-2';
                    if (one)  return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
                    return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
                },

                setView(v) {
                    if (v !== 'grid' && v !== 'list') return;
                    this.view = v;
                    try { localStorage.setItem('campsiteView', v); } catch (e) {}
                },

                /* ══════════════ Lazy-load reinit ══════════════ */
                reinitLazyLoad() {
                    try {
                        if (window.lazySizes && typeof window.lazySizes.init === 'function') window.lazySizes.init();
                        if (window.lazyLoadInstance && typeof window.lazyLoadInstance.update === 'function') window.lazyLoadInstance.update();
                        if (typeof window.lozad === 'function') window.lozad('#results img[data-src]').observe();
                        if (typeof window.LazyLoad === 'function') new window.LazyLoad();
                        if (window.jQuery && typeof window.jQuery.fn.lazyload === 'function') {
                            window.jQuery('#results img[data-src]').lazyload();
                        }
                    } catch (e) {}

                    setTimeout(() => {
                        document.querySelectorAll('#results img[data-src]').forEach(img => {
                            const src = img.getAttribute('data-src');
                            if (!src) return;
                            img.src = src;
                            img.removeAttribute('data-src');
                            img.classList.add('lazyloaded', 'loaded');
                        });
                    }, 400);
                },

                /* ══════════════ Flatpickr ══════════════ */
                _buildFlatpickrLocale() {
                    const dr = window.daterangepickerLocale || {};
                    const fallbackDays   = ['Su','Mo','Tu','We','Th','Fr','Sa'];
                    const fallbackMonths = ['January','February','March','April','May','June','July','August','September','October','November','December'];
                    const weekdays = Array.isArray(dr.daysOfWeek) && dr.daysOfWeek.length === 7 ? dr.daysOfWeek : fallbackDays;
                    const months   = Array.isArray(dr.monthNames) && dr.monthNames.length === 12 ? dr.monthNames : fallbackMonths;
                    const rawFirst = parseInt(dr.first_day_of_week, 10);
                    const firstDay = Number.isNaN(rawFirst) ? 1 : Math.max(0, Math.min(6, rawFirst));
                    return {
                        weekdays: { shorthand: weekdays, longhand: weekdays },
                        months:   { shorthand: months.map(m => m.slice(0, 3)), longhand: months },
                        firstDayOfWeek: firstDay,
                        weekAbbreviation: dr.weekLabel || 'W',
                        rangeSeparator: ' – ',
                        scrollTitle: 'Scroll to increment',
                        toggleTitle: 'Click to toggle',
                    };
                },

                _fpOptions() {
                    return {
                        mode: 'range',
                        dateFormat: 'Y-m-d',
                        altInput: true,
                        altFormat: 'd.m.Y',
                        minDate: 'today',
                        locale: this._buildFlatpickrLocale(),
                    };
                },

                /* ══════════════ Location (Photon) ══════════════ */
                async searchLocations() {
                    const q = (this.filters.city_name || '').trim();
                    if (q.length < 3) {
                        this.locationSuggestions = [];
                        this.locationOpen = false;
                        this.locationLoading = false;
                        return;
                    }
                    if (this.locationAbort) { try { this.locationAbort.abort(); } catch (e) {} }
                    this.locationAbort = new AbortController();
                    this.locationLoading = true;
                    this.locationHighlight = -1;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.locationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.filters.city_name || '').trim() !== queryAtFetch) {
                            this.locationLoading = false;
                            return;
                        }

                        this.locationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                country: p.country || '',
                                countrycode: p.countrycode || '',
                                state: p.state || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.locationOpen = this.locationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.locationSuggestions = [];
                    } finally {
                        this.locationLoading = false;
                    }
                },

                _locationSubtitle(p) {
                    const parts = [];
                    if (p.state && p.state !== p.name) parts.push(p.state);
                    if (p.county && p.county !== p.name && p.county !== p.state) parts.push(p.county);
                    if (p.country && p.country !== p.name) parts.push(p.country);
                    return parts.join(', ');
                },

                selectLocation(s) {
                    if (!s) return;

                    this._locationPicked = true;
                    this.filters.city_name  = s.name;
                    this.filters.map_lat    = s.lat;
                    this.filters.map_lng    = s.lng;
                    this.filters.location_id = '';
                    this.locationOpen = false;
                    this.locationSuggestions = [];
                    this.locationHighlight = -1;

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                        this.$nextTick(() => setTimeout(() => {
                            if (this.mapOpen) this.centerMapOn(s.lat, s.lng, 11);
                        }, 250));
                    }

                    this.applyFilters();
                },

                moveHighlight(delta) {
                    if (!this.locationOpen || this.locationSuggestions.length === 0) return;
                    const n = this.locationSuggestions.length;
                    let next = this.locationHighlight + delta;
                    if (next < 0) next = n - 1;
                    if (next >= n) next = 0;
                    this.locationHighlight = next;
                },

                async searchMobileLocations() {
                    const q = (this.mobileDraft.city_name || '').trim();
                    if (q.length < 3) {
                        this.mobileLocationSuggestions = [];
                        this.mobileLocationOpen = false;
                        this.mobileLocationLoading = false;
                        return;
                    }
                    if (this.mobileLocationAbort) { try { this.mobileLocationAbort.abort(); } catch (e) {} }
                    this.mobileLocationAbort = new AbortController();
                    this.mobileLocationLoading = true;

                    const queryAtFetch = q;

                    try {
                        const url = 'https://photon.komoot.io/api/?q=' + encodeURIComponent(q)
                                  + '&limit=6&layer=city&lang=' + encodeURIComponent(this.locale);
                        const res = await fetch(url, { signal: this.mobileLocationAbort.signal, headers: { 'Accept': 'application/json' } });
                        if (!res.ok) throw new Error('Photon ' + res.status);
                        const data = await res.json();

                        if ((this.mobileDraft.city_name || '').trim() !== queryAtFetch) {
                            this.mobileLocationLoading = false;
                            return;
                        }

                        this.mobileLocationSuggestions = (data.features || []).map(f => {
                            const p = f.properties || {};
                            const coords = (f.geometry && f.geometry.coordinates) || [];
                            return {
                                name: p.name || '',
                                lng: coords[0], lat: coords[1],
                                countrycode: p.countrycode || '',
                                subtitle: this._locationSubtitle(p),
                            };
                        }).filter(s => s.name && s.lat != null && s.lng != null);

                        this.mobileLocationOpen = this.mobileLocationSuggestions.length > 0;
                    } catch (e) {
                        if (e.name !== 'AbortError') this.mobileLocationSuggestions = [];
                    } finally {
                        this.mobileLocationLoading = false;
                    }
                },

                selectMobileLocation(s) {
                    if (!s) return;
                    this.mobileDraft.city_name = s.name;
                    this.mobileDraft.map_lat   = s.lat;
                    this.mobileDraft.map_lng   = s.lng;
                    this.mobileLocationOpen = false;
                    this.mobileLocationSuggestions = [];

                    // Center only if the map panel is currently visible
                    if (this.mapOpen) {
                        this.centerMapOn(s.lat, s.lng, 11);
                    }
                },

                /* ══════════════ Map helpers ══════════════ */
                _getMapInstance() {
                    const keys = ['bravo_map', 'gmap', 'map', 'googleMap', 'theMap', 'leafletMap', 'mapbox'];
                    for (const k of keys) {
                        const m = window[k];
                        if (m && typeof m === 'object') {
                            if (typeof m.setCenter === 'function') return { engine: 'google', map: m };
                            if (typeof m.setView === 'function' && typeof m.getZoom === 'function') return { engine: 'leaflet', map: m };
                            if (typeof m.flyTo === 'function' && typeof m.getSource === 'function') return { engine: 'mapbox', map: m };
                        }
                    }
                    return null;
                },

                _whenMapReady(cb, tries = 0) {
                    const found = this._getMapInstance();
                    if (found) { cb(found); return; }
                    if (tries > 60) return; // ~6s
                    setTimeout(() => this._whenMapReady(cb, tries + 1), 100);
                },

                centerMapOn(lat, lng, zoom) {
                    if (lat == null || lng == null || lat === '' || lng === '') return;
                    lat = parseFloat(lat); lng = parseFloat(lng);
                    if (Number.isNaN(lat) || Number.isNaN(lng)) return;

                    if (window.bravo_map_data) {
                        window.bravo_map_data.map_lat_default = lat;
                        window.bravo_map_data.map_lng_default = lng;
                        if (zoom) window.bravo_map_data.map_zoom_default = zoom;
                    }

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google') {
                                map.setCenter({ lat, lng });
                                if (zoom) map.setZoom(zoom);
                                if (window.google?.maps?.event) window.google.maps.event.trigger(map, 'resize');
                            } else if (engine === 'leaflet') {
                                map.setView([lat, lng], zoom || map.getZoom() || 10);
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                map.flyTo({ center: [lng, lat], zoom: zoom || map.getZoom() || 10 });
                            }
                        } catch (e) {}
                    });
                },

                fitBoundsToMarkers(markers, fallbackLat, fallbackLng, fallbackZoom) {
                    const list = (markers || [])
                        .map(m => ({ lat: parseFloat(m.lat), lng: parseFloat(m.lng) }))
                        .filter(m => !Number.isNaN(m.lat) && !Number.isNaN(m.lng));

                    if (!list.length) return this.centerMapOn(fallbackLat, fallbackLng, fallbackZoom);
                    if (list.length === 1) return this.centerMapOn(list[0].lat, list[0].lng, 13);

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                const b = new window.google.maps.LatLngBounds();
                                list.forEach(p => b.extend(p));
                                map.fitBounds(b, { padding: 48, maxZoom: 14 });
                            } else if (engine === 'leaflet' && window.L) {
                                const b = window.L.latLngBounds(list.map(p => [p.lat, p.lng]));
                                map.fitBounds(b, { padding: [40, 40], maxZoom: 14 });
                                setTimeout(() => map.invalidateSize(), 60);
                            } else if (engine === 'mapbox') {
                                const lngs = list.map(p => p.lng), lats = list.map(p => p.lat);
                                map.fitBounds(
                                    [[Math.min(...lngs), Math.min(...lats)],
                                     [Math.max(...lngs), Math.max(...lats)]],
                                    { padding: 48, maxZoom: 14 }
                                );
                            }
                        } catch (e) {}
                    });
                },

                refreshMapSize() {
                    window.dispatchEvent(new Event('resize'));
                    try {
                        if (window.google && window.google.maps && window.google.maps.event) {
                            ['bravo_map','gmap','map','googleMap','theMap'].forEach(key => {
                                const m = window[key];
                                if (m && typeof m === 'object' && typeof m.getCenter === 'function') {
                                    window.google.maps.event.trigger(m, 'resize');
                                }
                            });
                        }
                        if (window.L && window.map && typeof window.map.invalidateSize === 'function') window.map.invalidateSize();
                        if (typeof window.refreshMapMarkers === 'function') window.refreshMapMarkers();
                    } catch (e) {}
                },

                /* ══════════════ Markers ══════════════ */
                extractMarkersFromDoc(doc) {
                    const el = doc.querySelector('#bravo-map-markers-data');
                    if (!el) return null;
                    try {
                        return {
                            markers: JSON.parse(el.dataset.markers || '[]'),
                            lat:  parseFloat(el.dataset.lat)  || this.defaultLat,
                            lng:  parseFloat(el.dataset.lng)  || this.defaultLng,
                            zoom: parseInt(el.dataset.zoom)   || this.defaultZoom,
                        };
                    } catch (e) { return null; }
                },

                _popupHtml(mk) {
                    return `
                        <div style="max-width:220px;font-family:Inter,system-ui,sans-serif">
                            ${mk.image ? `<img src="${mk.image}" style="width:100%;border-radius:8px;margin-bottom:6px">` : ''}
                            <strong style="font-size:13px;color:#0f172a">${mk.title || ''}</strong>
                            ${mk.price ? `<div style="margin-top:4px;color:#4f46e5;font-weight:700;font-size:13px">${mk.price}</div>` : ''}
                        </div>`;
                },

                syncMapMarkers(payload) {
                    if (!payload) return;

                    window.bravo_map_data = window.bravo_map_data || {};
                    window.bravo_map_data.markers           = payload.markers;
                    window.bravo_map_data.map_lat_default   = payload.lat;
                    window.bravo_map_data.map_lng_default   = payload.lng;
                    window.bravo_map_data.map_zoom_default  = payload.zoom;

                    const fallback = {
                        lat:  payload.lat  || this.defaultLat,
                        lng:  payload.lng  || this.defaultLng,
                        zoom: payload.zoom || this.defaultZoom,
                    };

                    this._whenMapReady(({ engine, map }) => {
                        try {
                            if (engine === 'google' && window.google?.maps) {
                                (map.__bravoMarkers || []).forEach(mk => mk.setMap && mk.setMap(null));
                                map.__bravoMarkers = [];

                                const info = map.__bravoInfo ||
                                             (map.__bravoInfo = new window.google.maps.InfoWindow());

                                payload.markers.forEach(mk => {
                                    const marker = new window.google.maps.Marker({
                                        position: { lat: parseFloat(mk.lat), lng: parseFloat(mk.lng) },
                                        map,
                                        title: mk.title || '',
                                    });
                                    marker.__id = mk.id;

                                    if (mk.title || mk.image) {
                                        marker.addListener('click', () => {
                                            info.setContent(this._popupHtml(mk));
                                            info.open(map, marker);
                                        });
                                    }
                                    map.__bravoMarkers.push(marker);
                                });

                                if (payload.markers.length === 1 && map.__bravoMarkers[0]) {
                                    const m = map.__bravoMarkers[0];
                                    const mk = payload.markers[0];
                                    if (mk.title || mk.image) {
                                        info.setContent(this._popupHtml(mk));
                                        info.open(map, m);
                                    }
                                }
                            }
                            else if (engine === 'leaflet' && window.L) {
                                if (map.__bravoLayer) map.removeLayer(map.__bravoLayer);
                                const layer = window.L.layerGroup().addTo(map);
                                payload.markers.forEach(mk => {
                                    const marker = window.L.marker([parseFloat(mk.lat), parseFloat(mk.lng)]).addTo(layer);
                                    marker.__id = mk.id;
                                    if (mk.title || mk.image) marker.bindPopup(this._popupHtml(mk));
                                });
                                map.__bravoLayer = layer;
                                if (payload.markers.length === 1) {
                                    const first = layer.getLayers()[0];
                                    if (first && first.openPopup) first.openPopup();
                                }
                            }
                            else if (engine === 'mapbox' && window.mapboxgl) {
                                const geojson = {
                                    type: 'FeatureCollection',
                                    features: payload.markers.map(mk => ({
                                        type: 'Feature',
                                        geometry: { type: 'Point', coordinates: [parseFloat(mk.lng), parseFloat(mk.lat)] },
                                        properties: { title: mk.title || '', id: mk.id, image: mk.image || '', price: mk.price || '' }
                                    }))
                                };
                                if (map.getSource('bravo-markers')) {
                                    map.getSource('bravo-markers').setData(geojson);
                                } else {
                                    map.addSource('bravo-markers', { type: 'geojson', data: geojson });
                                    map.addLayer({
                                        id: 'bravo-markers', type: 'circle', source: 'bravo-markers',
                                        paint: { 'circle-radius': 8, 'circle-color': '#4f46e5',
                                                 'circle-stroke-color': '#fff', 'circle-stroke-width': 2 }
                                    });
                                }
                            }
                        } catch (e) {}

                        // Prefer markers bounds; when none, fall back to lat/lng/zoom
                        this.fitBoundsToMarkers(payload.markers, fallback.lat, fallback.lng, fallback.zoom);
                        this.refreshMapSize();
                    });
                },

                // Card hover → open matching marker popup
                highlightMarker(id) {
                    if (id == null) return;
                    const found = this._getMapInstance();
                    if (!found) return;
                    const { engine, map } = found;
                    try {
                        if (engine === 'google') {
                            const marker = (map.__bravoMarkers || []).find(m => String(m.__id) === String(id));
                            if (marker && window.google?.maps?.event) {
                                window.google.maps.event.trigger(marker, 'click');
                            }
                        } else if (engine === 'leaflet' && map.__bravoLayer) {
                            const layer = map.__bravoLayer.getLayers().find(m => String(m.__id) === String(id));
                            if (layer && layer.openPopup) layer.openPopup();
                        }
                    } catch (e) {}
                },

                /* ══════════════ Mobile draft ══════════════ */
                mobileDraft: {
                    city_name: '', start: '', end: '',
                    adults: 2, children: 0, pets: 0, pets_allowed: 0,
                    map_lat: '', map_lng: '',
                    get nights() {
                        if (!this.start || !this.end) return 0;
                        const n = Math.round((new Date(this.end) - new Date(this.start)) / 86400000);
                        return n > 0 ? n : 0;
                    },
                },

                guestRows: [
                    { key: 'adults',   label: 'Erwachsene', hint: '13+ Jahre',     min: 1 },
                    { key: 'children', label: 'Kinder',     hint: '2–12 Jahre',    min: 0 },
                    { key: 'pets',     label: 'Haustiere',  hint: 'Katzen, Hunde', min: 0 },
                ],

                get guestSummary() {
                    const parts = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) parts.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) parts.push(`${this.filters.pets} 🐾`);
                    return parts.join(' · ');
                },

                get nights() {
                    const s = this._toIso(this.filters.start);
                    const e = this._toIso(this.filters.end);
                    if (!s || !e) return 0;
                    const n = Math.round((new Date(e) - new Date(s)) / 86400000);
                    return n > 0 ? n : 0;
                },

                _toIso(input) {
                    if (!input) return '';
                    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) return input;
                    if (/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) {
                        const [d, m, y] = input.split('.');
                        return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const dd = String(input.getDate()).padStart(2, '0');
                        return `${y}-${m}-${dd}`;
                    }
                    return '';
                },

                get mobileTriggerPrimary() { return this.filters.city_name || 'Wohin?'; },

                get mobileTriggerSecondary() {
                    const parts = [];
                    if (this.filters.start && this.filters.end) {
                        parts.push(`${this.fmtDate(this.filters.start)} – ${this.fmtDate(this.filters.end)}`);
                    } else { parts.push('Wann?'); }
                    const g = [`${this.filters.adults} Erw.`];
                    if (this.filters.children > 0) g.push(`${this.filters.children} Ki.`);
                    if (this.filters.pets > 0) g.push(`${this.filters.pets} 🐾`);
                    parts.push(g.join(' · '));
                    return parts.join(' · ');
                },

                get layoutStyle() {
                    if (!this.isDesktop) return 'display: block;';
                    if (this.sidebarOpen && this.mapOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr) 420px;';
                    if (this.sidebarOpen) return 'display: grid; grid-template-columns: 280px minmax(0, 1fr);';
                    if (this.mapOpen) return 'display: grid; grid-template-columns: minmax(0, 1fr) 420px;';
                    return 'display: block;';
                },

                get appliedCount() {
                    let n = 0;
                    if (this.filters.city_name) n++;
                    if (this.filters.start && this.filters.end) n++;
                    if (this.filters.adults > 2) n++;
                    if (this.filters.children > 0) n++;
                    if (this.filters.pets > 0) n++;
                    if (this.filters.price_min > this.minPrice) n++;
                    if (this.filters.price_max < this.maxPrice) n++;
                    if (this.filters.orderby) n++;
                    for (const t of Object.values(this.filters.attrs || {})) n += (t || []).length;
                    return n;
                },

                get activeChips() {
                    const chips = [];
                    if (this.filters.city_name) chips.push({ key: 'city', label: this.filters.city_name });
                    if (this.filters.start && this.filters.end) {
                        chips.push({ key: 'dates', label: `${this.fmtDate(this.filters.start)} → ${this.fmtDate(this.filters.end)}` });
                    }
                    if (this.filters.price_min > this.minPrice || this.filters.price_max < this.maxPrice) {
                        chips.push({ key: 'price', label: `${this.filters.price_min}€ – ${this.filters.price_max}€` });
                    }
                    if (this.filters.pets > 0) chips.push({ key: 'pets', label: 'Haustiere' });
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        const attr = (this.attributes || []).find(a => a.id == attrId);
                        if (!attr) continue;
                        (termIds || []).forEach(termId => {
                            const term = (attr.terms || []).find(t => t.id == termId);
                            if (!term) return;
                            chips.push({ key: `attr_${attrId}_${termId}`, label: term.name, attrId: parseInt(attrId, 10), termId: parseInt(termId, 10) });
                        });
                    }
                    return chips;
                },

                fmtDate(input) {
                    if (!input) return '';
                    if (typeof input === 'string' && /^\d{1,2}\.\d{1,2}\.\d{4}$/.test(input)) return input;
                    if (typeof input === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(input)) {
                        const [y, m, d] = input.split('-');
                        return `${d}.${m}.${y}`;
                    }
                    if (input instanceof Date && !isNaN(input)) {
                        const y = input.getFullYear();
                        const m = String(input.getMonth() + 1).padStart(2, '0');
                        const d = String(input.getDate()).padStart(2, '0');
                        return `${d}.${m}.${y}`;
                    }
                    return '';
                },

                toIso(input) { return this._toIso(input); },

                isAttrChecked(attrId, termId) { return (this.filters.attrs[attrId] || []).includes(termId); },
                toggleAttr(attrId, termId, checked) {
                    if (!this.filters.attrs[attrId]) this.filters.attrs[attrId] = [];
                    const arr = this.filters.attrs[attrId];
                    const i = arr.indexOf(termId);
                    if (checked && i === -1)       arr.push(termId);
                    else if (!checked && i !== -1) arr.splice(i, 1);
                    if (arr.length === 0) delete this.filters.attrs[attrId];
                    this.applyFilters();
                },

                init() {
                    const desktop = window.matchMedia('(min-width: 1024px)').matches;

                    let savedView = null;
                    try { savedView = localStorage.getItem('campsiteView'); } catch (e) {}
                    const hasSavedView = savedView === 'grid' || savedView === 'list';

                    this.view = hasSavedView ? savedView : (desktop ? 'grid' : 'list');

                    if (desktop) { this.sidebarOpen = true; this.mapOpen = true; }
                    else         { this.sidebarOpen = false; this.mapOpen = false; }

                    this.$watch(
                        () => this.mobileSearchOpen || this.mobileFiltersOpen || (this.mapOpen && !this.isDesktop),
                        (locked) => {
                            if (locked) {
                                this._scrollY = window.scrollY || window.pageYOffset || 0;
                                document.body.style.top = `-${this._scrollY}px`;
                                document.body.classList.add('modal-open');
                            } else {
                                document.body.classList.remove('modal-open');
                                document.body.style.top = '';
                                if (this._scrollY) { window.scrollTo(0, this._scrollY); this._scrollY = 0; }
                            }
                        }
                    );

                    this.filters.start = this.toIso(this.filters.start);
                    this.filters.end   = this.toIso(this.filters.end);

                    const mq = window.matchMedia('(min-width: 1024px)');
                    const update = () => { this.isDesktop = mq.matches; };
                    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
                    update();

                    if (this.$refs.desktopDateRange) {
                        this._desktopFP = flatpickr(this.$refs.desktopDateRange, {
                            ...this._fpOptions(),
                            showMonths: window.matchMedia('(max-width: 767px)').matches ? 1 : 2,
                            defaultDate: (this.filters.start && this.filters.end) ? [this.filters.start, this.filters.end] : null,
                            onChange: (dates) => {
                                if (dates.length === 2) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = this.toIso(dates[1]);
                                    this.applyFilters();
                                } else if (dates.length === 1) {
                                    this.filters.start = this.toIso(dates[0]);
                                    this.filters.end   = '';
                                } else {
                                    this.filters.start = ''; this.filters.end = '';
                                    this.applyFilters();
                                }
                            },
                        });
                    }

                    this._initMobileFP();

                    this._resizeHandler = () => {
                        if (!this._desktopFP) return;
                        const want = window.matchMedia('(max-width: 767px)').matches ? 1 : 2;
                        if (this._desktopFP.config.showMonths !== want) this._desktopFP.set('showMonths', want);
                    };
                    window.addEventListener('resize', this._resizeHandler);

                    this.$nextTick(() => {
                        this.readBoundsFromDom();
                        this.reinitLazyLoad();
                        if (this.mapOpen) {
                            setTimeout(() => this.refreshMapSize(), 250);
                            setTimeout(() => this.refreshMapSize(), 800);
                        }
                    });

                    // ═══ Map positioning on first load ═══
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                            const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                            const payload = this.extractMarkersFromDoc(document);

                            if (hasLat && hasLng) {
                                this.filters.map_lat = parseFloat(this.filters.map_lat);
                                this.filters.map_lng = parseFloat(this.filters.map_lng);
                                this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                            } else {
                                this.filters.map_lat = this.defaultLat;
                                this.filters.map_lng = this.defaultLng;
                                if (payload && payload.markers.length) {
                                    this.fitBoundsToMarkers(payload.markers, this.defaultLat, this.defaultLng, this.defaultZoom);
                                } else {
                                    this.centerMapOn(this.defaultLat, this.defaultLng, this.defaultZoom);
                                }
                            }

                            if (payload) {
                                setTimeout(() => this.syncMapMarkers(payload), 200);
                            }
                        }, 600);
                    });
                },

                _initMobileFP() {
                    if (!this.$refs.mobileDateRange) return;
                    if (this.$refs.mobileDateRange._flatpickr) return;
                    this._mobileFP = flatpickr(this.$refs.mobileDateRange, {
                        ...this._fpOptions(),
                        showMonths: 1,
                        onChange: (dates) => {
                            if (dates.length === 2) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = this.toIso(dates[1]);
                            } else if (dates.length === 1) {
                                this.mobileDraft.start = this.toIso(dates[0]);
                                this.mobileDraft.end   = '';
                            } else {
                                this.mobileDraft.start = ''; this.mobileDraft.end = '';
                            }
                        },
                    });
                },

                readBoundsFromDom() {
                    const bounds = document.querySelector('#price-bounds');
                    if (!bounds) return;
                    const m = parseInt(bounds.dataset.min || '0', 10);
                    const M = parseInt(bounds.dataset.max || '0', 10);
                    if (M > 0 && M >= m) { this.minPrice = m; this.maxPrice = M; }
                },

                toggleSidebar() {
                    this.sidebarOpen = !this.sidebarOpen;
                    if (this.sidebarOpen && this.mapOpen) this.refreshMapSize();
                },

                toggleMap() {
                    this.mapOpen = !this.mapOpen;
                    if (this.mapOpen) {
                        this.$nextTick(() => {
                            setTimeout(() => {
                                const hasLat = this.filters.map_lat && !isNaN(parseFloat(this.filters.map_lat));
                                const hasLng = this.filters.map_lng && !isNaN(parseFloat(this.filters.map_lng));

                                this.syncMapMarkers(this.extractMarkersFromDoc(document));

                                if (hasLat && hasLng) {
                                    setTimeout(() => this.centerMapOn(
                                        parseFloat(this.filters.map_lat),
                                        parseFloat(this.filters.map_lng),
                                        11
                                    ), 220);
                                }

                                this.refreshMapSize();
                                setTimeout(() => this.refreshMapSize(), 250);
                            }, 120);
                        });
                    }
                },

                openMobileSearch() {
                    this.mobileDraft.city_name    = this.filters.city_name || '';
                    this.mobileDraft.start        = this.toIso(this.filters.start);
                    this.mobileDraft.end          = this.toIso(this.filters.end);
                    this.mobileDraft.adults       = this.filters.adults || 2;
                    this.mobileDraft.children     = this.filters.children || 0;
                    this.mobileDraft.pets         = this.filters.pets || 0;
                    this.mobileDraft.pets_allowed = this.filters.pets > 0 ? 1 : 0;
                    this.mobileDraft.map_lat      = this.filters.map_lat || '';
                    this.mobileDraft.map_lng      = this.filters.map_lng || '';
                    this.mobileSearchOpen = true;
                    this.$nextTick(() => {
                        this._initMobileFP();
                        if (this._mobileFP && this.mobileDraft.start && this.mobileDraft.end) {
                            this._mobileFP.setDate([this.mobileDraft.start, this.mobileDraft.end], false);
                        }
                    });
                },
                cancelMobileSearch() {
                    this.mobileSearchOpen = false;
                    this.mobileLocationOpen = false;
                },
                resetMobileDraft() {
                    this.mobileDraft.city_name = '';
                    this.mobileDraft.start = '';
                    this.mobileDraft.end = '';
                    this.mobileDraft.adults = 2;
                    this.mobileDraft.children = 0;
                    this.mobileDraft.pets = 0;
                    this.mobileDraft.pets_allowed = 0;
                    this.mobileDraft.map_lat = '';
                    this.mobileDraft.map_lng = '';
                    this.mobileLocationSuggestions = [];
                    this.mobileLocationOpen = false;
                    if (this._mobileFP) this._mobileFP.clear();
                },
                applyMobileSearch() {
                    this.filters.city_name = this.mobileDraft.city_name;
                    this.filters.start     = this.toIso(this.mobileDraft.start);
                    this.filters.end       = this.toIso(this.mobileDraft.end);
                    this.filters.adults    = this.mobileDraft.adults;
                    this.filters.children  = this.mobileDraft.children;
                    this.filters.pets      = this.mobileDraft.pets_allowed ? Math.max(1, this.mobileDraft.pets) : 0;
                    this.filters.map_lat   = this.mobileDraft.map_lat;
                    this.filters.map_lng   = this.mobileDraft.map_lng;
                    this.cancelMobileSearch();

                    // Center only when the map is visible
                    if (this.mapOpen && this.filters.map_lat && this.filters.map_lng) {
                        this.centerMapOn(this.filters.map_lat, this.filters.map_lng, 11);
                    }

                    this.applyFilters();
                },
                mobileIncGuest(key) {
                    this.mobileDraft[key] = (this.mobileDraft[key] || 0) + 1;
                    if (key === 'pets' && this.mobileDraft.pets > 0) this.mobileDraft.pets_allowed = 1;
                },
                mobileDecGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.mobileDraft[key] || 0) > min) {
                        this.mobileDraft[key] = (this.mobileDraft[key] || 0) - 1;
                        if (key === 'pets' && this.mobileDraft.pets === 0) this.mobileDraft.pets_allowed = 0;
                    }
                },
                incGuest(key) { this.filters[key] = (this.filters[key] || 0) + 1; this.applyFilters(); },
                decGuest(key) {
                    const min = this.guestRows.find(r => r.key === key)?.min ?? 0;
                    if ((this.filters[key] || 0) > min) {
                        this.filters[key] = (this.filters[key] || 0) - 1;
                        this.applyFilters();
                    }
                },

                removeChip(chip) {
                    switch (chip.key) {
                        case 'city':
                            this.filters.city_name = '';
                            this.filters.map_lat = '';
                            this.filters.map_lng = '';
                            this.filters.location_id = '';
                            break;
                        case 'dates':
                            this.filters.start = ''; this.filters.end = '';
                            if (this._desktopFP) this._desktopFP.clear();
                            break;
                        case 'price':
                            this.filters.price_min = this.minPrice;
                            this.filters.price_max = this.maxPrice;
                            break;
                        case 'pets': this.filters.pets = 0; break;
                        default:
                            if (chip.key.startsWith('attr_')) {
                                const arr = this.filters.attrs[chip.attrId] || [];
                                const i = arr.indexOf(chip.termId);
                                if (i !== -1) arr.splice(i, 1);
                                if (arr.length === 0) delete this.filters.attrs[chip.attrId];
                            }
                    }
                    this.applyFilters();
                },

                resetFilters() {
                    this.filters = {
                        city_name: '', location_id: '', start: '', end: '',
                        adults: 2, children: 0, pets: 0,
                        price_min: this.minPrice, price_max: this.maxPrice,
                        orderby: '', attrs: {},
                        map_lat: this.defaultLat, map_lng: this.defaultLng,
                    };
                    if (this._desktopFP) this._desktopFP.clear();
                    this.applyFilters();
                },

                buildParams() {
                    const p = new URLSearchParams();
                    for (let [k, v] of Object.entries(this.filters)) {
                        if (k === 'attrs') continue;
                        if ((k === 'start' || k === 'end') && v) v = this.toIso(v);
                        if (v !== '' && v !== null && v !== undefined) p.set(k, v);
                    }
                    for (const [attrId, termIds] of Object.entries(this.filters.attrs || {})) {
                        (termIds || []).forEach(id => p.append(`attrs[${attrId}][]`, id));
                    }
                    return p;
                },

                swapResults(doc, url) {
                    const newResults = doc.querySelector('#results');
                    const curResults = document.querySelector('#results');
                    if (newResults && curResults) curResults.innerHTML = newResults.innerHTML;

                    // Pull marker payload + re-render markers with fresh data
                    const markerPayload = this.extractMarkersFromDoc(doc);
                    this.syncMapMarkers(markerPayload);

                    this.$nextTick(() => {
                        if (curResults && window.Alpine && typeof Alpine.initTree === 'function') {
                            try { Alpine.initTree(curResults); } catch (e) {}
                        }
                        this.reinitLazyLoad();
                    });

                    const bounds = doc.querySelector('#price-bounds');
                    if (bounds) {
                        const newMin = parseInt(bounds.dataset.min || '0', 10);
                        const newMax = parseInt(bounds.dataset.max || '0', 10);
                        if (newMax > 0 && newMax >= newMin) {
                            this.minPrice = newMin;
                            this.maxPrice = newMax;
                            if (this.filters.price_min < newMin || this.filters.price_min > newMax) this.filters.price_min = newMin;
                            if (this.filters.price_max > newMax || this.filters.price_max < newMin) this.filters.price_max = newMax;
                            if (this.filters.price_min > this.filters.price_max) {
                                this.filters.price_min = newMin; this.filters.price_max = newMax;
                            }
                        }
                    }

                    const newPag = doc.querySelector('nav[aria-label="Pagination"]');
                    const curPag = document.querySelector('nav[aria-label="Pagination"]');
                    if (newPag) {
                        if (curPag) curPag.replaceWith(newPag);
                        else if (curResults) curResults.insertAdjacentElement('afterend', newPag);
                        this.$nextTick(() => {
                            if (window.Alpine && typeof Alpine.initTree === 'function') {
                                try { Alpine.initTree(newPag); } catch (e) {}
                            }
                        });
                    } else if (curPag) curPag.remove();

                    history.replaceState(null, '', url);

                    const countEl = doc.querySelector('[x-text="totalResults"]');
                    if (countEl) {
                        const m = (countEl.textContent || '').match(/\d+/);
                        if (m) this.totalResults = parseInt(m[0], 10);
                    }

                    // Honour URL map_lat/map_lng on every swap
                    const params = new URLSearchParams(url.split('?')[1] || '');
                    const lat = params.get('map_lat');
                    const lng = params.get('map_lng');
                    if (lat && lng) {
                        setTimeout(() => this.centerMapOn(lat, lng, 11), 400);
                    }
                },

                applyFilters() {
                    this.loading = true;
                    const params = this.buildParams();
                    params.delete('page');
                    const url = `${window.location.pathname}?${params}`;

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                goToPage(page) {
                    const params = this.buildParams();
                    if (page > 1) params.set('page', page); else params.delete('page');
                    const url = `${window.location.pathname}?${params}`;
                    this.loading = true;
                    window.scrollTo({ top: 0, behavior: 'smooth' });

                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.text())
                        .then(html => {
                            const doc = new DOMParser().parseFromString(html, 'text/html');
                            this.swapResults(doc, url);
                            this.loading = false;
                            if (this.mapOpen) this.refreshMapSize();
                        })
                        .catch(() => { this.loading = false; });
                },

                toggleFavorite(id, ev) {
                    // Wire to your wishlist endpoint, e.g.:
                    // fetch('/wishlist/toggle', { method: 'POST', headers: { 'X-CSRF-TOKEN': '...' }, body: ... })
                },
            };
        }
    </script>
@endpush<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="refresh" content="0;url='https://campingcars.net/de/campingplaetze/suchmaschine?location=plougasnou&amp;page=61'" />

        <title>Redirecting to https://campingcars.net/de/campingplaetze/suchmaschine?location=plougasnou&amp;page=61</title>
    </head>
    <body>
        Redirecting to <a href="https://campingcars.net/de/campingplaetze/suchmaschine?location=plougasnou&amp;page=61">https://campingcars.net/de/campingplaetze/suchmaschine?location=plougasnou&amp;page=61</a>.
    </body>
</html>