/* ==========================================================================
   ParQueue — design tokens
   Thema: "Overzicht" — licht, rustig operations-dashboard (zijbalk,
   datatabellen met trendlijnen), met een volwaardige donkere variant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Avenir — zelf gehost vanuit assets/fonts, dus geen verzoek meer naar
   Google voor de huisletter. woff2 eerst (elke browser sinds ~2016 kan
   dat, en het is het kleinst); ttf staat er puur als vangnet achter en
   wordt door moderne browsers nooit opgehaald.

   font-display: swap — tekst verschijnt meteen in de systeemletter en
   wisselt zodra Avenir binnen is, in plaats van even onzichtbaar te zijn.

   LET OP: er zijn maar twee gewichten beschikbaar, Regular (400) en
   Medium (500). De site gebruikt daarnaast volop 600, 700 en 800 (ruim
   130 plekken: parknamen, koppen, wachttijden). Die worden nu door de
   browser zelf "vetgemaakt" — een benadering, geen echte Avenir Heavy of
   Black. Lever je die bestanden aan, dan zijn het twee extra @font-face-
   regels hieronder en klopt het overal.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Regular.woff2') format('woff2'),
       url('../fonts/Avenir-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Medium.woff2') format('woff2'),
       url('../fonts/Avenir-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Avenir', system-ui, -apple-system, sans-serif;
  --font-body: 'Avenir', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', 'SFMono-Regular', Menlo, monospace;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;

  --accent: #2E3EAE;
  --accent-bright: #4655D6;
  --accent-ink: #FFFFFF;
  --open: #158A45;
  --medium: #B4740E;
  --high: #C4291F;
  --closed-grey: #9296A0;

  --shadow-soft: 0 12px 28px -14px rgba(20, 22, 26, .18);
  --shadow-tile: 0 1px 3px rgba(20, 22, 26, .06);

  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="light"] {
  --bg: #F0F0F2;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #FAFAFB;
  --ink: #14161A;
  --ink-soft: #55585F;
  --ink-faint: #9296A0;
  --border: #E4E5E8;
  --border-strong: #D3D5D9;
  --card-shadow: rgba(20, 22, 26, .06);
  --accent-soft: #EEF0FB;
  --open-soft: #EAF7EF;
  --medium-soft: #FCF3E3;
  --high-soft: #FBEBEA;
  --glow-open: rgba(21, 138, 69, .12);
  --glow-medium: rgba(180, 116, 14, .12);
  --glow-high: rgba(196, 41, 31, .12);
}

/* Donker: geen simpele inversie — eigen, doordachte tinten (warm
   antraciet-blauw i.p.v. puur zwart), met dezelfde signaalkleuren maar
   iets opgelicht zodat ze op een donkere ondergrond genoeg contrast
   houden. */
[data-theme="dark"] {
  --bg: #101216;
  --bg-elevated: #17191F;
  --bg-sunken: #0C0D10;
  --ink: #ECEDEF;
  --ink-soft: #A0A3AB;
  --ink-faint: #63666F;
  --border: #24262D;
  --border-strong: #34363E;
  --card-shadow: rgba(0, 0, 0, .4);
  --accent: #6C7AE0;
  --accent-bright: #8390EA;
  --accent-soft: #232748;
  --open: #3FCB79;
  --medium: #E0A83E;
  --high: #EF5B4E;
  --open-soft: #17301F;
  --medium-soft: #362A14;
  --high-soft: #3A1E1B;
  --glow-open: rgba(63, 203, 121, .18);
  --glow-medium: rgba(224, 168, 62, .18);
  --glow-high: rgba(239, 91, 78, .2);
}

/* ==========================================================================
   Sitebrede kleurthema's (parkgebaseerd)
   Volledig eigen sfeer per thema — achtergrond, tekst, randen én accent —
   niet alleen een accentkleurtje. De open/druk/storing-statuskleuren blijven
   overal HETZELFDE (dezelfde groen/oranje/rood als het donkere thema): dat
   is een functionele, aangeleerde kleurtaal ("rood = druk/storing") die niet
   per thema anders moet gaan betekenen, alleen omdat de rest van de site
   een andere sfeer krijgt. */
[data-theme="efteling"],
[data-theme="europapark"],
[data-theme="disney"],
[data-theme="universal"] {
  --open: #3FCB79;
  --medium: #E0A83E;
  --high: #EF5B4E;
  --open-soft: #17301F;
  --medium-soft: #362A14;
  --high-soft: #3A1E1B;
  --glow-open: rgba(63, 203, 121, .18);
  --glow-medium: rgba(224, 168, 62, .18);
  --glow-high: rgba(239, 91, 78, .2);
  --card-shadow: rgba(0, 0, 0, .45);
  --accent-ink: #FFFFFF;
}

/* Efteling — donkere, koele blauwtinten rond Piecks-blauw, i.p.v. het
   eerdere sprookjesbos-groen (dat paste niet meer bij een blauwe accent). */
[data-theme="efteling"] {
  --bg: #141A1F;
  --bg-elevated: #1B242B;
  --bg-sunken: #0D1216;
  --ink: #EDF0F2;
  --ink-soft: #A8B4BC;
  --ink-faint: #62707A;
  --border: #253039;
  --border-strong: #37454F;
  --accent: #4F758B;
  --accent-bright: color-mix(in srgb, #4F758B 82%, white);
  --accent-soft: color-mix(in srgb, #4F758B 18%, #1B242B);
}

/* Europa-Park — fris Alpine-groen, helderder/koeler dan het Efteling-thema. */
[data-theme="europapark"] {
  --bg: #101C16;
  --bg-elevated: #17271F;
  --bg-sunken: #0B140F;
  --ink: #EDF2EC;
  --ink-soft: #A9BDAE;
  --ink-faint: #667065;
  --border: #22362A;
  --border-strong: #33503D;
  --accent: #1FAE5C;
  --accent-bright: color-mix(in srgb, #1FAE5C 82%, white);
  --accent-soft: color-mix(in srgb, #1FAE5C 16%, #17271F);
}

/* Disney — magisch middernachtblauw/paars, kasteel-bij-nacht-sfeer. */
[data-theme="disney"] {
  --bg: #131530;
  --bg-elevated: #1B1E42;
  --bg-sunken: #0D0F22;
  --ink: #F0EEFB;
  --ink-soft: #ADA9D9;
  --ink-faint: #66629C;
  --border: #2A2C5C;
  --border-strong: #3B3E7A;
  --accent: #8C7BE0;
  --accent-bright: color-mix(in srgb, #8C7BE0 82%, white);
  --accent-soft: color-mix(in srgb, #8C7BE0 18%, #1B1E42);
}

/* Universal — gedurfd, filmisch blauw-zwart. */
[data-theme="universal"] {
  --bg: #10151C;
  --bg-elevated: #171E27;
  --bg-sunken: #0A0D12;
  --ink: #EDEFF3;
  --ink-soft: #A3ADBB;
  --ink-faint: #626B78;
  --border: #232B36;
  --border-strong: #34404E;
  --accent: #1E88E5;
  --accent-bright: color-mix(in srgb, #1E88E5 82%, white);
  --accent-soft: color-mix(in srgb, #1E88E5 16%, #171E27);
}


/* ==========================================================================
   Reset & base
   ========================================================================== */

/* Zorgt dat het HTML `hidden`-attribuut altijd wint, ook als een class
   ergens verderop expliciet `display` zet (bijv. .btn) — anders blijven
   "verborgen" elementen als de add-widget-knop buiten bewerkmodus alsnog
   zichtbaar. */
[hidden] { display: none !important; }


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg); overflow-x: hidden; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
html::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  transition: background var(--transition), color var(--transition);
  min-height: 100vh;
  /* Zonder dit kon de hele pagina op mobiel zijwaarts versleept worden —
     een paar onderdelen (de swipebare info-pillen/tabjes-balk) gebruiken
     een negatieve marge om tot de schermrand door te lopen, en zonder deze
     harde grens kon dat de héle pagina net iets breder dan het scherm
     maken. Dat gaf een lelijk "loszittend"-gevoel bij het vegen. */
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.15; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: #16232E; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* subtle ambient backdrop: dotted marquee-light texture */


/* ==========================================================================
   Header
   ========================================================================== */

.app-shell {
  min-height: 100vh;
}

/* ==========================================================================
   Zwevend dock (macOS-stijl) — vervangt de oude vaste zijbalk/onderbalk.
   Eén en dezelfde opzet voor desktop én mobiel (alleen wat kleiner op
   smalle schermen, zie media query onderin dit blok) — position:fixed, dus
   volledig buiten de gewone flex-layout van .app-shell om.
   ========================================================================== */

.dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 7px;
  /* Was eerst 90% dekkend + een dunne rand — daardoor viel het dock nogal
     weg tegen een even donkere pagina-achtergrond erachter. Steviger
     dekking, een duidelijker zichtbare rand en een merkbaardere schaduw
     laten 'm nu echt "zweven" i.p.v. wegvallen. */
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-tile), 0 14px 36px rgba(0, 0, 0, .45);
  max-width: calc(100vw - 24px);
}
@media (display-mode: standalone) {
  .dock { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

.dock__item {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink);
  opacity: .72;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition), transform 160ms ease;
}
.dock__item .icon { width: 18px; height: 18px; }
.dock__item:hover { background: var(--bg-sunken); color: var(--ink); opacity: 1; transform: translateY(-3px); }
.dock__item.is-active { color: var(--accent); background: var(--accent-soft); opacity: 1; }

.dock__sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; flex-shrink: 0; }

.dock__favorites,
.dock__account { position: relative; }

/* Het profielrondje is al een gekleurde cirkel (geen dunne omtrek-icoon
   zoals de rest) — die hoeft niet gedimd te worden zoals de andere
   dock-knoppen standaard wel zijn. */
.dock__item--avatar { opacity: 1; }

.dock__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .74rem;
  font-weight: 800;
}
.dock__avatar--photo { object-fit: cover; background: var(--bg-sunken); }
.dock__avatar--guest { background: var(--bg-sunken); color: var(--ink-soft); }
.account-drawer.is-open .dock__item--avatar { color: var(--accent); background: var(--accent-soft); opacity: 1; }

/* Favoriete parken: klapt als een klein stapeltje boven het sterretje open
   (zelfde soort "los-laat-gevoel" als eerder de mobiele tab-FAB had) i.p.v.
   een vaste lijst die altijd ruimte inneemt. */
.dock__popup {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.94);
  transform-origin: bottom center;
  width: 240px;
  max-width: calc(100vw - 32px);
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
[data-favorites-drawer].is-open .dock__popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.dock__popup-title {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 8px 8px;
  margin: 0;
}
.dock__popup-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-s);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: background var(--transition), opacity 200ms ease, transform 200ms ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
[data-favorites-drawer].is-open .dock__popup-item { opacity: 1; transform: none; }
.dock__popup-item:hover { background: var(--bg-sunken); }
.dock__popup-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .dock { gap: 1px; padding: 6px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .dock__item { width: 40px; height: 40px; }
}

.account-drawer { position: relative; }

.account-drawer__panel {
  display: none;
}
.account-drawer.is-open .account-drawer__panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
  z-index: 50;
}

.account-drawer__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.account-drawer__user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.account-drawer__user-avatar--photo { object-fit: cover; background: var(--bg-sunken); }
.account-drawer__user-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px;
  font: inherit;
  border: none;
  background: transparent;
  width: 100%;
  cursor: default;
}
.account-drawer__row-label { font-size: .84rem; color: var(--ink-soft); }
.account-drawer__row--button { cursor: pointer; border-radius: 8px; transition: background var(--transition); }
.account-drawer__row--button:hover { background: var(--bg-sunken); }

