@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,
                            ];
                        @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 : '' }}
                                        </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,
                            ];
                        @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 : '' }}
                                        </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,
                            ];
                        @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 : '' }}
                                        </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,
                            ];
                        @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 : '' }}
                                        </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,
                            ];
                        @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 : '' }}
                                        </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 lang="de" class="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r">

    <meta name="msvalidate.01" content="810DEFCB47836D3C036A087F1F420B31" />

    
    <link rel="icon" type="image/png" href="https://campingcars.net/uploads/0000/6/2026/05/20/cc-icon.png" />
        <!-- Google Analytics 4 R-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KX370W2YYF"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-KX370W2YYF');
    </script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9083218193291221"
     crossorigin="anonymous"></script>        <title>CampingCars.net – Wohnmobil mieten, kaufen &amp; Campingplätze</title>
    <meta name="description" content="CampingCars.net bietet Wohnmobilvermietung, Camper- und Wohnwagenverkauf sowie sichere Stellplätze in Deutschland  und in ganz Europa."/>
    
    

    
    
    
    <link href="https://campingcars.net/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://campingcars.net/dist/frontend/css/app.css?_ver=3.4.2.2" rel="stylesheet">

    
    
    
    <link rel="preload" as="style" href="https://campingcars.net/libs/font-awesome/css/font-awesome.min.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/font-awesome/css/font-awesome.min.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/libs/icofont/icofont.min.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/icofont/icofont.min.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/libs/ionicons/css/ionicons.min.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/ionicons/css/ionicons.min.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/libs/select2/css/select2.min.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/select2/css/select2.min.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/libs/daterange/daterangepicker.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/daterange/daterangepicker.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/libs/carousel-2/owl.carousel.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/libs/carousel-2/owl.carousel.css"></noscript>

    <link rel="preload" as="style" href="https://campingcars.net/dist/frontend/css/notification.css"
          onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://campingcars.net/dist/frontend/css/notification.css"></noscript>

    
        

    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link rel="preload" as="style"
          href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
          onload="this.onload=null;this.rel='stylesheet'">

    <noscript>
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap">
    </noscript>

    
            <link rel="stylesheet"
              href="https://campingcars.net/libs/cookie-consent/cookieconsent.css"
              media="print"
              onload="this.media='all'">
    
    
    
    
    
    <link href="https://campingcars.net/custom-css.css?_ver=3.4.2.2" rel="stylesheet">

    
    <script>
    var bookingCore = {
        url:'https://campingcars.net/de',
        url_root:'https://campingcars.net',
        admin_url:'https://campingcars.net/admin',
        booking_decimals:0,
        thousand_separator:'.',
        decimal_separator:'.',
        currency_position:'right_space',
        currency_symbol:'€',
        currency_rate:'1',
        date_format:'DD.MM.YYYY',
        map_provider:'gmap',
        map_gmap_key:'',
        check_in_text: 'Check-In',
        check_out_text: 'Check-Out',
        map_options:{
            map_lat_default:'',
            map_lng_default:'',
            map_clustering: true,
            map_fit_bounds: true,
        },
        routes:{
            login:'https://campingcars.net/de/login',
            register:'https://campingcars.net/de/register',
            vendor_register:'https://campingcars.net/de/vendor/register',
            checkout:'https://campingcars.net/de/booking/doCheckout',
            checkoutRequest:'https://campingcars.net/de/booking/doRentalRequest'
        },
        currentUser: 0,
        isAdmin : 0,
        rtl: false,
        markAsRead:'https://campingcars.net/de/notify/markAsRead',
        markAllAsRead:'https://campingcars.net/de/notify/markAllAsRead',
        loadNotify : 'https://campingcars.net/de/notify/notifications',
        pusher_api_key : '',
        pusher_cluster : '',
        language: 'de',
        module:{}
    };
                            bookingCore.module.hotel = 'https://campingcars.net/de/campingplaetze/suchmaschine';
                                bookingCore.module.space = 'https://campingcars.net/de/wohnmobil-mieten/suchmaschine';
                                bookingCore.module.car = 'https://campingcars.net/de/wohnmobil-kaufen/suche';
                var i18n = {
        warning:"Warnung",
        success:"Erfolg",
        confirm_delete:"Do you want to delete?",
        confirm:"Bestätigen",
        cancel:"Abbrechen",
    };
    var daterangepickerLocale = {
        "applyLabel": "Anwenden",
        "cancelLabel": "Abbrechen",
        "fromLabel": "Von",
        "toLabel": "Bis",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "first_day_of_week": 1,
        "daysOfWeek": [
            "Su",
            "Mo",
            "Di",
            "Wir",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "Januar",
            "Februar",
            "März",
            "April",
            "Mai",
            "Juni",
            "Juli",
            "August",
            "September",
            "Oktober",
            "November",
            "Dezember"
        ],
    };
    window.currentUrl = 'https://campingcars.net/de/campingplaetze/suchmaschine';
