/* ============================================================================
 * Huizenzoeker — Modern Funda-style platform CSS
 * Clean, professional, mobile-first
 * ============================================================================ */

:root {
  /* Modern blauw palette: deep navy als primair, lichtere blauw-tints voor accents */
  --color-primary:        #002c54;       /* Deep navy - hoofdkleur */
  --color-primary-dark:   #001f3d;
  --color-primary-light:  #e8eef5;       /* Heel lichte navy tint */
  --color-primary-soft:   #b8c5d6;       /* Soft navy voor focus rings */

  --color-secondary:      #002c54;       /* Zelfde diepblauw (consistent) */
  --color-secondary-light: #1e4a7a;

  --color-accent:         #0084ff;       /* Helder blauw voor links/info */
  --color-accent-light:   #e6f2ff;

  --color-success:        #009f3a;
  --color-success-light:  #e6f7ec;
  --color-warning:        #f59e0b;
  --color-warning-light:  #fef3c7;
  --color-danger:         #e53935;
  --color-danger-dark:    #c62828;
  --color-danger-light:   #fde7e7;

  /* Neutrals */
  --color-text:           #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #767676;
  --color-text-light:     #9b9b9b;

  --color-border:         #e6e6e6;
  --color-border-strong:  #cccccc;
  --color-border-light:   #f0f0f0;

  --color-bg:             #f7f7f7;
  --color-bg-alt:         #fafafa;
  --color-card:           #ffffff;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --header-height: 64px;
}

/* ============================================================================
 * BASE
 * ============================================================================ */

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

html, body { margin: 0; padding: 0; min-height: 100%; }
html { height: 100%; -webkit-text-size-adjust: 100%; }

/* CRITICAL: Voorkom dat ELK element ooit horizontale scroll kan veroorzaken op mobile.
   Een wide table of long input ergens in de page maakte de body breder dan viewport,
   waardoor `position: fixed; right: 0` van de bottom-nav buiten het scherm liep.
   N.B.: `overflow: clip` (i.p.v. `hidden`) breekt `position: sticky` NIET. */
@media (max-width: 767px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Op mobile: body NIET als flex-container — voorkomt Samsung Internet bug
   waarbij position:fixed bottom-nav niet sticky blijft op lange pagina's.
   Footer is sowieso verborgen op mobile, dus flex is niet nodig. */
@media (max-width: 767px) {
  body {
    display: block;
  }
}

body.auth-page { display: flex; flex-direction: column; }

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

@media (min-width: 768px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
}

p { margin: 0 0 var(--space-3); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-bg);
  color: var(--color-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
  border: 1px solid var(--color-border-light);
}

pre {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-secondary);
  color: #f0f0f0;
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: var(--space-2) 0;
}

small { font-size: 13px; color: var(--color-text-muted); }

::selection { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ============================================================================
 * SITE HEADER (sticky, two-row desktop, hamburger mobile)
 * Donkere navy achtergrond met witte tekst — past bij de footer
 * ============================================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-sm);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: relative;
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none !important;
  color: #ffffff;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  transition: opacity 0.15s;
}
.brand:hover { color: #ffffff; opacity: 0.85; }
.brand-emoji { font-size: 26px; line-height: 1; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 22px;
  color: #ffffff;
  padding: 0;
  line-height: 1;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.nav-toggle:active { transform: scale(0.96); }

.nav-user-block { display: none; }
.nav-user-mobile {
  display: block;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  font-weight: 500;
}
.nav-user::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow);
}
.nav-menu.open { display: flex; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  min-height: 44px;
  transition: all 0.15s;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.nav-link.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 600;
}
.nav-link.is-danger {
  color: #ff8d8d;
  border-color: rgba(255, 99, 99, 0.4);
  margin-top: var(--space-2);
}
.nav-link.is-danger:hover {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.nav-logout {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.nav-logout:hover {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* Desktop layout */
@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .nav-top {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-user-block {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .nav-user-mobile { display: none; }
  .nav-logout-mobile { display: none !important; }

  .nav-menu {
    display: flex !important;
    flex-direction: row;
    position: static;
    background: none;
    border: 0;
    padding: 6px var(--space-5);
    box-shadow: none;
    gap: var(--space-1);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .nav-link { padding: 8px 16px; min-height: 38px; font-size: 14px; }
}

/* ============================================================================
 * LAYOUT
 * ============================================================================ */

.main { flex: 1; width: 100%; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  width: 100%;
}
@media (min-width: 768px) {
  .container { padding: var(--space-6) var(--space-5); }
}

/* Hero / page heading */
.page-heading {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.page-heading h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* ============================================================================
 * FOOTER
 * ============================================================================ */

.site-footer {
  margin-top: auto;
  background: var(--color-secondary);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-6) var(--space-4);
  font-size: 13px;
}
.site-footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer .footer-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer p { margin: 0; }
.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}
.site-footer a:hover { color: #fff; }
.footer-brand { font-weight: 700; color: #fff; }

/* ============================================================================
 * CARDS
 * ============================================================================ */

.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-xs);
}
@media (min-width: 600px) {
  .card { padding: var(--space-6); }
}

.card h2 {
  margin-top: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 18px;
}
.card .count {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 14px;
}

/* Status card — kompakt bovenaan */
.card.status {
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-card) 60%);
  border: 1px solid #cce4f7;
}
.status-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .status-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.status-row .label {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
  font-weight: 700;
}
.status-row strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-secondary);
}

/* ============================================================================
 * FORMS
 * ============================================================================ */

.form-row { margin-bottom: var(--space-4); }

.form-row-double {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 600px) {
  .form-row-double { grid-template-columns: 1fr 1fr; }
}

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
label small {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
  font-size: 12.5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.15s;
  min-height: 46px;
  -webkit-appearance: none;
  appearance: none;
}
input:hover, textarea:hover, select:hover {
  border-color: var(--color-border-strong);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 44, 84, 0.15);
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-mono);
  font-size: 13px;
}

select {
  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='%23767676' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2) 0;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 600px) { fieldset { padding: var(--space-5); } }

legend {
  padding: 0 var(--space-2);
  font-weight: 700;
  color: var(--color-text);
  font-size: 14px;
}
.field-help {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

/* ============================================================================
 * BUTTONS
 * ============================================================================ */

.btn-primary,
.btn-secondary,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none !important;
  line-height: 1.4;
  min-height: 46px;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--color-card);
  color: var(--color-secondary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  min-height: 34px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-4);
}
.actions form { display: inline; margin: 0; }

@media (max-width: 599px) {
  .actions .btn-primary,
  .actions > button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

.logout-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1.5px solid var(--color-danger);
  color: var(--color-danger);
  background: var(--color-card);
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.logout-link:hover {
  background: var(--color-danger);
  color: #fff;
}

.user-email {
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 4px 12px;
  background: var(--color-bg-alt);
  border-radius: 100px;
  border: 1px solid var(--color-border);
}

/* ============================================================================
 * FILTER PILLS — clickable buttons (NO visible checkbox)
 * ============================================================================ */

.filter-fieldset {
  background: var(--color-bg-alt);
  border-color: var(--color-border-light);
}

.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* The label is the button — checkbox is hidden but functional */
.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 8px 16px;
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
  user-select: none;
  position: relative;
  min-height: 38px;
  white-space: nowrap;
}

/* Visually hide the checkbox but keep it accessible */
.filter-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.filter-checkbox:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}

/* Active state — checkbox is checked */
.filter-checkbox:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.filter-checkbox:has(input:checked):hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Add a checkmark prefix for selected items */
.filter-checkbox:has(input:checked)::before {
  content: '✓ ';
  font-weight: 700;
  margin-right: 2px;
}

/* Focus ring (keyboard accessibility) */
.filter-checkbox:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
 * FLASH MESSAGES
 * ============================================================================ */

.flash-container {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: 600px;
  width: calc(100% - 32px);
  pointer-events: none;
}
.flash-container > * { pointer-events: auto; }

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s ease-out;
  background: var(--color-card);
  border-left: 4px solid var(--color-text-muted);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.flash.is-closing {
  opacity: 0;
  transform: translateY(-10px);
}
.flash-msg { flex: 1; line-height: 1.4; }
.flash-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  padding: 0 4px;
  margin-left: var(--space-1);
  transition: opacity 0.15s;
  font-family: inherit;
}
.flash-close:hover { opacity: 1; }

@keyframes slideIn {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.flash-success, .flash.success {
  background: var(--color-success-light);
  color: #006128;
  border-left-color: var(--color-success);
}
.flash-error, .flash.error {
  background: var(--color-danger-light);
  color: #8a1c1c;
  border-left-color: var(--color-danger);
}
.flash-info, .flash.info {
  background: var(--color-accent-light);
  color: #0c4a6e;
  border-left-color: var(--color-accent);
}

/* ============================================================================
 * HOUSES GRID — Funda-style listing cards
 * ============================================================================ */

.houses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 560px) { .houses-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 980px) { .houses-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.house-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
  box-shadow: var(--shadow-xs);
}
.house-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-border);
}

.house-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-alt);
}
@media (min-width: 980px) {
  .house-card img { height: 200px; }
}

.house-card .no-image {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  font-size: 14px;
}

.house-body {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.house-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
}
.house-title-row h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary);
  word-break: break-word;
}

.house-body .address {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 var(--space-3);
  word-break: break-word;
}

.house-body .price {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.house-body .price.muted {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 16px;
}

.house-body .meta {
  color: var(--color-text-light);
  font-size: 12px;
  margin: 0 0 var(--space-3);
}

/* Action buttons row */
.house-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-border-light);
}
.house-actions .action-form {
  margin: 0;
  display: contents;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 54px;
  width: 100%;
  font-family: inherit;
}
.action-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}
.action-btn:active { transform: translateY(0); }

.action-icon { font-size: 18px; line-height: 1; }
.action-label { font-size: 11px; letter-spacing: 0.01em; }

.action-btn-danger:hover {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger-dark);
}

/* ============================================================================
 * BADGES (mode + reactions)
 * ============================================================================ */

.house-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-3);
}

.house-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.house-badge.bid-loting {
  background: #fff7eb;
  color: #b45309;
  border-color: #fed7aa;
}
.house-badge.bid-meettijd {
  background: var(--color-accent-light);
  color: #0c4a6e;
  border-color: #bae6fd;
}
.house-badge.bid-inschrijven {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}
.house-badge.bid-urgent {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  border-color: #fecaca;
}
.house-badge.bid-direct {
  background: var(--color-success-light);
  color: #006128;
  border-color: #a7f3d0;
}
.house-badge.bid-overig,
.house-badge.bid-unknown {
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.house-badge.bid-reactions {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ============================================================================
 * TIME LEFT — countdown clock
 * ============================================================================ */

.time-left {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.time-left-normal {
  background: var(--color-accent-light);
  color: #0c4a6e;
  border-color: #bae6fd;
}
.time-left-soon {
  background: var(--color-warning-light);
  color: #92400e;
  border-color: #fde68a;
}
.time-left-urgent {
  background: var(--color-danger-light);
  color: var(--color-danger-dark);
  border-color: #fecaca;
  animation: pulse-urgent 1.5s ease-in-out infinite;
}
.time-left-expired {
  background: var(--color-bg);
  color: var(--color-text-light);
  text-decoration: line-through;
  border-color: var(--color-border);
}
@keyframes pulse-urgent {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.12); }
}

/* ============================================================================
 * TABLES
 * ============================================================================ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--space-4) * -1);
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .table-wrap { margin: 0; padding: 0; overflow-x: visible; }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 500px;
}
@media (min-width: 768px) { table { min-width: 0; } }

table th {
  text-align: left;
  padding: 12px 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--color-bg-alt);
}
table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}
table tr:last-child td { border-bottom: 0; }
table tr:hover td { background: var(--color-bg-alt); }

/* ============================================================================
 * AUTH PAGES — login, register, forgot, reset
 * ============================================================================ */

body.auth-page {
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background:
    radial-gradient(circle at 0% 0%, var(--color-primary-light) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--color-accent-light) 0%, transparent 50%),
    var(--color-bg);
  min-height: 100vh;
}

body.auth-page .main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.auth-box {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5);
  max-width: 440px;
  width: 100%;
  border: 1px solid var(--color-border-light);
}
@media (min-width: 480px) { .auth-box { padding: var(--space-7) var(--space-6); } }

/* Auth-pagina als onderdeel van landing-page (met landing-header/footer) */
body.landing-page main.auth-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-5) var(--space-4) !important;
  min-height: calc(100vh - 200px);
  width: 100%;
  box-sizing: border-box;
}
body.landing-page main.auth-main .auth-box {
  margin: 0 auto;
}
body.landing-page .auth-box-wide { max-width: 720px; }

.auth-box h1 {
  text-align: center;
  font-size: 26px;
  margin: 0 0 var(--space-1);
  color: var(--color-secondary);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-box h2 {
  text-align: center;
  font-size: 15px;
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-weight: 500;
}
.auth-box form label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text);
}
.auth-box form input {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
}
.auth-box button[type="submit"].btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  margin-top: var(--space-2);
}
.auth-box .flash { margin-bottom: var(--space-4); box-shadow: none; }
.auth-box > p {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* ============================================================================
 * INSTALL WIZARD
 * ============================================================================ */

.install-wrap {
  max-width: 720px;
  margin: var(--space-7) auto;
  padding: 0 var(--space-4);
}
.install-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .install-card { padding: var(--space-7); } }
.install-card h1 { text-align: center; color: var(--color-primary); }
.subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-5); }
.install-form fieldset { background: var(--color-bg-alt); }

.info-box {
  background: var(--color-accent-light);
  color: #0c4a6e;
  padding: var(--space-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
  margin-bottom: var(--space-4);
}
.info-box.info-success {
  background: var(--color-success-light);
  color: #006128;
  border-left-color: var(--color-success);
}
.error-box {
  background: var(--color-danger-light);
  color: #8a1c1c;
  padding: var(--space-4);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-danger);
  margin-bottom: var(--space-4);
}
.error-box ul { margin: var(--space-2) 0 0 var(--space-5); }

/* ============================================================================
 * DETAILS / DISCLOSURE
 * ============================================================================ */

details { margin-bottom: var(--space-3); }
details summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: var(--space-2) 0;
  user-select: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 500;
}
details summary:hover { color: var(--color-secondary); }
details[open] summary { margin-bottom: var(--space-2); }

/* ============================================================================
 * MISC
 * ============================================================================ */

.help-text {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: var(--space-2) 0;
}

hr {
  border: 0;
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-5) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.badge-on  { background: var(--color-success-light); color: #006128; }
.badge-off { background: var(--color-bg); color: var(--color-text-muted); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================================
 * KPI CARDS (reports + security pages)
 * ============================================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 480px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.kpi-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: all 0.15s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--color-border);
}
.kpi-card.kpi-accent {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-color: var(--color-primary);
}
.kpi-card.kpi-accent .kpi-label,
.kpi-card.kpi-accent .kpi-hint { color: rgba(255,255,255,0.85); }
.kpi-card.kpi-accent .kpi-value { color: #fff; }

.kpi-card.kpi-danger {
  background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  color: #fff;
  border-color: var(--color-danger);
}
.kpi-card.kpi-danger .kpi-label,
.kpi-card.kpi-danger .kpi-hint { color: rgba(255,255,255,0.9); }
.kpi-card.kpi-danger .kpi-value { color: #fff; }

.kpi-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  font-weight: 700;
}
.kpi-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.kpi-hint {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* Bar chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
}
@media (max-width: 500px) {
  .bar-row { grid-template-columns: 90px 1fr 40px; gap: 6px; font-size: 12px; }
}
.bar-label {
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar {
  background: var(--color-bg);
  height: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #1e6db3 100%);
  border-radius: var(--radius-sm);
  animation: barGrow 0.6s ease-out;
}
.bar-fill-success {
  background: linear-gradient(90deg, var(--color-success) 0%, #4ade80 100%);
}
@keyframes barGrow { from { width: 0 !important; } }
.bar-value {
  text-align: right;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Vertical timeline chart */
.timeline-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  padding: var(--space-2) 4px 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-2);
}
.timeline-bar {
  flex: 1;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
  opacity: 0.85;
  transition: all 0.15s;
  cursor: pointer;
  animation: barGrowV 0.6s ease-out;
}
@keyframes barGrowV { from { height: 0 !important; } }
.timeline-bar:hover {
  opacity: 1;
  background: var(--color-primary-dark);
}
.timeline-bar.is-today {
  background: var(--color-success);
  opacity: 1;
}
.timeline-bar:hover::after {
  content: attr(data-count);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.timeline-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 0 4px;
}

/* Top list */
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toplist;
}
.top-list li {
  counter-increment: toplist;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.top-list li:last-child { border-bottom: 0; }
.top-list li::before {
  content: counter(toplist);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.top-list li:nth-child(1)::before { background: #fef3c7; color: #92400e; }
.top-list li:nth-child(2)::before { background: #e5e7eb; color: #374151; }
.top-list li:nth-child(3)::before { background: #fed7aa; color: #9a3412; }
.top-main { flex: 1; min-width: 0; }
.top-main strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.top-main small {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.top-price-green { color: var(--color-success); }

/* ============================================================================
 * SECURITY PAGE — event chips
 * ============================================================================ */

.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.event-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  color: var(--color-text);
  font-size: 13px;
  text-decoration: none !important;
  transition: all 0.15s;
}
.event-chip:hover {
  background: var(--color-card);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.event-chip.sev-info    { border-color: var(--color-accent);  background: var(--color-accent-light);  color: #0c4a6e; }
.event-chip.sev-warning { border-color: var(--color-warning); background: var(--color-warning-light); color: #92400e; }
.event-chip.sev-danger  { border-color: var(--color-danger);  background: var(--color-danger-light);  color: var(--color-danger-dark); }
.event-chip-icon { font-size: 16px; }
.event-chip-label { font-weight: 600; }
.event-chip-count {
  padding: 2px 9px;
  background: rgba(0,0,0,0.08);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

tr.sev-row-danger td  { background: rgba(229, 57, 53, 0.04); }
tr.sev-row-warning td { background: rgba(245, 158, 11, 0.04); }

.log-filters select,
.log-filters input { min-height: 42px; }

/* ============================================================================
 * EMAIL TEMPLATE EDITOR
 * ============================================================================ */

.template-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.template-tab {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--color-text-muted);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border: 2px solid transparent;
  border-bottom: 0;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.template-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}
.template-tab.is-active {
  color: var(--color-primary);
  background: var(--color-card);
  border-color: var(--color-border);
  border-bottom: 2px solid var(--color-card);
}

.email-preview-meta {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 13px;
}
.email-preview-meta div { display: flex; gap: var(--space-2); align-items: center; }
.email-preview-meta span { color: var(--color-text-muted); min-width: 80px; }

.email-preview-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
  height: 600px;
}
.email-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 899px) {
  .email-preview-frame { height: 480px; }
}

/* ============================================================================
 * HOUSE INFO MODAL
 * ============================================================================ */

.house-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--space-3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.house-modal.is-open { display: flex; }

.house-modal-content {
  background: var(--color-card);
  max-width: 700px;
  width: 100%;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-xl);
  position: relative;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .house-modal { padding: var(--space-7) var(--space-4); }
  .house-modal-content { padding: var(--space-6); }
}

.house-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 1;
  font-family: inherit;
}
.house-modal-close:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: scale(1.05);
}

.house-modal-body { word-break: break-word; }
.house-modal-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.house-modal-body h2 {
  font-size: 20px;
  margin-right: 40px;
  color: var(--color-secondary);
}
@media (min-width: 600px) {
  .house-modal-body h2 { font-size: 24px; }
}

.modal-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 0;
  table-layout: fixed;
}
.modal-info-table tr {
  border-bottom: 1px solid var(--color-border-light);
}
.modal-info-table tr:last-child { border-bottom: 0; }
.modal-info-table tr:hover td { background: transparent; }
.modal-info-table .modal-info-label {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  color: var(--color-text-muted);
  width: 40%;
  vertical-align: top;
  font-weight: 600;
  word-break: break-word;
}
.modal-info-table .modal-info-value {
  padding: var(--space-2) 0;
  color: var(--color-text);
  word-break: break-word;
  vertical-align: top;
}

@media (max-width: 480px) {
  .modal-info-table { font-size: 12.5px; }
  .modal-info-table .modal-info-label { width: 42%; padding-right: 6px; }
}

/* Backward compat */
.header, .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* ============================================================================
 * EXPIRED HOUSE CARDS — lichtgrijze overlay + "Verlopen" badge
 * ============================================================================ */

.house-card.is-expired {
  position: relative;
  opacity: 0.65;
  filter: grayscale(0.4);
  transition: opacity 0.2s, filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.house-card.is-expired:hover {
  opacity: 0.95;
  filter: grayscale(0.1);
}

.house-card.is-expired::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(247, 247, 247, 0.35);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius-lg);
}

.house-card.is-expired .house-body,
.house-card.is-expired .house-actions {
  position: relative;
  z-index: 2;
}

.house-card.is-expired .price {
  color: var(--color-text-muted) !important;
}

.house-expired-banner {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
 * MOBILE APP-LIKE EXPERIENCE
 * - Bottom tab-bar onderaan (iOS/Android style)
 * - Top header verbergen op mobile (alleen brand zichtbaar)
 * - Bottom-sheet voor admin "Meer" menu
 * - Stat-cards in grid
 * ============================================================================ */

/* Geef pagina extra padding onderaan zodat content niet onder de tab-bar valt */
.has-bottom-nav {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .has-bottom-nav { padding-bottom: 0; }
}

/* ====== BOTTOM NAV (mobile-only, strikt 64px hoog, max viewport-breed) ====== */
.bottom-nav {
  /* Layout */
  display: flex;
  align-items: stretch;
  /* Positie - GEFORCEERD aan viewport, niet parent */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;             /* Forceer viewport-breedte */
  max-width: 100vw;
  /* Strikte hoogte */
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: content-box;
  /* Visueel */
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0;
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  /* iOS / Android safe areas */
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* GPU layer voor stabiele rendering op iOS/Samsung */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Voorkom font-size override door browser */
  font-size: 11px;
  /* Voorkom dat content de nav uitrekt */
  overflow: hidden;
}
@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
}

/* === Health-indicator in header === */
.health-wrap {
  position: relative;
  margin-left: auto; /* duwt rechts in flex nav-menu */
  margin-right: 20px;
}
.health-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.health-indicator:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}
.health-indicator .hi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
.health-indicator.health-ok .hi-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: hi-pulse 2s ease-in-out infinite;
}
.health-indicator.health-warn .hi-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.health-indicator.health-fail .hi-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
@keyframes hi-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.10); }
}