.account-drawer__row--park-theme { flex-direction: column; align-items: stretch; gap: 4px; }
.park-theme-swatches { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.park-theme-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.park-theme-swatch:hover { background: var(--bg-sunken); }
.park-theme-swatch.is-active { background: var(--accent-soft); }
.park-theme-swatch__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  border: 1.5px solid transparent;
}
.park-theme-swatch.is-active .park-theme-swatch__dot { border-color: var(--ink); }
.park-theme-swatch__label { font-size: .84rem; color: var(--ink); }

.account-drawer__divider { height: 1px; background: var(--border); margin: 6px 2px; }

.account-drawer__link {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  border: none;
  background: transparent;
  padding: 9px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.account-drawer__link:hover { background: var(--bg-sunken); }
.account-drawer__link--admin { color: var(--high); }
.account-drawer__link--danger:hover { color: var(--high); }
.account-drawer__link--cta { color: var(--accent); }
.account-drawer__link--button.is-active { color: var(--accent); background: var(--accent-soft); }

.logout-form { display: block; margin: 0; }

.main-col {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Ruimte onderaan zodat het zwevende dock nooit over de inhoud heen valt
     (ongeacht schermgrootte — vandaar hier, niet alleen in een mobiele
     media query zoals de oude vaste onderbalk dat had). */
  padding-bottom: 86px;
}

.lang-switch { display: flex; gap: 4px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lang-btn.is-active { background: var(--accent); color: var(--accent-ink); }
.lang-btn:hover:not(.is-active) { color: var(--ink); }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.icon-btn:hover { transform: translateY(-1px); }

/* ==========================================================================
   Layout shell
   ========================================================================== */

.site-main {
  width: 100%;
  min-width: 0;
  max-width: 1760px;
  margin: 0 auto;
  padding: 32px 28px 64px;
  overflow-x: hidden;
}

/* ==========================================================================
   Homepage hero — "entrance ticket"
   ========================================================================== */

/* ==========================================================================
   Parken-toolbar (compact — geen dubbele branding, direct naar zoeken)
   ========================================================================== */

.parks-toolbar { margin-bottom: 24px; }
.parks-toolbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.parks-toolbar__meta {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-faint);
  margin: 0;
}
.parks-toolbar__cta {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   Search
   ========================================================================== */

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 18px;
  margin-bottom: 26px;
  color: var(--ink-faint);
  transition: border-color var(--transition);
}
.search-bar:focus-within { border-color: var(--accent); color: var(--ink); }
.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  font-family: var(--font-body);
}
.search-bar input::placeholder { color: var(--ink-faint); }

.search-bar--wizard { margin-bottom: 14px; }
.search-bar--wizard input { font-size: 16px; }

.no-results { color: var(--ink-faint); text-align: center; padding: 30px 0; }

.parks-toolbar__hint {
  font-size: .78rem;
  color: var(--ink-faint);
  margin: 0;
  align-self: center;
}

/* Rustige, terughoudende knop voor "Bewerken"-acties (dashboard-widgets,
   landvolgorde) — bewust géén opvallende primaire kleur, dat is voor
   hoofdacties zoals "Widget toevoegen" gereserveerd. */
.btn-ghost {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--bg-sunken); }
.btn-ghost.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Wachttijden-overzicht — sidebar-filter + kaartjes-raster
   ========================================================================== */

.parks-browser__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.parks-browser__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.parks-browser__meta { color: var(--ink-faint); font-size: .84rem; margin-top: 4px; }

.parks-browser__layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; margin-top: 18px; }
/* De hele parken-overzichtpagina beperkt tot een smallere, meer app-achtige
   breedte i.p.v. eindeloos breed uit te rekken op een groot scherm — geeft
   3 nette kolommen i.p.v. 6+ te kleine kaartjes naast elkaar. */
.parks-browser { max-width: 1520px; margin: 0 auto; }

/* ---- sidebar ---- */
.country-sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Geen kader/achtergrondvak meer om de hele lijst — gewoon losse
     items op de paginakleur, zoals het voorbeeld. */
  padding: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.country-sidebar__editrow { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.country-sidebar__list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.country-mobile-select { display: none; }
.country-toolbar { display: none; }

.country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.country-item:hover { background: var(--bg-sunken); color: var(--ink); }
.country-item.is-active { background: var(--accent); color: var(--accent-ink); }
.country-item.is-active .country-item__count { color: var(--accent-ink); opacity: .8; }
.country-item.is-dragging { opacity: .4; }
.country-item__count { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); flex-shrink: 0; }
.country-item--favorites { color: var(--medium); }
.country-item--all { font-weight: 700; }

.country-item__drag { display: none; cursor: grab; color: inherit; opacity: .6; flex-shrink: 0; touch-action: none; }
.country-sidebar__list--reorderable.is-editing .country-item__drag { display: inline-flex; }
.country-sidebar__list--reorderable.is-editing .country-item[data-group] { outline: 1.5px dashed var(--border-strong); outline-offset: 2px; }

/* ---- hoofdgebied ---- */
.parks-main { min-width: 0; }
.parks-main__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.parks-main__head h2 { font-size: 1.05rem; font-weight: 700; }
.parks-main__count { font-size: .82rem; color: var(--ink-faint); }

.park-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
/* Resort-kaart (meerdere bij elkaar horende parken, bijv. Europa-Park +
   Rulantica + Traumatica) blijft nu gewoon 1 kolom breed, net als elke
   andere kaart — nu de kaarten zelf al ruimer zijn (min. 380px), is dat
   genoeg voor meerdere leesbare tabjes zonder extra breedte nodig te
   hebben. */