</script>

    
</head>
<body class="frontend-page header-normal   ">
            
        
        <div class="bravo_wrap">
                    <style>
    .headerstrip-wrapper {
        height: 50px;
        position: relative;
        width :100%;
        background : linear-gradient(to right, #E40046, #E40046);
    }

    .headerstrip-content {
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 1000px 50px;
        width: 100%;
        height: 50px;
        max-width: 1408px;
        padding-left: 16px;
        padding-right: 16px;
        margin: 0 auto;
    }
</style>
<!--
<div class="headerstrip-wrapper">
    <div class="headerstrip-content text-white text-small">
        <strong>Important:</strong> We’re currently in our Beta phase — working hard behind the scenes on something exciting!
        All data on the site is for testing purposes only. <br> we prepare for the next big update.
        Stay tuned — we’ll be back soon, better than ever! 🚀
    </div>
</div>
-->
<div class="bravo_topbar">
    <div class="container">
        <div class="content">
            <div class="topbar-left">

                <div class="socials">
<a href="#" title="follow us in facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="follow us in  Lindekin"><i class="fa fa-linkedin"></i></a>
<a href="#" title="Follow us in Google"><i class="fa fa-google-plus"></i></a>
</div>
<span class="line"></span>
<a href="mailto:contact@campingcars.net">contact@campingcars.net</a>


            </div>
            <div class="topbar-right">
                <ul class="topbar-items">
                    <li class="dropdown">
                                                                            <a href="#" data-toggle="dropdown" class="is_login">
                    EUR
                    <i class="fa fa-angle-down"></i>
                </a>
                            <ul class="dropdown-menu text-left width-auto">
                                                <li>
                        <a href="https://campingcars.net/de/campingplaetze/suchmaschine?location=prullans&amp;page=64&amp;set_currency=usd" class="is_login">
                            USD
                        </a>
                    </li>
                                                                <li>
                        <a href="https://campingcars.net/de/campingplaetze/suchmaschine?location=prullans&amp;page=64&amp;set_currency=gbp" class="is_login">
                            GBP
                        </a>
                    </li>
                                                                </ul>
    </li>
                    <li class="dropdown">
                                    <a href="#" data-toggle="dropdown" class="is_login">
                                            <span class="flag-icon flag-icon-de"></span>
                                        Deutschland
                    <i class="fa fa-angle-down"></i>
                </a>
                                                                    <ul class="dropdown-menu text-left">
                                                                            <li>
                        <a href="https://campingcars.net/language/set-lang/at" class="is_login">
                                                            <span class="flag-icon flag-icon-at"></span>
                                                        Österreich
                        </a>
                    </li>
                                                                <li>
                        <a href="https://campingcars.net/language/set-lang/ch" class="is_login">
                                                            <span class="flag-icon flag-icon-ch"></span>
                                                        Schweiz
                        </a>
                    </li>
                                    </ul>
    </li>

                                        <li class="login-item">
                            <a href="#login" data-toggle="modal" data-target="#login" class="login">Anmelden</a>
                        </li>
                                                    <li class="signup-item">
                                <a href="#register" data-toggle="modal" data-target="#register" class="signup">Registrieren</a>
                            </li>
                                                                                </ul>
            </div>
        </div>
    </div>
</div>
            <div class="bravo_header has_sticky">
    <div class="container">
        <div class="content">
            <div class="header-left">
                <a href="https://campingcars.net/de" class="bravo-logo">
                                                                <img src="https://campingcars.net//public/logos/logo-camping-cars-de.png" alt="CampingCars.net – Wohnmobil mieten, kaufen &amp; Campingplätze">
                    
                </a>
                <div class="bravo-menu">
                    <ul class="main-menu menu-generated"><li class="mega depth-0"><a  target="" href="/de/wohnmobil-mieten" >Wohnmobil Mieten <i class="caret fa fa-angle-down"></i></a><ul class="children-menu menu-dropdown"><li class=" depth-1"><a  target="_blank" href="/de/wohnmobil-mieten/buchungslücken" >Buchungslücken</a></li></ul></li><li class=" depth-0"><a  target="" href="/de/wohnmobil-kaufen" >Wohnmobil Kaufen</a></li><li class=" depth-0"><a  target="" href="/de/campingplaetze" >Campingplätze</a></li><li class=" depth-0"><a  target="" href="/de/news" >Camper-Magazine</a></li></ul>                </div>
            </div>
            <div class="header-right">
                                <button class="bravo-more-menu" aria-label="More menu">
                    <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 16h24M4 8h24M4 24h24" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </button>
            </div>
        </div>
    </div>
    <div class="bravo-menu-mobile" style="display:none;">
        <div class="user-profile">
            <div class="b-close"><i class="icofont-close-line" style="color:#1b2c49"></i></div>
            <div class="avatar" style="background:#e6eaf0">
                                    <img src="https://campingcars.net//public/logos/logo-camping-cars-de.png" alt="CampingCars.net – Wohnmobil mieten, kaufen &amp; Campingplätze" style="height: 50px;width: 55%;max-width:200px;border-radius:0%;">
                            </div>
            <ul>
                                    <li>
                        <a href="#login" data-toggle="modal" data-target="#login" class="login">Anmelden</a>
                    </li>
                                            <li>
                            <a href="#register" data-toggle="modal" data-target="#register" class="signup">Registrieren</a>
                        </li>
                                                </ul>
            <ul class="multi-lang">
                <li class="dropdown">
                                                                            <a href="#" data-toggle="dropdown" class="is_login">
                    EUR
                    <i class="fa fa-angle-down"></i>
                </a>
                            <ul class="dropdown-menu text-left width-auto">
                                                <li>
                        <a href="https://campingcars.net/de/campingplaetze/suchmaschine?location=prullans&amp;page=64&amp;set_currency=usd" class="is_login">
                            USD
                        </a>
                    </li>
                                                                <li>
                        <a href="https://campingcars.net/de/campingplaetze/suchmaschine?location=prullans&amp;page=64&amp;set_currency=gbp" class="is_login">
                            GBP
                        </a>
                    </li>
                                                                </ul>
    </li>
            </ul>
            <ul class="multi-lang">
                <li class="dropdown">
                                    <a href="#" data-toggle="dropdown" class="is_login">
                                            <span class="flag-icon flag-icon-de"></span>
                                        Deutschland
                    <i class="fa fa-angle-down"></i>
                </a>
                                                                    <ul class="dropdown-menu text-left">
                                                                            <li>
                        <a href="https://campingcars.net/language/set-lang/at" class="is_login">
                                                            <span class="flag-icon flag-icon-at"></span>
                                                        Österreich
                        </a>
                    </li>
                                                                <li>
                        <a href="https://campingcars.net/language/set-lang/ch" class="is_login">
                                                            <span class="flag-icon flag-icon-ch"></span>
                                                        Schweiz
                        </a>
                    </li>
                                    </ul>
    </li>

            </ul>
        </div>
        <div class="g-menu">
            <ul class="main-menu menu-generated"><li class="mega depth-0"><a  target="" href="/de/wohnmobil-mieten" >Wohnmobil Mieten <i class="caret fa fa-angle-down"></i></a><ul class="children-menu menu-dropdown"><li class=" depth-1"><a  target="_blank" href="/de/wohnmobil-mieten/buchungslücken" >Buchungslücken</a></li></ul></li><li class=" depth-0"><a  target="" href="/de/wohnmobil-kaufen" >Wohnmobil Kaufen</a></li><li class=" depth-0"><a  target="" href="/de/campingplaetze" >Campingplätze</a></li><li class=" depth-0"><a  target="" href="/de/news" >Camper-Magazine</a></li></ul>        </div>
    </div>
</div>
        
        
    <div class="page-template-content">
        <div class="row justify-content-center">

            <img src="https://campingcars.net/uploads/0000/6/2024/04/21/capture-decran-2024-04-21-a-203351.png">

            <div class="bravo-offer">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="item">
                                <div class="featured-text">Garantie du meilleur prix</div>
                                <h2 class="item-title">Location de camping-cars</h2>
                                <p class="item-sub-title">Louez dès maintenant votre camping-car
                                    pour vos prochaines vacances
                                    et profitez d'une vraie liberté !</p>
                                <a href="#" class="btn btn-default">Vois les Offres</a>
                                <div class="img-cover" style="background: url('https://campingcars.net/uploads/0000/6/2024/04/12/capture-decran-2024-04-12-a-161506.png')"></div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="item">
                                <div class="featured-text">Prochainement</div>
                                <h2 class="item-title">Achat et Vente</h2>
                                <p class="item-sub-title">Inscrivez-vous et recevez nos
                                    offres de caravanes et camping-cars d'occasion et neuves.</p>
                                <a href="/register" class="btn btn-default">S'inscrire</a>
                                <div class="img-cover" style="background: url('https://campingcars.net/uploads/0000/6/2024/04/12/capture-decran-2024-04-12-a-162839.png')"></div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="item">
                                <div class="featured-icon"><i class="icofont-newspaper"></i></div>
                                <h2 class="item-title">Notre Magazine</h2>
                                <p class="item-sub-title">Conseils de nos experts en voyages pour rendre votre prochain voyage encore meilleur.</p>
                                <a href="/fr/news" class="btn btn-default">Lire</a>
                                <div class="img-cover" style="background: url('https://campingcars.net/uploads/0000/6/2024/04/12/capture-decran-2024-04-12-a-162717.png')"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container pb-5">
                <ul class="row list-unstyled">
                <li class="col-lg-3 col-6"><a title="location camping-car a Berlin" href="https://campingcars.net/de/wohnmobil-mieten/berlin">Berlin</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Hamburg" href="https://campingcars.net/de/wohnmobil-mieten/hamburg">Hamburg</a></li><li class="col-lg-3 col-6"><a title="location camping-car a München" href="https://campingcars.net/de/wohnmobil-mieten/muenchen">München</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Köln" href="https://campingcars.net/de/wohnmobil-mieten/koeln">Köln</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Frankfurt am Main" href="https://campingcars.net/de/wohnmobil-mieten/frankfurt-am-main">Frankfurt am Main</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Stuttgart" href="https://campingcars.net/de/wohnmobil-mieten/stuttgart">Stuttgart</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Düsseldorf" href="https://campingcars.net/de/wohnmobil-mieten/duesseldorf">Düsseldorf</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Dortmund" href="https://campingcars.net/de/wohnmobil-mieten/dortmund">Dortmund</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Essen" href="https://campingcars.net/de/wohnmobil-mieten/essen">Essen</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Leipzig" href="https://campingcars.net/de/wohnmobil-mieten/leipzig">Leipzig</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Bremen" href="https://campingcars.net/de/wohnmobil-mieten/bremen">Bremen</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Dresden" href="https://campingcars.net/de/wohnmobil-mieten/dresden">Dresden</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Hannover" href="https://campingcars.net/de/wohnmobil-mieten/hannover">Hannover</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Nürnberg" href="https://campingcars.net/de/wohnmobil-mieten/nuernberg">Nürnberg</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Duisburg" href="https://campingcars.net/de/wohnmobil-mieten/duisburg">Duisburg</a></li><li class="col-lg-3 col-6"><a title="location camping-car a Bochum" href="https://campingcars.net/de/wohnmobil-mieten/bochum">Bochum</a></li>
                </ul>
            </div>

        </div>
    </div>

        <div class="bravo_footer">
		<div class="mailchimp">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-lg-10 col-lg-offset-1">
						<div class="row">
							<div class="col-xs-12  col-md-7 col-lg-6">
								<div class="media ">
									<div class="media-left hidden-xs">
										<i class="icofont-island-alt"></i>
									</div>
									<div class="media-body">
										<h4 class="media-heading">Newsletter</h4>
										<p>Abenteuerliche Erlebnisse direkt in dein Postfach</p>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-md-5 col-lg-6">
								<form action="https://campingcars.net/de/newsletter/subscribe" class="subcribe-form bravo-subscribe-form bravo-form">
									<input type="hidden" name="_token" value="e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r">									<div class="form-group">
										<input type="text" name="email" class="form-control email-input" placeholder="Deine E-Mail Adresse">
										<button type="submit" class="btn-submit">Anmelden
											<i class="fa fa-spinner fa-pulse fa-fw"></i>
										</button>
									</div>
									<div class="form-mess"></div>
								</form>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<div class="main-footer">
    <div class="container">
        
        
        <div class="row d-none d-lg-flex">
                                                                <div class="col-lg-6 col-md-6 footer-widget-desktop">
                        <div class="nav-footer">
                            <div class="title">Wohnmobil Mieten in Deutschland</div>
                            <div class="context row">
                                <ul class="col-6 list-none p-0 m-0 space-y-2">
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/berlin">Berlin</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/hamburg">Hamburg</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/muenchen">München </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/koeln">Köln </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/frankfurt-am-main">Frankfurt am Main</a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/stuttgart">Stuttgart </a></li>
    </ul>
<ul class="col-6 list-none p-0 m-0 space-y-2">
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/duesseldorf">Düsseldorf </a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/dortmund">Dortmund</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/essen">Essen </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/leipzig">Leipzig </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/bremen">Bremen</a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/dresden">Dresden </a></li>
    </ul>
                            </div>
                        </div>
                    </div>
                                    <div class="col-lg-3 col-md-6 footer-widget-desktop">
                        <div class="nav-footer">
                            <div class="title">CampingCars</div>
                            <div class="context row">
                                <ul>
    <li><a href="https://campingcars.net/de/page/about-us">Über uns</a></li>
    <li><a href="https://campingcars.net/de/kontakt">Kontakt</a></li>
    <li><a href="https://campingcars.net/de/page/terms-of-use"> Nutzungsbedingungen </a></li>
    <li><a href="https://campingcars.net/de/page/work-with-us">Arbeiten mit uns</a></li>
    <li><a href="https://campingcars.net/de/page/imprint">Impressum</a></li>
    <li><a href="https://campingcars.net/de/page/privacy-policy">Datenschutz</a></li>
</ul>
                            </div>
                        </div>
                    </div>
                                    <div class="col-lg-3 col-md-6 footer-widget-desktop">
                        <div class="nav-footer">
                            <div class="title">Services</div>
                            <div class="context row">
                                <ul>
<li><a href="https://campingcars.net/de/wohnmobil-mieten">Wohnmobil Mieten</a></li>
<li><a href="https://campingcars.net/de/wohnmobil-kaufen">Reisemobil Kaufen</a></li>
<li><a href="https://campingcars.net/de/campingplaetze">Campingplätze Reservieren</a></li>
<li><a href="https://campingcars.net/de/wohnmobil-vermieten">Wohnmobil Vermieten</a></li>
<li><a href="https://campingcars.net/de/get-rv-route">Trip Planner<span class="rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-white badge badge-danger">new</span></a></li>
<li><a href="https://campingcars.net/de/wohnmobil-zubehoere">Wohnmobil Zubehör</a></li>
</ul>
                            </div>
                        </div>
                    </div>
                                    </div>

        
        <div class="row d-lg-none">
                                                                                    <div class="col-12 footer-widget-mobile">
                        <div class="nav-footer">
                            
                            <div class="title"
                                 data-toggle="collapse"
                                 data-target="#footerCollapseMobile_1"
                                 aria-expanded="false"
                                 aria-controls="footerCollapseMobile_1"
                                 role="button"
                                 tabindex="0">
                                Wohnmobil Mieten in Deutschland
                                <span class="footer-toggle-icon float-right">
                                    <i class="fa fa-chevron-down"></i>
                                </span>
                            </div>

                            
                            <div class="context ml-1 row collapse" id="footerCollapseMobile_1">
                                <ul class="col-6 list-none p-0 m-0 space-y-2">
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/berlin">Berlin</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/hamburg">Hamburg</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/muenchen">München </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/koeln">Köln </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/frankfurt-am-main">Frankfurt am Main</a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/stuttgart">Stuttgart </a></li>
    </ul>
<ul class="col-6 list-none p-0 m-0 space-y-2">
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/duesseldorf">Düsseldorf </a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/dortmund">Dortmund</a></li>
    <li><a href="https://campingcars.net/de/wohnmobil-mieten/essen">Essen </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/leipzig">Leipzig </a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/bremen">Bremen</a></li> <li><a href="https://campingcars.net/de/wohnmobil-mieten/dresden">Dresden </a></li>
    </ul>
                            </div>
                        </div>
                    </div>
                                                        <div class="col-12 footer-widget-mobile">
                        <div class="nav-footer">
                            
                            <div class="title"
                                 data-toggle="collapse"
                                 data-target="#footerCollapseMobile_3"
                                 aria-expanded="false"
                                 aria-controls="footerCollapseMobile_3"
                                 role="button"
                                 tabindex="0">
                                CampingCars
                                <span class="footer-toggle-icon float-right">
                                    <i class="fa fa-chevron-down"></i>
                                </span>
                            </div>

                            
                            <div class="context ml-1 row collapse" id="footerCollapseMobile_3">
                                <ul>
    <li><a href="https://campingcars.net/de/page/about-us">Über uns</a></li>
    <li><a href="https://campingcars.net/de/kontakt">Kontakt</a></li>
    <li><a href="https://campingcars.net/de/page/terms-of-use"> Nutzungsbedingungen </a></li>
    <li><a href="https://campingcars.net/de/page/work-with-us">Arbeiten mit uns</a></li>
    <li><a href="https://campingcars.net/de/page/imprint">Impressum</a></li>
    <li><a href="https://campingcars.net/de/page/privacy-policy">Datenschutz</a></li>
</ul>
                            </div>
                        </div>
                    </div>
                                                        <div class="col-12 footer-widget-mobile">
                        <div class="nav-footer">
                            
                            <div class="title"
                                 data-toggle="collapse"
                                 data-target="#footerCollapseMobile_4"
                                 aria-expanded="false"
                                 aria-controls="footerCollapseMobile_4"
                                 role="button"
                                 tabindex="0">
                                Services
                                <span class="footer-toggle-icon float-right">
                                    <i class="fa fa-chevron-down"></i>
                                </span>
                            </div>

                            
                            <div class="context ml-1 row collapse" id="footerCollapseMobile_4">
                                <ul>
<li><a href="https://campingcars.net/de/wohnmobil-mieten">Wohnmobil Mieten</a></li>
<li><a href="https://campingcars.net/de/wohnmobil-kaufen">Reisemobil Kaufen</a></li>
<li><a href="https://campingcars.net/de/campingplaetze">Campingplätze Reservieren</a></li>
<li><a href="https://campingcars.net/de/wohnmobil-vermieten">Wohnmobil Vermieten</a></li>
<li><a href="https://campingcars.net/de/get-rv-route">Trip Planner<span class="rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-white badge badge-danger">new</span></a></li>
<li><a href="https://campingcars.net/de/wohnmobil-zubehoere">Wohnmobil Zubehör</a></li>
</ul>
                            </div>
                        </div>
                    </div>
                                    </div>

    </div>
</div>
		<div class="copy-right">
			<div class="container context">
				<div class="row">
					<div class="col-md-12">
						<p>Copyright © 2026 by <span style="font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">CampingCars.net</span></p>
						<div class="f-visa">
							<p>CampingCars.net</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<div class="modal fade login" id="login" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content relative">
            <div class="modal-header">
                <h4 class="modal-title">Anmelden</h4>
                <span class="c-pointer" data-dismiss="modal" aria-label="Close">
                    <i class="input-icon field-icon fa">
                        <img src="https://campingcars.net/images/ico_close.svg" alt="close">
                    </i>
                </span>
            </div>
            <div class="modal-body relative">
                <form class="bravo-form-login" method="POST" action="/de/login">
    <input type="hidden" name="redirect" value="">
    <input type="hidden" name="_token" value="e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r">    <div class="form-group">
        <input type="text" class="form-control" name="email" autocomplete="off" placeholder="E-Mail Adresse">
        <i class="input-icon icofont-mail"></i>
        <span class="invalid-feedback error error-email"></span>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" name="password" autocomplete="off"  placeholder="Passwort">
        <i class="input-icon icofont-ui-password"></i>
        <span class="invalid-feedback error error-password"></span>
    </div>
    <div class="form-group">
        <div class="d-flex justify-content-between">
            <label for="remember-me" class="mb0">
                <input type="checkbox" name="remember" id="remember-me" value="1"> Angemeldet bleiben <span class="checkmark fcheckbox"></span>
            </label>
            <a href="https://campingcars.net/de/password/reset">Passwort vergessen?</a>
        </div>
    </div>
            <div class="form-group">
            <input type="hidden" name="g-recaptcha-response" class="bravo-recaptcha" id="login_6ac9d66054ca3"><!--End Captcha-->
        </div>
        <div class="error message-error invalid-feedback"></div>
    <div class="form-group">
        <button class="btn btn-primary form-submit" type="submit">
            Anmelden
            <span class="spinner-grow spinner-grow-sm icon-loading" role="status" aria-hidden="true"></span>
        </button>
    </div>
                <div class="c-grey font-medium f14 text-center"> Noch kein Account? <a href="" data-target="#register" data-toggle="modal">Registrieren</a></div>
    </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade login" id="register" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content relative">
            <div class="modal-header">
                <h4 class="modal-title">Registrieren</h4>
                <span class="c-pointer" data-dismiss="modal" aria-label="Close">
                    <i class="input-icon field-icon fa">
                        <img src="https://campingcars.net/images/ico_close.svg" alt="close">
                    </i>
                </span>
            </div>
            <div class="modal-body">
                <form class="form bravo-form-register" method="post" action="https://campingcars.net/de/register">
    <input type="hidden" name="_token" value="e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r">    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="form-group">
                <input type="text" class="form-control" name="first_name" autocomplete="off" placeholder="Vorname" required>
                <i class="input-icon field-icon icofont-waiter-alt"></i>
                <span class="invalid-feedback error error-first_name"></span>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="form-group">
                <input type="text" class="form-control" name="last_name" autocomplete="off" placeholder="Nachname" required>
                <i class="input-icon field-icon icofont-waiter-alt"></i>
                <span class="invalid-feedback error error-last_name"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="phone" autocomplete="off" placeholder="Telefon">
        <i class="input-icon field-icon icofont-ui-touch-phone"></i>
        <span class="invalid-feedback error error-phone"></span>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" name="email" autocomplete="off" placeholder="E-Mail Adresse" required>
        <i class="input-icon field-icon icofont-mail"></i>
        <span class="invalid-feedback error error-email"></span>
    </div>

    <!-- Password Field with Strength Indicator -->
    <div class="form-group">
        <input type="password" class="form-control" name="password" id="password" autocomplete="off" placeholder="Passwort" required>
        <i class="input-icon field-icon icofont-ui-password"></i>
        <span class="invalid-feedback error error-password"></span>

        <!-- Password Strength Indicator -->
        <div class="password-strength-container mt-2" id="passwordStrengthContainer">
            <div class="progress" style="height: 6px; background-color: #e9ecef; border-radius: 4px; overflow: hidden;">
                <div id="passwordStrengthBar" class="progress-bar" role="progressbar" style="width: 0%; height: 100%; transition: all 0.3s ease; background-color: #dc3545;"></div>
            </div>
            <div class="d-flex justify-content-between mt-1" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                <small id="passwordStrengthText" style="color: #6c757d;">Weak</small>
                <small id="passwordStrengthRequirements" style="color: #6c757d; display: flex; flex-wrap: wrap; gap: 8px;">
                    <span id="lengthCheck" style="color: #dc3545;">✗ 8+ chars</span>
                    <span id="numberCheck" style="color: #dc3545;">✗ Number</span>
                    <span id="symbolCheck" style="color: #dc3545;">✗ Symbol</span>
                    <span id="uppercaseCheck" style="color: #dc3545;">✗ Uppercase</span>
                    <span id="lowercaseCheck" style="color: #dc3545;">✗ Lowercase</span>
                </small>
            </div>
        </div>
    </div>

    <!-- Password Confirmation Field -->
    <div class="form-group">
        <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" autocomplete="off" placeholder="Password Confirmation" required>
        <i class="input-icon field-icon icofont-ui-password"></i>
        <span class="invalid-feedback error error-password"></span>
        <small id="passwordMatchMessage" style="color: #6c757d; display: none;"></small>
    </div>

    <div class="form-group">
        <label for="term">
            <input id="term" type="checkbox" name="term" class="mr5">
            Ich akzeptiere die <a href='https://campingcars.net/de/page/privacy-policy' target='_blank'>Terms and Privacy Policy</a>
            <span class="checkmark fcheckbox"></span>
        </label>
        <div><span class="invalid-feedback error error-term"></span></div>
    </div>
            <div class="form-group">
            <input type="hidden" name="g-recaptcha-response" class="bravo-recaptcha" id="register_6ac9d6605520b"><!--End Captcha-->
        </div>
        <div><span class="invalid-feedback error error-g-recaptcha-response"></span></div>
    

    <!-- ====================================================== -->
<!-- Professional Call‑to‑Action for CampingCars.net        -->
<!-- ====================================================== -->
<div class="professional-cta" style="
        background: #f8faff;
        border: 1px solid #e0e7f0;
        border-radius: 12px;
        padding: 20px 24px;
        margin: 20px 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        box-shadow: 0 2px 8px rgba(0,20,40,0.04);
    ">
    <div style="display: flex; align-items: center; gap: 16px;">
        <div style="
                background: #2c3e50;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 22px;
                flex-shrink: 0;
            ">
            <i class="fa fa-building"></i>
        </div>
        <div>
            <div style="font-weight: 600; font-size: 12px; color: #1a2634;">
                Professionell? Vermarkten Sie Ihr Wohnmobil oder Ihren Campingplatz!
            </div>
            <div style="font-size: 10px; color: #5b6f82;">
                Erreichen Sie Tausende von Mietern auf CampingCars.net
            </div>
        </div>
    </div>
    <a href="https://campingcars.net/de/vendor/register" class="btn btn-primary text-center" style="
            background: #ff7f00;
            border: none;
            padding: 10px 24px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 12px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
            transition: background 0.2s ease;
        ">
        Wohnmobil oder Campingplatz vermarkten
    </a>
</div>
<!-- ====================================================== -->

    <div class="error message-error invalid-feedback"></div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary form-submit">
            Registrieren
            <span class="spinner-grow spinner-grow-sm icon-loading" role="status" aria-hidden="true"></span>
        </button>
    </div>
        <div class="c-grey f14 text-center">
        Bereits einen Account?
        <a href="#" data-target="#login" data-toggle="modal">Anmelden</a>
    </div>
</form>


<script>
    // Force run after everything loads
    window.addEventListener('load', function() {
        console.log('Window loaded - checking password field...');
        const pwd = document.getElementById('password');
        if (pwd) {
            console.log('Password field found, triggering input event...');
            pwd.dispatchEvent(new Event('input'));
        }
    });
</script>
            </div>
        </div>
    </div>
</div><div class="modal bc_popup" 
     tabindex="-1" 
     role="dialog" 
     aria-modal="true" 
     aria-labelledby="bc_popup_4_title" 
     aria-describedby="bc_popup_4_desc" 
     id="bc_popup_4" 
     data-days="1">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            
            <button type="button" class="close" data-dismiss="modal" aria-label="Close popup">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body">
                                    <h5 class="modal-title mb-2" id="bc_popup_4_title">Wohnmobil Mietanfragen</h5>
                                <div id="bc_popup_4_desc">
                    <p><strong><img src="https://api.campingcars.net/v2/media/uploads/0000/6/2024/04/19/capture-decran-2024-04-19-a-101346.png" alt=""></strong></p>
<h4><strong>Warum Mietanfragen für Wohnmobile &amp; Camper senden?</strong></h4>
<p>✅ Mehr Auswahl – Vernetzen Sie sich mit mehreren Eigentümern, um das perfekte Wohnmobil zu finden.<br>✅ Bessere Angebote – Vergleichen Sie Angebote und sichern Sie sich den besten Preis.<br>✅ Schnellere Buchung – Buchen Sie Ihre Miete schnell und unkompliziert.<br>✅ Individuelle Optionen – Fordern Sie bestimmte Ausstattungen oder Features an.<br>✅ Direkte Kommunikation – Chatten Sie mit Eigentümern für persönliche Details.</p>
<p>Starten Sie noch heute Ihr Abenteuer! 🚐✨</p>
<p> </p>
                </div>
            </div>
        </div>
    </div>
</div><link rel="stylesheet" href="https://campingcars.net/libs/flags/css/flag-icon.min.css">




<script src="https://campingcars.net/libs/lazy-load/intersection-observer.js"></script>
<script async src="https://campingcars.net/libs/lazy-load/lazyload.min.js"></script>
<script>
    // Set the options to make LazyLoad self-initialize
    window.lazyLoadOptions = {
        elements_selector: ".lazy",
        // ... more custom settings?
    };

    // Listen to the initialization event and get the instance of LazyLoad
    window.addEventListener('LazyLoad::Initialized', function (event) {
        window.lazyLoadInstance = event.detail.instance;
    }, false);


</script>
<script src="https://campingcars.net/libs/lodash.min.js"></script>
<script src="https://campingcars.net/libs/jquery-3.6.3.min.js"></script>
<script src="https://campingcars.net/libs/vue/vue.min.js"></script>
<script src="https://campingcars.net/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://campingcars.net/libs/bootbox/bootbox.min.js"></script>
<script src="https://campingcars.net/libs/carousel-2/owl.carousel.min.js"></script>
<script type="text/javascript" src="https://campingcars.net/libs/daterange/moment.min.js"></script>
<script type="text/javascript" src="https://campingcars.net/libs/daterange/daterangepicker.min.js?_ver=3.4.2.2"></script>
<script src="https://campingcars.net/libs/select2/js/select2.min.js"></script>
<script src="https://campingcars.net/js/functions.js?_ver=3.4.2.2"></script>

<script src="https://campingcars.net/libs/pusher.min.js"></script>
<script src="https://campingcars.net/js/home.js?_ver=3.4.2.2"></script>


<script defer src="https://campingcars.net/libs/cookie-consent/cookieconsent.js"></script>

    <script>
        window.addEventListener('load', function () {
            var cc = initCookieConsent();

            cc.run({
                current_lang: 'de',
                autoclear_cookies: true,
                page_scripts: true,

                // ------------------------------------------------------------------
                // 2. Fully implemented callbacks
                // ------------------------------------------------------------------

                /**
                 * onFirstAction – triggered only once on the very first interaction
                 */
                onFirstAction: function (user_preferences, cookie) {
                    console.log('[CookieConsent] First action:', user_preferences);

                    // (Optional) Log to your server
                    const logUrl = "/cookie-consent/log";
                    if (logUrl && logUrl !== '/') {
                        fetch(logUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || 'e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r'
                            },
                            body: JSON.stringify({
                                action: user_preferences,
                                categories: cookie.categories
                            })
                        }).catch(err => console.warn('Logging failed:', err));
                    }
                },

                /**
                 * onAccept – runs on page load (if consent exists) and after user accepts
                 */
                onAccept: function (cookie) {
                    console.log('[CookieConsent] Accepted categories:', cookie.categories);
                    //TODO fix env('GA_MEASUREMENT_ID', 'G-XXXXXXXXXX')
                    // --------------------------------------------------------------
                    // A. Google Analytics 4 (with Consent Mode v2)
                    // --------------------------------------------------------------
                    if (cookie.categories['analytics'] === true) {
                        // Load GA4 script if not already present
                        if (typeof gtag === 'undefined') {
                            var gaScript = document.createElement('script');
                            gaScript.async = true;
                            gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-KX370W2YYF';
                            document.head.appendChild(gaScript);

                            window.dataLayer = window.dataLayer || [];
                            function gtag(){ dataLayer.push(arguments); }
                            gtag('js', new Date());
                        }

                        // Update consent state
                        gtag('consent', 'update', {
                            'analytics_storage': 'granted',
                            'ad_storage': cookie.categories['marketing'] ? 'granted' : 'denied',
                            'ad_user_data': cookie.categories['marketing'] ? 'granted' : 'denied',
                            'ad_personalization': cookie.categories['marketing'] ? 'granted' : 'denied'
                        });
                        gtag('config', 'G-KX370W2YYF');
                    } else {
                        // If analytics is not accepted, explicitly deny it
                        if (typeof gtag !== 'undefined') {
                            gtag('consent', 'update', { 'analytics_storage': 'denied' });
                        }
                    }

                    // --------------------------------------------------------------
                    // B. Facebook Pixel (Marketing)
                    // --------------------------------------------------------------
                    if (cookie.categories['marketing'] === true) {
                        if (typeof fbq === 'undefined') {
                            !function(f,b,e,v,n,t,s) {
                                if(f.fbq)return; n=f.fbq=function(){n.callMethod ? n.callMethod.apply(n,arguments) : n.queue.push(arguments)};
                                if(!f._fbq)f._fbq=n; n.push=n; n.loaded=!0; n.version='2.0';
                                n.queue=[]; t=b.createElement(e); t.async=!0;
                                t.src=v; s=b.getElementsByTagName(e)[0];
                                s.parentNode.insertBefore(t,s);
                            }(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
                        }
                        //TODO env('FB_PIXEL_ID', 'YOUR_PIXEL_ID')
                        fbq('init', 'YOUR_PIXEL_ID');
                        fbq('track', 'PageView');
                        fbq('consent', 'grant');
                    } else {
                        if (typeof fbq !== 'undefined') {
                            fbq('consent', 'revoke');
                        }
                    }

                    // --------------------------------------------------------------
                    // C. Sync preferences with your Laravel backend
                    // --------------------------------------------------------------
                    const updateUrl = "/cookie-consent/update";
                    if (updateUrl && updateUrl !== '/') {
                        fetch(updateUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || 'e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r'
                            },
                            body: JSON.stringify({ categories: cookie.categories })
                        }).catch(err => console.warn('Server sync failed:', err));
                    }
                },

                /**
                 * onChange – triggered when user updates preferences after giving consent
                 */
                onChange: function (cookie, changed_categories) {
                    console.log('[CookieConsent] Preferences changed:', changed_categories);

                    // Option 1: Hard reload to reset all scripts (safest)
                    // window.location.reload();

                    // Option 2: Dynamically update consent states (no reload)
                    if (typeof gtag !== 'undefined') {
                        gtag('consent', 'update', {
                            'analytics_storage': cookie.categories['analytics'] ? 'granted' : 'denied',
                            'ad_storage': cookie.categories['marketing'] ? 'granted' : 'denied',
                            'ad_user_data': cookie.categories['marketing'] ? 'granted' : 'denied',
                            'ad_personalization': cookie.categories['marketing'] ? 'granted' : 'denied'
                        });
                    }

                    if (typeof fbq !== 'undefined') {
                        fbq('consent', cookie.categories['marketing'] ? 'grant' : 'revoke');
                    }

                    // Sync with server
                    const updateUrl = "/cookie-consent/update";
                    if (updateUrl && updateUrl !== '/') {
                        fetch(updateUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || 'e5VMrC9wQuyPcpimArqdksb5EhIyFcZdeNX5E83r'
                            },
                            body: JSON.stringify({ categories: cookie.categories })
                        });
                    }
                },

                // ------------------------------------------------------------------
                // 3. Language & UI settings
                // ------------------------------------------------------------------
                languages: {
                    'de': {
                        consent_modal: {
                            title: 'Wir verwenden Cookies!',
                            description: `Diese Website verwendet Cookies, um Ihnen das beste Erlebnis zu bieten.`,
                            primary_btn: {
                                text: 'Alle akzeptieren',
                                role: 'accept_all',
                            },
                            secondary_btn: {
                                text: 'Einstellungen',
                                role: 'settings',
                            }
                        },
                        settings_modal: {
                            title: 'Cookie-Einstellungen',
                            save_settings_btn: 'Einstellungen speichern',
                            accept_all_btn: 'Alle akzeptieren',
                            reject_all_btn: 'Alle ablehnen',
                            close_btn_label: 'Schliessen',
                            blocks: [{"title":"Marketing","description":"Diese Technologien werden von Werbetreibenden verwendet, um Anzeigen zu schalten, die f\u00fcr Ihre Interessen relevant sind.","toggle":{"value":"1","enabled":true,"readonly":false}},{"title":"Funktional","description":"Diese Technologien erm\u00f6glichen es uns, das Nutzungsverhalten zu analysieren, um die Leistung zu messen und zu verbessern.","toggle":{"value":"1","enabled":true,"readonly":false}},{"title":"Essenziell","description":"Diese Technologien sind erforderlich, um die Kernfunktionalit\u00e4t unseres Dienstes zu aktivieren.","toggle":{"value":"necessary","enabled":false,"readonly":true}}]                        }
                    }
                }
            });
        });
    </script>

    <div class="modal fade login" id="confirm_password" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content relative">
            <div class="modal-header">
                <h4 class="modal-title">Confirm password</h4>
                <span class="c-pointer" data-dismiss="modal" aria-label="Close">
                    <i class="input-icon field-icon fa">
                        <img src="https://campingcars.net/images/ico_close.svg" alt="close">
                    </i>
                </span>
            </div>
            <div class="modal-body relative">
                <form class="bc-form-confirm-password bc-form" method="POST" action="https://campingcars.net/de/password/confirm">
                    <div class="form-group">
                        <input type="password" class="form-control" name="password"  placeholder="Passwort">
                        <span class="invalid-feedback error error-password"></span>
                    </div>
                    <div class="error message-error invalid-feedback"></div>
                    <div class="form-group">
                        <button class="btn btn-primary form-submit" type="submit">
                            Bestätigen
                            <span class="spinner-grow spinner-grow-sm icon-loading" role="status" aria-hidden="true"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    <script src="https://campingcars.net/module/user/js/2fa.js"></script>