.health-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  overflow: hidden;
  color: var(--color-text, #1e293b);
}
.health-panel.open { display: block; }
.health-panel .hp-arrow {
  position: absolute;
  top: -7px;
  right: 22px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-left: 1px solid var(--color-border, #e2e8f0);
  border-top: 1px solid var(--color-border, #e2e8f0);
  transform: rotate(45deg);
}
.health-panel .hp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}
.health-panel .hp-header h4 {
  margin: 0;
  font-size: 14px;
  color: var(--color-secondary, #002c54);
}
.health-panel .hp-refresh {
  background: transparent;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.health-panel .hp-refresh:hover { background: var(--color-bg-subtle, #f8fafc); }
.health-panel .hp-refresh.is-spinning { animation: hp-spin 0.6s linear; }
@keyframes hp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.health-panel .hp-body { padding: 4px 0; }
.health-panel .hp-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light, #f1f5f9);
  font-size: 13px;
}
.health-panel .hp-row:last-child { border-bottom: none; }
.health-panel .hp-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.health-panel .hp-info { flex: 1; min-width: 0; }
.health-panel .hp-label { font-weight: 600; color: var(--color-secondary, #002c54); margin-bottom: 2px; }
.health-panel .hp-detail { color: var(--color-text-secondary, #64748b); font-size: 12px; line-height: 1.4; }
.health-panel .hp-value {
  font-weight: 700;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--color-bg-subtle, #f1f5f9);
  color: var(--color-text, #475569);
  flex-shrink: 0;
  white-space: nowrap;
}
.health-panel .hp-status-ok .hp-value   { background: #dcfce7; color: #166534; }
.health-panel .hp-status-warn .hp-value { background: #fef3c7; color: #92400e; }
.health-panel .hp-status-fail .hp-value { background: #fee2e2; color: #991b1b; }
.health-panel .hp-status-never .hp-value{ background: #f1f5f9; color: #64748b; }
.health-panel .hp-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-light, #f1f5f9);
  font-size: 11px;
  color: var(--color-text-secondary, #94a3b8);
  text-align: center;
  background: var(--color-bg-subtle, #f8fafc);
}
@media (max-width: 767px) {
  .health-wrap { margin-left: 0; margin-top: var(--space-2); width: 100%; }
  .health-indicator { width: 100%; justify-content: center; padding: 10px 14px; }
  .health-panel { right: auto; left: 0; width: 100%; }
}

.dashboard-archive-btn {
  display: none; /* Default verbergen, alleen op mobile zichtbaar */
}
@media (max-width: 767px) {
  .dashboard-archive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 80%;
    margin: 24px auto 12px;
    padding: 14px 18px;
    background: var(--color-primary, #002c54);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 44, 84, 0.25);
    transition: all 0.15s;
    box-sizing: border-box;
  }
  .dashboard-archive-btn:hover,
  .dashboard-archive-btn:active {
    background: var(--color-secondary, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 44, 84, 0.35);
    color: #ffffff;
  }
  .dashboard-archive-btn .dab-icon { font-size: 18px; }
  .dashboard-archive-btn .dab-arrow {
    font-size: 16px;
    transition: transform 0.15s;
  }
  .dashboard-archive-btn:hover .dab-arrow { transform: translateX(3px); }
}

.bottom-nav-link {
  /* Layout per tab */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Geen padding — alleen line-heights bepalen vertikale ruimte */
  padding: 0 2px;
  /* Visueel */
  text-decoration: none !important;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Geen border / background reset */
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  /* Belangrijk — voorkom dat tekst de hoogte oprekt */
  overflow: hidden;
  height: 100%;
  /* Gemakkelijk klikbaar op touch */
  -webkit-tap-highlight-color: rgba(0, 44, 84, 0.1);
}
.bn-icon {
  /* Strikt geen variatie in icon-grootte tussen browsers */
  font-size: 22px;
  line-height: 24px;
  height: 24px;
  display: block;
  text-align: center;
  /* Voorkom dat Samsung Internet / iOS text auto-resize doet */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.bn-label {
  /* Strikt label-grootte */
  font-size: 10px;
  line-height: 12px;
  height: 12px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* Voorkom dat Samsung Internet / iOS text auto-resize doet */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Hover alleen op echte muis-devices */
@media (hover: hover) and (pointer: fine) {
  .bottom-nav-link:hover { color: #1e293b; background: #f8fafc; }
}
.bottom-nav-link.is-active {
  color: #002c54;
  background: #f0f9d4;
}
.bottom-nav-link.is-active .bn-icon {
  transform: scale(1.05);
}

.bn-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s;
}

.bn-label {
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* ====== BOTTOM SHEET (admin "Meer") ====== */
.bottom-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}
.bottom-sheet.open { display: block; }

.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bottom-sheet-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-card);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px env(safe-area-inset-bottom, 20px);
  max-height: 75vh;
  overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.25s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--color-border-strong);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.bottom-sheet-content h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.bottom-sheet-content hr {
  border: 0;
  height: 1px;
  background: var(--color-border-light);
  margin: 8px 0;
}

.bottom-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  text-decoration: none !important;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.1s;
  border-radius: var(--radius-sm);
}
.bottom-sheet-item:last-child { border-bottom: 0; }
.bottom-sheet-item:hover { background: var(--color-bg-alt); padding-left: 8px; }
.bottom-sheet-item:active { background: var(--color-primary-light); }
.bottom-sheet-item.is-danger { color: var(--color-danger); }
.bsi-icon { font-size: 22px; line-height: 1; }

/* ====== HIDE TOP HEADER ON MOBILE (use bottom-nav instead) ====== */
@media (max-width: 767px) {
  /* Behoud een compact header met alleen branding */
  .site-header .nav-toggle,
  .site-header .nav-user-block,
  .site-header .nav-menu {
    display: none !important;
  }
  .site-header {
    padding: 0;
  }
  .nav-container.nav-top {
    padding: 14px 16px;
    min-height: auto;
    justify-content: center;
  }
  .brand {
    font-size: 17px;
  }
}

/* ====== STAT GRID — KPI cards op dashboard ====== */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-4);
}
@media (min-width: 600px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
}

.stat-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.stat-card.stat-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #001f3d 100%);
  color: #fff;
  border-color: var(--color-primary);
}
.stat-card.stat-primary .stat-label,
.stat-card.stat-primary .stat-sub { color: rgba(255, 255, 255, 0.85); }
.stat-card.stat-primary .stat-value { color: #fff; }

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-secondary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
@media (min-width: 600px) {
  .stat-value { font-size: 32px; }
}
.stat-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ====== STATUS BADGE in page-heading ====== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge.is-on {
  background: var(--color-success-light);
  color: #006128;
  border: 1px solid #a7f3d0;
}
.status-badge.is-off {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ====== QUICK ACTIONS CARD ====== */
.quick-actions-card h2 {
  margin-bottom: var(--space-3);
}
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}
.qa-form { margin: 0; display: contents; }
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  text-decoration: none !important;
  color: var(--color-text);
  font-family: inherit;
  font-size: inherit;
  transition: all 0.15s;
  width: 100%;
  min-height: 90px;
}
.quick-action-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.quick-action-btn:active { transform: translateY(0); }
.qa-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.qa-label {
  font-weight: 700;
  color: var(--color-secondary);
  font-size: 14px;
}
.qa-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.quick-action-danger:hover {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
}
.quick-action-danger:hover .qa-label { color: var(--color-danger-dark); }

/* ====== SETTINGS PAGE: sticky save bar ====== */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) calc(var(--space-4) * -1) 0;
  display: flex;
  gap: var(--space-2);
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}
@media (min-width: 600px) {
  .form-actions-sticky {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
  }
}
.form-actions-sticky .btn-primary { flex: 1; }

/* On mobile, sticky bar should clear bottom-nav */
@media (max-width: 767px) {
  .has-bottom-nav .form-actions-sticky {
    bottom: 64px; /* Boven de bottom-nav */
  }
}

/* ====== TOGGLE SWITCH (iOS-style) ====== */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: 8px 0;
}
.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: relative;
  width: 52px;
  height: 32px;
  background: var(--color-border-strong);
  border-radius: 100px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.toggle-switch input:checked ~ .toggle-slider {
  background: var(--color-success);
}
.toggle-switch input:checked ~ .toggle-slider::before {
  transform: translateX(20px);
}
.toggle-switch:hover .toggle-slider { opacity: 0.92; }
.toggle-label {
  flex: 1;
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
}

/* ====== MOBILE TWEAKS ====== */
@media (max-width: 767px) {
  .container {
    padding: var(--space-4) 12px;
  }
  .card {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
  }
  .card h2 {
    font-size: 16px;
    margin-bottom: var(--space-3);
  }
  h1 { font-size: 24px !important; }
  .page-heading {
    margin-bottom: var(--space-4);
  }
  .houses-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .house-card {
    border-radius: var(--radius-lg);
  }
  .house-card img,
  .house-card .no-image {
    height: 220px;
  }
  /* Compact action buttons in card */
  .action-btn {
    min-height: 50px;
    padding: 6px 2px;
    font-size: 10px;
  }
  .action-icon { font-size: 17px; }
  .action-label { font-size: 10px; }

  /* Smaller filter pills on mobile */
  .filter-checkbox {
    font-size: 12.5px;
    padding: 7px 12px;
    min-height: 36px;
  }

  /* Modal: full-screen-ish on mobile */
  .house-modal-content {
    border-radius: var(--radius-lg);
    padding: 16px;
  }
}

/* iOS safe-area support for notched devices */
@supports (padding: env(safe-area-inset-top)) {
  .container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Hide footer on mobile (info is in bottom-nav anyway) */
@media (max-width: 767px) {
  /* "~" = general sibling — werkt OOK als er andere elementen tussen staan
     (bv. confirm-modals op profile.php) */
  .has-bottom-nav ~ .site-footer,
  .main.has-bottom-nav ~ .site-footer,
  body:has(.has-bottom-nav) > .site-footer {
    display: none !important;
  }
}

/* ============================================================================
 * BRAND LOGO — accommodate img alongside emoji
 * ============================================================================ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand img {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  width: auto;
  max-height: 40px;
}
.brand span:not(.brand-emoji) {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}

/* In footer, smaller */
.footer-brand img {
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
}

/* In auth pages h1 */
.auth-box h1 img {
  height: 28px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ============================================================================
 * OVER ONS PAGE — speciale layout met hero + secties
 * ============================================================================ */

/* Hero */
.about-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0%, transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.about-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-hero-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--space-3);
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}
.about-hero h1 {
  font-size: 36px;
  margin: 0 0 var(--space-3);
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.hero-accent {
  color: #ffd166;
  font-weight: 800;
}
.about-hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}
.about-hero-cta {
  background: #fff !important;
  color: var(--color-primary) !important;
  border-color: #fff !important;
  font-size: 16px;
  padding: 14px 32px;
}
.about-hero-cta:hover {
  background: #ffd166 !important;
  border-color: #ffd166 !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
  .about-hero { padding: var(--space-8) var(--space-5); }
  .about-hero h1 { font-size: 52px; }
  .about-hero-sub { font-size: 19px; }
  .about-hero-icon { font-size: 80px; }
}

/* Secties */
.about-section {
  margin: var(--space-7) 0;
  scroll-margin-top: 80px;
}
.about-section-alt {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border-light);
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}
@media (min-width: 768px) {
  .about-section-alt {
    padding: var(--space-7) var(--space-6);
    margin: var(--space-7) 0;
  }
}

.about-section h2 {
  font-size: 24px;
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .about-section h2 { font-size: 30px; margin-bottom: var(--space-4); }
}

.about-lead {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 700px;
}
@media (min-width: 768px) {
  .about-lead { font-size: 18px; }
}

/* Features grid */
.about-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .about-features { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 900px) {
  .about-features { grid-template-columns: repeat(3, 1fr); }
}
.about-feature {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all 0.2s;
}
.about-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-border);
}
.af-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.about-feature h3 {
  font-size: 17px;
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
}
.about-feature p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Naam-uitleg */
.naam-uitleg {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) {
  .naam-uitleg { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.naam-uitleg-row {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border-left: 4px solid var(--color-primary);
}
.naam-letter {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}
.naam-uitleg-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.naam-quote {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-card) 100%);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-4) 0 0;
  position: relative;
}
.naam-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: var(--space-3);
  font-size: 80px;
  color: var(--color-primary);
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.5;
}
.naam-quote p {
  margin: 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

/* How it works */
.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.how-steps li {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.how-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.25);
}
.step-content { flex: 1; }
.step-content h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--color-secondary);
}
.step-content p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}
@media (min-width: 600px) {
  .step-num { width: 56px; height: 56px; font-size: 22px; }
  .step-content h3 { font-size: 18px; }
  .step-content p { font-size: 15px; }
}

/* For who grid */
.for-who-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .for-who-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.for-who-item {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  text-align: left;
}
.fw-icon {
  font-size: 32px;
  margin-bottom: var(--space-2);
}
.for-who-item h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--color-secondary);
}
.for-who-item p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* FAQ */
.about-faq {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  transition: all 0.15s;
}
.about-faq:hover { border-color: var(--color-border); }
.about-faq summary {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  min-height: 36px;
}
.about-faq summary::-webkit-details-marker { display: none; }
.about-faq summary::after {
  content: '+';
  font-size: 22px;
  color: var(--color-text-muted);
  font-weight: 400;
  transition: transform 0.2s;
}
.about-faq[open] summary::after {
  transform: rotate(45deg);
  color: var(--color-primary);
}
.about-faq[open] {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}
.about-faq p {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}

/* CTA */
.about-cta {
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-7) 0;
}
.about-cta h2 {
  color: #fff;
  font-size: 26px;
  margin: 0 0 var(--space-2);
}
.about-cta p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin: 0 0 var(--space-4);
}
.about-cta .btn-primary {
  background: #fff !important;
  color: var(--color-primary) !important;
  border-color: #fff !important;
  font-size: 16px;
  padding: 14px 32px;
}
.about-cta .btn-primary:hover {
  background: #ffd166 !important;
  border-color: #ffd166 !important;
}
@media (min-width: 600px) {
  .about-cta h2 { font-size: 32px; }
  .about-cta p { font-size: 18px; }
}


/* ============================================================================
 * LANDING PAGE — modern, animated, public-facing
 * ============================================================================ */

body.landing-page {
  background: var(--color-card);
  display: block;
}

.landing-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border-light);
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}
.landing-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.landing-header .brand {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-secondary);
  text-decoration: none !important;
}
.landing-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.landing-nav-link {
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.landing-nav-link:hover {
  background: var(--color-bg);
  color: var(--color-secondary);
}
.landing-login-btn {
  background: var(--color-primary);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.landing-login-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 44, 84, 0.25);
}

/* Hero */
.landing-hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  padding: var(--space-8) var(--space-4) var(--space-8);
  overflow: hidden;
}
.landing-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.landing-badge-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.3);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0.15); }
}

.landing-hero-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  color: #fff;
}
.hero-accent {
  background: linear-gradient(90deg, #ffd166 0%, #ffb700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 768px) {
  .landing-hero { padding: var(--space-8) var(--space-6) var(--space-8); }
  .landing-hero-title { font-size: 56px; }
}

.landing-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto var(--space-5);
  color: rgba(255, 255, 255, 0.92);
}
@media (min-width: 768px) {
  .landing-hero-sub { font-size: 19px; }
}

.landing-hero-cta {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.landing-cta-primary {
  background: #fff !important;
  color: var(--color-primary) !important;
  border-color: #fff !important;
  font-size: 16px;
  padding: 14px 32px;
  font-weight: 700;
}
.landing-cta-primary:hover {
  background: #ffd166 !important;
  border-color: #ffd166 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.landing-cta-secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font-size: 16px;
  padding: 14px 28px;
}
.landing-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Live stats */
.landing-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 700px;
  margin: 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
@media (min-width: 768px) {
  .landing-stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}
.landing-stat {
  text-align: center;
  padding: var(--space-2);
}
.landing-stat-value {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .landing-stat-value { font-size: 48px; }
}
.landing-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Animated background blobs */
.landing-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.landing-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: blob-float 20s ease-in-out infinite;
}
.landing-blob-1 {
  width: 500px; height: 500px;
  background: #ffd166;
  top: -200px; left: -200px;
  animation-delay: 0s;
}
.landing-blob-2 {
  width: 600px; height: 600px;
  background: #0084ff;
  bottom: -300px; right: -200px;
  animation-delay: -7s;
}
.landing-blob-3 {
  width: 400px; height: 400px;
  background: #ff6b9d;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
  opacity: 0.2;
}
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -40px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.9); }
}

/* Sections */
.landing-section {
  padding: var(--space-8) var(--space-4);
  background: var(--color-card);
}
.landing-section-alt {
  background: var(--color-bg);
}
.landing-section-title {
  text-align: center;
  font-size: 32px;
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  .landing-section-title { font-size: 42px; }
}
.landing-section-sub {
  text-align: center;
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-7);
  line-height: 1.6;
}

/* Steps */
.landing-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .landing-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.landing-step {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  position: relative;
  transition: all 0.2s;
}
.landing-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--color-border);
}
.landing-step-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.landing-step-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.3);
}
.landing-step h3 {
  margin: 0 0 var(--space-2);
  font-size: 19px;
  color: var(--color-secondary);
}
.landing-step p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 15px;
}

/* Features grid */
.landing-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 600px) { .landing-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .landing-features { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }

.landing-feature {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: all 0.2s;
}
.landing-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.lf-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.landing-feature h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--color-secondary);
}
.landing-feature p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Quote */
.landing-quote-section {
  padding: var(--space-7) var(--space-4);
  background: var(--color-card);
}
.landing-quote {
  max-width: 800px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-card) 100%);
  border: 1px solid var(--color-primary-soft);
  border-left: 6px solid var(--color-primary);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  position: relative;
}
.landing-quote::before {
  content: '"';
  position: absolute;
  top: -24px;
  left: var(--space-3);
  font-size: 100px;
  color: var(--color-primary);
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.4;
}
.landing-quote p {
  margin: 0;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text);
}

/* Final CTA */
.landing-final-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.landing-final-cta h2 {
  font-size: 32px;
  color: #fff;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
}
.landing-final-cta p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  margin: 0 0 var(--space-5);
}
.landing-final-cta .btn-primary {
  background: #fff !important;
  color: var(--color-primary) !important;
  border-color: #fff !important;
  font-size: 16px;
  padding: 14px 32px;
}
.landing-final-cta .btn-primary:hover {
  background: #ffd166 !important;
  border-color: #ffd166 !important;
}