.park-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-tile);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.park-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.park-card--open:hover { border-color: color-mix(in srgb, var(--open) 45%, var(--border)); }
.park-card__star {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
.park-card__flag { display: inline-flex; margin-bottom: 6px; }
.park-card__flag .flag-icon { width: 22px; height: 16px; border-radius: 3px; }
.park-card__name { font-weight: 700; font-size: .95rem; padding-right: 26px; line-height: 1.25; }
.park-card__group { font-size: .76rem; color: var(--ink-faint); }
/* Op desktop puur een transparante groepering (display:contents) — de
   bestaande flex-column-opzet van .park-card zelf blijft zo ongewijzigd
   van kracht, dit <span>'tje zit er verder niet tussen. De compacte
   status/pijltje zijn alleen voor het mobiele uitklap-gedrag bedoeld, dus
   standaard verborgen — zie de mobiele media query voor de eigenlijke
   weergave daarvan. */
.park-card__head { display: contents; }
.park-card__status-compact,
.park-card__chevron { display: none; }
.park-card__details { display: contents; }
.park-card__view-link { display: none; }
.park-card__footer { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.park-card__footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* "Geen openingstijden bekend" is te lang om naast de status op één regel
   te blijven passen in een smalle kaart — laat 'm dan liever als eigen
   volle regel eronder vallen dan lelijk half afbreken. */
.park-card__footer-row:has(.park-card__hours--unknown) { flex-direction: column; align-items: flex-start; gap: 2px; }
/* Extra tijdvensters (Early Entry, Resortgasten, enz.) — eigen regel(s)
   onder de gewone status+tijden, in de accentkleur zodat ze duidelijk
   als "iets extra's" opvallen tussen de rest. */
.park-card__extra-hours { display: block; font-size: .72rem; color: var(--accent); }
.park-card__status { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: .78rem; }
.park-card__status .pulse-dot { width: 6px; height: 6px; }
.park-card__status--open { color: var(--open); }
.park-card__status--closed { color: var(--ink-faint); }
.park-card__hours { font-size: .74rem; color: var(--ink-faint); font-family: var(--font-mono); }
.park-card__hours--unknown { font-family: var(--font-body); font-style: italic; opacity: .8; }

/* ==========================================================================
   Resort-kaart: meerdere bij elkaar horende parken (bijv. Europa-Park +
   Rulantica + Traumatica) in ÉÉN kaart-slot i.p.v. los verspreid door de
   lijst. De kaart zelf blijft precies even groot als elke andere — het
   wisselen tussen leden gebeurt via tabjes MET gelijke breedte, die
   scrollen/pijltjes-navigeren als ze niet allemaal passen, i.p.v. de kaart
   breder te maken.
   ========================================================================== */

.resort-tabs { display: flex; align-items: center; gap: 2px; margin: 2px 0 4px; }
.resort-tabs__scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  /* Vervaagt aan de randen i.p.v. hard af te kappen — subtiele hint dat
     er meer tabjes te zien zijn zonder de pijltjes te hoeven gebruiken.
     Nu per kant apart: alleen vervagen áls er aan die kant ook echt iets
     buiten beeld staat (klassen worden gezet in resort_tabs.js, op zowel
     telefoon als desktop). Voorheen stond de fade er onvoorwaardelijk,
     waardoor het eerste tabje (bijv. de actieve "Europa-Park"-pill) er
     half afgeknipt uitzag terwijl er links helemaal niks te halen viel. */
  --fade-left: 0px;
  --fade-right: 0px;
  mask-image: linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);
}
.resort-tabs__scroll.has-fade-left { --fade-left: 16px; }
.resort-tabs__scroll.has-fade-right { --fade-right: 16px; }
.resort-tabs__scroll::-webkit-scrollbar { display: none; }
.resort-tabs__tab {
  flex-shrink: 0;
  /* Niet langer een grote vaste breedte met "…"-afkapping — dat sneed
     zelfs korte namen als "Hollywood Studios" af. Nu compacte tabjes die
     zich naar hun eigen tekst voegen (kleiner lettertype, minder opvulling)
     — daardoor passen er meestal gewoon 3-4 volledig leesbaar naast
     elkaar, zoals bedoeld, i.p.v. maar 1-2 met "…" erachter. Alleen een
     max-breedte als vangnet voor de zeldzame écht lange naam (bijv.
     "SeaWorld Parks and Resorts Orlando") — die kapt dan pas af, korte/
     middellange namen blijven gewoon volledig leesbaar.
  */
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.resort-tabs__tab.is-active { color: var(--accent-ink); background: var(--accent); font-weight: 700; }
/* Tabje van een subpark dat al bij je favorieten staat — zo zie je in één
   oogopslag welk park binnen dit resort je hebt aangevinkt, zonder eerst
   langs alle tabjes te hoeven wisselen. */
.resort-tabs__tab.is-favorite::before {
  content: '★';
  margin-right: 4px;
  color: var(--medium);
}
.resort-tabs__tab.is-active.is-favorite::before { color: var(--accent-ink); }
/* Directe tik-feedback (CSS :active reageert instant, nog vóór JS de
   .is-active-klasse zet) — anders navigeert de pagina soms al weg vlak
   voordat je de highlight via JS ook echt ziet verschijnen. */
.resort-tabs__tab:active { background: var(--accent-soft); color: var(--accent); }
.resort-tabs__arrow {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  border-radius: 50%;
}
.resort-tabs__arrow:hover { background: var(--bg-sunken); }
/* Op mobiel is er geen ruimte voor pijltjes — daar veeg je gewoon de
   tabjes-rij zelf opzij (native touch-scroll werkt al via overflow-x). */
@media (max-width: 640px) {
  .resort-tabs__arrow { display: none; }
}

/* Op mobiel: standaard ingeklapt (alleen vlag/naam/status op één regel) —
   bij honderden parken scheelt dit flink in scrollen. Klik erop en de kaart
   klapt open met alle openingstijden-soorten (en, bij een resort, de
   bijbehorende parken) — zie parks_browser.js voor het uitklap-gedrag
   zelf. Land staat al in de zijbalk-filter, dus dat hoeft niet mee. */
@media (max-width: 640px) {
  .park-card-grid { grid-template-columns: 1fr; gap: 6px; }
  .park-card { flex-direction: column; align-items: stretch; padding: 10px 14px; min-width: 0; cursor: pointer; }
  .park-card__star { position: absolute; top: 10px; right: 10px; }
  /* Geen vaste padding-right meer: die 22px was er puur om het sterretje
     (absoluut, rechtsboven) niet over het pijltje te laten vallen — maar
     stond er ook als er helemaal géén sterretje was (uitgelogd, en bij
     resort-kaarten), en duwde status + pijltje dan onnodig van de
     rechterrand af. Nu alleen ruimte reserveren op kaarten die dat
     sterretje ook echt hebben (.park-card--has-star, gezet in
     parks_list.php). */
  .park-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 0; }
  .park-card--has-star .park-card__head { padding-right: 24px; }
  .park-card__flag { margin-bottom: 0; flex-shrink: 0; }
  .park-card__name { flex: 1 1 auto; min-width: 0; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .park-card__group { display: none; }
  /* margin-left:auto i.p.v. leunen op flex:1 van de naam — zo staat de
     status ook rechts als de naam kort is óf (bij resort-kaarten) juist
     over meerdere regels mag afbreken. */
  .park-card__status-compact { display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; flex-shrink: 0; margin-left: auto; text-align: right; }
  /* Status en pijltje horen als één blok tegen de rechterrand te staan —
     de 10px tussenruimte van .park-card__head is daar te veel. */
  .park-card__chevron { margin-left: -4px; }
  .park-card__status-compact .pulse-dot { width: 6px; height: 6px; }
  .park-card__status-compact--open { color: var(--open); }
  .park-card__status-compact--closed,
  .park-card__status-compact--unknown { color: var(--ink-faint); }
  .park-card__chevron { display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; color: var(--ink-faint); transition: transform var(--transition); }
  .park-card__chevron svg { display: block; }
  .park-card.is-expanded .park-card__chevron { transform: rotate(180deg); color: var(--accent); }
  /* Standaard dichtgeklapt (hoogte 0, inhoud verborgen) — pas bij
     .is-expanded schuift dit open. max-height i.p.v. height, want de
     daadwerkelijke inhoud-hoogte varieert per park (aantal extra
     tijdvensters, wel/niet een resort). display:block i.p.v. de
     display:contents van de desktop-standaardregel — die zou hier de
     max-height/overflow gewoon negeren (geen eigen boks om te knippen). */
  .park-card__details {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 220ms ease, opacity 180ms ease;
  }
  .park-card.is-expanded .park-card__details {
    max-height: 260px;
    opacity: 1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .park-card__footer { flex-shrink: 0; margin-top: 0; padding-top: 0; border-top: none; }
  .park-card__hours { display: inline; }
  .park-card__extra-hours { display: block; }
  .park-card--resort .park-card__name { white-space: normal; overflow: visible; text-overflow: clip; }
  /* Enige echte navigatie-doel binnen de uitgeklapte inhoud — duidelijk
     eigen knop-achtig uiterlijk i.p.v. "ergens op de kaart klikken", dat
     laatste bleek op mobiel te wisselvallig (soms navigeerde het niet
     op tijd mee, soms ineens toch tussendoor). */
  .park-card__view-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
  }
}

/* ---- ster (gedeeld met de gunstige animaties van elders) ---- */
.parkrow__star, .ride-star {
  flex-shrink: 0;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 2px;
  transition: color var(--transition), transform 150ms ease;
}
.parkrow__star:hover, .ride-star:hover { color: var(--medium); }
.parkrow__star.is-active, .ride-star.is-active { color: var(--medium); }
.parkrow__star:active, .ride-star:active { transform: scale(1.15); }
.parkrow__star.star-pop, .ride-star.star-pop { animation: star-pop 320ms ease; }
.parkrow__star.star-error, .ride-star.star-error { animation: star-error 500ms ease; color: var(--high) !important; }
@keyframes star-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes star-error {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Favoriete attracties: alleen het sterretje zelf markeert dit, geen
   extra rand/achtergrond meer om de hele rij — dat voelde te druk. */
.ride-tile__info { position: relative; }
.ride-tile .ride-star { margin-right: 2px; }

/* ==========================================================================
   Park detail — hero + refresh ring
   ========================================================================== */

.breadcrumb { margin-bottom: 18px; color: var(--ink-faint); font-size: .84rem; }
.breadcrumb a { color: var(--ink-faint); font-weight: 600; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { margin: 0 6px; }

.pull-hint { display: none; margin: -8px 0 20px; font-size: .74rem; color: var(--ink-faint); animation: pull-hint-bob 2200ms ease-in-out infinite; }
@keyframes pull-hint-bob {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(3px); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Zwevende topbalk (park.php) — zelfde stijl als het dock: één deelbare
   basisklasse (.floating-bar) die beide met elkaar verbindt.
   ========================================================================== */

.floating-bar {
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  /* Bewust GEEN 999px (volledige pil) zoals het dock — dit element kan
     meerdere regels hoog worden (extra tijdvensters, of een lange titel
     die op mobiel omklapt), en een volledig ronde pil op iets dat niet
     altijd één regel hoog is werd een misvormde ovaal i.p.v. een net
     afgeronde balk. */
  border-radius: 20px;
  box-shadow: var(--shadow-tile), 0 8px 24px rgba(0, 0, 0, .18);
}

.status-board { margin-bottom: 26px; }
.park-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  font-size: .85rem;
}
.park-overview__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.park-overview__flag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.park-overview__name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex-shrink: 0; margin-right: -4px; }
.park-overview__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
.park-overview__fact-icon { flex-shrink: 0; opacity: .85; }
.park-overview__fact--open { color: var(--open); }
.park-overview__fact--closed { color: var(--high); }
.park-overview__fact--unknown { color: var(--ink-faint); }
.park-overview__fact .status-dot { width: 7px; height: 7px; }
.park-overview__clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.park-overview__tz { font-family: var(--font-mono); font-weight: 600; color: var(--ink-faint); font-size: .78rem; }

/* ==========================================================================
   Openingstijden + onderhoud-kaart — apart van de overzicht-balk hierboven,
   zodat die laatste altijd even hoog blijft ongeacht hoeveel tijdvensters/
   onderhoudsmeldingen een park heeft. Twee secties: op desktop naast elkaar
   als allebei aanwezig zijn (park-hours-card--split), op mobiel altijd
   onder elkaar (te smal voor twee kolommen).
   ========================================================================== */

.park-hours-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
}
.park-hours-section { padding: 14px 18px; }
.park-hours-section__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.park-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: .84rem;
  border-top: 1px solid var(--border);
}
.park-hours-row:first-of-type { border-top: none; padding-top: 0; }
.park-hours-row__time { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.park-hours-row--regular { color: var(--open); }
.park-hours-row--regular .park-hours-row__time { color: var(--open); }
.park-hours-row--extra { color: var(--accent); }
.park-hours-row--extra .park-hours-row__time { color: var(--accent); }

/* Onderhoud-sectie krijgt een net andere (amber) achtergrondtint dan de
   openingstijden-sectie erboven, zodat het toch opvalt zonder een aparte,
   losse kaart te hoeven zijn. */
.park-hours-section--maintenance {
  background: var(--medium-soft);
  border-top: 1px solid color-mix(in srgb, var(--medium) 30%, transparent);
}
.park-hours-section--maintenance .park-hours-section__title { color: var(--medium); }
.park-hours-row--maintenance-item { border-top-color: color-mix(in srgb, var(--medium) 18%, transparent); }
.park-hours-row__name { font-weight: 600; color: var(--ink); }
.park-hours-row__meta { color: var(--ink-faint); font-size: .78rem; white-space: nowrap; }

@media (min-width: 641px) {
  /* Alleen op desktop naast elkaar zetten, en alleen als er ook echt twee
     secties zijn om te verdelen (anders krijg je een halve, vreemd
     uitgerekte kolom als er alleen onderhoud of alleen tijden is). */
  .park-hours-card--split {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
  }
  .park-hours-card--split .park-hours-section--maintenance {
    border-top: none;
    border-left: 1px solid color-mix(in srgb, var(--medium) 30%, transparent);
  }
}

.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot--open { background: var(--open); box-shadow: 0 0 0 3px color-mix(in srgb, var(--open) 22%, transparent); }
.status-dot--closed { background: var(--high); }
.status-dot--unknown { background: var(--ink-faint); }

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   Tabs + ride tiles ("flip-board")
   ========================================================================== */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
/* Subtiele rand-fade als hint dat er meer tabs zijn om naar te scrollen
   (vooral op smalle schermen, waar niet alle tabs in beeld passen). */
.tabs-wrap { position: relative; max-width: 100%; }
.tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 1px; right: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--bg) 85%);
  pointer-events: none;
}
@media (min-width: 641px) {
  .tabs-wrap::after { display: none; }
}
.tab-select-wrap { display: none; }
.tab-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355585F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  font-weight: 600;
  font-size: .87rem;
  padding: 9px 14px 11px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition), border-color var(--transition);
}
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab__count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  opacity: .85;
}
.tab.is-active .tab__count { color: var(--accent); opacity: 1; }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadein 220ms ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Overzicht-tab: sectiekoppen, kaartjes-grid, 2-koloms detaillijst ---- */
.sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; flex-wrap: wrap; }
.sectionhead h2 { font-size: 1.02rem; font-weight: 700; }
.sectionhead .sub { font-size: .78rem; color: var(--ink-faint); margin-left: 8px; font-weight: 400; }
.sectionhead .more, .more.tab-jump {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.sectionhead .more:hover, .more.tab-jump:hover { text-decoration: underline; }

/* ---- Attracties als tabel-rijen (i.p.v. losse kaartjes-tegels) ---- */
.attr-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  overflow: hidden;
  margin: 14px 0 26px;
}
.attr-table__head {
  display: flex;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.attr-table__head span {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.attr-table__head span:first-child { flex: 1; }
.attr-table__head span:nth-child(2) { width: 100px; }
.attr-table__head span:nth-child(3) { width: 110px; }

.attr-row {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--transition);
}
.attr-row:last-child { border-bottom: none; }
.attr-row:hover { background: var(--bg-sunken); }
.attr-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-strong);
}
.attr-row--low::before { background: var(--open); }
.attr-row--medium::before { background: var(--medium); }
.attr-row--high::before { background: var(--high); }
.attr-row--down::before { background: var(--high); }
.attr-row--refurbishment::before { background: var(--medium); }
.attr-row--info::before { background: var(--ink-faint); }
.attr-row--closed { opacity: .64; }

