/* ==========================================================
   Park4Weather – lichte huisstijl (wit, groen, oranje)
   Laatst geladen: overschrijft de kleuren van de oudere donkere stijl
   ========================================================== */
:root {
    --p4w-green: #15803d;
    --p4w-green-500: #16a34a;
    --p4w-green-50: #f0fdf4;
    --p4w-green-100: #dcfce7;
    --p4w-orange: #ea580c;
    --p4w-orange-500: #f97316;
    --p4w-orange-50: #fff7ed;
    --p4w-text: #1f2937;
    --p4w-muted: #6b7280;
    --p4w-border: #e5e7eb;
    --p4w-surface: #f8fafc;
    --p4w-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.10);
    --p4w-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);
}

html, body { background: #fff; color: var(--p4w-text); }

/* Iconen */
.p4w-icon { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.p4w-icon.spin { animation: p4wSpin 1s linear infinite; }
@keyframes p4wSpin { to { transform: rotate(360deg); } }
.p4w-icon.star-fill { fill: var(--p4w-orange-500); stroke: var(--p4w-orange-500); }
.wx { stroke-width: 1.8; }
.wx-sun { color: var(--p4w-orange-500); }
.wx-cloud { color: #64748b; }
.wx-rain { color: #2563eb; }
.wx-snow { color: #0ea5e9; }
.wx-storm { color: #7c3aed; }
.wx-night { color: #475569; }
.weather-marker .weather-icon { display: flex; justify-content: center; line-height: 1; }
.weather-marker .weather-icon .p4w-icon { width: 26px; height: 26px; }
.popup-icon .p4w-icon { width: 40px; height: 40px; }
.tourism-filter-list i[data-lucide], .tourism-filter-list svg.lucide { width: 16px; height: 16px; vertical-align: -3px; color: var(--p4w-green); }

/* Header */
#header {
    background: #fff;
    border-bottom: 1px solid var(--p4w-border);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    backdrop-filter: none;
}
#header h1 {
    background: none;
    -webkit-text-fill-color: var(--p4w-green);
    color: var(--p4w-green);
    font-weight: 800;
    letter-spacing: -0.02em;
}
#header h1 span, #header .logo-accent { -webkit-text-fill-color: var(--p4w-orange); color: var(--p4w-orange); }
#header, #header * { color: var(--p4w-muted); }
#header h1, #header h1 * { color: var(--p4w-green); }

/* Kaartknoppen */
#layer-toggle, #weather-toggle, #p4n-search-btn, #tourism-search-btn, #p4n-filter-btn, #tourism-filter-btn,
.leaflet-control-zoom a {
    background: #fff;
    color: var(--p4w-text);
    border: 1px solid var(--p4w-border);
    box-shadow: var(--p4w-shadow);
}
#layer-toggle:hover, #weather-toggle:hover, #p4n-search-btn:hover, #tourism-search-btn:hover,
#p4n-filter-btn:hover, #tourism-filter-btn:hover, .leaflet-control-zoom a:hover { background: var(--p4w-surface); }
.leaflet-control-zoom { border: none !important; box-shadow: none !important; }
.leaflet-control-zoom a { color: var(--p4w-text) !important; }
#p4n-search-btn .icon, #p4n-search-btn .icon svg { color: var(--p4w-green); }
#tourism-search-btn .icon svg { color: var(--p4w-orange); }
#weather-toggle { color: #9ca3af; }
#weather-toggle.active { color: var(--p4w-orange); border-color: #fed7aa; background: var(--p4w-orange-50); }
#p4n-filter-btn.active, #tourism-filter-btn.active { background: var(--p4w-green); color: #fff; border-color: var(--p4w-green); }
#tourism-filter-btn .filter-badge { background: var(--p4w-orange); }
#p4n-clear-btn, #tourism-clear-btn {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
    box-shadow: var(--p4w-shadow);
}
#p4n-clear-btn:hover, #tourism-clear-btn:hover { background: #fef2f2; box-shadow: var(--p4w-shadow); }

/* Lagenmenu */
.layer-btn::before { background: var(--p4w-green); }
.layer-btn:hover { background: var(--p4w-green-50); }
.layer-btn.active { background: var(--p4w-green-50); color: var(--p4w-green); }
.layer-btn .layer-icon { background: var(--p4w-surface); color: var(--p4w-green); }
.layer-btn:hover .layer-icon, .layer-btn.active .layer-icon { background: var(--p4w-green-100); }

/* Filterpanelen */
#p4n-filter-panel, #tourism-filter-panel { border: 1px solid var(--p4w-border); box-shadow: var(--p4w-shadow-lg); }
.p4n-filter-header, .tourism-filter-header { background: #fff !important; color: var(--p4w-text) !important; border-bottom: 1px solid var(--p4w-border); }
.p4n-filter-header button, .tourism-filter-header button { color: var(--p4w-muted) !important; }
.p4n-filter-list input, .tourism-filter-list input { accent-color: var(--p4w-green); }
.tourism-filter-actions button:hover { border-color: var(--p4w-green); color: var(--p4w-green); }

/* Tijdbalk */
#time-control {
    background: #fff;
    border-top: 1px solid var(--p4w-border);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
    backdrop-filter: none;
    color: var(--p4w-text);
}
#time-control-toggle { background: #fff; border: 1px solid var(--p4w-border); border-bottom: none; color: var(--p4w-muted); }
#time-control-toggle::before { background: #cbd5e1; }
#time-control-toggle:hover { background: var(--p4w-surface); color: var(--p4w-text); }
#time-control-toggle:hover::before { background: var(--p4w-green-500); }
#slider-date-label { background: none; -webkit-text-fill-color: var(--p4w-green); color: var(--p4w-green); }
#slider-time-label, #time-control .time-label, #time-control span { -webkit-text-fill-color: initial; }
#time-control, #time-control * { color: var(--p4w-muted); }
#time-control #slider-date-label { color: var(--p4w-green); }
#time-slider { background: var(--p4w-border) !important; }
#time-slider::-webkit-slider-thumb { background: var(--p4w-green) !important; border: 3px solid #fff !important; box-shadow: 0 0 0 1px var(--p4w-green), 0 2px 6px rgba(21, 128, 61, 0.35) !important; }
#time-slider::-moz-range-thumb { background: var(--p4w-green) !important; border: 3px solid #fff !important; box-shadow: 0 0 0 1px var(--p4w-green) !important; }
.day-btn { background: #fff; border: 1px solid var(--p4w-border); color: var(--p4w-text) !important; }
.day-btn:hover { background: var(--p4w-green-50); border-color: #bbf7d0; color: var(--p4w-green) !important; }
.day-btn.active { background: var(--p4w-green); border-color: var(--p4w-green); color: #fff !important; }

#mode-toggle { background: #fff; border: 1px solid var(--p4w-border); box-shadow: var(--p4w-shadow); backdrop-filter: none; }
.mode-btn { color: var(--p4w-muted); }
.mode-btn:hover { color: var(--p4w-text); background: var(--p4w-surface); }
.mode-btn.active { background: var(--p4w-green); color: #fff; box-shadow: none; }

/* Laadmelding */
#loading, #tourism-loading, #tourism-zoom-message {
    background: #fff;
    color: var(--p4w-text);
    border: 1px solid var(--p4w-border);
    box-shadow: var(--p4w-shadow-lg);
}
.tourism-loading-detail { color: var(--p4w-muted); }
.tourism-progress-bar { background: var(--p4w-border); }
.tourism-progress-fill { background: linear-gradient(90deg, var(--p4w-green-500), var(--p4w-orange-500)); }
.tourism-spinner { border-color: var(--p4w-border); border-top-color: var(--p4w-green); }
#loading * { color: var(--p4w-text); }

/* Weerpopup */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: var(--p4w-text); box-shadow: var(--p4w-shadow-lg); }
.popup-content h3 { color: var(--p4w-green); }
.popup-content .popup-details { color: var(--p4w-muted); }
.leaflet-container a.leaflet-popup-close-button { color: var(--p4w-muted); }

/* Activiteitenpopup */
.tourism-popup .leaflet-popup-content-wrapper, .tourism-popup .leaflet-popup-tip { background: #fff; border: 1px solid var(--p4w-border); box-shadow: var(--p4w-shadow-lg); }
.tourism-popup .leaflet-popup-close-button { color: var(--p4w-muted) !important; }
.tourism-popup-content, .tourism-popup-body h3 { color: var(--p4w-text); }
.tourism-popup-category { background: var(--p4w-green-50); color: var(--p4w-green); }
.tourism-popup-rating small, .tourism-popup-address, .tourism-review-time { color: var(--p4w-muted); }
.tourism-popup-description, .tourism-review-text { color: #374151; }
.tourism-popup-actions { border-top: 1px solid var(--p4w-border); }
.tourism-popup-btn { color: var(--p4w-text); background: var(--p4w-surface); border: 1px solid var(--p4w-border); }
.tourism-popup-btn:hover { background: #f1f5f9; }
.tourism-popup-btn-primary { background: var(--p4w-green); color: #fff; border-color: var(--p4w-green); }
.tourism-popup-btn-primary:hover { background: #166534; }
.tourism-reviews-container { background: var(--p4w-surface); }
.tourism-reviews-header, .tourism-review-author { color: var(--p4w-text); }
.tourism-reviews-count { background: var(--p4w-border); color: var(--p4w-text); }
.tourism-review-item { background: #fff; border: 1px solid var(--p4w-border); }
.tourism-reviews-loading { color: var(--p4w-muted); }
.tourism-reviews-slider::-webkit-scrollbar-track { background: var(--p4w-border); }
.tourism-reviews-slider::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* Camperplek-popup */
.p4n-popup-link { background: var(--p4w-green); }
.p4n-popup-link:hover { background: #166534; }
.p4n-popup-stars, .p4n-review-stars { color: var(--p4w-orange-500); }
.p4n-popup-price { color: var(--p4w-green); }
.p4n-translate-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--p4w-muted); }
.p4n-translate-btn.translated { background: var(--p4w-orange); border-color: var(--p4w-orange); }
.p4n-popup-image.no-image { background: linear-gradient(135deg, var(--p4w-green-500), var(--p4w-green)); }
.p4n-marker { border-color: var(--p4w-green-500); }

/* Slider */
#tourism-slider {
    background: #fff;
    color: var(--p4w-text);
    border: 1px solid var(--p4w-border);
    box-shadow: var(--p4w-shadow-lg);
}
.ts-grip { background: #cbd5e1; }
.ts-title { color: var(--p4w-text); }
.ts-plan { color: var(--p4w-muted); display: flex; align-items: center; gap: 4px; }
.ts-plan .p4w-icon { width: 14px; height: 14px; }
.ts-minimize { background: var(--p4w-surface); color: var(--p4w-muted); border: 1px solid var(--p4w-border); }
.ts-minimize:hover { background: #f1f5f9; color: var(--p4w-text); }
.ts-card { background: #fff; border: 1px solid var(--p4w-border); color: var(--p4w-text); }
.ts-card.active { background: #fff; border-color: var(--p4w-green-500); box-shadow: 0 0 0 2px var(--p4w-green-100); }
.ts-card h4, .ts-card .ts-name { color: var(--p4w-text); }
.ts-photo { background: var(--p4w-surface); color: var(--p4w-muted); }
.ts-index { background: var(--p4w-green); color: #fff; }
.ts-meta { color: var(--p4w-muted); }
.ts-meta .p4w-icon { color: var(--p4w-green); }
.ts-rating { color: var(--p4w-text); }
.ts-rating small { color: #9ca3af; }
.ts-badge { color: var(--p4w-green); background: var(--p4w-green-50) !important; border: 1px solid #bbf7d0; }
.ts-tabs button { background: #fff; border: 1px solid var(--p4w-border); color: var(--p4w-muted); }
.ts-tabs button.active { background: var(--p4w-green); border-color: var(--p4w-green); color: #fff; }
.ts-ad { background: var(--p4w-surface); border: 1px dashed var(--p4w-border); }
.ts-ad-label { color: #9ca3af; }
#tourism-slider-tab { background: #fff; border: 1px solid var(--p4w-border); color: var(--p4w-text); box-shadow: var(--p4w-shadow); }
#tourism-slider-tab svg { color: var(--p4w-green); }
.tourism-marker-container.is-active::after, .p4n-marker-container.is-active::after { border-color: var(--p4w-orange-500); }
.p4n-marker-container.is-active .p4n-marker { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--p4w-orange-500), 0 0 22px 8px rgba(249, 115, 22, 0.55); }

/* Startscherm en zoekbalk */
#place-search.mode-hero { border: 1px solid var(--p4w-border); box-shadow: var(--p4w-shadow-lg); }
#place-search .ps-intro h2 { color: var(--p4w-text); }
#place-search .ps-intro p, .ps-chips-label { color: var(--p4w-muted); }
.ps-icon { color: var(--p4w-green); }
#place-search .ps-field:focus-within { border-color: var(--p4w-green-500); box-shadow: 0 0 0 3px var(--p4w-green-100); }
.ps-locate { background: var(--p4w-green); color: #fff; box-shadow: none; }
.ps-locate:hover { background: #166534; }
.ps-chips button .p4w-icon { color: var(--p4w-orange); }
.ps-chips button:hover { border-color: #fdba74; background: var(--p4w-orange-50); }
.ps-list li[aria-selected="true"], .ps-list li:hover { background: var(--p4w-green-50); }

/* Melding */
#p4w-toast { background: #fff; color: var(--p4w-text); border: 1px solid var(--p4w-border); box-shadow: var(--p4w-shadow-lg); }
#p4w-toast .toast-icon { display: flex; }
#p4w-toast .toast-icon .p4w-icon { width: 22px; height: 22px; }
#p4w-toast button { display: inline-flex; align-items: center; gap: 6px; background: var(--p4w-orange); color: #fff; border: none; }
#p4w-toast button:hover { background: #c2410c; }

/* Contentpagina's */
body.content-page { background: #fff; color: #374151; }
.page-header { background: #fff; border-bottom: 1px solid var(--p4w-border); }
.page-logo { background: none; -webkit-text-fill-color: var(--p4w-green); color: var(--p4w-green); }
.page-header nav a { color: var(--p4w-muted); }
.page-header nav a:hover { color: var(--p4w-green); }
.page-main h1, .page-main h2, .page-main h3 { color: var(--p4w-text); }
.page-main a { color: var(--p4w-green); }
.page-main .lead { color: var(--p4w-muted); }
.page-cta { background: var(--p4w-orange); color: #fff !important; }
.page-card { background: var(--p4w-surface); border: 1px solid var(--p4w-border); }
.page-footer { border-top: 1px solid var(--p4w-border); color: var(--p4w-muted); }
.page-footer a { color: var(--p4w-green); }

/* Tijdslider en spinner */
#time-slider { background: transparent !important; }
#time-slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, #bbf7d0 0%, #fed7aa 100%) !important; }
#time-slider::-moz-range-track { background: linear-gradient(90deg, #bbf7d0 0%, #fed7aa 100%) !important; }
.spinner { border-color: var(--p4w-border) !important; border-top-color: var(--p4w-green) !important; }
#time-control .mode-btn, .mode-btn { color: var(--p4w-muted) !important; }
#time-control .mode-btn.active, .mode-btn.active { color: #fff !important; }
.p4n-popup-stars .p4w-icon, .p4n-review-stars .p4w-icon { width: 14px; height: 14px; }
.p4n-popup-prices .p4w-icon, .p4n-popup-price .p4w-icon { color: var(--p4w-green); }
#p4w-toast button.toast-close {
    background: transparent; color: var(--p4w-muted); padding: 6px; margin-left: -2px; border-radius: 8px;
}
#p4w-toast button.toast-close:hover { background: var(--p4w-surface); color: var(--p4w-text); }
#p4w-toast button.toast-close .p4w-icon { width: 18px; height: 18px; }