/* Footer */
.landing-footer {
  background: var(--color-secondary);
  color: #fff;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.landing-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
@media (min-width: 600px) {
  .landing-footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.landing-footer-tagline {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.landing-footer-links {
  display: flex;
  gap: var(--space-4);
}
.landing-footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
}
.landing-footer-links a:hover { color: #fff; }
.landing-footer-bottom {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.landing-footer-bottom p { margin: 0; }


/* ============================================================================
 * CMS PAGES — content-driven pagina styling
 * ============================================================================ */

.cms-page {
  max-width: 900px;
  margin: 0 auto;
}
.cms-page > h1 {
  font-size: 36px;
  margin-bottom: var(--space-5);
  color: var(--color-secondary);
}

.cms-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}
.cms-content h2 {
  font-size: 28px;
  margin: var(--space-7) 0 var(--space-3);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.cms-content h3 {
  font-size: 19px;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-secondary);
}
.cms-content p {
  margin: 0 0 var(--space-3);
}
.cms-content ul, .cms-content ol {
  margin: 0 0 var(--space-4);
  padding-left: 24px;
}
.cms-content li { margin-bottom: var(--space-1); }
.cms-content a {
  color: var(--color-primary);
  text-decoration: underline;
}
.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
}

/* Hero in CMS */
.cms-content .cms-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-5);
  margin: 0 0 var(--space-7);
  text-align: center;
}
.cms-content .cms-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}
.cms-content .cms-hero-title {
  font-size: 32px;
  color: #fff;
  margin: 0 0 var(--space-3);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .cms-content .cms-hero-title { font-size: 44px; }
}
.cms-content .cms-hero-title .hero-accent-text {
  background: linear-gradient(90deg, #ffd166 0%, #ffb700 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cms-content .cms-hero-lead {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.6;
}

/* CMS blocks */
.cms-content .cms-block {
  margin: 0 0 var(--space-6);
  padding: 0;
}
.cms-content .cms-block-alt {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .cms-content .cms-block-alt { padding: var(--space-6) var(--space-5); }
}

/* CMS quote */
.cms-content .cms-quote {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.cms-content .cms-quote p {
  margin: 0;
  font-style: italic;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.6;
}

/* CMS feature grid */
.cms-content .cms-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
@media (min-width: 600px) { .cms-content .cms-features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cms-content .cms-features-grid { grid-template-columns: repeat(3, 1fr); } }
.cms-content .cms-feature {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.cms-content .cms-feature-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.cms-content .cms-feature h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--color-secondary);
}
.cms-content .cms-feature p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* CMS steps */
.cms-content .cms-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}
.cms-content .cms-steps li {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.cms-content .cms-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.cms-content .cms-step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.25);
}
.cms-content .cms-steps li > div { flex: 1; }
.cms-content .cms-steps h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--color-secondary);
}
.cms-content .cms-steps p {
  margin: 0;
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* CMS CTA */
.cms-content .cms-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
  color: #fff;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  text-align: center;
  margin: var(--space-7) 0 0;
}
.cms-content .cms-cta h2 {
  color: #fff;
  margin: 0 0 var(--space-2);
  font-size: 28px;
}
.cms-content .cms-cta p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--space-4);
  font-size: 17px;
}
.cms-content .cms-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--color-primary) !important;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 100px;
  text-decoration: none !important;
  transition: all 0.15s;
  font-size: 16px;
}
.cms-content .cms-cta-btn:hover {
  background: #ffd166;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
 * v25 - PLAYFUL FRIENDLY LANDING PAGE + Over Ons hero, Layout admin, socials
 * ============================================================================ */

/* Hero waving emoji animatie */
.hero-wave {
  display: inline-block;
  animation: wave-hand 2.5s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes wave-hand {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
}

/* Floating shapes around hero */
.landing-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.float-shape {
  position: absolute;
  font-size: 36px;
  opacity: 0.5;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
  animation: float-around 15s ease-in-out infinite;
}
.float-1 { top: 12%; left: 8%; animation-delay: 0s; font-size: 42px; }
.float-2 { top: 22%; right: 12%; animation-delay: -3s; font-size: 38px; }
.float-3 { bottom: 18%; left: 15%; animation-delay: -6s; font-size: 36px; }
.float-4 { bottom: 25%; right: 8%; animation-delay: -9s; font-size: 44px; }
.float-5 { top: 50%; left: 5%; animation-delay: -12s; font-size: 32px; }
@keyframes float-around {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -30px) rotate(10deg); }
  50% { transform: translate(-15px, 20px) rotate(-5deg); }
  75% { transform: translate(25px, 15px) rotate(8deg); }
}
@media (max-width: 600px) {
  .float-shape { font-size: 28px !important; opacity: 0.35; }
}

/* Section intro common */
.section-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-6);
}
.section-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: var(--space-3);
}
.section-h2 {
  font-size: 32px;
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .section-h2 { font-size: 42px; }
}
.section-lead {
  font-size: 17px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Hoe-werkt-het cards */
.landing-how {
  padding: var(--space-8) var(--space-4);
  background: var(--color-card);
}
.how-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: var(--space-3);
}
@media (min-width: 768px) {
  .how-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}

.how-card {
  position: relative;
  background: var(--color-card);
  border: 2px solid var(--color-border-light);
  border-radius: 28px;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  transition: all 0.25s;
  overflow: hidden;
}
.how-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  border-radius: 28px 28px 0 0;
}
.how-card-1::before { background: linear-gradient(90deg, #d9ed85, #C9E465); }
.how-card-2::before { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.how-card-3::before { background: linear-gradient(90deg, #f9a8d4, #ec4899); }

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}
.how-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--space-3);
  display: inline-block;
  animation: emoji-bob 3s ease-in-out infinite;
}
.how-card-2 .how-emoji { animation-delay: -1s; }
.how-card-3 .how-emoji { animation-delay: -2s; }
@keyframes emoji-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.how-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.how-card h3 {
  font-size: 22px;
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
  font-weight: 800;
}
.how-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 15px;
}

/* Features - kleurrijk */
.landing-features-section {
  padding: var(--space-8) var(--space-4);
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-card) 100%);
}
.feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 600px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }

.feat-card {
  background: var(--color-card);
  border-radius: 24px;
  padding: var(--space-5);
  border: 2px solid transparent;
  transition: all 0.25s;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}
.feat-yellow { background: linear-gradient(135deg, #f0f9d4, #d9ed85); }
.feat-blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.feat-pink   { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.feat-green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.feat-purple { background: linear-gradient(135deg, #e9d5ff, #d8b4fe); }
.feat-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); }

.feat-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: var(--space-2);
  display: inline-block;
}
.feat-card:hover .feat-icon {
  animation: emoji-spin 0.5s ease-out;
}
@keyframes emoji-spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg); }
}

.feat-card h3 {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--color-secondary);
  font-weight: 800;
}
.feat-card p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* Story section */
.landing-story {
  padding: var(--space-8) var(--space-4);
  background: var(--color-card);
}
.story-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 768px) {
  .story-grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-7); }
}

.story-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-illustration {
  position: relative;
  width: 280px;
  height: 280px;
  background: linear-gradient(135deg, #f0f9d4, #d9ed85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.story-icon-big {
  font-size: 100px;
  line-height: 1;
}
.story-bubble {
  position: absolute;
  width: 56px; height: 56px;
  background: var(--color-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  animation: bubble-float 4s ease-in-out infinite;
}
.story-bubble-1 { top: 0; right: 10%; animation-delay: 0s; }
.story-bubble-2 { bottom: 10%; left: 0; animation-delay: -1.3s; }
.story-bubble-3 { bottom: 20%; right: -10px; animation-delay: -2.6s; }
@keyframes bubble-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.05); }
}

.story-text h2 {
  font-size: 28px;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-secondary);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .story-text h2 { font-size: 36px; }
}
.story-text p {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.story-link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none !important;
  font-size: 16px;
}
.story-link:hover {
  text-decoration: underline !important;
}

/* Big quote */
.landing-quote-wrap {
  padding: var(--space-7) var(--space-4);
  background: var(--color-bg);
}
.big-quote {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding: 0 var(--space-3);
}
.quote-marks {
  font-size: 120px;
  line-height: 0.5;
  color: var(--color-primary);
  font-family: Georgia, serif;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.big-quote p {
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text);
  font-weight: 500;
  font-style: italic;
  margin: var(--space-4) 0 0;
}
@media (min-width: 768px) {
  .big-quote p { font-size: 28px; }
}
.big-quote em {
  color: var(--color-primary);
  font-weight: 700;
  font-style: italic;
}

/* FAQ vrolijke versie */
.landing-faq-section {
  padding: var(--space-8) var(--space-4);
  background: var(--color-card);
}
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-2);
}
.faq-item {
  background: var(--color-bg);
  border: 2px solid var(--color-border-light);
  border-radius: 16px;
  padding: var(--space-3) var(--space-4);
  transition: all 0.2s;
}
.faq-item:hover { border-color: var(--color-primary); }
.faq-item[open] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.faq-item summary {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 28px;
  color: var(--color-primary);
  font-weight: 400;
  transition: transform 0.3s;
  margin-left: var(--space-2);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-size: 15px;
}

/* Big CTA - vrolijk */
.landing-bigcta {
  padding: var(--space-8) var(--space-4);
  background: linear-gradient(135deg, #f0f9d4 0%, #d9ed85 50%, #C9E465 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing-bigcta::before {
  content: '🏠';
  position: absolute;
  font-size: 160px;
  top: 50%; left: 5%;
  transform: translateY(-50%);
  opacity: 0.15;
}
.landing-bigcta::after {
  content: '🚀';
  position: absolute;
  font-size: 160px;
  top: 50%; right: 5%;
  transform: translateY(-50%);
  opacity: 0.15;
}
.landing-bigcta h2 {
  font-size: 32px;
  margin: 0 0 var(--space-3);
  color: var(--color-secondary);
  font-weight: 800;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .landing-bigcta h2 { font-size: 44px; } }
.cta-accent {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.landing-bigcta p {
  font-size: 17px;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  position: relative;
  z-index: 1;
}
.cta-note {
  margin-top: var(--space-3) !important;
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  font-weight: 500;
}

/* Friendly buttons */
.landing-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary-light));
  color: #fff !important;
  padding: 16px 32px;
  border-radius: 100px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s;
  box-shadow: 0 8px 24px rgba(0, 44, 84, 0.3);
  border: 0;
  cursor: pointer;
}
.landing-btn-primary.big { padding: 20px 44px; font-size: 18px; }
.landing-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 44, 84, 0.4);
}
.landing-btn-primary .btn-arrow {
  transition: transform 0.2s;
  font-size: 20px;
}
.landing-btn-primary:hover .btn-arrow { transform: translateX(4px); }