.attr-row__name-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
}
.ride-star { flex-shrink: 0; }
.attr-row__name-wrap { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attr-row__name {
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attr-row__single-rider {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.attr-row__single-rider svg { flex-shrink: 0; opacity: .8; }
.attr-row__single-rider--closed { opacity: .6; }

.attr-row__wait-col { width: 100px; flex-shrink: 0; }
.attr-row__val { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.attr-row__val small { font-size: .6rem; font-weight: 700; color: var(--ink-faint); margin-left: 2px; text-transform: uppercase; letter-spacing: .04em; }
.attr-row--low .attr-row__val { color: var(--open); }
.attr-row--medium .attr-row__val { color: var(--medium); }
.attr-row--high .attr-row__val { color: var(--high); }
.attr-row__hours { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.attr-row__dash { color: var(--ink-faint); font-family: var(--font-mono); }

.attr-row__status-col { width: 110px; flex-shrink: 0; }
.status-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-sunken);
  color: var(--ink-faint);
}
.status-pill--low { background: var(--open-soft); color: var(--open); }
.status-pill--medium { background: var(--medium-soft); color: var(--medium); }
.status-pill--high { background: var(--high-soft); color: var(--high); }
.status-pill--down { background: var(--high-soft); color: var(--high); }
.status-pill--refurbishment { background: var(--medium-soft); color: var(--medium); }

/* Op smalle schermen: wachttijd- en statuskolom smaller maken (i.p.v. de
   statuskolom volledig verbergen zoals eerder — daardoor waren de
   "Storing"/"Onderhoud"-tags op mobiel niet meer te zien). De naam-kolom
   knipt zelf al netjes af met "…" als het te krap wordt. */
@media (max-width: 560px) {
  .attr-table__head span:nth-child(2),
  .attr-table__head span:nth-child(3) { display: none; }
  .attr-row__wait-col { width: 64px; }
  .attr-row__status-col { width: 74px; }
  .attr-row__status-col .status-pill { font-size: .62rem; padding: 2px 6px; white-space: nowrap; }
}


.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }

.simplelist {
  list-style: none;
  margin: 12px 0 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 14px;
}
.simplelist li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.simplelist li:last-child { border-bottom: none; }
.simplelist .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simplelist .time { color: var(--ink-soft); font-family: var(--font-mono); font-size: .82rem; text-align: right; flex-shrink: 0; }
.time--dash { color: var(--ink-faint); }

/* ---- Toiletten-tab ---- */
.toilet-list { list-style: none; margin: 0; padding: 0; }
.toilet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.toilet-row:last-child { border-bottom: none; }
.toilet-row__name {
  font-weight: 600;
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toilet-row__name::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-faint);
}
.toilet-row--open .toilet-row__name::before { background: var(--open); }
.toilet-row--closed .toilet-row__name { color: var(--ink-faint); }
.toilet-row__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.toilet-row__state { font-size: .78rem; font-weight: 700; color: var(--ink-faint); }
.toilet-row--open .toilet-row__state { color: var(--open); }
.toilet-row__crowd {
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  border-radius: 999px;
  padding: 2px 9px;
}

.resort-highlights__intro { color: var(--ink-faint); font-size: .84rem; margin: 0 0 18px; line-height: 1.5; }
.land-group { margin-bottom: 30px; }

.land-filter { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-sunken); border-radius: 999px; margin-bottom: 18px; }
.land-filter__btn {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.land-filter__btn:hover { color: var(--ink); }
.land-filter__btn.is-active { background: var(--accent); color: var(--accent-ink); }
.land-filter__view { display: none; }
.land-filter__view.is-active { display: block; }
.land-group__title {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

/* Attracties/shows/horeca/virtuele wachtrij staan nu als rustige lijst met
   scheidingslijnen, net als een echt wachttijdbord — niet meer als losse
   kaartjes in een grid. */
.ride-grid {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.ride-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: none;
  box-shadow: none;
}
.ride-tile:last-child { border-bottom: none; }

.ride-tile__info { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.ride-tile__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--closed-grey); }
/* Bij attracties zit de statuskleur al in de plaquette (gloed + cijferkleur)
   — een extra stipje ernaast is dan overbodig. Bij shows/horeca/virtuele
   wachtrij, die geen genummerde plaquette hebben, blijft het stipje wél
   het enige statussignaal. */
.ride-tile--kind-ride .ride-tile__dot { display: none; }
.ride-tile__name {
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* De plaquette: het hart van het ontwerp. Vaste breedte, gecentreerd,
   tabulaire cijfers zodat wachttijden netjes uitlijnen als een vertrekbord,
   met een zachte gloed in de statuskleur. */
.ride-tile--kind-ride .ride-tile__wait {
  flex: 0 0 auto;
  min-width: 58px;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 10px 5px;
  border-radius: 10px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.ride-tile--kind-ride .ride-tile__wait::before { display: none; }
.ride-tile__num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ride-tile__unit { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.ride-tile__closed { font-size: .76rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }

.ride-tile__wait-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.ride-tile__single-rider {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ride-tile__single-rider--closed { opacity: .6; }

.ride-tile__wait {
  font-family: var(--font-mono);
  align-self: center;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
  position: relative;
}
/* Onderhoudsinfo (tot wanneer, wel/niet open in het weekend) — op een eigen
   regel onder de "Onderhoud"-tekst i.p.v. ernaast (width:100% forceert de
   omslag binnen de flex-rij hierboven). */
.ride-tile__maintenance {
  width: 100%;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 500;
  color: var(--ink-faint);
  white-space: normal;
}

/* De gloed hoort bij de wachttijd-ernst (laag/gemiddeld/hoog in minuten) en
   is bedoeld voor het kleine cijfer-kaartje van een attractie. Shows en
   horeca hebben geen "wachttijd" — die kregen deze status alleen omdat
   "open" toevallig ook op --low staat, waardoor er ten onrechte een hele
   gloeiende rand om het showtijden-blok verscheen. Daarom bewust beperkt
   tot .ride-tile--kind-ride. */
.ride-tile--kind-ride.ride-tile--low .ride-tile__wait { border-color: color-mix(in srgb, var(--open) 45%, var(--border)); box-shadow: 0 0 16px -5px var(--glow-open); }
.ride-tile--low .ride-tile__num { color: var(--open); }

.ride-tile--kind-ride.ride-tile--medium .ride-tile__wait { border-color: color-mix(in srgb, var(--medium) 45%, var(--border)); box-shadow: 0 0 16px -5px var(--glow-medium); }
.ride-tile--medium .ride-tile__num { color: var(--medium); }

.ride-tile--kind-ride.ride-tile--high .ride-tile__wait { border-color: color-mix(in srgb, var(--high) 45%, var(--border)); box-shadow: 0 0 16px -5px var(--glow-high); }
.ride-tile--high .ride-tile__num { color: var(--high); }

.ride-tile--closed { opacity: .62; }

/* Storing (Down): duidelijk anders dan een normale sluiting — dit is een
   attractie die eigenlijk zou moeten draaien maar kapot/vastgelopen is. */
.ride-tile--down { opacity: 1; }
.ride-tile--down .ride-tile__closed { color: var(--high); font-weight: 700; }
.ride-tile--down .ride-tile__closed::before { content: "⚠ "; }
.ride-tile--down .ride-tile__dot { background: var(--high); animation: pulse-warn 1.6s ease-in-out infinite; }

/* Onderhoud (Refurbishment): gepland, dus rustiger dan een storing maar wel
   te onderscheiden van een simpele dagsluiting. */
.ride-tile--refurbishment { opacity: .82; }
.ride-tile--refurbishment .ride-tile__closed { color: var(--medium); }
.ride-tile--refurbishment .ride-tile__closed::before { content: "🔧 "; }
.ride-tile--refurbishment .ride-tile__dot { background: var(--medium); }

@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Neutrale status (bijv. show-/horeca-status onbekend): geen alarmerende kleur. */
.ride-tile--info .ride-tile__dot { background: var(--ink-faint); }
.ride-tile__num--text { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--glow-open); color: var(--open); }
.ride-tile__closed--neutral { color: var(--ink-faint); }
.ride-tile__dash { color: var(--ink-faint); font-family: var(--font-mono); }

/* Shows: alle showtijden van vandaag als losse chips, wrappen vrij onder de naam. */
.ride-tile--kind-show { flex-direction: column; align-items: stretch; gap: 8px; }
/* Zonder deze regel wordt de naam samengeperst tot bijna 0 breedte zodra de
   fastpass-badges ("Gratis reserveringstijd", prijs, tijd) niet passen —
   met desastreus resultaat: de naam breekt dan per letter af. Dezelfde
   kolom-layout als bij shows lost dat op: naam op een eigen volle regel,
   badges er ruim onder. */
.ride-tile--kind-fastpass { flex-direction: column; align-items: stretch; gap: 8px; }
.ride-tile--kind-fastpass .ride-tile__wait--fastpass { min-width: 0; }
.ride-tile__wait--showtimes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  background: transparent;
  padding: 0;
}
.ride-tile__wait--showtimes::before { display: none; }
.showtime-chip {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--bg-sunken);
  color: var(--ink);
}
/* Voorbije showtijden gedempt, zodat de eerstvolgende show opvalt. */
.showtime-chip--past { opacity: .42; font-weight: 500; }
/* Eén doorlopend tijdvak (bijv. "10:00 – 22:00") i.p.v. een losse
   starttijd — iets breder en met een subtiele accentrand, zodat het
   visueel niet aanvoelt als een kort showmoment. */
.showtime-chip--range {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid var(--border);
}

/* Varianten van dezelfde show (het 'type'-veld van ThemeParks.wiki, bijv.
   een speciale editie van een avondshow) onder elkaar, elk met hun eigen
   tijden. Namen komen letterlijk uit de API. */
.showvariant { display: flex; flex-direction: column; gap: 4px; }
.showvariant + .showvariant { margin-top: 8px; }
.showvariant__label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.showvariant__times { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Compacte pil-per-tijdstip weergave (meerdere show-types door elkaar,
   chronologisch — bijv. Aquanura). Zelfde pil-stijl als de losse
   showtime-chip elders, maar dan met tijd + shownaam samen in één pilletje
   i.p.v. een volle rij — dat oogde als een blok verf, dit niet. */
.showvariant-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.showvariant-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: .78rem;
}
.showvariant-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.showvariant-pill__time { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.showvariant-pill__name { color: var(--ink-soft); font-weight: 600; }
.showvariant-pill--past { opacity: .45; }
/* Elke show op een locatie krijgt consequent dezelfde herkenningskleur
   stipje, zodat je in één oogopslag ziet welke show wanneer speelt zonder
   de naam steeds te hoeven herlezen — losse, herkenbare palet-kleuren
   i.p.v. statuskleuren. */
.showvariant-pill__dot--0 { background: #6C7AE0; }
.showvariant-pill__dot--1 { background: #3FCB79; }
.showvariant-pill__dot--2 { background: #E0A83E; }
.showvariant-pill__dot--3 { background: #E06C9F; }
.showvariant-pill__dot--4 { background: #4FC3D9; }
.showvariant-pill__dot--5 { background: #C97FE0; }

/* Betaalde/theater-shows (IsTheaterShow) krijgen een klein pilletje naast
   de tijd(en), zodat meteen duidelijk is dat dit geen gratis straatshow is. */
.theater-show-pill {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--medium);
  background: color-mix(in srgb, var(--medium) 16%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Fastpass / virtual queue: type-badge + korte uitleg, naast elkaar onder de naam. */
.ride-tile__wait--fastpass {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center;
  gap: 6px;
  background: transparent;
  padding: 0;
  font-family: inherit;
}
.ride-tile__wait--fastpass::before { display: none; }
.fastpass-badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-ink);
  white-space: nowrap;
}
.fastpass-meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fastpass-price {
  font-size: .66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.fastpass-price--free { background: color-mix(in srgb, var(--open) 16%, transparent); color: var(--open); }
.fastpass-price--paid { background: color-mix(in srgb, var(--medium) 18%, transparent); color: var(--medium); }

.empty-note {
  color: var(--ink-faint);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m);
  padding: 22px;
  text-align: center;
}

/* ==========================================================================
   Not found
   ========================================================================== */

.not-found { text-align: center; padding: 60px 20px; }
.not-found__emoji { font-size: 3rem; margin: 0 0 12px; }
.btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: 0 3px 0 rgba(15, 36, 56, .14), var(--shadow-tile);
}
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--primary:active { transform: translateY(0); filter: brightness(.98); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.site-footer__inner {
  max-width: 1760px;
  margin: 0 auto;
  padding: 26px 20px 40px;
  text-align: center;
  color: var(--ink-faint);
  font-size: .82rem;
}
.footer-note { margin: 0 0 6px; }
.footer-powered { margin: 0; font-weight: 600; }
.footer-powered a { color: var(--accent-ink); background: var(--accent); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }

/* "Laatst ververst"-pil onderaan de pagina (park.php) — bevat nu ook de
   ververs-knop + teller-ring zelf (was eerder een los, apart bedieningspaneel
   bovenaan de pagina). Zo hoef je niet meer terug naar boven te scrollen om
   handmatig te kunnen verversen, en is er nog maar één ververs-bediening
   i.p.v. twee. id="refresh-btn" / "refresh-progress" / "refresh-status" —
   dezelfde ID's als voorheen, dus assets/js/app.js hoeft niet te weten dát
   dit verplaatst is. */
.footer-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 8px;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.footer-refresh-pill:hover { border-color: var(--accent); color: var(--ink); }
.footer-refresh-pill__ring { position: relative; width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; }
.footer-refresh-pill__svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.footer-refresh-pill__track { fill: none; stroke: var(--border); stroke-width: 4; }
.footer-refresh-pill__progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 150.8;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.footer-refresh-pill__icon { position: relative; z-index: 1; transition: transform 500ms ease; }
.footer-refresh-pill:hover .footer-refresh-pill__icon { transform: rotate(90deg); }
.footer-refresh-pill.is-loading .footer-refresh-pill__icon { animation: spin 900ms linear infinite; }

/* ==========================================================================
   Account navigation (login / register / logged-in menu)
   ========================================================================== */

.account-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .84rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--ink-soft);
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}
.account-link--ghost {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}
.account-link--ghost:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-sunken); }

.account-link--cta {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 2px 0 rgba(15, 36, 56, .12);
}
.account-link--cta:hover { transform: translateY(-1px); filter: brightness(1.04); color: var(--accent-ink); }

.account-link--admin {
  color: var(--high);
  border-color: color-mix(in srgb, var(--high) 45%, transparent);
  background: color-mix(in srgb, var(--high) 12%, transparent);
}
.account-link--admin:hover { background: color-mix(in srgb, var(--high) 20%, transparent); color: var(--high); }

.account-link--user {
  background: var(--bg-sunken);
  color: var(--ink);
  padding-left: 6px;
}
.account-link--user:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.account-link__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.account-link__avatar--photo { object-fit: cover; background: var(--bg-sunken); }
.account-link__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.logout-form { display: inline-flex; margin: 0; }
.account-link--btn {
  border: 1.5px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
}
.account-link--btn:hover { color: var(--high); border-color: var(--high); background: color-mix(in srgb, var(--high) 10%, transparent); }

@media (max-width: 640px) {
  .account-link__name { max-width: 64px; }
  .account-link { padding: 7px 12px; font-size: .78rem; }
}

/* ==========================================================================
   Filter bar (Land / Groep)
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-tile);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.filter-field label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 700;
}
.filter-field select {
  appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C93A5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 38px 10px 16px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
  min-width: 170px;
}
.filter-field select:hover { border-color: var(--ink-soft); }
.filter-field select:focus-visible { border-color: var(--accent); }
.filter-reset {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  margin-left: auto;
}
.filter-reset:hover { color: var(--high); border-color: var(--high); background: color-mix(in srgb, var(--high) 10%, transparent); }

/* ==========================================================================
   Vlag-afbeeldingen (echte vlaggen i.p.v. emoji)
   ========================================================================== */

.flag-icon {
  display: inline-block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border);
  vertical-align: middle;
}
.flag-icon--fallback {
  width: auto;
  height: auto;
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 1;
}
.park-card__flag { display: inline-flex; }
.park-overview__flag .flag-icon { width: 20px; height: 15px; border-radius: 3px; }

/* ==========================================================================
   Auth pages (inloggen / registreren / account)
   ========================================================================== */

.auth-wrap { display: flex; justify-content: center; padding: 20px 0 40px; }
.auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(155deg, var(--bg-elevated), var(--bg-sunken));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 40px 36px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--border-strong);
  border-radius: calc(var(--radius-l) - 8px);
  opacity: .4;
  pointer-events: none;
}
.auth-card__badge {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
  box-shadow: 0 4px 0 rgba(15, 36, 56, .12);
  transform: rotate(-4deg);
}
.auth-card__title { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; }
.auth-card__subtitle { color: var(--ink-soft); margin: 0 0 26px; }

.auth-form { display: flex; flex-direction: column; gap: 18px; position: relative; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field span { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.auth-field small { font-size: .74rem; color: var(--ink-faint); }
.auth-field input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--ink);
  padding: 12px 16px;
  font-size: .95rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-field input:hover { border-color: var(--border-strong); }
.auth-field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.auth-submit { margin-top: 6px; border: none; cursor: pointer; width: 100%; text-align: center; }
/* Inloggen met Sleenhost ID. Bewust een omlijnde knop en niet de volle
   accentkleur: het gewone formulier eronder blijft in deze fase de
   hoofdweg, en twee even opvallende knoppen boven elkaar dwingen je tot
   kiezen voordat je weet waar het verschil in zit. */
.auth-id-button {
  display: block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  text-decoration: none;
}
.auth-id-button:hover { background: var(--bg-sunken); border-color: var(--ink-soft); }

/* Scheidingslijn met "of" ertussen. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  color: var(--ink-faint);
  font-size: .78rem;
  text-transform: lowercase;
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Inlogpagina sinds de overstap: uitleg, één knop, klaar. Zonder deze regel
   houdt de kaart de breedte van het oude formulier aan en valt vooral op hoe
   leeg hij is. */
.auth-card--compact { max-width: 26rem; }

/* Verwijzing naar Sleenhost ID op de accountpagina, op de plek waar je
   anders je wachtwoord zou wijzigen. */
.account-id-block {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m, 10px);
  background: var(--bg-sunken);
  text-align: left;
}
.account-id-block__title { margin: 0 0 6px; font-size: .95rem; font-weight: 700; }
.account-id-block__text { margin: 0 0 12px; font-size: .85rem; color: var(--ink-soft); }

.auth-switch { margin: 24px 0 0; font-size: .86rem; color: var(--ink-soft); text-align: center; }
.auth-switch a { color: var(--accent-ink); background: var(--accent); padding: 3px 10px; border-radius: 999px; font-weight: 700; transition: filter var(--transition); }
.auth-switch a:hover { filter: brightness(1.05); }
/* Zijpad-link onder een inlogkaart: gewone tekstlink i.p.v. de pil hierboven.
   Die pil is bedoeld voor één kort woord; een hele zin erin breekt over twee
   regels en valt dan uit elkaar in twee blokken kleur. */
.auth-switch--quiet a {
  /* Eigen regel onder de vraag. Achter de tekst aan zou hij bij een smal
     venster of een langere vertaling alsnog middenin afbreken, en juist dat
     uiteenvallen over twee regels zag er rommelig uit. */
  display: block;
  margin-top: 6px;
  background: none;
  color: var(--ink-soft);
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-switch--quiet a:hover { color: var(--ink); filter: none; }

.auth-error, .auth-success {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: .86rem;
  font-weight: 600;
  margin: 0 0 20px;
}
.auth-error { background: color-mix(in srgb, var(--high) 16%, transparent); color: var(--high); border: 1px solid color-mix(in srgb, var(--high) 30%, transparent); }
.auth-success { background: color-mix(in srgb, var(--open) 16%, transparent); color: var(--open); border: 1px solid color-mix(in srgb, var(--open) 30%, transparent); }

.account-card .account-list { margin: 0 0 26px; }

.avatar-editor { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 28px; }
.avatar-editor__preview {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 800;
  overflow: hidden;
  border: 3px solid var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border);
  position: relative;
}
.avatar-editor__preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor__preview.is-loading { opacity: .5; }
.avatar-editor__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.avatar-editor__upload-btn { cursor: pointer; }
.avatar-editor__hint { font-size: .76rem; color: var(--ink-faint); text-align: center; margin: 0; max-width: 34ch; }
.account-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.account-list dt { color: var(--ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; align-self: center; }
.account-list dd { margin: 0; font-weight: 600; align-self: center; }

.role-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
}
.role-pill--user { background: var(--bg-sunken); color: var(--ink-soft); }
.role-pill--admin { background: color-mix(in srgb, var(--high) 18%, transparent); color: var(--high); }

/* ==========================================================================
   Admin overview
   ========================================================================== */

.admin-section { padding-bottom: 20px; }
.admin-subtitle { color: var(--ink-soft); margin: 0 0 24px; }

/* ==========================================================================
   Changelog (alleen zichtbaar/bereikbaar voor beheerders)
   ========================================================================== */

.changelog-list { display: flex; flex-direction: column; gap: 18px; }
.changelog-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  padding: 20px 22px;
}
.changelog-entry__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 12px;
}
.changelog-entry__version {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  padding: 3px 12px;
  border-radius: 999px;
}
.changelog-entry__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.changelog-entry__date { color: var(--ink-faint); font-size: .82rem; margin-left: auto; }
.changelog-entry__empty-note { color: var(--ink-faint); font-size: .88rem; margin: 0; }
.changelog-entry__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.changelog-item { display: flex; align-items: baseline; gap: 10px; font-size: .92rem; }
.changelog-item__tag {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
}
.changelog-item__tag--new { background: color-mix(in srgb, var(--open) 18%, transparent); color: var(--open); }
.changelog-item__tag--improved { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.changelog-item__tag--fixed { background: color-mix(in srgb, var(--high) 18%, transparent); color: var(--high); }
.changelog-item__text { color: var(--ink); }

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-tile);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 16px; white-space: nowrap; }
.admin-table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border);
}
.admin-table tbody tr:not(:last-child) td { border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.admin-table--compact th, .admin-table--compact td { white-space: normal; padding: 16px 14px; }
.admin-row--blocked { opacity: .6; }
.admin-row--blocked:hover { opacity: 1; }

.admin-user-cell { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.admin-user-cell__name { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.admin-user-cell__email { font-size: .78rem; color: var(--ink-faint); }

.admin-activity-cell { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; }
.admin-activity-cell__login { color: var(--ink-faint); font-size: .78rem; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.status-pill--active { background: var(--glow-open); color: var(--open); }
.status-pill--blocked { background: var(--glow-high); color: var(--high); }

.admin-table__actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; min-height: 30px; }
.admin-icon-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}
.admin-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.admin-icon-btn--danger:hover { border-color: var(--high); color: var(--high); background: color-mix(in srgb, var(--high) 12%, transparent); }
.admin-icon-btn--active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-ghost--danger { color: var(--high); border-color: color-mix(in srgb, var(--high) 40%, transparent); }
.btn-ghost--danger:hover { background: color-mix(in srgb, var(--high) 12%, transparent); border-color: var(--high); }
.admin-you-tag { font-size: .7rem; font-weight: 600; color: var(--ink-faint); }
.admin-action-hint { font-size: .76rem; color: var(--ink-faint); font-style: italic; }

.admin-back {
  display: inline-block;
  font-size: .84rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.admin-back:hover { color: var(--ink); }
.admin-quicklinks { margin: 0 0 22px; }
.admin-quicklinks .btn { border: none; cursor: pointer; margin-top: 0; }

.admin-names-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-names-cleanup-toggle {
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.admin-names-cleanup-toggle:hover { color: var(--ink); border-color: var(--accent); background: var(--bg-sunken); }

.admin-names-parkpicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-names-parkpicker label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.admin-names-parkpicker select {
  appearance: none;
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C93A5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 38px 10px 16px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  min-width: 260px;
  max-width: 100%;
}

.admin-park-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-tile);
}
.admin-park-banner__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-park-banner__hours { margin-left: auto; font-family: var(--font-mono); font-size: .85rem; color: var(--ink-faint); }

.admin-names-section__title {
  font-size: .95rem;
  font-weight: 700;
  margin: 26px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-names-table th, .admin-names-table td { white-space: normal; }
.admin-names-original { color: var(--ink-soft); }
.admin-names-input {
  width: 100%;
  min-width: 220px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--ink);
  padding: 8px 12px;
  font-size: .88rem;
  font-family: inherit;
  transition: border-color var(--transition);
}
.admin-names-input:focus-visible { outline: none; border-color: var(--accent); }
.admin-names-input:not(:placeholder-shown) { border-color: var(--accent); }
.admin-names-actions { margin: 20px 0 10px; position: sticky; bottom: 16px; }
.admin-names-actions .btn { border: none; cursor: pointer; box-shadow: var(--shadow-soft); }

/* ==========================================================================
   Account CTA (subtiele banner voor niet-ingelogde bezoekers)
   ========================================================================== */

.account-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m);
  padding: 12px 18px;
  margin: -10px 0 24px;
  font-size: .85rem;
  color: var(--ink-soft);
}
.account-cta__icon { font-size: 1rem; }
.account-cta a {
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.add-widget-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 28px;
}
.add-widget-panel__title { font-size: 1.2rem; font-weight: 800; margin: 0 0 16px; }

