:root {
  --blue: #1557b0;
  --blue-2: #2f6fca;
  --cream: #f2f6fb;
  --paper: #ffffff;
  --ink: #15233a;
  --muted: #68758a;
  --orange: #ef7d4e;
  --line: rgba(21, 87, 176, .14);
  --shadow: 0 12px 38px rgba(20, 48, 88, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar { height: 84px; padding: max(14px, env(safe-area-inset-top)) 18px 11px; color: white; background: linear-gradient(135deg, #10468f, var(--blue)); display: flex; align-items: flex-end; justify-content: space-between; }
.eyebrow { margin: 0 0 3px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; font-weight: 750; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.025em; }
h3 { margin-bottom: 5px; font-size: 17px; }

.icon-button { width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: inherit; background: rgba(255,255,255,.1); font-size: 24px; display: grid; place-items: center; }
.controls { position: absolute; z-index: 700; top: 96px; left: 12px; right: 12px; max-width: 550px; margin: auto; pointer-events: none; }
.controls > * { pointer-events: auto; }
.search { height: 49px; padding: 0 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,248,.96); box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; backdrop-filter: blur(12px); }
.search span { font-size: 25px; color: var(--blue-2); transform: rotate(-15deg); }
.search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; }
.filter-row { padding-top: 8px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
select, .filter-button { min-height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,253,248,.96); box-shadow: 0 5px 18px rgba(20,43,37,.11); white-space: nowrap; }
.filter-button[aria-pressed="true"] { color: white; border-color: var(--blue); background: var(--blue); }
.top-filter[aria-pressed="true"] { color: #382600; border-color: #f1b62c; background: #ffd66b; }
.map-wrap, #map { width: 100%; height: calc(100dvh - 84px); }
.map-count { position: absolute; z-index: 600; right: 13px; bottom: max(18px, env(safe-area-inset-bottom)); padding: 9px 12px; border-radius: 999px; color: white; background: rgba(21,87,176,.92); box-shadow: var(--shadow); font-size: 13px; backdrop-filter: blur(9px); }

.leaflet-control-zoom { margin-top: 130px !important; border: 0 !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a { color: var(--blue) !important; background: var(--paper) !important; }
.leaflet-control-attribution { font-size: 9px; }
.camp-pin { background: transparent; border: 0; }
.camp-pin div { width: 31px; height: 31px; border: 3px solid white; border-radius: 50% 50% 50% 8px; color: white; background: var(--blue); box-shadow: 0 4px 11px rgba(21,87,176,.32); display: grid; place-items: center; transform: rotate(-45deg); }
.camp-pin span { font-size: 13px; font-weight: 900; transform: rotate(45deg); }
.camp-pin.approx div { border-style: dashed; }
.camp-pin.camperplaats div { background: #16877a; }
.camp-pin.stad div { background: #6d55b8; }
.camp-pin.plek div { background: #e27632; }
.camp-pin.top div { color: #382600; border-color: #fff9e8; background: #f6bd35; box-shadow: 0 4px 13px rgba(155,105,0,.34); }

.panel { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; max-height: 78dvh; padding: 8px 18px max(20px, env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; background: var(--paper); box-shadow: 0 -14px 48px rgba(16,39,33,.24); transform: translateY(105%); transition: transform .28s ease; overflow: auto; }
.panel.open { transform: translateY(0); }
.panel-handle { width: 38px; height: 4px; margin: 1px auto 14px; border-radius: 99px; background: #ccd3cf; }
.panel-head { position: sticky; z-index: 2; top: -8px; padding: 6px 0 13px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; }
.close-button { flex: 0 0 auto; border-color: var(--line); color: var(--blue); background: white; }
.camping-list { display: grid; gap: 9px; }
.camping-card { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 16px; color: inherit; background: #fff; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.camping-card p { margin: 0; color: var(--muted); font-size: 13px; }
.region-tag, .status-tag { display: inline-flex; padding: 5px 8px; border-radius: 99px; font-size: 11px; font-weight: 750; }
.region-tag { color: var(--blue); background: #e7f0fc; }
.country-tag + .region-tag { margin-left: 5px; }
.country-tag { display: inline-flex; padding: 5px 8px; border-radius: 99px; color: #2d3c55; background: #eef2f7; font-size: 11px; font-weight: 750; }
.category-tag { display: inline-flex; margin-left: 5px; padding: 5px 8px; border-radius: 99px; color: #3d4960; background: #edf0f5; font-size: 11px; font-weight: 750; }
.status-tag { color: #7f3a1e; background: #fde7dc; }
.top-tag { display: inline-flex; margin-left: 5px; padding: 5px 8px; border-radius: 99px; color: #5a3b00; background: #ffe49e; font-size: 11px; font-weight: 800; }
.premium-tag { display: inline-flex; margin-left: 5px; padding: 5px 8px; border-radius: 99px; color: #5c287b; background: #f2e5fb; font-size: 11px; font-weight: 800; }
.heart { color: var(--orange); font-size: 23px; }

.detail-panel { max-height: 86dvh; }
.detail-panel[hidden] { display: none !important; }
.detail-close { position: absolute; z-index: 100; top: 17px; right: 17px; color: var(--blue); background: #fff; box-shadow: 0 4px 14px rgba(20,48,88,.16); pointer-events: auto !important; touch-action: manipulation; cursor: pointer; }
.detail-region { margin: 0 48px 8px 0; color: var(--blue-2); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-title { margin-right: 48px; font-size: 28px; font-weight: 780; line-height: 1.06; letter-spacing: -.025em; }
.detail-place { margin: 7px 0 15px; color: var(--muted); }
.top-choice-note { margin: 0 0 13px; padding: 10px 12px; border-radius: 12px; color: #5a3b00; background: #fff0c7; font-size: 13px; font-weight: 750; }
.premium-note { margin: 0 0 13px; padding: 10px 12px; border-radius: 12px; color: #5c287b; background: #f5eafd; font-size: 13px; font-weight: 700; }
.detail-grid { margin: 17px 0; display: grid; gap: 10px; }
.detail-block { padding: 12px 13px; border-radius: 14px; background: #f3f5f1; }
.detail-block strong { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.detail-block p { margin: 0; font-size: 14px; line-height: 1.5; }
.notice { padding: 10px 12px; border-radius: 12px; color: #7f3a1e; background: #fde7dc; font-size: 12px; line-height: 1.4; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.action { min-height: 46px; padding: 0 12px; border: 0; border-radius: 13px; font-weight: 800; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.action.primary { color: white; background: var(--blue); }
.action.secondary { color: var(--blue); background: #e7f0fc; }
.action.ghost { grid-column: 1 / -1; color: var(--ink); border: 1px solid var(--line); background: white; }
.toast { position: fixed; z-index: 2000; left: 50%; bottom: 24px; padding: 11px 15px; border-radius: 999px; color: white; background: var(--blue); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); transition: .2s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 760px) {
  .controls { left: 24px; right: auto; width: min(620px, calc(100vw - 48px)); max-width: none; margin: 0; }
  .filter-row { flex-wrap: wrap; overflow: visible; }
  .leaflet-control-zoom { margin-top: 178px !important; }
  .panel { left: 22px; right: auto; bottom: 22px; width: 410px; max-height: calc(100dvh - 120px); border-radius: 24px; transform: translateX(-120%); }
  .panel.open { transform: translateX(0); }
  .detail-panel { left: auto; right: 22px; }
  .topbar { height: 88px; padding-left: 25px; }
  .map-wrap, #map { height: calc(100dvh - 88px); }
}