.landing-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.landing-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Rich landing footer */
.landing-footer-rich {
  background: linear-gradient(180deg, var(--color-secondary) 0%, #001a33 100%);
  color: #fff;
  padding: var(--space-7) var(--space-4) var(--space-4);
}
.lf-rich-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) {
  .lf-rich-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (min-width: 900px) {
  .lf-rich-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.lf-col h4 {
  color: #ffd166;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3);
}
.lf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lf-col ul li {
  margin-bottom: var(--space-1);
}
.lf-col a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none !important;
  font-size: 15px;
  transition: color 0.15s;
}
.lf-col a:hover {
  color: #fff;
  text-decoration: underline !important;
}

.lf-col-brand .lf-brand-wrap {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lf-rich-tagline {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-3);
  font-size: 14px;
}
.lf-contact li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.lf-rich-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.lf-rich-bottom-text {
  grid-column: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.lf-rich-bottom-links {
  grid-column: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lf-rich-bottom-links li { margin: 0; }
.lf-rich-bottom-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.lf-rich-bottom-links a:hover {
  color: #fff;
  text-decoration: underline;
}
.lf-rich-bottom-tag {
  grid-column: 1 / -1;
  margin-top: 4px !important;
  color: #ffd166 !important;
  font-weight: 600;
}

@media (max-width: 700px) {
  .lf-rich-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .lf-rich-bottom-text,
  .lf-rich-bottom-links {
    grid-column: 1;
  }
  .lf-rich-bottom-links {
    justify-content: center;
  }
}

/* Socials - met echte brand SVG iconen */
.lf-socials {
  display: flex;
  gap: 10px;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.2s;
}
.social-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  color: #fff !important;
}
/* Brand-specifieke hover-kleuren */
.social-btn.social-facebook:hover  { background: #1877F2; border-color: #1877F2; }
.social-btn.social-instagram:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
.social-btn.social-twitter:hover   { background: #000; border-color: #000; }
.social-btn.social-linkedin:hover  { background: #0A66C2; border-color: #0A66C2; }
.social-btn.social-youtube:hover   { background: #FF0000; border-color: #FF0000; }
.social-btn.social-tiktok:hover    { background: #000; border-color: #000; }
.social-btn.social-github:hover    { background: #181717; border-color: #181717; }

/* Footer socials op gewone footer (light bg) */
.site-footer .footer-socials {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-3);
}
.site-footer .social-btn {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-secondary) !important;
}
.site-footer .social-btn:hover {
  color: #fff !important;
}

.footer-tagline-inline {
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
}
.footer-links {
  margin: var(--space-2) 0;
}
.footer-links a {
  margin: 0 8px;
}
.footer-copyright {
  margin-top: var(--space-2) !important;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* ============= LAYOUT ADMIN PAGE ============= */
.link-row {
  display: grid;
  grid-template-columns: 1fr 2fr 40px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.link-row input {
  margin: 0;
}
.remove-row {
  background: var(--color-bg-alt) !important;
  color: var(--color-danger) !important;
  border-color: var(--color-border) !important;
  padding: 6px 0 !important;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  width: 36px;
}
.remove-row:hover {
  background: var(--color-danger-light) !important;
  border-color: var(--color-danger) !important;
}

@media (max-width: 600px) {
  .link-row {
    grid-template-columns: 1fr 36px;
  }
  .link-row input[name$="_label[]"] { grid-column: 1 / 2; }
  .link-row input[name$="_url[]"]   { grid-column: 1 / 2; }
}

/* ============= CMS FRIENDLY HERO (Over Ons) ============= */
.cms-content .cms-friendly-hero {
  background: linear-gradient(135deg, #f0f9d4 0%, #d9ed85 50%, #C9E465 100%);
  border-radius: 28px;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  margin: 0 0 var(--space-6);
  position: relative;
  overflow: hidden;
}
.cms-content .cmh-emoji-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--space-4);
}
.cms-content .cmh-bounce {
  font-size: 48px;
  display: inline-block;
  animation: cmh-bounce 1.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cmh-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (min-width: 600px) { .cms-content .cmh-bounce { font-size: 56px; } }

.cms-content .cmh-title {
  font-size: 32px;
  color: var(--color-secondary);
  margin: 0 0 var(--space-3);
  font-weight: 800;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) { .cms-content .cmh-title { font-size: 44px; } }

.cms-content .cmh-lead {
  font-size: 17px;
  color: var(--color-text);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ============================================================================
 * v26 — Responsive landing header (hamburger op mobile) + login redirect link
 * ============================================================================ */

/* Override v25 landing nav voor responsive gedrag */
.landing-nav {
  position: relative;
}
.landing-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 6px 10px;
}
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .landing-nav-toggle {
    display: inline-block;
  }
  .landing-nav-links {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 220px;
    border: 1px solid var(--color-border-light);
    display: none;
    z-index: 60;
  }
  .landing-nav-links.open {
    display: flex;
  }
  .landing-nav-links .landing-nav-link {
    padding: 12px 16px;
    border-radius: 8px;
    width: 100%;
  }
  .landing-nav-links .landing-login-btn {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    padding: 12px 16px;
  }
}

.landing-nav-link.is-active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* FAQ-edit page: nicer layout */
.faq-edit-card {
  border-left: 4px solid var(--color-primary);
}
.faq-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}
.faq-edit-header strong {
  color: var(--color-text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkbox-inline {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex-direction: row !important;
  cursor: pointer;
  padding: 12px 0;
  font-weight: 500;
}
.checkbox-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* FAQ answer in DB-rendered HTML */
.faq-answer {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-size: 15px;
}
.faq-answer p { margin: 0 0 var(--space-2); }
.faq-answer p:last-child { margin-bottom: 0; }

/* lf-contact: zonder emoji-icons, schoner */
.lf-contact li {
  margin-bottom: 6px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.lf-contact a {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Op publieke pagina's: zorg dat het body niet "logged-in" stijl krijgt */
body.public-view .container {
  /* Standaard padding, geen has-bottom-nav padding */
  padding-bottom: var(--space-4);
}

/* CMS-page header voor publieke bezoekers */
body.public-view .cms-page {
  padding-top: var(--space-4);
}


/* ============================================================================
 * v27 — FAQ collapsing, danger zone modal, profile fields, plugins, newsletter
 * ============================================================================ */

/* ===== FAQ EDIT — collapsible cards ===== */
.faq-edit-card {
  margin-bottom: 8px;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s;
}
.faq-edit-card[open] {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.08);
}
.faq-edit-card > summary.faq-edit-header {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-bottom: 0;
  user-select: none;
}
.faq-edit-card > summary.faq-edit-header::-webkit-details-marker {
  display: none;
}
.faq-edit-card[open] > summary.faq-edit-header {
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-alt);
}
.faq-edit-summary-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.faq-edit-summary-text strong {
  font-weight: 600;
  color: var(--color-secondary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faq-pub-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.faq-pub-dot.is-on  { background: var(--color-success); }
.faq-pub-dot.is-off { background: var(--color-border-strong); }
.faq-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.faq-toggle-icon {
  font-size: 12px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}
.faq-edit-card[open] .faq-toggle-icon {
  transform: rotate(180deg);
}
.faq-edit-body {
  padding: 16px 18px 18px;
}

/* ===== DANGER ZONE ===== */
.danger-zone {
  border: 2px solid var(--color-danger-light, #fecaca);
  background: linear-gradient(180deg, #fef2f2 0%, #fff 60%);
}
.danger-zone h2 {
  color: var(--color-danger);
}
.btn-danger {
  background: var(--color-danger) !important;
  color: #fff !important;
  border: 2px solid var(--color-danger) !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.15s;
}
.btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ===== CONFIRM MODAL ===== */
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-modal.open {
  display: flex;
}
.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cm-fade 0.2s ease-out;
}
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }

.confirm-modal-box {
  position: relative;
  background: var(--color-card);
  border-radius: 20px;
  padding: var(--space-5);
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  animation: cm-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cm-pop {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.confirm-modal-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.confirm-modal-box h2 {
  margin: 0 0 var(--space-2);
  font-size: 22px;
  color: var(--color-secondary);
}
.confirm-modal-box p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  font-size: 15px;
}
.confirm-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.confirm-modal-actions button {
  flex: 1;
  min-width: 140px;
}

/* ===== HEADER USER NAME BUTTONS (zelfde stijl) ===== */
.nav-user-block {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-user-btn,
.nav-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg-alt);
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.15s;
}
.nav-user-btn:hover,
.nav-logout-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}
.nav-logout-btn {
  background: var(--color-bg);
}
.nav-logout-btn:hover {
  background: #fef2f2;
  border-color: var(--color-danger);
  color: var(--color-danger) !important;
}

/* Verberg user-block op mobile (komt in bottom-nav) */
@media (max-width: 767px) {
  .nav-user-block {
    display: none;
  }
}

/* ===== PLUGINS GRID ===== */
.plugins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 600px) { .plugins-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .plugins-grid { grid-template-columns: repeat(3, 1fr); } }

.plugin-card {
  display: block;
  background: var(--color-card);
  border: 2px solid var(--color-border-light);
  border-radius: 16px;
  padding: var(--space-4);
  text-decoration: none !important;
  color: var(--color-text) !important;
  transition: all 0.2s;
}
.plugin-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.plugin-card-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.plugin-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.plugin-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--color-secondary);
}
.plugin-card p {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.plugin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
  font-size: 12px;
}
.plugin-count {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ===== NEWSLETTER SIGNUP BLOCK (frontend) ===== */
.newsletter-signup-block {
  padding: var(--space-7) var(--space-4);
  background: linear-gradient(135deg, #f0f9d4 0%, #d9ed85 100%);
}
.ns-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--color-card);
  border-radius: 24px;
  padding: var(--space-5);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.ns-card h2 {
  font-size: 26px;
  margin: 0 0 var(--space-2);
  color: var(--color-secondary);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .ns-card h2 { font-size: 32px; } }
.ns-intro {
  color: var(--color-text-secondary);
  font-size: 16px;
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}
.ns-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto var(--space-3);
}
@media (min-width: 600px) {
  .ns-form { grid-template-columns: 1fr 1.5fr auto; }
}
.ns-form input {
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: var(--color-bg);
}
.ns-form input:focus {
  outline: 0;
  border-color: var(--color-primary);
  background: #fff;
}
.ns-btn {
  padding: 14px 24px;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ns-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 44, 84, 0.25);
}
.ns-below {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}


/* ============================================================================
 * v28 — Plaatsen + wijken multi-select (settings)
 * ============================================================================ */

.plaatsen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.wijk-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  animation: wijk-fade-in 0.25s ease-out;
}
@keyframes wijk-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.wijk-block-title {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--color-secondary);
  font-weight: 700;
}
.wijken-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wijken-grid > * {
  flex: 1 1 calc(50% - 3px);
  min-width: max-content;
}
.wijk-checkbox {
  font-size: 13px !important;
  padding: 6px 10px !important;
  min-height: 32px !important;
}


/* ============================================================================
 * v30 — Tagline, prijs-slider, collapsible cards, archive, vergelijkbare,
 *       newsletter AJAX success, profile fix, gemeenten max-6-cols
 * ============================================================================ */

/* -- Brand: tagline onder site-naam ----------------------------------------- */
.brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-size: 18px;
  font-weight: 800;
  color: inherit;
}
.brand-tagline {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.2px;
  margin-top: 2px;
}
@media (max-width: 480px) {
  .brand-name { font-size: 16px; }
  .brand-tagline { font-size: 10px; }
}
/* Op licht gekleurde headers: tagline iets donkerder */
.landing-header .brand-tagline,
.cms-page .brand-tagline {
  color: rgba(255, 255, 255, 0.8);
}

/* -- Prijs dual-range slider ------------------------------------------------ */
.price-slider-wrap {
  padding: 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
}
.price-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.price-slider-header label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}
.price-slider-display {
  font-size: 18px;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.price-slider-display strong { font-weight: 700; }
.price-slider-display strong::before { content: '€'; }
.price-slider {
  position: relative;
  height: 28px;
  margin: 0 12px;
}
.price-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  transform: translateY(-50%);
}
.price-slider-range {
  position: absolute;
  top: 50%;
  height: 6px;
  background: var(--color-accent);
  border-radius: 3px;
  transform: translateY(-50%);
  pointer-events: none;
}
.price-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  margin: 0;
  padding: 0;
}
.price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.1s;
}
.price-slider-input::-webkit-slider-thumb:hover { transform: scale(1.1); }
.price-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.price-slider-input::-webkit-slider-runnable-track { background: transparent; }
.price-slider-input::-moz-range-track { background: transparent; }
.price-slider-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  padding: 0 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* -- Gemeenten grid max 6 kolommen ----------------------------------------- */
.plaatsen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .plaatsen-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 480px) {
  .plaatsen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -- Collapsible cards (Entree connectie, Vergelijkbare, Archief) ---------- */
.collapsible-details {
  width: 100%;
}
.collapsible-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-summary:hover { opacity: 0.85; }
.collapsible-chevron {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.collapsible-details[open] .collapsible-chevron {
  transform: rotate(180deg);
}
.collapsible-body {
  padding-top: 16px;
  animation: coll-fade-in 0.25s ease-out;
}
@keyframes coll-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- CSS confirm modal (refresh-data) -------------------------------------- */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-modal.open { display: flex; animation: cm-fade-in 0.2s ease-out; }
.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}
.confirm-modal-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: cm-slide-in 0.3s ease-out;
}
.confirm-modal-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 12px;
}
.confirm-modal-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}
.confirm-modal-text {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.confirm-modal-actions > * { flex: 1; max-width: 200px; }
@keyframes cm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cm-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* -- Vergelijkbare woningen card ------------------------------------------- */
.house-card-similar {
  border: 2px dashed #cbd5e1;
  position: relative;
}
.house-similar-banner {
  background: linear-gradient(90deg, #d9ed85, #C9E465);
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* -- Archief sectie -------------------------------------------------------- */
.archive-card { background: #fafbfc; }
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.archive-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  transition: box-shadow 0.15s;
}
.archive-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.archive-item-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.archive-item-noimg {
  width: 80px;
  height: 60px;
  background: var(--color-bg-alt);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.archive-item-body { flex: 1; min-width: 0; }
.archive-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-item-title:hover { text-decoration: underline; }
.archive-item-addr {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 2px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-item-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  align-items: center;
}
.archive-item-price {
  font-weight: 700;
  color: var(--color-primary);
}
.archive-item-date {
  color: var(--color-text-muted);
}

/* -- Newsletter AJAX success ----------------------------------------------- */
.ns-success {
  text-align: center;
  padding: 24px 16px;
  animation: ns-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ns-success-icon {
  font-size: 56px;
  margin-bottom: 8px;
}
.ns-success-msg {
  font-size: 18px;
  font-weight: 600;
  color: #16a34a;
  margin: 0;
}
@keyframes ns-pop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.ns-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
  font-size: 13px;
}

/* -- Profile pagina mobile fix --------------------------------------------- */
/* Forceer dezelfde header/footer-styling als andere pagina's */
@media (max-width: 768px) {
  body .site-header .brand,
  body .site-header .nav-toggle {
    font-size: inherit;
  }
  body .bottom-nav {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  body main.has-bottom-nav {
    padding-bottom: 80px;
  }
}

/* -- Algemene helpers ------------------------------------------------------ */
.collapsible-card { padding: 16px 20px; }
.collapsible-card .collapsible-summary h2 {
  font-size: 18px;
}


/* ============================================================================
 * v31 — Prijs-slider met titel boven, max-5-cols wijken
 * ============================================================================ */

/* Sluit aan op de "Wat is uw budget?"-look in de afbeelding */
.price-slider-title {
  margin: 24px 0 0;
  padding: 12px 18px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
  text-align: center;
  letter-spacing: 0.2px;
}
.price-slider-title + .price-slider-wrap {
  border-radius: 0 0 12px 12px;
  margin-top: 0;
  padding: 24px 28px 18px;
}

.price-slider-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--color-text);
}
.price-slider-marks strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Oranje accent zoals op entree.nu */
.price-slider-range {
  background: #f97316; /* oranje */
}
.price-slider-input::-webkit-slider-thumb {
  border-color: #f97316;
  width: 26px;
  height: 26px;
  background: #f97316;
}
.price-slider-input::-moz-range-thumb {
  border-color: #f97316;
  width: 26px;
  height: 26px;
  background: #f97316;
}

/* Wijken-grid: flexbox met flex-wrap voor adaptieve breedte
   - Korte wijknamen: 2 (of meer) per rij
   - Lange wijknamen: krijgen automatisch hun eigen regel
*/
.wijken-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wijken-grid > * {
  flex: 1 1 calc(50% - 3px);
  min-width: max-content;
}
@media (min-width: 1024px) {
  /* Op desktop: 5 chips per rij standaard */
  .wijken-grid > * {
    flex: 1 1 calc(20% - 5px);
  }
}


/* ============================================================================
 * v32 — Brand layout fix + tagline kleurverschil + section-title bars
 * ============================================================================ */

/* HARD override: brand layout MOET kolom zijn voor brand-text */
.site-header .brand,
.landing-header .brand,
header .brand {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 10px !important;
}
.site-header .brand .brand-text,
.landing-header .brand .brand-text,
header .brand .brand-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.1 !important;
  gap: 0 !important;
}
.site-header .brand .brand-name,
.landing-header .brand .brand-name,
header .brand .brand-name {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.site-header .brand .brand-tagline,
.landing-header .brand .brand-tagline,
header .brand .brand-tagline {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  letter-spacing: 0.1px !important;
}
@media (max-width: 480px) {
  .site-header .brand .brand-name { font-size: 16px !important; }
  .site-header .brand .brand-tagline { font-size: 10px !important; }
}

/* Tagline kleur:
 * - donker op landing (witte achtergrond) = donkergrijs
 * - licht op klant-app header (donkere achtergrond) = wit/half-transparant
 */
.landing-header .brand-name { color: var(--color-primary, #002c54) !important; }
.landing-header .brand-tagline { color: rgba(15, 23, 42, 0.65) !important; }

.site-header .brand-name { color: #ffffff !important; }
.site-header .brand-tagline { color: rgba(255, 255, 255, 0.75) !important; }

/* CMS-pagina header kan zowel landing- als app-header hebben — geen forcering */

/* ============================================================================
 * Algemene sectie-titelbalk (zelfde stijl als "💰 Wat is uw budget?")
 * Gebruik: <h2 class="section-title-bar">🔍 Tekst</h2>
 * Of: <h3 class="section-title-bar">🎯 Tekst</h3>
 * Op een card zet je <section class="card card-with-title-bar">
 * ============================================================================ */
.section-title-bar {
  margin: 0 0 0;
  padding: 14px 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px 12px 0 0;
  text-align: center;
  letter-spacing: 0.2px;
  display: block;
}
.card.card-with-title-bar {
  padding: 0;
  overflow: hidden;
}
.card.card-with-title-bar .section-title-bar {
  border-radius: 0;
  margin: 0;
}
.card.card-with-title-bar > *:not(.section-title-bar) {
  padding-left: 20px;
  padding-right: 20px;
}
.card.card-with-title-bar > *:not(.section-title-bar):first-of-type {
  padding-top: 18px;
}
.card.card-with-title-bar > *:last-child:not(.section-title-bar) {
  padding-bottom: 18px;
}

/* Compatible met het bestaande price-slider-title (geen change daar nodig) */

/* Collapsible card met title-bar (Entree.nu connectie) */
.collapsible-titlebar-card {
  padding: 0 !important;
  overflow: hidden;
}
.collapsible-titlebar-card .collapsible-summary.section-title-bar {
  cursor: pointer;
  list-style: none;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}
.collapsible-titlebar-card .collapsible-summary.section-title-bar::-webkit-details-marker {
  display: none;
}
.collapsible-titlebar-card .collapsible-chevron {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.collapsible-titlebar-card details[open] > .collapsible-summary.section-title-bar {
  border-radius: 12px 12px 0 0 !important;
}

/* Price slider blok past in nieuwe systeem */
.price-slider-title {
  /* Was al goed, behoud */
}


/* ============================================================================
 * v32 — Registratie + payment plugin styling
 * ============================================================================ */

.auth-box-wide { max-width: 520px; }
.auth-back {
  display: inline-block;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 16px;
}
.auth-back:hover { text-decoration: underline; }

.register-success {
  text-align: center;
  padding: 24px 0;
}
.register-success-icon {
  font-size: 64px;
  margin-bottom: 12px;
}
.register-success h2 {
  margin: 0 0 12px;
  color: var(--color-primary);
}

.payment-instructions {
  background: var(--color-bg-alt, #f8fafc);
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}
.payment-instructions h3 {
  margin: 0 0 12px;
  color: var(--color-primary);
}
.payment-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}
.payment-table th,
.payment-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}
.payment-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  width: 35%;
  white-space: nowrap;
}
.payment-table code {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border-light, #e2e8f0);
}
.payment-help {
  margin: 16px 0 0;
  padding: 12px;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}

/* Pending users list */
.pending-users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.pending-user-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
}
@media (min-width: 640px) {
  .pending-user-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.pending-user-info { flex: 1; min-width: 0; }
.pending-user-info > strong {
  display: block;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 2px;
}
.pending-user-email {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.pending-user-meta {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}
.pending-user-msg {
  margin-top: 8px;
  font-size: 13px;
}
.pending-user-msg summary { cursor: pointer; color: var(--color-primary); }
.pending-user-msg p {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--color-bg-alt, #f8fafc);
  border-radius: 6px;
}
.pending-user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pending-user-actions .btn-primary,
.pending-user-actions .btn-secondary {
  padding: 8px 14px;
  font-size: 13px;
}


/* ============================================================================
 * v33 — Subscription tiers, paused state, password requirements + landing accent
 * ============================================================================ */

/* -- Plan-picker grid op register.php -------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.plan-option {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid var(--color-border-light, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  margin: 0;
}
.plan-option:hover { border-color: var(--color-primary); }
.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.plan-option input[type="radio"]:checked + .plan-option-body {
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
}
.plan-option:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.18);
}
.plan-option-body {
  padding: 14px 12px;
  text-align: center;
  border-radius: 10px;
  transition: all 0.15s;
}
.plan-option-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.25;
}
.plan-option-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-primary);
}
.plan-option input[type="radio"]:checked + .plan-option-body .plan-option-price { color: #fff; }
.plan-option-meta {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}

/* -- Password requirements -------------------------------------------------- */
.pw-requirements {
  display: block;
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin: 6px 0 14px;
  color: #0c4a6e;
  line-height: 1.5;
}
.pw-requirements strong { color: #075985; }

/* -- Form row triple (voor tier-config) ------------------------------------ */
.form-row-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .form-row-triple { grid-template-columns: 1fr; }
}

/* -- Subscription paused overlay ------------------------------------------- */
.subscription-paused-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 16px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.subscription-paused-card {
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  max-width: 580px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-bottom: 40px;
}
.subscription-paused-icon {
  font-size: 56px;
  margin-bottom: 8px;
}
.subscription-paused-card h2 {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-size: 22px;
}
.subscription-paused-card > p {
  color: var(--color-text-muted);
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}
.paused-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.paused-plan {
  background: var(--color-bg-alt, #f8fafc);
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.paused-plan strong {
  display: block;
  font-size: 12px;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.2;
}
.paused-plan span {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
}
.paused-plan.is-default {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 44, 84, 0.15);
}
.paused-bank-info {
  text-align: left;
  background: var(--color-bg-alt, #f8fafc);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
}
.paused-bank-info table {
  width: 100%;
  border-collapse: collapse;
}
.paused-bank-info th,
.paused-bank-info td {
  padding: 6px 0;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}
.paused-bank-info tr:last-child th,
.paused-bank-info tr:last-child td { border-bottom: 0; }
.paused-bank-info th {
  font-weight: 600;
  color: var(--color-text-muted);
  width: 40%;
}
.paused-bank-info code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
.paused-help {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* Wanneer paused: verberg de scrollbar van body voor cleaner look */
body:has(.subscription-paused-overlay) {
  overflow: hidden;
}

/* -- Disabled toggle styling ----------------------------------------------- */
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.4;
  cursor: not-allowed;
}
.toggle-switch input:disabled ~ .toggle-label {
  color: var(--color-text-muted);
}

/* -- Landing pagina: gele accenten → #C9E465 (logo-groen) ------------------ */
.landing-page,
body.landing,
.landing-hero,
.landing-cta,
.landing-features {
  --color-accent: #C9E465;
  --color-accent-dark: #b8d452;
  --color-accent-yellow: #C9E465; /* compat */
}

/* Specifieke selectors voor mogelijke yellow-accent-lokaties */
.landing-page .btn-cta,
.landing-page .accent,
.landing-page .badge-accent,
.landing-hero .accent,
.landing-cta .btn-primary,
.landing-features .feature-icon-bg {
  background-color: #C9E465 !important;
  color: #002c54 !important;
}
.landing-page a.btn-accent,
.landing-page .btn-yellow {
  background: #C9E465 !important;
  border-color: #C9E465 !important;
  color: #002c54 !important;
}
.landing-page .text-accent,
.landing-hero .text-accent {
  color: #b8d452 !important;
}
/* Override on common heading highlights */
.landing-page mark,
.landing-page .highlight {
  background: #C9E465;
  color: #002c54;
  padding: 0 4px;
  border-radius: 3px;
}

/* Universal: vervang elke #ffd166 / #ffe066 / yellow utility op landing */
.landing-page [style*="#ffd166"],
.landing-page [style*="#ffe066"] {
  /* inline styles kunnen we niet via CSS overrulen — handled via search/replace below */
}


/* ============================================================================
 * v33b — Security log widget + users table + status pills
 * ============================================================================ */

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill.is-approved { background: #dcfce7; color: #166534; }
.status-pill.is-pending  { background: #fef3c7; color: #92400e; }
.status-pill.is-rejected { background: #fee2e2; color: #991b1b; }
.status-pill.is-suspended { background: #f3f4f6; color: #4b5563; }

.user-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: 6px;
}
.user-role-admin {
  background: linear-gradient(90deg, #d9ed85, #C9E465);
  color: #002c54;
}

.users-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}
.users-table td { vertical-align: top; }

/* KPI warning variant */
.kpi-card.kpi-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}
.kpi-card.kpi-warning .kpi-label,
.kpi-card.kpi-warning .kpi-value { color: #92400e; }

/* ============== SECURITY LOG WIDGET ============== */
.security-log-widget {
  width: 100%;
  margin-top: 12px;
}
.sl-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sl-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
}
.sl-severity {
  padding: 8px 12px;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.sl-status {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  min-height: 16px;
}
.sl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  transition: opacity 0.15s;
}
.sl-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px;
  font-size: 14px;
}
.sl-entry {
  background: #fff;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left-width: 4px;
}
.sl-entry-sev-info    { border-left-color: #0ea5e9; }
.sl-entry-sev-warning { border-left-color: #f59e0b; background: #fffbeb; }
.sl-entry-sev-danger  { border-left-color: #dc2626; background: #fef2f2; }

.sl-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sl-time {
  color: var(--color-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sl-sev {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f1f5f9;
}
.sl-sev.sev-info    { background: #dbeafe; color: #075985; }
.sl-sev.sev-warning { background: #fef3c7; color: #92400e; }
.sl-sev.sev-danger  { background: #fee2e2; color: #991b1b; }

.sl-entry-body {
  font-size: 13px;
  line-height: 1.45;
}
.sl-user-line {
  margin-bottom: 4px;
}
.sl-ip {
  margin-left: 8px;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted);
  font-size: 11px;
}
.sl-details {
  color: #475569;
  background: rgba(255, 255, 255, 0.5);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 4px;
  word-break: break-word;
}

.sl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-border-light, #e2e8f0);
}
.sl-pagination .btn-secondary {
  padding: 6px 14px;
  font-size: 13px;
}
.sl-page-info {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  flex: 1;
}
@media (max-width: 600px) {
  .sl-pagination { flex-wrap: wrap; }
  .sl-page-info { width: 100%; order: -1; }
}


/* ============================================================================
 * v34 — Security log overzichtelijker + betere user-edit + theme colors
 * ============================================================================ */

/* === Security log v2 — meer overzicht === */
.security-log-widget {
  width: 100%;
}
.sl-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--color-bg-alt, #f8fafc);
  border-radius: 8px;
}
@media (max-width: 600px) {
  .sl-controls { grid-template-columns: 1fr; }
}

.sl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-entry {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 8px;
  font-size: 13px;
  align-items: start;
}
.sl-entry-sev-info    { border-left-color: #3b82f6; }
.sl-entry-sev-warning { border-left-color: #f59e0b; background: #fffdf5; }
.sl-entry-sev-danger  { border-left-color: #dc2626; background: #fef7f7; }

.sl-entry-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.sl-time {
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sl-sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.sl-sev.sev-info    { background: #dbeafe; color: #1e40af; }
.sl-sev.sev-warning { background: #fef3c7; color: #92400e; }
.sl-sev.sev-danger  { background: #fee2e2; color: #991b1b; }

.sl-entry-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sl-event-name {
  font-weight: 700;
  color: #002c54;
  font-size: 13px;
}
.sl-user-line {
  font-size: 12px;
  color: #475569;
}
.sl-user-line strong { color: #1e293b; }
.sl-ip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #f1f5f9;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
  color: #64748b;
}
.sl-details {
  font-size: 12px;
  color: #64748b;
  word-break: break-word;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .sl-entry {
    grid-template-columns: 1fr;
  }
  .sl-entry-meta {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}

.sl-pagination {
  margin-top: 14px;
  padding: 12px 0 0;
  border-top: 1px solid #e2e8f0;
}

/* === Status acties — meer opvallend === */
.status-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.status-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s;
  text-decoration: none;
  color: #1e293b;
}
.status-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.status-action-btn .status-action-icon {
  font-size: 22px;
}
.status-action-btn.is-approve {
  background: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}
.status-action-btn.is-approve:hover {
  background: #16a34a;
  color: #fff;
}
.status-action-btn.is-reject {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}
.status-action-btn.is-reject:hover {
  background: #ef4444;
  color: #fff;
}
.status-action-btn.is-suspend {
  background: #fff7ed;
  border-color: #f97316;
  color: #7c2d12;
}
.status-action-btn.is-suspend:hover {
  background: #f97316;
  color: #fff;
}
.status-action-btn.is-unsuspend {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e3a8a;
}
.status-action-btn.is-unsuspend:hover {
  background: #3b82f6;
  color: #fff;
}
.status-action-btn.is-delete {
  background: #f9fafb;
  border-color: #6b7280;
  color: #4b5563;
}
.status-action-btn.is-delete:hover {
  background: #6b7280;
  color: #fff;
}
.status-action-btn.is-payment {
  background: linear-gradient(135deg, #d9ed85, #C9E465);
  border-color: #a8c945;
  color: #002c54;
  font-size: 14px;
}
.status-action-btn.is-payment:hover {
  background: linear-gradient(135deg, #C9E465, #a8c945);
  transform: translateY(-3px);
}

/* === Email templates table / cards === */
.email-templates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.email-template-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.email-template-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.email-template-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--color-primary);
}
.email-template-card p {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* === Theme color picker === */
.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.theme-color-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.theme-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e1;
  flex-shrink: 0;
}
.theme-color-info {
  flex: 1;
  min-width: 0;
}
.theme-color-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 2px;
}
.theme-color-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}
input[type="color"].theme-color-picker {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 0 1px #cbd5e1;
}


/* ============================================================================
 * v35 — Klikbare event-chips + active filter pill + lifetime tier
 * ============================================================================ */

.event-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.event-chip-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.event-chip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border-color: #94a3b8;
}
.event-chip-btn.sev-info    { border-left: 4px solid #3b82f6; }
.event-chip-btn.sev-warning { border-left: 4px solid #f59e0b; background: #fffdf5; }
.event-chip-btn.sev-danger  { border-left: 4px solid #dc2626; background: #fef7f7; }

.event-chip-label {
  flex: 1;
  font-weight: 600;
  color: #1e293b;
}
.event-chip-count {
  font-size: 11px;
  background: #f1f5f9;
  color: #64748b;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Active filter pill in security log */
.sl-active-filter {
  margin-bottom: 12px;
}
.sl-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 20px;
  font-size: 13px;
  color: #1e40af;
}
.sl-filter-clear {
  background: #1e40af;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.sl-filter-clear:hover {
  background: #1e3a8a;
}

/* Lifetime tier — paars/goud */
.plan-option.is-lifetime {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}
.lifetime-badge {
  display: inline-block;
  padding: 3px 10px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}


/* ============================================================================
 * v36 — Flash warning + favicon helpers
 * ============================================================================ */
.flash-warning {
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}
.flash-warning .flash-close {
  color: #92400e;
}


/* ============================================================================
 * v37 — Email templates sidebar nav + maintenance overlay
 * ============================================================================ */
.email-tpl-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .email-tpl-layout { grid-template-columns: 1fr; }
}
.email-tpl-sidebar {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.tpl-group {
  margin-bottom: 18px;
}
.tpl-group:last-child { margin-bottom: 0; }
.tpl-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin: 0 0 8px;
  padding: 0 8px;
}
.tpl-group-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpl-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  transition: all 0.12s;
  border: 1px solid transparent;
}
.tpl-nav-item:hover {
  background: #f1f5f9;
  color: #002c54;
}
.tpl-nav-item.is-active {
  background: #002c54;
  color: #fff;
  font-weight: 600;
  border-color: #002c54;
}
.tpl-nav-item.is-active:hover {
  background: #001b35;
}
.tpl-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpl-nav-badge {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.85;
}
.email-tpl-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .email-tpl-main { grid-template-columns: 1fr; }
}

/* === Maintenance mode overlay === */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 44, 84, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.maintenance-modal {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: maintenance-pop 0.3s ease-out;
}
@keyframes maintenance-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.maintenance-modal-icon {
  font-size: 56px;
  margin-bottom: 14px;
  display: block;
}

/* Logo + slogan bovenaan onderhouds-/update-popup */
.maintenance-modal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.maintenance-modal-logo-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.maintenance-modal-logo-wrap img {
  height: 48px !important;
  width: auto !important;
  object-fit: contain;
  display: block !important;
}
.maintenance-modal-logo-wrap .brand-emoji {
  font-size: 42px;
  line-height: 1;
}
.maintenance-modal-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.maintenance-modal-brand-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  gap: 2px;
}
.maintenance-modal-brand-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #002c54;
  line-height: 1.15;
}
.maintenance-modal-brand-tag {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.3;
}
.maintenance-modal h2 {
  margin: 0 0 12px;
  color: #002c54;
  font-size: 24px;
}
.maintenance-modal p {
  margin: 0 0 14px;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}
.maintenance-modal-eta {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 20px;
  font-size: 13px;
  color: #92400e;
  font-weight: 600;
}

/* Update-mode popup variant — andere kleur, niet-blokkerend */
.update-overlay {
  background: rgba(15, 23, 42, 0.55);
}
.update-modal {
  border-top: 4px solid #f59e0b;
}
.update-modal h2 {
  color: #92400e;
}
.update-modal-eta {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

/* ============================================================================
 * v39 — App confirm modal (gerenamed van v38 om collisie te vermijden met dashboard)
 * ============================================================================ */
.app-confirm-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: app-confirm-fade 0.15s ease-out;
}
@keyframes app-confirm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.app-confirm-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  animation: app-confirm-pop 0.2s ease-out;
}
@keyframes app-confirm-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-confirm-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 12px;
  display: block;
}
.app-confirm-title {
  margin: 0 0 10px;
  font-size: 20px;
  color: #002c54;
  text-align: center;
  font-weight: 700;
}
.app-confirm-message {
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
  text-align: center;
}
.app-confirm-detail {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 18px;
  font-family: monospace;
  font-size: 12px;
  color: #1e293b;
  word-break: break-all;
  text-align: center;
}
.app-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.app-confirm-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: all 0.15s;
  font-family: inherit;
  min-width: 130px;
}
.app-confirm-btn-cancel {
  background: #e2e8f0;
  color: #1e293b;
}
.app-confirm-btn-cancel:hover {
  background: #cbd5e1;
}
.app-confirm-btn-danger {
  background: #dc2626;
  color: #fff;
}
.app-confirm-btn-danger:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
}



/* ============================================================================
 * v48 — COOKIE CONSENT BANNER (Cookiebot/Valisa-style + blocking + cookie details)
 * Kleuren via CSS-variabelen: --cb-primary, --cb-btn-text, --cb-text, --cb-text-muted, --cb-bg, --cb-border
 * ============================================================================ */
:root {
  --cb-primary: #1e3a8a;
  --cb-btn-text: #ffffff;
  --cb-text: #1e293b;
  --cb-text-muted: #475569;
  --cb-bg: #ffffff;
  --cb-border: #e2e8f0;
}

/* Lock body when blocking modal is showing */
html.cb-locked, body.cb-locked { overflow: hidden !important; }

.cb-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  z-index: 2147483640;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  animation: cb-fade-in 0.2s ease-out;
}
@keyframes cb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cb-overlay.cb-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* In banner-mode: gecentreerd onderaan met witruimte rondom (Valisa-stijl) */
.cb-overlay[data-mode="banner"] {
  padding: 24px;
}
.cb-overlay[data-mode="banner"] .cb-modal {
  border-radius: 12px;
  border-top: 4px solid var(--cb-primary);
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18), 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* In details-mode: gecentreerde modal */
.cb-overlay[data-mode="details"] {
  align-items: center;
  padding: 16px;
}
.cb-overlay[data-mode="details"] .cb-modal {
  border-radius: 12px;
  max-width: 920px;
  width: 100%;
  border-top: 4px solid var(--cb-primary);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  max-height: calc(100vh - 32px);
}

.cb-modal {
  background: var(--cb-bg);
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--cb-text);
  line-height: 1.55;
  box-sizing: border-box;
}

/* === HORIZONTAL BANNER VIEW (Valisa-stijl) === */
.cb-h-content {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--cb-border);
}
.cb-h-brand { flex-shrink: 0; }
.cb-h-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--cb-border);
}
.cb-h-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cb-primary);
  color: var(--cb-btn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26px;
}
.cb-h-text { flex: 1; min-width: 0; }
.cb-h-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cb-text);
}
.cb-h-description {
  margin: 0;
  font-size: 13px;
  color: var(--cb-text-muted);
  line-height: 1.55;
}
.cb-h-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
}
.cb-h-actions .cb-btn { min-width: 220px; padding: 11px 22px; font-size: 14px; }

/* HORIZONTAL onderbalk: brand-mark, toggles, details-link */
.cb-h-bottom {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 32px;
  background: #fafafa;
  flex-wrap: wrap;
}
.cb-h-brand-mark {
  font-weight: 700;
  font-size: 13px;
  color: var(--cb-text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cb-h-toggles {
  display: flex;
  gap: 26px;
  flex: 1;
  flex-wrap: wrap;
}
.cb-h-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.cb-h-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
}
.cb-h-details-link {
  background: transparent;
  border: 0;
  color: var(--cb-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  padding: 4px 8px;
}
.cb-h-details-link:hover { text-decoration: underline; }

/* === DETAILS VIEW === */
.cb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
  gap: 12px;
}
.cb-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.cb-logo-placeholder {
  font-weight: 700;
  font-size: 16px;
  color: var(--cb-primary);
}
.cb-logo-placeholder-round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cb-primary);
  color: var(--cb-btn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cb-brand-mark {
  margin-left: auto;
  color: var(--cb-text-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Tabs */
.cb-tabs {
  display: flex;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
  flex-shrink: 0;
}
.cb-tab {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text-muted);
  border-bottom: 3px solid transparent;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.cb-tab:hover { color: var(--cb-text); }
.cb-tab.is-active {
  color: var(--cb-primary);
  border-bottom-color: var(--cb-primary);
}

/* Tab-panes */
.cb-tabpane {
  display: none;
  padding: 22px 24px 8px;
  overflow-y: auto;
}
.cb-tabpane.is-active { display: block; }
.cb-tabpane h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cb-text);
}
.cb-description {
  margin: 0 0 18px;
  color: var(--cb-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Quick toggles in toestemming-tab */
.cb-quick-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
.cb-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.cb-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
}
.cb-toggle input[type="checkbox"],
.cb-h-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.cb-toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 100px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cb-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cb-toggle input:checked ~ .cb-toggle-slider,
.cb-h-toggle input:checked ~ .cb-toggle-slider {
  background: var(--cb-primary);
}
.cb-toggle input:checked ~ .cb-toggle-slider::before,
.cb-h-toggle input:checked ~ .cb-toggle-slider::before {
  transform: translateX(20px);
}
.cb-toggle input:disabled ~ .cb-toggle-slider,
.cb-h-toggle input:disabled ~ .cb-toggle-slider {
  background: var(--cb-primary);
  opacity: 0.6;
  cursor: not-allowed;
}
.cb-toggle-inline {
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

/* === DETAILS-TAB: cookie-categorieën met providers === */
.cb-cat-block {
  border-bottom: 1px solid var(--cb-border);
  padding: 0;
  background: var(--cb-bg);
}
.cb-cat-block:last-of-type { border-bottom: 0; }
.cb-cat-block summary { list-style: none; }
.cb-cat-block summary::-webkit-details-marker { display: none; }

.cb-cat-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px;
  cursor: pointer;
  font-weight: 700;
  color: var(--cb-text);
}
.cb-cat-arrow {
  display: inline-block;
  transition: transform 0.2s;
  color: var(--cb-text-muted);
  font-size: 14px;
}
.cb-cat-block[open] .cb-cat-arrow { transform: rotate(180deg); }

.cb-cat-name { font-size: 15px; }
.cb-cat-count {
  display: inline-block;
  background: #f1f5f9;
  color: var(--cb-text-muted);
  border-radius: 100px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}

.cb-cat-body {
  padding: 4px 4px 16px 26px;
}
.cb-cat-desc {
  margin: 0 0 16px;
  color: var(--cb-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.cb-no-cookies {
  color: var(--cb-text-muted);
  font-size: 13px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 6px;
  text-align: center;
}

.cb-provider-block {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fafbfc;
}
.cb-provider-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cb-text);
  margin-bottom: 6px;
}
.cb-provider-head strong { font-weight: 700; }
.cb-provider-badge {
  display: inline-block;
  background: #f1f5f9;
  color: var(--cb-text-muted);
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.cb-provider-link {
  display: inline-block;
  color: var(--cb-primary);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 12px;
}
.cb-provider-link:hover { text-decoration: underline; }

.cb-cookie-row {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 8px;
}
.cb-cookie-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--cb-text);
  margin-bottom: 4px;
}
.cb-cookie-desc {
  color: var(--cb-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 8px;
}
.cb-cookie-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--cb-text-muted);
  border-top: 1px dashed var(--cb-border);
  padding-top: 8px;
}
.cb-cookie-meta strong { color: var(--cb-text); font-weight: 600; }

.cb-fineprint {
  margin: 18px 0 8px;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

/* Action buttons */
.cb-actions {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-bg);
  flex-shrink: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cb-btn {
  flex: 0 1 auto;
  min-width: 180px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.cb-btn-primary {
  background: var(--cb-primary);
  color: var(--cb-btn-text);
  border-color: var(--cb-primary);
}
.cb-btn-primary:hover { filter: brightness(1.1); }
.cb-btn-secondary {
  background: var(--cb-bg);
  color: var(--cb-primary);
  border-color: var(--cb-primary);
}
.cb-btn-secondary:hover { background: #f1f5f9; }

/* Privacy/disclaimer links */
.cb-policy-links {
  text-align: center;
  padding: 10px 24px 14px;
  font-size: 12px;
  color: var(--cb-text-muted);
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
  flex-shrink: 0;
}
.cb-policy-links a {
  color: var(--cb-primary);
  text-decoration: none;
  margin: 0 6px;
}
.cb-policy-links a:hover { text-decoration: underline; }
.cb-policy-sep { color: #cbd5e1; }

/* ====== MOBILE ====== */
@media (max-width: 768px) {
  .cb-overlay { padding: 0; align-items: flex-end; }
  .cb-overlay[data-mode="banner"] { padding: 0; }
  .cb-overlay[data-mode="banner"] .cb-modal,
  .cb-overlay[data-mode="details"] .cb-modal {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
    max-width: 100%;
    margin: 0;
  }

  .cb-h-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
    text-align: center;
  }
  .cb-h-brand { display: flex; justify-content: center; }
  .cb-h-actions { flex-direction: column; }
  .cb-h-actions .cb-btn { width: 100%; min-width: 0; }
  .cb-h-bottom {
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cb-h-toggles { flex-direction: column; gap: 10px; }
  .cb-h-toggle {
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--cb-border);
  }
  .cb-h-toggle:last-child { border-bottom: 0; }

  .cb-modal-header { padding: 14px 18px; }
  .cb-tabpane { padding: 16px 18px 8px; }
  .cb-actions { padding: 12px 18px; flex-direction: column; }
  .cb-btn { width: 100%; min-width: 0; }
  .cb-quick-toggles { grid-template-columns: 1fr; }
  .cb-quick-toggles .cb-toggle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  .cb-cookie-meta { flex-direction: column; gap: 4px; }
}

/* ============================================================================
 * v51 — PROFILE PAGE (modern, gebruikersvriendelijk)
 * ============================================================================ */

/* Profile hero - bovenste card met avatar + abonnement-status */
.profile-hero {
  background: linear-gradient(135deg, #002c54 0%, #1e40af 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(0, 44, 84, 0.15);
}
.profile-hero-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 250px;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.profile-hero-info { min-width: 0; }
.profile-hero-name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.profile-hero-email {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-all;
}
.profile-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-hero-stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}
.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-stat-value {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-default {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

/* Abonnement grid */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.sub-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
}
.sub-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}
.sub-stat-help {
  font-size: 12px;
  color: #64748b;
}
.sub-cta {
  margin-top: 18px;
  text-align: center;
}

/* Betalings-timeline */
.payment-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.payment-event {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.payment-event-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.payment-event-body { flex: 1; min-width: 0; }
.payment-event-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.payment-event-title {
  font-weight: 700;
  font-size: 14px;
}
.payment-event-amount {
  margin-left: auto;
  font-weight: 700;
  font-size: 16px;
  color: #1e293b;
}
.payment-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: #64748b;
  align-items: center;
}
.payment-event-meta > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 4px;
}
.payment-event-meta > span:last-child {
  margin-right: 0;
}
.payment-event-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* Collapsible profile sections */
.profile-collapsible details summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-collapsible details summary::-webkit-details-marker { display: none; }
.profile-collapsible details summary::after {
  content: '▾';
  margin-left: auto;
  color: #64748b;
  font-size: 14px;
  transition: transform 0.2s;
}
.profile-collapsible details[open] summary::after {
  transform: rotate(180deg);
}

.profile-subhead {
  margin-top: 18px;
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Toggle helper text */
.toggle-help {
  display: block;
  font-weight: 400;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 767px) {
  .profile-subtitle { display: none; }
  .profile-hero {
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .profile-hero-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile-hero-stats {
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 14px;
  }
  .profile-stat {
    align-items: center;
    text-align: center;
  }
  .sub-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sub-stat-value { font-size: 16px; }
  .payment-event-meta { gap: 10px; }
}

/* ============================================================================
 * v54 — MENU BEHEER (admin)
 * ============================================================================ */
.menu-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
  flex-wrap: wrap;
}
.menu-tab {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s;
}
.menu-tab:hover { background: #fff; color: #1e293b; }
.menu-tab.is-active {
  background: #fff;
  color: #1e3a8a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.menu-item-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.menu-item-card.is-section {
  background: #f8fafc;
  border-left: 4px solid #1e3a8a;
}
.menu-item-card.menu-child {
  margin-left: 16px;
  background: #fafbfc;
}
.menu-item-card details > summary { list-style: none; }
.menu-item-card details > summary::-webkit-details-marker { display: none; }

.menu-item-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  flex-wrap: wrap;
}
.menu-item-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.menu-item-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-item-label strong {
  font-size: 14px;
  color: #1e293b;
}
.menu-item-label small {
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  word-break: break-all;
}
.menu-item-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.menu-item-toggle {
  color: #94a3b8;
  font-size: 14px;
  transition: transform 0.2s;
}
.menu-item-card details[open] .menu-item-toggle {
  transform: rotate(180deg);
}

.badge-mini {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  border-radius: 100px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-mini.badge-off {
  background: #fee2e2;
  color: #991b1b;
}
.badge-mini.badge-section {
  background: #dbeafe;
  color: #1e40af;
}

.menu-edit-form {
  padding: 16px 18px;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc;
}
.menu-children {
  padding: 0 16px 16px;
}

/* Mobile */
@media (max-width: 767px) {
  .menu-tab { min-width: 0; padding: 8px 10px; font-size: 12px; }
  .menu-item-summary { padding: 10px 12px; gap: 8px; }
  .menu-item-card.menu-child { margin-left: 8px; }
}

/* ============================================================================
 * v54 — NAVIGATION ADMIN PAGE
 * ============================================================================ */
.nav-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  background: #f8fafc;
  border-radius: 10px;
  padding: 6px;
}
.nav-tab {
  flex: 1 1 200px;
  text-align: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-tab:hover { background: #fff; color: #1e3a8a; }

.menu-item-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color 0.15s;
}
.menu-item-card[open] { border-color: #1e3a8a; }
.menu-item-card-child {
  margin-left: 20px;
  background: #fafbfc;
}
.menu-item-card summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-item-card summary::-webkit-details-marker { display: none; }
.menu-item-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.menu-item-card summary::after {
  content: '▾';
  margin-left: auto;
  color: #94a3b8;
  font-size: 12px;
  transition: transform 0.2s;
}
.menu-item-card[open] summary::after { transform: rotate(180deg); }

.menu-item-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.menu-item-badge-off { background: #f1f5f9; color: #64748b; }
.menu-item-badge-info { background: #dbeafe; color: #1e40af; }

.menu-column {
  border-left: 3px solid #1e3a8a;
  padding-left: 16px;
  margin-bottom: 24px;
}
.menu-column-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.menu-column-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1e293b;
}

@media (max-width: 640px) {
  .nav-tab { flex-basis: 100%; }
  .menu-item-card-child { margin-left: 10px; }
}

/* ============================================================================
 * v57 — Hero CTA-knoppen even groot maken
 * ============================================================================ */
.landing-hero-cta .landing-btn-primary,
.landing-hero-cta .landing-btn-ghost {
  min-width: 220px;
  justify-content: center;
  text-align: center;
}
@media (max-width: 480px) {
  .landing-hero-cta .landing-btn-primary,
  .landing-hero-cta .landing-btn-ghost {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================================
 * v59 — REVIEWS PLUGIN
 * ============================================================================ */

/* Star ratings algemeen */
.review-stars { letter-spacing: 1px; }
.review-stars .star-on  { color: #f59e0b; }
.review-stars .star-off { color: #cbd5e1; }

/* Rating selector (klant invoer) */
.rating-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.rating-star {
  background: none;
  border: none;
  font-size: 36px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s, transform 0.15s;
}
.rating-star.is-active,
.rating-star.is-hover { color: #f59e0b; transform: scale(1.1); }
.rating-label {
  margin-left: 12px;
  font-weight: 600;
  color: #64748b;
  font-size: 14px;
}

/* Reviews stats banner */
.reviews-stats {
  background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.reviews-stats-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.reviews-stats-number {
  font-size: 42px;
  font-weight: 800;
  color: #92400e;
  line-height: 1;
}
.reviews-stats-count {
  font-size: 12px;
  color: #92400e;
  margin-top: 4px;
}
.reviews-stats-info {
  flex: 1;
  min-width: 200px;
  color: #475569;
}

/* Eigen review status (klant) */
.my-review-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}
.my-review-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.my-review-body { color: #475569; font-style: italic; margin: 0; }
.my-review-response {
  background: #dbeafe;
  border-left: 3px solid #1e40af;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
}
.my-review-response p { margin: 4px 0 0; }
.my-review-meta { color: #94a3b8; display: block; margin-top: 8px; }

/* Reviews grid (publiek overzicht) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.review-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.review-author {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.review-card-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1e293b;
}
.review-card-body {
  margin: 0 0 12px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}
.review-card-response {
  background: #eef2ff;
  border-left: 3px solid #4338ca;
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 13px;
  color: #1e1b4b;
}
.review-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  color: #94a3b8;
}

/* Admin review cards */
.review-admin-card { padding: 18px; }
.review-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}
.review-admin-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.review-admin-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
}
.review-admin-meta strong { color: #1e293b; }
.review-admin-meta small { color: #64748b; font-size: 12px; }
.review-admin-body {
  color: #1e293b;
  background: #fafbfc;
  padding: 14px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 15px;
  line-height: 1.6;
}
.review-admin-existing-response {
  background: #eef2ff;
  border-left: 4px solid #4338ca;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 14px;
}
.review-admin-existing-response p { margin: 4px 0 0; color: #1e1b4b; }
.review-admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.review-admin-respond {
  display: none;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}
.review-admin-respond.is-open { display: block; }

/* ============================================================================
 * REVIEWS CAROUSEL — landing pagina
 * ============================================================================ */
.reviews-carousel-section {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  padding: 60px 0 70px;
  overflow: hidden;
}
.reviews-carousel-intro {
  text-align: center;
  margin-bottom: 40px;
}
.reviews-carousel-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: #fef3c7;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid #fde68a;
  font-size: 14px;
  color: #92400e;
}
.reviews-carousel-rating strong { font-size: 16px; }

.reviews-carousel-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Soft fade-out aan beide randen */
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.reviews-carousel-track {
  display: flex;
  gap: 20px;
  animation: reviews-scroll 80s linear infinite;
  width: max-content;
}
.reviews-carousel-track:hover {
  animation-play-state: paused;
}
@keyframes reviews-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* halverwege omdat we content dupliceren */
}
.reviews-carousel-item {
  flex: 0 0 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 44, 84, 0.05);
  display: flex;
  flex-direction: column;
}
.rci-head { margin-bottom: 10px; }
.rci-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1e293b;
  font-weight: 700;
}
.rci-body {
  flex: 1;
  margin: 0 0 14px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
}
.rci-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  font-size: 12px;
}
.rci-author {
  font-weight: 600;
  color: #002c54;
}
.rci-foot small { color: #94a3b8; }

@media (max-width: 640px) {
  .reviews-carousel-item { flex-basis: 280px; }
  .reviews-carousel-section { padding: 40px 0 50px; }
  .reviews-carousel-track { animation-duration: 60s; }
}

/* Toegankelijkheid: respecteer reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .reviews-carousel-track { animation: none; }
}

/* ============================================================================
 * v60 — REVIEWS PAGINATION (AJAX)
 * ============================================================================ */
.reviews-list-container {
  position: relative;
  transition: opacity 0.2s;
}
.reviews-list-container.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.reviews-list-container.is-error::after {
  content: '⚠️ Kon reviews niet laden, ververs de pagina.';
  display: block;
  text-align: center;
  padding: 14px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  margin-top: 12px;
}

.reviews-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.page-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  cursor: pointer;
  transition: all 0.15s;
}
.page-btn:hover:not([disabled]) {
  background: #1e3a8a;
  color: #fff;
  border-color: #1e3a8a;
}
.page-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-indicator {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #475569;
}
.page-indicator strong { color: #1e293b; }
.page-indicator small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .reviews-pagination { gap: 8px; }
  .page-btn { padding: 8px 12px; font-size: 13px; }
  .page-indicator { font-size: 13px; flex-basis: 100%; order: -1; }
}

/* ============================================================================
 * LIVE CHAT WIDGET — minimale fallback CSS
 * Het volledige styling zit INLINE in _livechat_widget.php voor max specificity.
 * Hier alleen de drijvende bubble en venster-positie.
 * ============================================================================ */
.livechat-widget {
  position: fixed;
  bottom: 24px;
  z-index: 9998;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.livechat-widget.livechat-pos-bottom-right { right: 24px; }
.livechat-widget.livechat-pos-bottom-left  { left: 24px; }
.lc-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--lc-primary, #002c54);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.15s ease;
}
.lc-bubble:hover { transform: scale(1.08); background: var(--lc-accent, #1e40af); }
.lc-bubble.is-active { background: var(--lc-accent, #1e40af); }
.lc-bubble-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 6px;
  min-width: 20px;
  text-align: center;
}
.lc-window {
  position: absolute;
  bottom: 76px;
}
.livechat-widget.livechat-pos-bottom-right .lc-window { right: 0; }
.livechat-widget.livechat-pos-bottom-left  .lc-window { left: 0; }
@media (max-width: 480px) {
  .livechat-widget.livechat-pos-bottom-right { right: 14px; }
  .livechat-widget.livechat-pos-bottom-left  { left: 14px; }
}


/* ============================================================================
 * LIVECHAT ADMIN
 * ============================================================================ */
.lc-admin-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.lc-admin-stat {
  flex: 1;
  min-width: 100px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.lc-admin-stat strong { display: block; font-size: 22px; color: #1e293b; }
.lc-admin-stat span { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

.lc-inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  min-height: 600px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.lc-inbox-list {
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow-y: auto;
  max-height: 700px;
}
.lc-inbox-search {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  gap: 8px;
}
.lc-inbox-search input,
.lc-inbox-search select {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.lc-conv-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.lc-conv-item:hover { background: #f1f5f9; }
.lc-conv-item.is-active { background: #dbeafe; border-left: 3px solid #1e40af; }
.lc-conv-item.is-unread { background: #fef9c3; }
.lc-conv-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.lc-conv-head strong { font-size: 13px; color: #1e293b; }
.lc-conv-head small { font-size: 11px; color: #94a3b8; }
.lc-conv-preview {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lc-conv-meta {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}
.lc-conv-meta .badge { font-size: 10px; padding: 1px 6px; }

.badge-open     { background: #dbeafe; color: #1e40af; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-resolved { background: #dcfce7; color: #15803d; }
.badge-closed   { background: #f1f5f9; color: #475569; }

.lc-inbox-detail {
  display: flex;
  flex-direction: column;
  background: #fff;
  max-height: 700px;
}
.lc-empty-detail {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 14px;
}
.lc-detail-head {
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.lc-detail-head h3 { margin: 0 0 4px; }
.lc-detail-head p { margin: 0; color: #64748b; font-size: 13px; }
.lc-detail-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.lc-detail-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 300px;
}
.lc-detail-composer {
  border-top: 1px solid #e2e8f0;
  padding: 14px;
  background: #fff;
}
.lc-canned-bar { margin-bottom: 8px; }
.lc-canned-bar select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.lc-detail-composer textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .lc-inbox { grid-template-columns: 1fr; }
  .lc-inbox-list { max-height: 300px; }
}

/* ============================================================================
 * v62 — Canned response chips in admin chat
 * ============================================================================ */
.lc-canned-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
}
.lc-canned-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-right: 6px;
}
.lc-canned-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
  color: #1e3a8a;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lc-canned-chip:hover {
  background: #1e3a8a;
  color: #fff;
  border-color: #1e3a8a;
}
.lc-canned-chip code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.lc-canned-chip:hover code {
  background: rgba(255, 255, 255, 0.2);
}
.lc-composer-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.lc-composer-wrap textarea {
  flex: 1;
  margin-bottom: 0 !important;
}
.lc-send-button {
  flex-shrink: 0;
  align-self: flex-end;
}

/* ============================================================================
 * v63 — Live chat bubble configureerbaar (grootte + bottom offset)
 * ============================================================================ */
.livechat-widget {
  bottom: var(--lc-bottom-offset, 24px);
}
.livechat-widget .lc-bubble {
  width: var(--lc-bubble-size, 60px);
  height: var(--lc-bubble-size, 60px);
}
.livechat-widget .lc-bubble svg {
  /* Schaal SVG mee met bubble */
  width: calc(var(--lc-bubble-size, 60px) * 0.42);
  height: calc(var(--lc-bubble-size, 60px) * 0.42);
}
/* Voorkom dat SVG de klik onderschept (close-knop bug) */
.lc-close-btn svg,
.lc-close-btn svg * {
  pointer-events: none;
}
.lc-close-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Window positie aanpassen op grotere bubble */
.livechat-widget .lc-window {
  bottom: calc(var(--lc-bubble-size, 60px) + 16px);
}

/* ============================================================================
 * v64 — Fix: hidden attribuut op livechat elements (overrule display:flex)
 * ============================================================================ */
#livechat-widget [hidden],
#livechat-widget.lc-rated .lc-rating { display: none !important; }

/* Klikbare layer voor close button: vergroot het hit-target */
.lc-close-btn {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 6px;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.lc-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lc-close-btn svg {
  pointer-events: none;
}

#livechat-widget .lc-window.is-hidden { display: none !important; }

/* ============================================================================
 * v65 - ADMIN CMS LAYOUT (sidebar + full-width content)
 * ============================================================================ */

/* Body krijgt deze class via JS-script in _header.php */
html.has-admin-sidebar body { padding-left: 260px; transition: padding 0.2s; }

/* Op mobiel default geen padding (sidebar wordt overlay) */
@media (max-width: 1023px) {
  html.has-admin-sidebar body { padding-left: 0; }
}

/* Header voor admin: sticky bovenin, gebruik sidebar-margin */
.site-header-admin {
  /* normale styling werkt al, alleen content schuift via body padding */
}

/* Main content bij admin: pagina-breed gebruiken */
.main-admin {
  width: 100%;
  max-width: 100% !important;
  padding: 24px 32px;
}
.main-admin .container {
  max-width: 1600px !important; /* full-width met optionele cap */
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 1023px) {
  .main-admin { padding: 18px 16px; }
}

/* ====== SIDEBAR ====== */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: linear-gradient(180deg, #0f1e36 0%, #0a1828 100%);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.25s ease;
}

.admin-sidebar-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.admin-sidebar-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.admin-sidebar-close {
  display: none;
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.admin-sidebar-close:hover { background: rgba(255,255,255,0.08); }

.admin-sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
  /* Scrollbar verbergen — Firefox + Chrome/Safari/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.admin-sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.admin-sidebar-group {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-sidebar-group:last-child { border-bottom: none; }

.admin-sidebar-group-title {
  display: block;
  padding: 3px 20px 2px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #cbd5e1;
  line-height: 1.4;
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.admin-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.admin-sidebar-link.is-active {
  background: rgba(59, 130, 246, 0.12);
  color: #fff;
  border-left-color: #3b82f6;
  font-weight: 600;
}
.admin-sidebar-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  min-width: 20px;
  text-align: center;
}

.admin-sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  font-size: 12px;
}
.admin-sidebar-footer small { color: #94a3b8; }
.admin-sidebar-logout {
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.admin-sidebar-logout:hover { text-decoration: underline; }

/* Backdrop voor mobile */
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* === MOBIEL: sidebar wordt slide-out drawer === */
@media (max-width: 1023px) {
  .admin-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  body.admin-sidebar-open .admin-sidebar { transform: translateX(0); }
  body.admin-sidebar-open .admin-sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .admin-sidebar-close { display: block; }
}

/* Page-heading op admin pagina's - meer ruimte */
html.has-admin-sidebar .page-heading {
  padding: 8px 0 18px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 24px;
}
html.has-admin-sidebar .page-heading h1 {
  font-size: 28px;
  margin-bottom: 4px;
}

/* Card spacing op admin pagina's iets ruimer */
html.has-admin-sidebar .card {
  margin-bottom: 18px;
  padding: 24px;
}

/* Hide bottom-nav op admin pagina's (hoeft niet, we hebben sidebar) */
html.has-admin-sidebar .bottom-nav { display: none !important; }
html.has-admin-sidebar .has-bottom-nav { padding-bottom: 24px; }

/* Live chat widget moet niet meeshiften met admin sidebar (is fixed positioned) */
html.has-admin-sidebar #livechat-widget {
  /* Gebruik viewport-relative posities, dus geen aanpassing nodig - fixed werkt op viewport */
  z-index: 9998;
}

/* Maar zorg dat hij niet onder de sidebar komt op desktop */
@media (min-width: 1024px) {
  html.has-admin-sidebar.livechat-pos-bottom-left #livechat-widget {
    /* Als bubble linksonder staat: shift naar rechts van sidebar (260px) */
    left: 280px !important;
  }
}

/* ============================================================================
 * v66 - Admin sidebar: zelfde achtergrondkleur als header + collapsible groepen
 * ============================================================================ */

/* Sidebar achtergrond gelijk aan site-header (#002c54) */
.admin-sidebar {
  background: #002c54;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Collapsible groep styling */
.admin-sidebar-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
}
.admin-sidebar-group:last-child { border-bottom: none; }

/* Group title is nu een summary (klikbaar) */
summary.admin-sidebar-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #cbd5e1;
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
  transition: color 0.15s, background 0.15s;
  line-height: 1.4;
}
summary.admin-sidebar-group-title::-webkit-details-marker { display: none; }

/* Caret-icoontje rechts */
summary.admin-sidebar-group-title::after {
  content: '▾';
  font-size: 11px;
  color: #5d7ba0;
  transition: transform 0.2s;
  margin-left: 8px;
}
.admin-sidebar-group[open] summary.admin-sidebar-group-title::after {
  transform: rotate(180deg);
  color: #fff;
}
summary.admin-sidebar-group-title:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.admin-sidebar-group[open] summary.admin-sidebar-group-title {
  color: #fff;
}

.admin-sidebar-group-items {
  padding: 4px 0 10px;
  background: rgba(0, 0, 0, 0.15);
}

/* Sidebar links binnen group items */
.admin-sidebar-group-items .admin-sidebar-link {
  padding: 8px 20px 8px 28px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.admin-sidebar-group-items .admin-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.admin-sidebar-group-items .admin-sidebar-link.is-active {
  background: rgba(59, 130, 246, 0.18);
  color: #fff;
  border-left-color: #60a5fa;
  font-weight: 600;
}

/* Header en sidebar visueel als één geheel */
.site-header-admin {
  position: relative;
  z-index: 90;
  /* Achtergrond is al primary (#002c54) zoals sidebar */
}

/* Op desktop: sidebar onder de header beginnen */
@media (min-width: 1024px) {
  html.has-admin-sidebar .site-header-admin {
    /* Header neemt full width binnen body (body heeft al padding-left voor sidebar) */
    margin-left: 0;
    width: 100%;
  }
  .admin-sidebar {
    /* Sidebar gaat helemaal van bovenaf, header staat ernaast */
  }
}

/* Sidebar nav heeft meer top padding zodat hij niet onder de header begint */
@media (min-width: 1024px) {
  .admin-sidebar-nav { padding-top: 0; }
}

/* Brand bovenaan sidebar (zelfde stijl als header) */
.admin-sidebar::before {
  content: '⚙️ CMS Beheer';
  display: block;
  padding: 22px 20px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.15);
}

/* Mobile: sidebar verschijnt over de header */
@media (max-width: 1023px) {
  html.has-admin-sidebar .site-header-admin { margin-left: 0; width: 100%; }
}

/* Verberg bottom-nav op admin pagina's compleet */
html.has-admin-sidebar .bottom-nav,
html.has-admin-sidebar .footer-text,
html.has-admin-sidebar .has-bottom-nav { padding-bottom: 24px !important; }

/* ============================================================================
 * Payments admin pagina
 * ============================================================================ */
.payments-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.payments-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payments-stat strong {
  display: block;
  font-size: 24px;
  color: #1e293b;
  font-weight: 800;
  margin: 4px 0;
}
.payments-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
}
.payments-stat small { font-size: 12px; color: #94a3b8; }
.payments-stat-primary {
  background: linear-gradient(135deg, #002c54, #1e40af);
  color: #fff;
  border-color: #002c54;
}
.payments-stat-primary .payments-stat-label,
.payments-stat-primary small { color: rgba(255,255,255,0.8); }
.payments-stat-primary strong { color: #fff; }
.payments-stat-warning {
  border-left: 4px solid #f59e0b;
}

.payments-filters {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px;
  background: #f8fafc;
  border-radius: 8px;
}
.payments-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.payments-filters input,
.payments-filters select {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
}

.payments-table-wrap { overflow-x: auto; }
.payments-table { width: 100%; }
.payments-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.payments-table th { background: #f8fafc; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; text-align: left; }

.payments-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.payments-status-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-left-width: 4px;
}
.payments-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.payments-status-card strong {
  display: block;
  font-size: 22px;
  color: #1e293b;
}
.payments-status-card span {
  display: block;
  font-size: 12px;
  color: #64748b;
}

/* ============================================================================
 * v67 - Admin header naadloos aansluiten op sidebar
 * ============================================================================ */

/* Sidebar bovenaan: zonder pseudo-titel, gewoon strak */
html.has-admin-sidebar .admin-sidebar::before {
  content: '⚙️ CMS Beheer';
  display: block;
  padding: 14px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Zelfde hoogte als header voor naadloze aansluiting */
  min-height: var(--header-height, 60px);
  display: flex;
  align-items: center;
}

/* Header in admin layout: full-width naast sidebar */
@media (min-width: 1024px) {
  html.has-admin-sidebar .site-header-admin {
    background: var(--color-primary);
    margin-left: 0;
    width: 100%;
    /* Header staat boven alles, ook boven sidebar visueel */
  }
  /* Nav-container in admin krijgt left-padding ipv max-width */
  html.has-admin-sidebar .site-header-admin .nav-container {
    max-width: 100%;
    padding-left: calc(260px + 24px);
    padding-right: 24px;
    margin: 0;
  }
  /* Sidebar start ONDER de header (zelfde hoogte als header) */
  html.has-admin-sidebar .admin-sidebar {
    top: 0;
    /* Zorg dat de sidebar-titel naadloos aansluit */
  }
}

/* Op mobile: header gewoon zoals normaal, sidebar wordt overlay */
@media (max-width: 1023px) {
  html.has-admin-sidebar .site-header-admin .nav-container {
    /* Default behavior */
  }
  html.has-admin-sidebar .admin-sidebar::before {
    display: flex;
    align-items: center;
    min-height: 50px;
  }
}

/* Body krijgt left-padding voor sidebar op desktop */
@media (min-width: 1024px) {
  html.has-admin-sidebar body { padding-left: 260px; }
}
@media (max-width: 1023px) {
  html.has-admin-sidebar body { padding-left: 0; }
}

/* Main-admin content: geen extra max-width; sidebar al via body padding */
.main-admin {
  width: 100%;
  max-width: 100% !important;
  padding: 24px 32px;
}
.main-admin .container { max-width: 1600px !important; width: 100%; margin: 0; padding: 0; }

@media (max-width: 1023px) {
  .main-admin { padding: 18px 16px; }
}

/* ============================================================================
 * v68 - Admin header: brand + knoppen samen naar rechts in 1 rij
 * Volgorde: [witte ruimte] → menu-knoppen → brand → user-block
 * ============================================================================ */
@media (min-width: 1024px) {
  /* Header in admin: 1 rij met content rechts uitgelijnd */
  html.has-admin-sidebar .site-header-admin .nav-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end; /* alles aan de rechterkant */
    align-items: center;
    gap: 16px;
    padding-left: calc(260px + 24px);
    padding-right: 24px;
    flex-wrap: nowrap;
  }

  /* Plaats menu eerst (links van brand) */
  html.has-admin-sidebar .site-header-admin .nav-menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    flex: none;
    order: 1; /* eerste van rechts gerekend = links van brand */
  }

  /* Brand staat na menu */
  html.has-admin-sidebar .site-header-admin .brand {
    order: 2;
    margin-left: 0;
    margin-right: 8px;
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.15);
  }

  /* User-block uiterst rechts */
  html.has-admin-sidebar .site-header-admin .nav-user-block {
    order: 3;
    margin-left: 0;
  }

  /* Verberg de nav-toggle hamburger op desktop */
  html.has-admin-sidebar .site-header-admin .nav-toggle { display: none; }
}

/* ============================================================================
 * v69 - Admin notifications in header
 * ============================================================================ */
.admin-notifications {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Op desktop: notifications gecentreerd in de admin header */
@media (min-width: 1024px) {
  html.has-admin-sidebar .site-header-admin .nav-container {
    /* Override van v68 — drie zones */
    justify-content: space-between;
    padding-left: 0;     /* geen sidebar-padding meer; brand staat boven sidebar */
    padding-right: 24px;
  }
  /* Brand staat in de "sidebar-kolom" (eerste 260px), zelfde positie als de sidebar-titel was */
  html.has-admin-sidebar .site-header-admin .brand {
    order: 1;
    width: 260px;
    margin: 0;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    flex-shrink: 0;
    height: var(--header-height, 60px);
    box-sizing: border-box;
  }
  .admin-notifications {
    order: 2;            /* Midden */
    flex: 1;             /* Vult de ruimte */
    justify-content: center;
    gap: 6px;
  }
  html.has-admin-sidebar .site-header-admin .nav-menu { order: 3; }
  html.has-admin-sidebar .site-header-admin .nav-user-block { order: 4; }

  /* Verberg de sidebar-titel ::before - brand staat daar nu */
  html.has-admin-sidebar .admin-sidebar::before {
    display: none;
  }
}

/* Verberg notifications op mobile (te druk) */
@media (max-width: 1023px) {
  .admin-notifications { display: none; }
}

.admin-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none !important;
  transition: all 0.15s;
  cursor: pointer;
}
.admin-notif:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.admin-notif.has-count {
  background: rgba(255, 255, 255, 0.1);
}

.admin-notif-icon {
  font-size: 18px;
  line-height: 1;
  filter: grayscale(20%);
  transition: filter 0.15s;
}
.admin-notif.has-count .admin-notif-icon { filter: none; }
.admin-notif:hover .admin-notif-icon { filter: none; }

.admin-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 100px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #002c54;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
  animation: notif-pulse 2s infinite;
}

@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Tooltip op hover */
.admin-notif-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  font-weight: 500;
}
.admin-notif-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1e293b;
}
.admin-notif:hover .admin-notif-tooltip {
  opacity: 1;
}

/* ============================================================================
 * v71 - Live chat: email-client style layout
 * Full-height single-window, geen page scroll, vaste composer onderaan.
 * ============================================================================ */

/* Wanneer livechat tab=inbox actief is, gebruik full-height layout */
.lc-inbox {
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  gap: 0 !important;
  height: calc(100vh - 200px); /* Header + page-heading + tabs hoogte aftrekken */
  min-height: 500px;
  max-height: none !important;
  background: #fff !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.lc-inbox-list {
  border-right: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  overflow-y: auto !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

.lc-inbox-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
  flex-shrink: 0;
}

.lc-conv-item {
  padding: 10px 12px !important;
  font-size: 13px;
}
.lc-conv-item:hover { background: #f1f5f9 !important; }
.lc-conv-item.is-active { background: #dbeafe !important; }

.lc-inbox-detail {
  display: flex;
  flex-direction: column;
  background: #fff !important;
  max-height: none !important;
  overflow: hidden;
}

.lc-detail-head {
  flex-shrink: 0;
  padding: 12px 18px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.lc-detail-head h3 { font-size: 16px !important; }

.lc-detail-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px !important;
  background: #fafbfc !important;
  min-height: 0 !important;
}

.lc-detail-composer {
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0 !important;
  padding: 10px 14px !important;
  background: #fff !important;
}

/* Het bericht-bubble: kleinere padding voor compactere look */
.lc-detail-messages .lc-msg-bubble {
  padding: 8px 12px;
  font-size: 13.5px;
}

/* Empty state als geen conversatie geselecteerd */
.lc-empty-detail {
  flex: 1;
  background: #fafbfc;
}

/* Conversatie-items compacter */
.lc-conv-head strong { font-size: 12.5px; }
.lc-conv-head small { font-size: 10px; }
.lc-conv-preview { font-size: 11.5px; }
.lc-conv-meta .badge { font-size: 9px; padding: 1px 5px; }

/* Mobile: stack the panes vertically, keep email-like feel */
@media (max-width: 768px) {
  .lc-inbox {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 180px);
  }
  .lc-inbox-list { max-height: 250px; }
}

/* Livechat admin: compactere page-heading + verberg stats grid voor inbox tab */
html.has-admin-sidebar .container:has(.lc-inbox) .page-heading { padding: 4px 0 8px; margin-bottom: 8px; }
html.has-admin-sidebar .container:has(.lc-inbox) .page-heading h1 { font-size: 22px; margin: 0; }
html.has-admin-sidebar .container:has(.lc-inbox) .page-heading p { display: none; }
html.has-admin-sidebar .container:has(.lc-inbox) .lc-admin-stats { margin-bottom: 10px; }
html.has-admin-sidebar .container:has(.lc-inbox) .lc-admin-stat { padding: 8px; }
html.has-admin-sidebar .container:has(.lc-inbox) .lc-admin-stat strong { font-size: 16px; }
html.has-admin-sidebar .container:has(.lc-inbox) .lc-admin-stat span { font-size: 10px; }
html.has-admin-sidebar .container:has(.lc-inbox) .nav-tabs { margin-bottom: 10px; }
html.has-admin-sidebar .container:has(.lc-inbox) .nav-tab { padding: 8px 14px; font-size: 13px; }

/* ============================================================================
 * v72 - Admin layout: header FULL WIDTH bovenaan, sidebar START ERONDER
 * ============================================================================ */
@media (min-width: 1024px) {
  /* Body krijgt geen padding-left meer — sidebar zit binnen body, niet erlangs */
  html.has-admin-sidebar body {
    padding-left: 0;
  }

  /* Header: full-width, geen sidebar-padding */
  html.has-admin-sidebar .site-header-admin .nav-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Brand: gewone normale breedte (geen forced 260px width meer) */
  html.has-admin-sidebar .site-header-admin .brand {
    width: auto !important;
    padding: 0 !important;
    border-right: 0 !important;
    height: auto !important;
  }

  /* Sidebar start ONDER de header — bovenkant aligneert met einde van header */
  html.has-admin-sidebar .admin-sidebar {
    top: var(--header-height, 60px);
    height: calc(100vh - var(--header-height, 60px));
  }

  /* Main content: krijgt left-margin voor de sidebar (alle main tags binnen admin layout) */
  html.has-admin-sidebar main,
  html.has-admin-sidebar .main-admin {
    margin-left: 260px;
    padding: 24px 32px;
    max-width: none;
    width: auto;
  }

  /* Container binnen main: full-width tot 1600px */
  html.has-admin-sidebar main .container {
    max-width: 1600px !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

/* Mobile: alles normaal, sidebar overlay */
@media (max-width: 1023px) {
  html.has-admin-sidebar body { padding-left: 0; }
  html.has-admin-sidebar main,
  html.has-admin-sidebar .main-admin { margin-left: 0; }
}

/* ============================================================================
 * v73 - Live chat: inline stats + sidebar sublinks
 * ============================================================================ */

/* Verberg de oude grote stats grid op livechat */
.lc-admin-stats { display: none !important; }

/* Page-heading met stats inline */
.lc-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 0 16px !important;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 14px !important;
}
.lc-page-heading h1 {
  margin: 0 !important;
  font-size: 22px !important;
}

.lc-inline-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.lc-inline-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  color: #64748b;
}
.lc-inline-stat strong {
  color: #1e293b;
  font-size: 14px;
  font-weight: 700;
}
.lc-inline-stat.is-alert {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.lc-inline-stat.is-alert strong { color: #92400e; }

@media (max-width: 768px) {
  .lc-page-heading { flex-direction: column; align-items: flex-start; }
  .lc-inline-stat { font-size: 11px; padding: 3px 9px; }
}

/* Sidebar sub-links (voor livechat tabs) */
.admin-sidebar-sublink {
  padding-left: 44px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  position: relative;
}
.admin-sidebar-sublink::before {
  content: '└';
  position: absolute;
  left: 28px;
  color: #475569;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.admin-sidebar-sublink:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
}
.admin-sidebar-sublink.is-active {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ============================================================================
 * v74 - FIX: header knoppen niet achter sidebar + container full-width admin
 * ============================================================================ */

@media (min-width: 1024px) {
  /* Container in admin layout: pak ALLE breedte naast de sidebar */
  html.has-admin-sidebar main .container {
    max-width: none !important;
    width: 100%;
  }

  /* Sidebar staat met fixed positie; header content moet ERNAAST staan, NIET erachter */
  /* Daarom: nav-container krijgt padding-left = sidebar-breedte */
  html.has-admin-sidebar .site-header-admin .nav-container {
    padding-left: calc(260px + 24px) !important;
    padding-right: 24px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Brand: gewone breedte, GEEN forced 260px meer */
  html.has-admin-sidebar .site-header-admin .brand {
    width: auto !important;
    padding: 0 !important;
    border-right: 0 !important;
    height: auto !important;
    flex-shrink: 0;
    margin-right: 16px;
  }

  /* Sidebar moet onder de brand-positie beginnen, dus brand staat boven sidebar */
  /* OF brand staat naast sidebar.
     We kiezen: brand staat NAAST sidebar (in nav-container met padding-left). */
  /* Dus de sidebar ::before titel ("CMS Beheer") moet weer terug — anders is sidebar bovenkant leeg */
  html.has-admin-sidebar .admin-sidebar::before {
    content: '';        /* kleine spacer */
    display: block;
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
}
CSSEOF
echo "v74 update"

/* ============================================================================
 * v75 - DEFINITIVE FIX: header full-width met content NIET achter sidebar
 * + container always full-width in admin
 * ============================================================================ */
@media (min-width: 1024px) {
  /* Container in admin: ALWAYS full-width */
  html.has-admin-sidebar .container {
    max-width: none !important;
    width: 100% !important;
  }

  /* Header is full-width op pagina, maar content krijgt LEFT-PADDING gelijk aan sidebar
     zodat brand + knoppen NAAST de sidebar staan, NIET erachter */
  html.has-admin-sidebar .site-header-admin .nav-container {
    padding-left: 280px !important;  /* sidebar 260px + 20px luchtruimte */
    padding-right: 24px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Brand: gewoon eerste item in flex-row, geen vaste breedte */
  html.has-admin-sidebar .site-header-admin .brand {
    order: 1 !important;
    width: auto !important;
    padding: 0 !important;
    border-right: 0 !important;
    margin: 0 16px 0 0 !important;
    height: auto !important;
  }

  /* Sidebar: blijft fixed op zijn plek met titel weer terug */
  html.has-admin-sidebar .admin-sidebar::before {
    content: '⚙️ CMS Beheer' !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    background: var(--color-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    min-height: var(--header-height, 60px) !important;
    box-sizing: border-box !important;
  }

  /* Sidebar zelf: top wordt gezet door v82 hieronder */
  html.has-admin-sidebar .admin-sidebar {
    height: 100vh !important;
  }

  /* Body krijgt padding-left voor sidebar */
  html.has-admin-sidebar body {
    padding-left: 0 !important;
  }

  /* Main krijgt margin-left zodat content naast sidebar staat */
  html.has-admin-sidebar main,
  html.has-admin-sidebar .main-admin {
    margin-left: 260px !important;
    padding: 24px 32px !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ============================================================================
 * v76 - FIX: admin header weer sticky (was overschreven door v66)
 * ============================================================================ */
.site-header-admin {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Sidebar moet op een lagere z-index staan dan header zodat header hem overlapt bij scrollen */
@media (min-width: 1024px) {
  html.has-admin-sidebar .admin-sidebar {
    z-index: 90 !important;
  }
}

/* ============================================================================
 * v77 - DEFINITIEVE FIX: brand uiterst links + pagina's 100% breed
 * ============================================================================ */
@media (min-width: 1024px) {
  /* Brand uiterst links boven sidebar (in de eerste 260px ruimte) */
  html.has-admin-sidebar .site-header-admin .nav-container {
    padding-left: 0 !important;
    padding-right: 24px !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  html.has-admin-sidebar .site-header-admin .brand {
    order: 1 !important;
    width: 260px !important;             /* gelijk aan sidebar-breedte */
    flex-shrink: 0 !important;
    padding: 0 20px !important;          /* binnen-padding */
    margin: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    box-sizing: border-box !important;
  }

  /* Notifications staan in flex-row na de brand */
  html.has-admin-sidebar .site-header-admin .admin-notifications {
    order: 2 !important;
    flex: 1 !important;
    justify-content: center !important;
  }

  /* Nav-menu (Dashboard/Zoeken/Profiel) komt na de notifications */
  html.has-admin-sidebar .site-header-admin .nav-menu {
    order: 3 !important;
  }

  /* User-block (Richard.S/Uitloggen) uiterst rechts */
  html.has-admin-sidebar .site-header-admin .nav-user-block {
    order: 4 !important;
  }

  /* Sidebar ::before titel verwijderen — brand zit nu in de header op die positie */
  html.has-admin-sidebar .admin-sidebar::before {
    display: none !important;
  }

  /* CONTAINER + MAIN: ECHT 100% breed, geen 1600px cap */
  html.has-admin-sidebar main,
  html.has-admin-sidebar .main-admin {
    margin-left: 260px !important;
    padding: 24px 32px !important;
    max-width: none !important;
    width: auto !important;
  }
  html.has-admin-sidebar main .container,
  html.has-admin-sidebar .main-admin .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================================
 * v78 - FIX: nu main weg uit header, gebruik direct main op admin
 * Alle eerdere admin-main regels moeten "main" pakken op html.has-admin-sidebar
 * ============================================================================ */
@media (min-width: 1024px) {
  html.has-admin-sidebar > body > main {
    margin-left: 260px !important;
    padding: 24px 32px !important;
    max-width: none !important;
    width: auto !important;
  }
  html.has-admin-sidebar > body > main > .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 1023px) {
  html.has-admin-sidebar > body > main {
    margin-left: 0 !important;
  }
}

/* ============================================================================
 * v79 - Sidebar BEGINT ONDER header, niet erachter
 * ============================================================================ */
@media (min-width: 1024px) {
  html.has-admin-sidebar .admin-sidebar {
    top: var(--header-height, 60px) !important;
    height: calc(100vh - var(--header-height, 60px)) !important;
  }
}

/* ============================================================================
 * v80 - FORCE sidebar onder header (echte header is ~70-80px door padding)
 * ============================================================================ */
@media (min-width: 1024px) {
  html.has-admin-sidebar .admin-sidebar,
  html.has-admin-sidebar.has-admin-sidebar .admin-sidebar,
  html.has-admin-sidebar body .admin-sidebar {
    top: 80px !important;
    height: calc(100vh - 80px) !important;
    z-index: 90 !important;
  }
  /* Header z-index hoger dan sidebar */
  html.has-admin-sidebar .site-header-admin {
    z-index: 100 !important;
  }
}

/* v81 - sidebar nog verder onder de header */
@media (min-width: 1024px) {
  html.has-admin-sidebar .admin-sidebar,
  html.has-admin-sidebar body .admin-sidebar {
    top: 110px !important;
    height: calc(100vh - 110px) !important;
  }
}

/* v82 - sidebar verder naar beneden, definitive */
@media (min-width: 1024px) {
  html.has-admin-sidebar .admin-sidebar,
  html.has-admin-sidebar body .admin-sidebar {
    top: 140px !important;
    height: calc(100vh - 140px) !important;
  }
}

/* ============================================================================
 * v83 - SIDEBAR FINAL - inline-position met hoogste specificity
 * ============================================================================ */
@media (min-width: 1024px) {
  html.has-admin-sidebar body aside.admin-sidebar#admin-sidebar {
    top: 130px !important;
    height: calc(100vh - 130px) !important;
    position: fixed !important;
    left: 0 !important;
    width: 260px !important;
    z-index: 90 !important;
  }
}

/* ============================================================================
 * v83 - Sidebar editor met drag-and-drop
 * ============================================================================ */
.sb-builder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s;
}
.sb-group:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.sb-group.sb-dragging { opacity: 0.5; }
.sb-group.sb-drop-target { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

.sb-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e2e8f0;
}
.sb-drag-handle {
  color: #94a3b8;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  font-size: 16px;
}
.sb-group-icon {
  font-size: 18px;
}
.sb-group-label {
  flex: 1;
  font-size: 14px;
  color: #1e293b;
}
.sb-group-actions, .sb-item-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.sb-items {
  margin-top: 8px;
  padding: 4px 0 4px 24px;
  min-height: 30px;
  border-left: 2px dashed transparent;
  transition: border-color 0.15s, background 0.15s;
}
.sb-items.sb-drop-target {
  border-left-color: #3b82f6;
  background: rgba(59,130,246,0.04);
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: grab;
  font-size: 13px;
  transition: box-shadow 0.15s;
}
.sb-item:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.sb-item.sb-dragging { opacity: 0.5; }
.sb-item.sb-drop-target { border-color: #3b82f6; }

.sb-item-icon { font-size: 14px; }
.sb-item-label { font-weight: 500; color: #1e293b; min-width: 100px; }
.sb-item-url {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

.sb-icon-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  color: #64748b;
}
.sb-icon-btn:hover { background: #f1f5f9; color: #1e293b; }
.sb-icon-danger:hover { background: #fee2e2; color: #dc2626; }

.sb-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
}
.sb-tag-off { background: #fee2e2; color: #991b1b; }
.sb-tag-info { background: #dbeafe; color: #1e40af; }

.sb-add-item-btn {
  display: block;
  width: 100%;
  background: none;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 6px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
}
.sb-add-item-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }

/* Modal */
.sb-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sb-modal[hidden] { display: none; }
.sb-modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.sb-modal-content h3 { margin: 0 0 14px; }

/* ============================================================================
 * v84 - Flash boven header in admin layout, en sidebar offset opslaan-fix
 * ============================================================================ */
html.has-admin-sidebar .flash-container {
  z-index: 200 !important;        /* boven header (100) en sidebar (90) */
  top: 130px !important;          /* onder de admin-header */
}

@media (max-width: 1023px) {
  html.has-admin-sidebar .flash-container {
    top: 70px !important;
  }
}

/* ============================================================================
 * v85 - SIDEBAR POSITIE: laat JavaScript dit volledig regelen
 * Alle eerdere CSS top-rules op admin-sidebar gelijktrekken naar 0
 * zodat de inline JS-stijl de enige autoriteit is.
 * ============================================================================ */
@media (min-width: 1024px) {
  html.has-admin-sidebar body aside.admin-sidebar#admin-sidebar:not([style*="top"]) {
    top: 0 !important;
  }
}

/* ============================================================================
 * v86 - Definitive sidebar positioning - simpel en werkt
 * Sidebar is fixed top:0 met padding-top voor de header.
 * Inhoud rendeert dus eronder, en de bovenste sidebar-pixels lopen door
 * achter de header zonder zichtbaar gat.
 * ============================================================================ */
@media (min-width: 1024px) {
  /* Reset alle eerdere top/height/padding regels */
  html.has-admin-sidebar body aside.admin-sidebar#admin-sidebar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: var(--admin-header-height, 110px) !important;
    box-sizing: border-box !important;
  }
  html.has-admin-sidebar body aside.admin-sidebar#admin-sidebar .admin-sidebar-nav {
    padding-top: 0 !important;
  }
}

/* ============================================================================
 * v87 - Notifications page (overzicht per type)
 * ============================================================================ */
.notif-page-badge {
  background: #ef4444;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-left: 10px;
  vertical-align: middle;
}

.notif-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
.notif-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  text-decoration: none;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}
.notif-tab:hover { background: #e2e8f0; color: #1e293b; }
.notif-tab.is-active { background: #002c54; color: #fff; border-color: #002c54; }
.notif-tab-badge {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  min-width: 20px;
  text-align: center;
}
.notif-tab.is-active .notif-tab-badge {
  background: #fff;
  color: #002c54;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 16px 16px 30px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.notif-item:hover {
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.notif-item.is-unseen {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.notif-item.is-unseen:hover {
  background: #dbeafe;
}
.notif-item.is-seen { opacity: 0.7; }

.notif-dot {
  position: absolute;
  left: 12px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.notif-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-item-content strong {
  font-size: 14px;
  color: #1e293b;
}
.notif-item-content small {
  color: #64748b;
  font-size: 12.5px;
  display: block;
}
.notif-item-content small code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.notif-item-content .btn-secondary,
.notif-item-content .btn-primary {
  align-self: flex-start;
  margin-top: 6px;
}

/* ============================================================================
 * v88 - ADMIN DENSITY OVERRIDE - compacte admin UX
 * Alleen voor admin-pagina's (html.has-admin-sidebar)
 * Maakt alle admin pagina's strakker, kleiner, overzichtelijker
 * ============================================================================ */

/* ===== Algemeen: kleinere fonts en line-height ===== */
html.has-admin-sidebar body {
  font-size: 13.5px;
  line-height: 1.45;
}

/* Page-heading: veel compacter */
html.has-admin-sidebar .page-heading {
  padding: 4px 0 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid #e2e8f0;
}
html.has-admin-sidebar .page-heading h1 {
  font-size: 20px !important;
  margin: 0 0 2px !important;
  font-weight: 700;
  line-height: 1.2;
}
html.has-admin-sidebar .page-heading p,
html.has-admin-sidebar .page-heading .help-text {
  font-size: 12.5px !important;
  margin: 0 !important;
  color: #64748b;
}

/* H1, H2, H3 compacter overal */
html.has-admin-sidebar h1 { font-size: 20px; line-height: 1.2; margin: 0 0 8px; }
html.has-admin-sidebar h2 { font-size: 16px; line-height: 1.3; margin: 0 0 10px; font-weight: 700; }
html.has-admin-sidebar h3 { font-size: 14px; line-height: 1.3; margin: 0 0 6px; font-weight: 600; }
html.has-admin-sidebar .card h2 { font-size: 15px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
html.has-admin-sidebar .card h3 { font-size: 13px; }

/* Cards: minder padding + meer compact */
html.has-admin-sidebar .card {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Container/main: compactere algemene padding */
html.has-admin-sidebar > body > main {
  padding: 16px 24px !important;
}

/* Help-text kleiner */
html.has-admin-sidebar .help-text { font-size: 12px; line-height: 1.5; }

/* ===== Forms: compactere velden ===== */
html.has-admin-sidebar input[type="text"],
html.has-admin-sidebar input[type="email"],
html.has-admin-sidebar input[type="number"],
html.has-admin-sidebar input[type="password"],
html.has-admin-sidebar input[type="url"],
html.has-admin-sidebar input[type="time"],
html.has-admin-sidebar input[type="date"],
html.has-admin-sidebar input[type="datetime-local"],
html.has-admin-sidebar input[type="search"],
html.has-admin-sidebar select,
html.has-admin-sidebar textarea {
  padding: 7px 10px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}
html.has-admin-sidebar textarea { min-height: 80px; }
html.has-admin-sidebar label {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #475569;
}
html.has-admin-sidebar label small {
  font-weight: 400;
  color: #94a3b8;
  font-size: 11px;
}
html.has-admin-sidebar .form-row,
html.has-admin-sidebar .form-row-double {
  margin-bottom: 10px !important;
  gap: 12px !important;
}

/* ===== Buttons: compacter ===== */
html.has-admin-sidebar .btn-primary,
html.has-admin-sidebar .btn-secondary {
  padding: 7px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  font-weight: 600;
  min-height: auto !important;
}
html.has-admin-sidebar .btn-sm {
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  border-radius: 5px !important;
}

/* ===== Tabs: veel compacter ===== */
html.has-admin-sidebar .nav-tabs {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px !important;
}
html.has-admin-sidebar .nav-tab {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  text-decoration: none;
}
html.has-admin-sidebar .nav-tab.is-active,
html.has-admin-sidebar .nav-tab[style*="background:#fff"] {
  background: #fff !important;
  color: #002c54 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ===== Tabellen: compacter ===== */
html.has-admin-sidebar table,
html.has-admin-sidebar .data-table {
  font-size: 12.5px !important;
  border-collapse: separate;
  border-spacing: 0;
}
html.has-admin-sidebar table th,
html.has-admin-sidebar .data-table th {
  padding: 8px 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
html.has-admin-sidebar table td,
html.has-admin-sidebar .data-table td {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
}
html.has-admin-sidebar table tr:hover td,
html.has-admin-sidebar .data-table tr:hover td {
  background: #f8fafc;
}

/* ===== Badges & status: compact ===== */
html.has-admin-sidebar .badge {
  font-size: 10.5px !important;
  padding: 1px 7px !important;
  font-weight: 600;
  border-radius: 100px;
}
html.has-admin-sidebar .status-badge {
  font-size: 11px !important;
  padding: 2px 9px !important;
}

/* ===== Stats grids: kleinere kaarten ===== */
html.has-admin-sidebar .payments-stats-grid,
html.has-admin-sidebar .stats-grid {
  gap: 10px !important;
}
html.has-admin-sidebar .payments-stat,
html.has-admin-sidebar .stat-card,
html.has-admin-sidebar .lc-admin-stat {
  padding: 10px 14px !important;
  border-radius: 8px;
}
html.has-admin-sidebar .payments-stat strong,
html.has-admin-sidebar .stat-card strong,
html.has-admin-sidebar .lc-admin-stat strong {
  font-size: 19px !important;
}
html.has-admin-sidebar .payments-stat-label,
html.has-admin-sidebar .payments-stat span,
html.has-admin-sidebar .stat-card span,
html.has-admin-sidebar .lc-admin-stat span {
  font-size: 10px !important;
  letter-spacing: 0.04em;
}

/* ===== Plugin cards: compacter ===== */
html.has-admin-sidebar .plugin-card {
  padding: 14px !important;
  border-radius: 8px;
}
html.has-admin-sidebar .plugin-card h3 { font-size: 14px; margin: 6px 0 4px; }
html.has-admin-sidebar .plugin-card p { font-size: 12px; line-height: 1.5; }
html.has-admin-sidebar .plugin-icon { font-size: 24px; }

/* ===== Toggle switches: kleiner ===== */
/* Verwijderd — gebruik admin-ui.css regels die structuur correct doen */

/* ===== Notification page: compacter ===== */
html.has-admin-sidebar .notif-tabs {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}
html.has-admin-sidebar .notif-tab {
  padding: 6px 12px !important;
  font-size: 12px !important;
}
html.has-admin-sidebar .notif-item {
  padding: 10px 12px 10px 28px !important;
  gap: 10px;
}
html.has-admin-sidebar .notif-item-content strong { font-size: 13px; }
html.has-admin-sidebar .notif-item-content small { font-size: 11.5px; }
html.has-admin-sidebar .notif-dot { top: 16px; }

/* ===== Sidebar zelf compacter ===== */
html.has-admin-sidebar .admin-sidebar-link {
  padding: 7px 20px !important;
  font-size: 12.5px !important;
}
html.has-admin-sidebar .admin-sidebar-group-items .admin-sidebar-link {
  padding: 6px 20px 6px 28px !important;
}
html.has-admin-sidebar summary.admin-sidebar-group-title {
  padding: 5px 20px !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #cbd5e1 !important;
  line-height: 1.4 !important;
}
html.has-admin-sidebar summary.admin-sidebar-group-title:hover {
  color: #fff !important;
}
html.has-admin-sidebar .admin-sidebar-group[open] > summary.admin-sidebar-group-title {
  color: #fff !important;
}

/* ===== Live chat admin: nog compacter ===== */
html.has-admin-sidebar .lc-page-heading {
  padding: 4px 0 10px !important;
  margin-bottom: 10px !important;
}
html.has-admin-sidebar .lc-inline-stat {
  padding: 3px 10px !important;
  font-size: 11px !important;
}
html.has-admin-sidebar .lc-inline-stat strong { font-size: 12.5px !important; }

/* ===== Reviews admin: compacter ===== */
html.has-admin-sidebar .review-admin-card {
  padding: 12px !important;
  margin-bottom: 10px !important;
}
html.has-admin-sidebar .review-admin-body {
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 10px 0 !important;
}

/* ===== Scrollbar styling (subtieler) ===== */
html.has-admin-sidebar ::-webkit-scrollbar { width: 8px; height: 8px; }
html.has-admin-sidebar ::-webkit-scrollbar-track { background: #f1f5f9; }
html.has-admin-sidebar ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html.has-admin-sidebar ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== Footer (reset margin van h1 etc) ===== */
html.has-admin-sidebar p { margin: 0 0 6px; }
html.has-admin-sidebar p:last-child { margin-bottom: 0; }

/* ===== Notification badge in admin header iets kleiner ===== */
html.has-admin-sidebar .admin-notif {
  width: 34px !important;
  height: 34px !important;
}
html.has-admin-sidebar .admin-notif-icon { font-size: 16px !important; }

/* ===== Sidebar editor compacter ===== */
html.has-admin-sidebar .sb-group { padding: 8px !important; }
html.has-admin-sidebar .sb-item { padding: 5px 8px !important; font-size: 12px !important; }
html.has-admin-sidebar .sb-group-head { padding-bottom: 6px !important; }

/* ===== Newsletter / mail templates compact ===== */
html.has-admin-sidebar .table-wrap table {
  font-size: 12.5px;
}

/* ===== Details collapsible op editor pagina's ===== */
html.has-admin-sidebar .menu-item-card,
html.has-admin-sidebar details.card {
  padding: 10px 14px !important;
}
html.has-admin-sidebar summary {
  font-size: 13px;
  padding: 4px 0;
}

/* ===== Flash messages compacter ===== */
html.has-admin-sidebar .flash {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

/* ============================================================================
 * v89 - ULTRA-COMPACT ADMIN PAGES
 * Specifieke optimalisaties voor pages.php, navigation.php, faq.php,
 * reviews-admin.php, layout.php, branding.php, email_templates.php,
 * newsletter.php, livechat.php, users.php, payments.php, reports.php,
 * plugins.php, sidebar-editor.php, security.php, notifications.php
 * ============================================================================ */

/* ===== NOG compactere page-heading (was iets te ruim in v88) ===== */
html.has-admin-sidebar .page-heading {
  padding: 0 0 10px !important;
  margin-bottom: 12px !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
html.has-admin-sidebar .page-heading h1 {
  font-size: 18px !important;
  margin: 0 !important;
}
html.has-admin-sidebar .page-heading p {
  font-size: 12px !important;
  flex: 1;
  text-align: right;
  color: #94a3b8 !important;
}

/* ===== Cards: extra strak ===== */
html.has-admin-sidebar .card {
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
html.has-admin-sidebar .card h2 {
  font-size: 14px !important;
  margin: 0 0 8px !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b;
  font-weight: 700;
}

/* ===== Nieuwe data-table styling: dichter, modern ===== */
html.has-admin-sidebar .data-table,
html.has-admin-sidebar table {
  width: 100%;
  font-size: 12px !important;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
html.has-admin-sidebar .data-table th,
html.has-admin-sidebar table th {
  padding: 6px 10px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  background: #f8fafc !important;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase;
}
html.has-admin-sidebar .data-table td,
html.has-admin-sidebar table td {
  padding: 7px 10px !important;
  font-size: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b;
}
html.has-admin-sidebar table tr:last-child td { border-bottom: 0 !important; }

/* ===== Tabs (overal): nog compacter pillen ===== */
html.has-admin-sidebar .nav-tabs {
  background: #f1f5f9 !important;
  padding: 2px !important;
  border-radius: 7px !important;
  margin-bottom: 12px !important;
  display: inline-flex;
  flex-wrap: nowrap;
  width: fit-content;
}
html.has-admin-sidebar .nav-tab {
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  border-radius: 5px !important;
  font-weight: 600;
  white-space: nowrap;
}

/* ===== PAGES.PHP — pages-list compact ===== */
html.has-admin-sidebar .page-list-item,
html.has-admin-sidebar .pages-grid > * {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}

/* ===== USERS.PHP — gebruikerslijst ===== */
html.has-admin-sidebar .users-table tr td:first-child {
  font-weight: 600;
}
html.has-admin-sidebar .users-table small { font-size: 11px; color: #64748b; }
html.has-admin-sidebar .invite-section,
html.has-admin-sidebar .pending-users-section { margin-bottom: 12px; }

/* User card "Nieuwe gebruiker uitnodigen" extra plat */
html.has-admin-sidebar form input[type="email"] + button,
html.has-admin-sidebar form input[type="email"] {
  display: inline-block;
  vertical-align: middle;
}

/* ===== FAQ.PHP — vraag/antwoord items compact ===== */
html.has-admin-sidebar .faq-item,
html.has-admin-sidebar details[class*="faq"] {
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}
html.has-admin-sidebar details summary {
  padding: 6px 0 !important;
  font-size: 12.5px !important;
  cursor: pointer;
}

/* ===== NAVIGATION.PHP — menu items ===== */
html.has-admin-sidebar .menu-item-card {
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
html.has-admin-sidebar .menu-item-summary {
  font-size: 12.5px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html.has-admin-sidebar .menu-item-badge {
  font-size: 9.5px !important;
  padding: 1px 6px !important;
}

/* ===== EMAIL_TEMPLATES.PHP — sjabloon-lijst ===== */
html.has-admin-sidebar .email-template-card,
html.has-admin-sidebar .template-list-item {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
}
html.has-admin-sidebar pre,
html.has-admin-sidebar code {
  font-size: 11.5px !important;
  padding: 1px 6px !important;
  background: #f1f5f9;
  border-radius: 3px;
}

/* ===== NEWSLETTER.PHP — campagne-lijst ===== */
html.has-admin-sidebar .table-wrap { margin-bottom: 10px; }
html.has-admin-sidebar .count {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}

/* ===== LIVECHAT.PHP — al strak, kleine tweaks ===== */
html.has-admin-sidebar .lc-page-heading {
  padding: 0 0 8px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0;
}
html.has-admin-sidebar .lc-inbox {
  height: calc(100vh - 180px) !important; /* iets meer ruimte */
  min-height: 480px !important;
}
html.has-admin-sidebar .lc-inbox-list {
  font-size: 12px;
}
html.has-admin-sidebar .lc-conv-item {
  padding: 8px 12px !important;
}

/* ===== REVIEWS-ADMIN.PHP — review cards compacter ===== */
html.has-admin-sidebar .review-admin-card {
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
}
html.has-admin-sidebar .review-admin-head {
  padding-bottom: 8px !important;
  gap: 10px !important;
}
html.has-admin-sidebar .review-admin-meta strong { font-size: 12.5px; }
html.has-admin-sidebar .review-admin-meta small { font-size: 11px; }
html.has-admin-sidebar .review-admin-body {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  margin: 8px 0 !important;
}
html.has-admin-sidebar .review-admin-actions {
  margin-top: 10px !important;
  gap: 6px !important;
}

/* ===== LAYOUT.PHP — drag-cards ===== */
html.has-admin-sidebar .layout-block,
html.has-admin-sidebar .draggable-section {
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  font-size: 12.5px !important;
}

/* ===== BRANDING.PHP — kleur-velden ===== */
html.has-admin-sidebar input[type="color"] {
  height: 30px !important;
  padding: 2px !important;
  width: 60px;
}

/* ===== PAYMENTS.PHP — stat grid compact ===== */
html.has-admin-sidebar .payments-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
html.has-admin-sidebar .payments-stat {
  padding: 10px 12px !important;
}
html.has-admin-sidebar .payments-stat strong {
  font-size: 18px !important;
  margin: 2px 0 !important;
}
html.has-admin-sidebar .payments-stat-label,
html.has-admin-sidebar .payments-stat span {
  font-size: 9.5px !important;
}
html.has-admin-sidebar .payments-stat small { font-size: 10px !important; }

html.has-admin-sidebar .payments-filters {
  padding: 10px !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
html.has-admin-sidebar .payments-filters label { font-size: 11px !important; }

html.has-admin-sidebar .payments-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
}
html.has-admin-sidebar .payments-status-card {
  padding: 10px 12px !important;
  gap: 10px !important;
}
html.has-admin-sidebar .payments-status-card strong {
  font-size: 18px !important;
}
html.has-admin-sidebar .payments-status-icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

/* ===== PLUGINS.PHP — kaart-grid ===== */
html.has-admin-sidebar .plugins-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}
html.has-admin-sidebar .plugin-card {
  padding: 12px !important;
}
html.has-admin-sidebar .plugin-icon {
  font-size: 22px !important;
  margin-bottom: 4px !important;
}
html.has-admin-sidebar .plugin-card h3 {
  font-size: 13px !important;
  margin: 4px 0 3px !important;
}
html.has-admin-sidebar .plugin-card p {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
}
html.has-admin-sidebar .plugin-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 11px;
}

/* ===== SIDEBAR-EDITOR.PHP — drag rows compact ===== */
html.has-admin-sidebar .sb-builder { gap: 6px; }
html.has-admin-sidebar .sb-group {
  padding: 8px !important;
  border-radius: 6px;
}
html.has-admin-sidebar .sb-group-head {
  padding-bottom: 6px !important;
  gap: 8px !important;
}
html.has-admin-sidebar .sb-group-label { font-size: 13px !important; }
html.has-admin-sidebar .sb-group-icon { font-size: 16px !important; }
html.has-admin-sidebar .sb-items {
  margin-top: 6px !important;
  padding: 2px 0 2px 20px !important;
}
html.has-admin-sidebar .sb-item {
  padding: 4px 8px !important;
  margin-bottom: 3px !important;
  font-size: 11.5px !important;
  gap: 6px !important;
}
html.has-admin-sidebar .sb-icon-btn {
  font-size: 12px !important;
  padding: 2px 5px !important;
}
html.has-admin-sidebar .sb-tag { font-size: 8.5px !important; padding: 1px 5px !important; }
html.has-admin-sidebar .sb-add-item-btn {
  padding: 4px !important;
  font-size: 11px !important;
}

/* ===== SECURITY.PHP — log entries compacter ===== */
html.has-admin-sidebar .security-log-entry,
html.has-admin-sidebar .log-row {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-family: ui-monospace, monospace;
}

/* ===== REPORTS.PHP — chart containers ===== */
html.has-admin-sidebar .report-section {
  padding: 12px !important;
  margin-bottom: 10px !important;
}

/* ===== NOTIFICATIONS.PHP — items strakker ===== */
html.has-admin-sidebar .notif-item {
  padding: 8px 12px 8px 24px !important;
  gap: 10px !important;
  border-radius: 6px !important;
}
html.has-admin-sidebar .notif-item-content { gap: 2px !important; }
html.has-admin-sidebar .notif-item-content strong { font-size: 12.5px !important; }
html.has-admin-sidebar .notif-item-content small { font-size: 11px !important; }
html.has-admin-sidebar .notif-dot {
  left: 9px;
  top: 14px;
  width: 7px;
  height: 7px;
}
html.has-admin-sidebar .notif-list { gap: 4px !important; }

/* ===== Subtle dividers + kaart-titel ===== */
html.has-admin-sidebar .card > h2:first-child:has(+ p) { margin-bottom: 4px !important; }

/* Modal compact */
html.has-admin-sidebar .sb-modal-content,
html.has-admin-sidebar .modal-content {
  padding: 18px !important;
  border-radius: 8px !important;
}
html.has-admin-sidebar .sb-modal-content h3 { font-size: 14px !important; }

/* ===== Toggle switch compacter ===== */
/* Verwijderd — admin-ui.css doet dit nu correct */

/* ===== Hide "💡 Personalisatie" type kennisgeving boxen tot kleinere padding ===== */
html.has-admin-sidebar .info-box,
html.has-admin-sidebar .help-box {
  padding: 8px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* ===== Form-row-double = grid 2 kolommen ===== */
html.has-admin-sidebar .form-row-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
@media (max-width: 768px) {
  html.has-admin-sidebar .form-row-double { grid-template-columns: 1fr; }
}

/* Tighter breadcrumb-stijl voor "← Terug" */
html.has-admin-sidebar a.btn-secondary[href*=".php"]:has-text("← Terug") {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}

/* ===== Live region helpers ===== */
html.has-admin-sidebar .alert-info,
html.has-admin-sidebar .alert-success,
html.has-admin-sidebar .alert-warning,
html.has-admin-sidebar .alert-error {
  padding: 8px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

/* v90 - Notification badge mag echt verborgen worden */
.admin-notif-badge[hidden] { display: none !important; }

/* ============================================================================
 * HERROEPINGSKNOP PLUGIN — modal + button styling
 * ============================================================================ */
.herroeping-cta {
  margin-top: 16px;
  padding: 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}
.btn-herroeping {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}
.btn-herroeping:hover { background: #991b1b; }
.herroeping-help {
  margin: 8px 0 0;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}
.herroeping-status {
  margin-top: 16px;
  padding: 12px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  color: #1e3a8a;
  font-size: 13px;
}
.herroeping-status p { margin: 6px 0 0; line-height: 1.5; }

/* MODAL */
.herroeping-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: 16px;
}
.herroeping-modal.is-open { display: flex; }
.herroeping-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
.herroeping-modal-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modal-in 0.2s ease-out;
}
@keyframes modal-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.herroeping-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.herroeping-modal-header h2 { margin: 0; font-size: 18px; color: #b91c1c; }
.herroeping-close {
  background: none; border: none;
  font-size: 22px; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px;
  color: #64748b;
}
.herroeping-close:hover { background: #f1f5f9; color: #1e293b; }
.herroeping-modal-body { padding: 20px; }
.herroeping-intro { font-size: 13px; line-height: 1.6; color: #334155; margin: 0 0 16px; }
.herroeping-calc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
}
.herroeping-calc h3 { margin: 0 0 8px; font-size: 14px; color: #1e293b; }
.herroeping-calc-explain { font-size: 12px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }
.herroeping-table { width: 100%; border-collapse: collapse; }
.herroeping-table td { padding: 6px 0; font-size: 13px; border-bottom: 1px solid #f1f5f9; }
.herroeping-table td:last-child { text-align: right; }
.herroeping-table .herroeping-row-pay td { color: #b45309; font-weight: 600; }
.herroeping-table .herroeping-row-refund td { color: #047857; font-weight: 700; }
.herroeping-formula { margin: 8px 0 0; font-family: monospace; font-size: 11px; color: #64748b; }
.herroeping-warning {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 14px 0;
  font-size: 13px;
}
.herroeping-warning strong { color: #78350f; display: block; margin-bottom: 6px; }
.herroeping-warning ul { margin: 0; padding-left: 20px; line-height: 1.6; color: #78350f; }
.herroeping-form { margin-top: 16px; }
.herroeping-reason-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 12px; }
.herroeping-reason-label textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.herroeping-checkbox-label {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 16px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
}
.herroeping-checkbox-label input { margin-top: 2px; flex-shrink: 0; }
.herroeping-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.btn-herroeping-confirm {
  background: #b91c1c; color: #fff; border: none;
  padding: 10px 18px; border-radius: 6px; font-weight: 600;
  cursor: pointer; font-size: 14px;
}
.btn-herroeping-confirm:hover { background: #991b1b; }
@media (max-width: 600px) {
  .herroeping-modal { padding: 0; }
  .herroeping-modal-box { max-height: 100vh; border-radius: 0; max-width: 100%; }
}

/* Plugin-card toggle button */
.plugin-toggle-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.plugin-toggle-btn.plugin-toggle-on {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.plugin-toggle-btn.plugin-toggle-off {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}
.plugin-toggle-btn:hover { transform: scale(1.05); }