<!--






<script>
    (function() {
        // Store sitekey and actions globally (no script load yet)
        window.BravoReCaptcha = {
            sitekey: '6LeXBXIsAAAAAEBGu-DspJSJl5PsHK_PTjXamijt',
            actions: {"login":"login_6a46d6f96aa25","register":"register_6a46d6f96b065"},
            is_loaded: false,
            isLoading: false,
            widgetIds: {},
            callbacks: [],

            // Execute after reCAPTCHA is loaded
            callback: function() {
                this.is_loaded = true;
                this.isLoading = false;
                for (var k in this.actions) {
                    var v = this.actions[k];
                    this.getToken(k, v);
                    this.widgetIds[k] = v;
                }
                // Execute pending callbacks
                while (this.callbacks.length) {
                    var cb = this.callbacks.shift();
                    if (typeof cb === 'function') cb();
                }
            },

            // Load the reCAPTCHA script dynamically
            load: function() {
                if (this.is_loaded || this.isLoading) return;
                this.isLoading = true;

                var script = document.createElement('script');
                script.src = 'https://www.google.com/recaptcha/api.js?render=' + this.sitekey + '&onload=BravoReCaptchaCallBack';
                script.async = true;
                script.defer = true;
                script.onload = function() {
                    // Script loaded, callback will be called by onload
                };
                script.onerror = function() {
                    this.isLoading = false;
                    console.warn('reCAPTCHA failed to load');
                }.bind(this);
                document.head.appendChild(script);
            },

            // Wait until reCAPTCHA is ready
            ready: function(callback) {
                if (this.is_loaded) {
                    if (typeof callback === 'function') callback();
                } else {
                    this.callbacks.push(callback);
                    // Pre-load if not already loading
                    if (!this.isLoading && !this.is_loaded) {
                        this.load();
                    }
                }
            },

            getToken: function(action, id) {
                var self = this;
                this.ready(function() {
                    grecaptcha.ready(function() {
                        grecaptcha.execute(self.sitekey, { action: action }).then(function(token) {
                            var el = document.getElementById(id);
                            if (el) el.value = token;
                        });
                    });
                });
            },

            reset: function(action) {
                if (this.widgetIds[action]) {
                    this.getToken(action, this.widgetIds[action]);
                }
            }
        };

        // Global callback function (called by reCAPTCHA API)
        window.BravoReCaptchaCallBack = function() {
            window.BravoReCaptcha.callback();
        };

        // ===== AUTO-DETECT FORMS WITH RECAPTCHA =====
        document.addEventListener('DOMContentLoaded', function() {
            var forms = document.querySelectorAll('form[data-recaptcha]');
            if (forms.length === 0) return;

            var hasTriggered = false;

            forms.forEach(function(form) {
                // Load on first focus inside the form
                form.addEventListener('focusin', function(e) {
                    if (!hasTriggered) {
                        hasTriggered = true;
                        window.BravoReCaptcha.load();
                    }
                }, { once: true });

                // Load on submit if not already loaded
                form.addEventListener('submit', function(e) {
                    if (!window.BravoReCaptcha.is_loaded) {
                        e.preventDefault();
                        window.BravoReCaptcha.load();
                        // Wait for load, then re-submit
                        window.BravoReCaptcha.ready(function() {
                            form.submit();
                        });
                    }
                });
            });
        });
    })();