/* ---- Stappenplan: voortgang, pad-keuze, stap-inleiding ---- */
.wizard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.wizard-head .add-widget-panel__title { margin: 0; }
.wizard-progress { display: flex; align-items: center; gap: 6px; }
.wizard-progress__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--transition), transform var(--transition);
}
.wizard-progress__dot.is-active { background: var(--accent); transform: scale(1.3); }
.wizard-progress__dot.is-done { background: var(--open); }

.wizard-step__intro { font-weight: 700; font-size: .95rem; margin-bottom: 14px; }
.wizard-step__no-options { color: var(--ink-faint); font-size: .88rem; padding: 10px 0; }

.wizard-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wizard-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  padding: 20px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.wizard-choice-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wizard-choice-card__icon { font-size: 1.7rem; }
.wizard-choice-card__label { font-weight: 800; font-size: 1.02rem; }
.wizard-choice-card__desc { font-size: .82rem; color: var(--ink-soft); }

.add-widget-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.widget-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.widget-type-option__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px 16px 14px;
  cursor: pointer;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-tile);
  position: relative;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.widget-type-option__card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.widget-type-option__icon-badge {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--bg-sunken);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition);
}
.widget-type-option__icon { font-size: 1.15rem; }
.widget-type-option__text { display: contents; }
.widget-type-option__label { font-weight: 700; font-size: .92rem; }
.widget-type-option__desc { font-size: .78rem; color: var(--ink-faint); line-height: 1.4; }
.widget-type-option input:checked + .widget-type-option__card {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-soft);
}
.widget-type-option input:checked + .widget-type-option__card .widget-type-option__icon-badge { background: var(--accent); }
.widget-type-option input:checked + .widget-type-option__card::after {
  content: "✓";
  position: absolute;
  top: 12px; right: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.widget-type-option input:focus-visible + .widget-type-option__card { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .add-widget-types { grid-template-columns: 1fr; gap: 8px; }
  .widget-type-option__card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; box-shadow: none; }
  .widget-type-option__icon-badge { width: 30px; height: 30px; border-radius: 8px; }
  .widget-type-option__icon { font-size: 1rem; }
  .widget-type-option__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .widget-type-option__label { font-size: .85rem; }
  .widget-type-option__desc { font-size: .72rem; line-height: 1.3; }
  .widget-type-option input:checked + .widget-type-option__card::after { top: 8px; right: 10px; }
}