</script>
-->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://campingcars.net/de/#organization", // Unique to Germany
  "name": "CampingCars de",
  "url": "https://campingcars.net/de",
  "logo": "https://campingcars.net/logos/logo-camping-cars-de.png",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "DE"
  },
   "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+49 (0)155 66 40 45 15",
    "email": "info@campingcars.net",
    "contactType": "customer service"
  },
  "sameAs": [
    "https://www.facebook.com/campingcarsnet",
    "https://www.instagram.com/campingcarsnet"
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://campingcars.net/de/#website",
  "url": "https://campingcars.net/de",
  "publisher": {
    "@id": "https://campingcars.net/de/#organization" // Points to the German Org
  }
}
</script>
    <script>
        // Use multiple event listeners to ensure it works
        document.addEventListener('DOMContentLoaded', function() {
            initializePasswordStrength();
        });

        // Also run immediately if DOM is already loaded
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializePasswordStrength);
        } else {
            initializePasswordStrength();
        }

        function initializePasswordStrength() {
            console.log('Initializing password strength indicator...');

            const passwordInput = document.getElementById('password');
            const confirmInput = document.getElementById('password_confirmation');

            // Debug: Check if elements exist
            console.log('Password input found:', !!passwordInput);
            console.log('Confirm input found:', !!confirmInput);

            if (!passwordInput || !confirmInput) {
                console.error('Password inputs not found!');
                return;
            }

            const strengthContainer = document.getElementById('passwordStrengthContainer');
            const strengthBar = document.getElementById('passwordStrengthBar');
            const strengthText = document.getElementById('passwordStrengthText');
            const matchMessage = document.getElementById('passwordMatchMessage');

            // Requirement elements
            const lengthCheck = document.getElementById('lengthCheck');
            const numberCheck = document.getElementById('numberCheck');
            const symbolCheck = document.getElementById('symbolCheck');
            const uppercaseCheck = document.getElementById('uppercaseCheck');
            const lowercaseCheck = document.getElementById('lowercaseCheck');

            // Make sure container is visible
            if (strengthContainer) {
                strengthContainer.style.display = 'block';
            }

            // Password requirements
            const requirements = {
                minLength: 8,
                hasNumber: /\d/,
                hasSymbol: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
                hasUppercase: /[A-Z]/,
                hasLowercase: /[a-z]/
            };

            // Password strength levels
            const strengthLevels = [
                { label: 'Weak', class: 'weak' },
                { label: 'Medium', class: 'medium' },
                { label: 'Strong', class: 'strong' },
                { label: 'Extreme Strong', class: 'extreme' }
            ];

            // Show strength indicator on password focus
            passwordInput.addEventListener('focus', function() {
                if (strengthContainer) {
                    strengthContainer.style.display = 'block';
                }
            });

            // Check password strength on input
            passwordInput.addEventListener('input', function() {
                const password = this.value;

                if (password.length > 0) {
                    if (strengthContainer) {
                        strengthContainer.style.display = 'block';
                    }
                    checkPasswordStrength(password);
                } else {
                    resetStrengthIndicator();
                }

                // Check confirmation match if confirm field has value
                if (confirmInput.value.length > 0) {
                    checkPasswordMatch(password, confirmInput.value);
                }
            });

            // Check password confirmation match
            confirmInput.addEventListener('input', function() {
                checkPasswordMatch(passwordInput.value, this.value);
            });

            function checkPasswordStrength(password) {
                // Check individual requirements
                const isLengthValid = password.length >= requirements.minLength;
                const hasNumber = requirements.hasNumber.test(password);
                const hasSymbol = requirements.hasSymbol.test(password);
                const hasUppercase = requirements.hasUppercase.test(password);
                const hasLowercase = requirements.hasLowercase.test(password);

                // Update requirement indicators
                updateRequirementIndicator(lengthCheck, isLengthValid, '8+ chars');
                updateRequirementIndicator(numberCheck, hasNumber, 'Number');
                updateRequirementIndicator(symbolCheck, hasSymbol, 'Symbol');
                updateRequirementIndicator(uppercaseCheck, hasUppercase, 'Uppercase');
                updateRequirementIndicator(lowercaseCheck, hasLowercase, 'Lowercase');

                // Calculate score (0-5)
                let score = 0;
                if (isLengthValid) score++;
                if (hasNumber) score++;
                if (hasSymbol) score++;
                if (hasUppercase) score++;
                if (hasLowercase) score++;

                // Bonus points for length
                if (password.length >= 12) score++;
                if (password.length >= 16) score++;

                // Determine strength level
                let level;
                if (score >= 6) level = 3; // Extreme
                else if (score >= 4) level = 2; // Strong
                else if (score >= 2) level = 1; // Medium
                else level = 0; // Weak

                // Update strength bar and text
                if (strengthBar) {
                    strengthBar.className = `progress-bar ${strengthLevels[level].class}`;
                    strengthBar.style.width = `${((level + 1) / 4) * 100}%`;
                }

                if (strengthText) {
                    strengthText.textContent = strengthLevels[level].label;
                    const colorClass = level === 0 ? 'danger' :
                        level === 1 ? 'warning' :
                            level === 2 ? 'info' : 'success';
                    strengthText.style.color = colorClass === 'danger' ? '#dc3545' :
                        colorClass === 'warning' ? '#ffc107' :
                            colorClass === 'info' ? '#17a2b8' : '#28a745';
                    strengthBar.className = `bg-${colorClass}`;
                }

                return { score, level };
            }

            function updateRequirementIndicator(element, isValid, label) {
                if (element) {
                    if (isValid) {
                        element.className = 'password-requirement-met';
                        element.textContent = `✓ ${label}`;
                        element.style.color = '#215e08';
                    } else {
                        element.className = 'password-requirement-unmet';
                        element.textContent = `✗ ${label}`;
                        element.style.color = '#6c757d';
                    }
                }
            }

            function resetStrengthIndicator() {
                if (strengthBar) {
                    strengthBar.className = 'progress-bar';
                    strengthBar.style.width = '0%';
                }
                if (strengthText) {
                    strengthText.textContent = 'Weak';
                    strengthText.style.color = '#6c757d';
                }

                // Reset requirements
                const resetElements = [
                    { el: lengthCheck, label: '8+ chars' },
                    { el: numberCheck, label: 'Number' },
                    { el: symbolCheck, label: 'Symbol' },
                    { el: uppercaseCheck, label: 'Uppercase' },
                    { el: lowercaseCheck, label: 'Lowercase' }
                ];

                resetElements.forEach(({ el, label }) => {
                    if (el) {
                        el.className = '';
                        el.style.color = '#dc3545';
                        el.textContent = `✗ ${label}`;
                    }
                });

                if (matchMessage) {
                    matchMessage.style.display = 'none';
                }
            }

            function checkPasswordMatch(password, confirmation) {
                if (!matchMessage) return;

                if (confirmation.length === 0) {
                    matchMessage.style.display = 'none';
                    return;
                }

                matchMessage.style.display = 'block';

                if (password === confirmation) {
                    matchMessage.className = 'password-match';
                    matchMessage.textContent = '✓ Passwords match';
                    matchMessage.style.color = '#215e08';
                } else {
                    matchMessage.className = 'password-mismatch';
                    matchMessage.textContent = '✗ Passwords do not match';
                }
            }

            console.log('Password strength indicator initialized successfully!');
        }
    </script>
    </div>
            <script src="https://services.camper-rentals.com/be/app.js">
        
    
    <script>
        document.addEventListener('click', function (e) {
            const link = e.target.closest('a');
            if (!link) return;

            const url = link.href;

            // Only external links
            if (url && !url.includes(location.hostname)) {
                gtag('event', 'outbound_click', {
                    event_category: 'outbound',
                    event_label: url,
                    transport_type: 'beacon',
                });
            }
        });
    </script>

    <script>
        $(function () {
            // Toggle dropdown
            $('.dropdown-toggle-btn').on('click', function (e) {
                e.stopPropagation();
                const target = $(this).data('target');
                $('.custom-dropdown').not(target).hide();
                $(target).toggle();
            });

            // Select value from dropdown
            $('.custom-dropdown a').on('click', function (e) {
                e.preventDefault();
                const value = $(this).data('value');
                const dropdown = $(this).closest('.custom-dropdown');
                const input = dropdown.prev('.input-group').find('input');
                input.val(value);
                dropdown.hide();
                updatePriceRange();
            });

            // Manual typing
            $('#price').on('input', function () {
                updatePriceRange();
            });

            // Close dropdown on outside click
            $(document).on('click', function () {
                $('.custom-dropdown').hide();
            });
        });
        function updatePriceRange() {
            const min = 0;
            const max = $('#price').val();
            if(max){
                $('#price_range').val(min+';'+max);
            } else {
                $('#price_range').val('');
            }
        }
        /* Set the date we're counting down to
        var countDownDate = new Date("Nov 11, 2025 11:11:11").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }
        }, 1000);*/
    </script>
</body>
</html>