.add-widget-limit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; max-width: 220px; }
.add-widget-limit label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.add-widget-limit select {
  appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C93A5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 34px 10px 14px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
}

.add-widget-park { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.add-widget-park label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.add-widget-park__hint { font-size: .78rem; color: var(--ink-faint); margin: -4px 0 4px; line-height: 1.4; }

.favorites-mode-options { display: flex; flex-direction: column; gap: 8px; }
.favorites-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.favorites-mode-option:hover { border-color: var(--border-strong); background: var(--bg-sunken); }
.favorites-mode-option input[type="radio"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.favorites-mode-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.favorites-mode-option strong { display: block; font-size: .87rem; font-weight: 700; color: var(--ink); }
.favorites-mode-option small { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }

.widget-favorite__top-rides { list-style: none; margin: 8px 0 4px 0; padding: 8px 0 0; border-top: 1px dashed var(--border); }
.widget-favorite__top-rides .widget-ride { padding: 5px 0; font-size: .8rem; }
.widget-favorite__top-rides .widget-ride__wait { font-size: .78rem; }

.add-widget-park input[type="text"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--ink);
  padding: 10px 14px;
  font-family: inherit;
  font-size: .92rem;
}
.park-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--bg);
}
.park-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.park-pill small { font-weight: 500; font-size: .72rem; color: var(--ink-faint); }
.park-pill:hover { border-color: var(--accent); }
.park-pill.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.park-pill.is-selected small { color: var(--accent-ink); opacity: .85; }
.park-pill[hidden] { display: none; }

.add-widget-park__count { color: var(--accent); font-weight: 700; }

.add-widget-actions { display: flex; justify-content: flex-end; gap: 10px; }
.add-widget-actions .btn { border: none; cursor: pointer; }
@media (max-width: 640px) {
  .add-widget-actions { flex-wrap: wrap; }
  .add-widget-actions .btn--primary { flex-basis: 100%; order: -1; }
  .add-widget-actions #wizard-back,
  .add-widget-actions #widget-add-cancel { flex: 1; }
}

/* ==========================================================================
   Zwevende actieknop op het dashboard (bewerken / widget toevoegen)
   Zie index.php. Rechtsonder, met exact dezelfde afstand tot de onderrand
   als het dock (incl. de veilige zone op telefoons met een thuisbalkje),
   zodat ze op dezelfde hoogte zweven i.p.v. net langs elkaar.
   ========================================================================== */

.dash-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 51; /* net boven het dock, zodat de uitgeklapte knoppen niet half wegvallen */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.dash-fab__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  /* Dicht in rust. Geen display:none maar wegschalen, zodat het uitklappen
     een beweging is en geen sprong. */
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.dash-fab[data-open="true"] .dash-fab__actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dash-fab__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.dash-fab__action:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.dash-fab__action[hidden] { display: none; }
.dash-fab__action-icon { font-size: 1rem; line-height: 1; }

/* In bewerkmodus heet "Bewerk homepagina" ineens "Opslaan" — dat is dan de
   knop waar je naartoe wilt, dus die springt eruit. */
.dash-fab__action.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.dash-fab__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.dash-fab__button:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.dash-fab[data-open="true"] .dash-fab__button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.dash-fab__icon { display: inline-flex; }

@media (max-width: 640px) {
  /* Dezelfde regel als het dock hanteert, zodat beide even hoog zweven op
     telefoons met een notch of thuisbalkje. */
  .dash-fab { right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .dash-fab__button { width: 42px; height: 42px; }
}

/* Terwijl het widget-toevoegpaneel openstaat heeft de knop geen functie meer
   en zou hij er alleen maar overheen liggen. */
.add-widget-panel:not([hidden]) ~ .dash-fab { display: none; }

.dashboard-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}
.dashboard-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dashboard-grid.is-editing .dashboard-column {
  min-height: 60px; /* zodat een lege kolom nog een duidelijk droppable gebied is tijdens het slepen */
  outline: 1.5px dashed transparent;
  border-radius: var(--radius-m);
  transition: outline-color var(--transition), background var(--transition);
}
.dashboard-grid.is-editing .dashboard-column.is-drop-target {
  outline-color: var(--accent);
  background: var(--accent-soft);
}

/* Edit-modus: drag-handle en verwijderknop pas zichtbaar/bruikbaar nadat
   er op "Bewerken" is geklikt, zodat het dashboard verder een rustige,
   opgeruimde weergave blijft. Geldt zowel voor de sleep-grid als de
   KPI-rij (die zijn eigen .is-editing-klasse krijgt, zie dashboard.js). */
.dashboard-grid.is-editing .widget-card__drag,
.dashboard-grid.is-editing .widget-card__remove,
.kpi-row.is-editing .widget-card__drag,
.kpi-row.is-editing .widget-card__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dashboard-grid.is-editing .widget-card,
.kpi-row.is-editing .widget-card--kpi {
  outline: 1.5px dashed var(--border-strong);
  outline-offset: 2px;
}
.dashboard-grid.is-editing .widget-card { cursor: grab; }
.dashboard-grid.is-editing .widget-card:active { cursor: grabbing; }

.dashboard-empty {
  flex: 1 1 100%;
  text-align: center;
  color: var(--ink-soft);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m);
  padding: 46px 20px;
  line-height: 1.7;
}
.dashboard-empty__emoji { display: block; font-size: 2.2rem; margin-bottom: 8px; }
.dashboard-empty__hint { font-size: .85rem; color: var(--ink-soft); }
/* Verwijzing naar de eenmalige koppelpagina (id-koppel.php). Staat op een
   eigen regel onder de uitleg, zodat het niet als onderdeel van de gewone
   "voeg een widget toe"-tekst wordt gelezen. */
.dashboard-empty__link { display: block; margin-top: 12px; }
.dashboard-empty__link a { color: var(--accent-ink); background: var(--accent); padding: 4px 12px; border-radius: 999px; font-weight: 700; }
/* Als de lege-staat-melding zichtbaar is, nemen de (nog lege) kolommen geen
   ruimte in — ze staan er alleen al zodat een nieuw toegevoegde widget
   meteen een kolom heeft om in te landen. */
.dashboard-grid:has(.dashboard-empty) .dashboard-column { flex-basis: 0; flex-grow: 0; overflow: hidden; }

/* ==========================================================================
   KPI-rij: compacte widgets (weer, sluitcountdown, volgende show,
   openingsstatus, nu populairst) vloeien samen in één gedeelde rij zonder
   eigen rand per widget — net als in het ontwerp. Bovenaan het dashboard,
   los van de gewone (versleepbare) kolommen-grid eronder.
   ========================================================================== */
.kpi-row {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-tile);
}
.widget-card--kpi {
  flex: 1 1 180px;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  box-shadow: none;
  background: transparent;
}
.widget-card--kpi:last-child { border-right: none; }
.widget-card--kpi .widget-card__header {
  padding: 10px 14px 4px;
  border-bottom: none;
}
.widget-card--kpi .widget-card__title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.widget-card--kpi .widget-card__park-name { display: none; }
.widget-card--kpi .widget-card__flag { display: none; }
.widget-card--kpi .widget-card__type-label { display: block; margin-left: 0; padding-left: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.widget-card--kpi .widget-card__body { padding: 0 14px 14px; }
@media (max-width: 860px) {
  .widget-card--kpi { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); }
}


.widget-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.widget-card.is-dragging { opacity: .4; }
.widget-card--broken { opacity: .7; }
.widget-card--loading { opacity: .85; }

.widget-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.widget-skeleton__line {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border) 50%, var(--bg-sunken) 75%);
  background-size: 200% 100%;
  animation: widget-skeleton-shimmer 1.4s ease-in-out infinite;
}
.widget-skeleton__line--short { width: 55%; }
@keyframes widget-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.widget-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.widget-card__drag {
  color: var(--ink-faint);
  cursor: grab;
  font-size: 1.1rem;
  line-height: 1;
  display: none;
  padding: 6px;
  margin: -6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.widget-card__drag:active { cursor: grabbing; }
.widget-card__flag.flag-icon { width: 20px; height: 15px; flex-shrink: 0; }
.widget-card__titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.widget-card__title { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: .92rem; width: 100%; }
.widget-card__park-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-card__type-label {
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 8px;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.widget-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}
.widget-card__pill .pulse-dot { width: 5px; height: 5px; }
.widget-card__pill--open { background: color-mix(in srgb, var(--open) 18%, transparent); color: var(--open); }
.widget-card__pill--closed { background: color-mix(in srgb, var(--high) 16%, transparent); color: var(--high); }
.widget-card__pill--unknown { background: var(--bg-sunken); color: var(--ink-faint); }
.widget-card__pill--unknown .pulse-dot { background: var(--ink-faint); }
.widget-card__pill--unknown .pulse-dot::after { display: none; }
.widget-card__subtitle { font-size: .74rem; color: var(--ink-faint); }
.widget-card__remove {
  display: none;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.widget-card__remove:hover { color: var(--high); background: var(--bg-sunken); }

.widget-card__body { padding: 14px 16px 16px; }

.widget-empty { color: var(--ink-faint); font-size: .85rem; margin: 0; }

.widget-ride-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-ride { display: flex; align-items: center; gap: 9px; font-size: .87rem; padding: 8px 0; border-bottom: 1px solid var(--border); }
.widget-ride:last-child { border-bottom: none; }

/* Favoriete shows: gestapelde opmaak i.p.v. naam+tijd naast elkaar — een
   showname is vaak te lang om op een telefoon nog ruimte over te laten
   voor de tijden ernaast. Naam + park-pil op de eerste regel (pil rechts
   uitgelijnd via margin-left:auto), tijden op de regel eronder — net als
   op de parkpagina zelf. */
.widget-ride--show { flex-direction: column; align-items: stretch; gap: 4px; }
.widget-ride__show-head { display: flex; align-items: center; gap: 8px; }
.widget-ride__show-head .widget-ride__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-ride__show-head .widget-ride__park-pill { margin-left: auto; flex-shrink: 0; }
.widget-ride__showtimes.widget-ride__showtimes--full { max-width: none; justify-content: flex-start; }

.widget-ride__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--closed-grey); flex-shrink: 0; }
.widget-ride__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-ride__name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.widget-ride__name-col .widget-ride__name { white-space: normal; }
/* Rij met ster + naam samen — .widget-ride__name-col zelf is een
   verticale kolom (naam boven de park-pil), dus de ster+naam moeten in
   een eigen horizontale sub-rij, anders komt de ster boven de naam te
   staan i.p.v. ernaast. */
.widget-ride__name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.widget-ride__park-pill {
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--bg-sunken);
  border-radius: 999px;
  padding: 1px 8px;
}
.widget-ride__wait { font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; }
.widget-ride__wait-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
@media (max-width: 560px) {
  .widget-ride__wait-col .status-pill { display: none; }
}
.widget-ride__wait--closed { font-family: var(--font-body); font-weight: 500; color: var(--ink-faint); font-size: .78rem; }
/* "Tijden onbekend" is geen statusuitspraak (niet open, niet gesloten) —
   moet dus altijd neutraal grijs blijven, ook als de show zelf wél "open"
   is (anders wint per ongeluk de groene statuskleur van .widget-ride--low,
   want die selector is specifieker dan --closed alleen). */
.widget-ride .widget-ride__wait--neutral { font-family: var(--font-body); font-weight: 500; color: var(--ink-faint) !important; font-size: .78rem; }
.widget-ride__wait--showtimes {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .76rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.widget-ride__wait--carousel { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.widget-ride__dash { color: var(--ink-faint); font-family: var(--font-mono); flex-shrink: 0; }
.widget-ride__showtimes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; max-width: 210px; }
.showtime-chip--mini { font-size: .68rem; padding: 2px 6px; border-radius: 6px; }
.showtime-chip--more { color: var(--ink-faint); padding-left: 5px; padding-right: 5px; }
.widget-favorite-items__section-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  margin: 14px 0 4px;
}
.widget-favorite-items__section-label:first-child { margin-top: 0; }
.showtime-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 44px; /* precies breed genoeg voor één "18:00"-tijd */
  touch-action: pan-x;
}
.showtime-scroll::-webkit-scrollbar { display: none; }
.showtime-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  text-align: right;
  white-space: nowrap;
}
.showtime-next, .showtime-prev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--bg-sunken);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), color var(--transition);
}
.showtime-next:hover, .showtime-prev:hover { background: var(--accent); color: var(--accent-ink); }
.widget-ride--low .widget-ride__dot { background: var(--open); }
.widget-ride--low .widget-ride__wait { color: var(--open); }
.widget-ride--medium .widget-ride__dot { background: var(--medium); }
.widget-ride--medium .widget-ride__wait { color: var(--medium); }
.widget-ride--high .widget-ride__dot { background: var(--high); }
.widget-ride--high .widget-ride__wait { color: var(--high); }
.widget-ride--closed .widget-ride__dot { background: var(--closed-grey); }
.widget-ride--down .widget-ride__dot { background: var(--high); }
.widget-ride--down .widget-ride__wait { color: var(--high); font-weight: 700; }
.widget-ride--refurbishment .widget-ride__dot { background: var(--medium); }
.widget-ride--refurbishment .widget-ride__wait { color: var(--medium); }

.widget-favorites-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-favorite-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  border-radius: 8px;
}
.widget-favorite-row:last-child { border-bottom: none; }
.widget-favorite-row:hover { background: var(--bg-sunken); }
.widget-favorite-link { display: flex; align-items: center; gap: 11px; padding: 9px 6px; text-decoration: none; color: inherit; }
.widget-favorite__flag { display: inline-flex; flex-shrink: 0; }
.widget-favorite__flag .flag-icon { width: 22px; height: 16px; border-radius: 3px; }
.widget-favorite__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.widget-favorite__name { font-weight: 600; font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-favorite__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  font-size: .68rem;
  font-weight: 700;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--ink-faint);
}
.widget-favorite__status .widget-ride__dot { width: 6px; height: 6px; background: var(--closed-grey); }
.widget-favorite-row--open .widget-favorite__status { background: var(--glow-open); color: var(--open); }
.widget-favorite-row--open .widget-ride__dot { background: var(--open); }
.widget-favorite-row--closed .widget-favorite__status { color: var(--ink-faint); }
.widget-favorite__arrow { color: var(--ink-faint); flex-shrink: 0; transition: transform var(--transition); }
.widget-favorite-row:hover .widget-favorite__arrow { transform: translateX(2px); color: var(--accent); }

.widget-card__status-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 8px;
}
.widget-card__status-label .pulse-dot { width: 6px; height: 6px; }
.widget-card__status-label--open { color: var(--open); }
.widget-card__status-label--closed { color: var(--high); }
.widget-card__status-label--unknown { color: var(--ink-faint); }
.widget-card__status-label--unknown .pulse-dot { background: var(--ink-faint); }
.widget-card__status-label--unknown .pulse-dot::after { display: none; }

/* ---- Drukte-meter ---- */
/* ---- Nu populairst ---- */
.busiest-now { display: flex; flex-direction: column; gap: 4px; }
.busiest-now__name { font-weight: 700; font-size: .95rem; }
.busiest-now__wait { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 800; color: var(--high); }
.busiest-now__wait small { font-size: .7rem; font-weight: 700; margin-left: 3px; color: var(--ink-faint); text-transform: uppercase; }

/* ---- Sluitcountdown ---- */
.closing-countdown { display: flex; flex-direction: column; gap: 8px; }
.closing-countdown__label { font-weight: 700; font-size: 1rem; }
.closing-countdown__bar { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.closing-countdown__fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 400ms ease; }
.closing-countdown--last-hour .closing-countdown__label { color: var(--medium); }
.closing-countdown--last-hour .closing-countdown__fill { background: var(--medium); }
.closing-countdown__hours { font-size: .74rem; color: var(--ink-faint); font-family: var(--font-mono); }

/* ---- Weersvooruitzicht ---- */
.weather-forecast { display: flex; justify-content: space-between; gap: 4px; }
.weather-forecast__slot { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.weather-forecast__hour { font-size: .68rem; color: var(--ink-faint); font-family: var(--font-mono); }
.weather-forecast__icon { font-size: 1.3rem; line-height: 1; }
.weather-forecast__temp { font-size: .82rem; font-weight: 700; }
.weather-forecast__rain { font-size: .64rem; color: var(--accent); font-weight: 600; }

/* ---- Volgende show ---- */
.next-show { display: flex; flex-direction: column; gap: 4px; }
.next-show__name { font-weight: 700; font-size: .95rem; }
.next-show__time { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; }
.next-show__countdown { font-size: .78rem; color: var(--accent); font-weight: 600; }

.crowd-meter { display: flex; flex-direction: column; gap: 8px; }
.crowd-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.crowd-meter__label { font-size: 1.1rem; font-weight: 800; }
.crowd-meter__avg { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); }
.crowd-meter__bar { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.crowd-meter__fill { height: 100%; border-radius: 999px; transition: width 400ms ease; }
.crowd-meter__note { font-size: .74rem; color: var(--ink-faint); margin: 0; }
.crowd-meter--quiet .crowd-meter__label, .crowd-meter--quiet .crowd-meter__fill { color: var(--open); background: var(--open); }
.crowd-meter--busy .crowd-meter__label, .crowd-meter--busy .crowd-meter__fill { color: var(--medium); background: var(--medium); }
.crowd-meter--very-busy .crowd-meter__label, .crowd-meter--very-busy .crowd-meter__fill { color: var(--high); background: var(--high); }

/* ---- Weer-widget ---- */
.weather-widget { display: flex; align-items: center; gap: 14px; }
.weather-widget__icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }
.weather-widget__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weather-widget__temp { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; }
.weather-widget__desc { font-size: .84rem; color: var(--ink-soft); }
.weather-widget__feels { font-size: .74rem; color: var(--ink-faint); }

.widget-status__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.widget-status__stat {
  flex: 1 1 108px;
  min-width: 108px;
  background: var(--bg-sunken);
  border-radius: 9px;
  padding: 10px 12px;
}
.widget-status__stat--wide { flex-basis: 100%; }
.widget-status__label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}
.widget-status__val {
  display: block;
  margin-top: 3px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
  overflow-wrap: break-word;
}
.widget-status__val small { font-weight: 500; color: var(--ink-faint); font-size: .78rem; }
.widget-status__note { margin: 10px 0 0; font-size: .74rem; color: var(--ink-faint); line-height: 1.4; }

.widget-card:has(.widget-card__status-label--open) { border-color: color-mix(in srgb, var(--open) 35%, var(--border)); }
.widget-card:has(.widget-card__status-label--closed) { border-color: color-mix(in srgb, var(--high) 30%, var(--border)); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .status-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .site-main { padding: 16px 14px 40px; }
  .parks-toolbar { margin-bottom: 16px; }
  .parks-toolbar__row { margin-bottom: 10px; }
  .search-bar { padding: 10px 14px; margin-bottom: 10px; }
  .status-board { margin-bottom: 14px; }
  /* Tabmenu op mobiel: boven het dock, maar nu met een echte, ondoorzichtige
     pil-achtergrond (zelfde .floating-bar-stijl als het dock zelf) i.p.v.
     kale tekst met een vervagingschaduw erachter — die vorige versie kon
     nog steeds "verdrinken" tegen drukke pagina-inhoud erachter, dit niet
     meer. Scheelt nog steeds hetzelfde bovenaan de pagina (geen los
     tabmenu-blok meer daar), en blijft bereikbaar zonder terug te
     scrollen. */
  .tabs-wrap {
    position: fixed;
    left: 50%;
    /* Kleiner en dichter tegen het dock aan getrokken (optie "D") — voelt
       zo als één samenhangend geheel i.p.v. twee losse dingen die
       toevallig naast elkaar staan. Bewust NIET een vaste px-waarde: het
       dock zelf staat op mobiel op max(12px, veilige-zone-onderin) vanaf
       de rand (voor telefoons met een notch/thuis-balkje) — een vaste
       waarde hier zou op zulke telefoons juist overlappen i.p.v. erboven
       staan. Dus: dezelfde afstand-tot-de-rand als het dock, plus de
       hoogte van het dock zelf (~52px), plus een kloof (12px). */
    bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 52px + 12px);
    transform: translateX(-50%);
    z-index: 45;
    margin: 0;
    /* display:inline-flex + align-items:center i.p.v. het eerdere gewone
       blok-element met een line-height-truc — die bleef onbetrouwbaar
       sluiten om de inhoud heen. Dit is de directe, voorspelbare manier
       om een bakje precies om zijn eigen inhoud te laten passen: geen
       giswerk meer via regelhoogte, gewoon een flex-container die zichzelf
       op zijn kind afstemt. */
    display: inline-flex;
    align-items: center;
    padding: 3px;
    max-width: calc(100vw - 24px);
    /* De echte pil-achtergrond zit HIER, op de niet-scrollende buitenkant
       — niet op .tabs zelf, anders zou de vervaging hieronder ook de rand
       van de pil gedeeltelijk laten verdwijnen i.p.v. alleen de inhoud. */
    background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-tile), 0 14px 36px rgba(0, 0, 0, .45);
  }
  .tabs-wrap::after { display: none; }
  .tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    border: none;
    box-shadow: none;
    /* Alleen rechts vervagen (daar zit meer om te scrollen als er veel
       tabs zijn) — deze vervaging valt nu binnen de pil-achtergrond van
       .tabs-wrap, dus je ziet gewoon diezelfde pilkleur doorschemeren
       i.p.v. dat de pil-rand zelf mee vervaagt. */
    mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    scroll-snap-align: start;
    flex-shrink: 0;
    /* Vaste hoogte + flex-centrering i.p.v. op padding+regelhoogte te
       vertrouwen om de tekst verticaal te centreren — dat bleef op de een
       of andere manier net niet precies genoeg sluiten. Dit kan niet meer
       "net iets te hoog" uitpakken. */
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    margin: 0;
    background: none;
    /* Expliciet ALLE randen resetten, niet alleen "border: none" — de
       desktop-basisstijl (voor grotere schermen) zet border-bottom als
       losse eigenschap met een échte breedte+stijl ("2px solid
       transparent", puur onzichtbaar gemaakt via een transparante kleur
       i.p.v. écht weggehaald). Dat schemerde hier nog door als een lichte
       lijn onder de tabs, met de bijbehorende regelhoogte als de "te veel
       ruimte eronder". */
    border: none;
    border-bottom: none;
    box-shadow: none;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color var(--transition), background var(--transition);
  }
  /* Volle, ondoorzichtige accentkleur i.p.v. de eerdere zachte tint — dat
     gaf te weinig contrast tussen actief/inactief om er in één oogopslag
     doorheen te scannen. Witte tekst op de heldere accentkleur (--accent-ink,
     zelfde combinatie als het profielrondje in het dock al gebruikt). */
  .tab.is-active { color: var(--accent-ink); background: var(--accent); font-weight: 700; border-bottom: none; }
  .tab.is-active .tab__count { color: inherit; opacity: .85; }
  .tab__count { color: inherit; opacity: .7; }
  .tab-select-wrap { display: none; }
  /* De pagina moet onder deze vaste strook + het dock zelf voldoende
     ruimte overhouden, anders verdwijnt de laatste inhoud er half onder —
     zelfde calc()-redenering als hierboven bij .tabs-wrap, anders klopt
     dit niet meer op een telefoon met een groter veilige-zone-onderin. */
  .rides-section { padding-bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 52px + 12px + 42px + 14px); }
  /* .park-overview zelf is al responsief opgezet (flex-wrap) — op mobiel
     alleen wat minder padding en de klok/tijdzone iets compacter, zodat
     de rij niet meteen naar een tweede regel hoeft te breken. */
  .park-overview { padding: 12px 14px; gap: 10px; }
  .park-overview__row { gap: 10px; font-size: .8rem; }
  .park-overview__tz { display: none; }
  .park-hours-section { padding: 12px 14px; }
  .pull-hint { display: block; }
  .ride-grid { grid-template-columns: 1fr; }
  .detail-cols { grid-template-columns: 1fr; gap: 20px; }
  .parks-browser__layout { grid-template-columns: 1fr; gap: 12px; }
  .country-sidebar {
    position: static;
    max-height: none;
    flex-direction: column;
    padding: 10px;
    min-width: 0;
  }
  /* Standaard (niet aan het herordenen): één compacte balk — [herorden-
     icoon] [favorieten-icoon] [landen-keuzelijst] — i.p.v. alle landen als
     losse knoppen (bij tientallen landen een veel te lange horizontaal te
     scrollen rij) of de losse tekst-knoppen van de desktop-zijbalk. De
     sleepbare lijst blijft wél nodig zodra je op het herorden-icoon tikt
     (daar kan een keuzelijst niet mee dat), dus dan draaien we het om via
     :has(). */
  .country-sidebar__editrow,
  .country-item--all,
  .country-item--favorites {
    display: none;
  }
  .country-sidebar:not(:has(.country-sidebar__list--reorderable.is-editing)) .country-sidebar__list {
    display: none;
  }
  .country-sidebar:has(.country-sidebar__list--reorderable.is-editing) .country-mobile-select {
    display: none;
  }
  .country-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .country-toolbar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--ink-soft);
    font: inherit;
    font-weight: 600;
    font-size: .84rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .country-toolbar__btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .country-mobile-select {
    flex: 1;
    min-width: 140px;
    padding: 11px 36px 11px 14px;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-m);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0A3AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  /* In herordenen-stand: gewoon de normale verticale, sleepbare lijst
     tonen (niet de eerdere horizontaal-scrollende rij) — dat is een
     bewuste, aparte handeling die je niet vaak doet, dus scrollen daar is
     minder een probleem dan bij de dagelijkse land-keuze hierboven. */
  .country-item { white-space: normal; }
  .filter-bar { gap: 8px; }
  .filter-field { min-width: 0; flex: 1 1 45%; }
  .filter-field select { min-width: 0; width: 100%; }
  .auth-card { padding: 28px 22px; }
  .account-list { grid-template-columns: 1fr; }
  .account-list dt { margin-top: 8px; }
  .dashboard-grid { flex-direction: column; align-items: stretch; }
  .dashboard-column { width: 100%; }
  .add-widget-types { grid-template-columns: 1fr; }
  .admin-table--compact th, .admin-table--compact td { padding: 13px 10px; font-size: .82rem; }
  .admin-user-cell { min-width: 130px; }
  .admin-icon-btn { width: 28px; height: 28px; }
}

/* ==========================================================================
   Nieuws-pagina (RSS-overzicht, altijd bereikbaar — ook zonder account)
   ========================================================================== */

.news-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.news-head__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
.news-head__subtitle { color: var(--ink-soft); margin: 4px 0 0; }

.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.news-filter__btn {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.news-filter__btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.news-filter__btn.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.news-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  font-family: inherit;
  transition: border-color var(--transition), transform var(--transition);
}
.news-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.news-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-sunken);
  flex-shrink: 0;
}
.news-card__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.news-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.news-card__meta { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--ink-faint); }
.news-card__source { font-weight: 700; color: var(--accent); }
.news-card__title { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.news-card__summary { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Voorbeeldpaneel: schuift van onderaf omhoog (mobiel) / verschijnt
   gecentreerd (desktop) — toont alleen de samenvatting + afbeelding uit de
   RSS-feed van de bron zelf, nooit het volledige artikel. */
.news-panel { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.news-panel[hidden] { display: none; }
.news-panel__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.news-panel__sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-tile);
}
.news-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, black 35%, transparent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.news-panel__image { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-sunken); }
.news-panel__meta { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-faint); padding: 16px 20px 0; }
.news-panel__source { font-weight: 700; color: var(--accent); }
.news-panel__title { font-size: 1.15rem; font-weight: 800; line-height: 1.35; padding: 8px 20px 0; }
.news-panel__summary { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; padding: 10px 20px 0; }
.news-panel__link {
  display: inline-block;
  margin: 18px 20px 20px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
}
body.news-panel-open { overflow: hidden; }

@media (min-width: 641px) {
  .news-panel { align-items: center; }
  .news-panel__sheet { border-radius: var(--radius-m); }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* "Nieuws"-widget: foto links (indien aanwezig) + titel/tijd rechts, opent
   het gedeelde voorbeeldpaneel (assets/js/news.js) i.p.v. direct door te
   linken naar de bron. */
.widget-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
li:last-child > .widget-news-item { border-bottom: none; }
.widget-news-item__image {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-sunken);
  flex-shrink: 0;
}
.widget-news-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.widget-news-item__title { color: var(--ink); font-weight: 600; font-size: .87rem; line-height: 1.4; }
.widget-news-item:hover .widget-news-item__title { color: var(--accent); }
.widget-news-item__time { font-size: .72rem; color: var(--ink-faint); }

/* ==========================================================================
   Kaart-tab (Leaflet)
   ========================================================================== */

.park-map {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  z-index: 0;
}
.park-map .leaflet-popup-content-wrapper { background: var(--bg-elevated); color: var(--ink); border-radius: 10px; }
.park-map .leaflet-popup-content { font-family: var(--font-body); font-size: .86rem; margin: 10px 14px; }
.park-map .leaflet-popup-tip { background: var(--bg-elevated); }
.park-map__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: .82rem; color: var(--ink-soft); }
.park-map__legend span { display: inline-flex; align-items: center; gap: 6px; }
.park-map__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.park-map__dot--low { background: var(--open); }
.park-map__dot--medium { background: var(--medium); }
.park-map__dot--high { background: var(--high); }
.park-map__dot--info { background: var(--accent); }

@media (max-width: 640px) {
  .park-map { height: 380px; }
}

/* ==========================================================================
   Pull-to-refresh (mobiel, parkpagina)
   ========================================================================== */

.pull-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  transition: height 180ms ease;
}
.pull-refresh.is-ready { color: var(--accent); }
.pull-refresh__spinner { display: flex; }
.pull-refresh.is-loading .pull-refresh__spinner svg { animation: spin 900ms linear infinite; }