/* BuggedBrain website — tokens als CSS-variabelen, koppeling met Bootstrap 5.3 en paginaonderdelen.
   Laadvolgorde: bootstrap.min.css → ds/buggedbrain/components/bundle.css → site.css */

:root {
  /* Kleur (licht thema, uit tokens.json) */
  --brand-blue: #1c75bc;
  --brand-blue-hover: #165f99;
  --brand-orange: #c14305;
  --brand-orange-hover: #a33804;
  --on-brand: #ffffff;
  --surface-100: #ffffff;
  --surface-200: #f4f7fb;
  --surface-300: #e7edf4;
  --ink: #16202b;
  --ink-muted: #4d5a69;
  --border: #d6dee7;
  --border-strong: #728194;
  --focus: #1c75bc;
  --danger: #b3261e;

  /* Typografie */
  --font-display: "Righteous", "M PLUS Rounded 1c", system-ui, sans-serif;
  --font-sans: "M PLUS Rounded 1c", system-ui, sans-serif;

  /* Ruimte, vorm, opbouw */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --container-max: 1200px;
  --content-max: 720px;
  --gutter-sm: 16px;
  --gutter-lg: 32px;

  /* Bootstrap volgt het merk */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.625;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-100);
  --bs-secondary-color: var(--ink-muted);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-primary: #1c75bc;
  --bs-primary-rgb: 28, 117, 188;
  --bs-link-color: #1c75bc;
  --bs-link-color-rgb: 28, 117, 188;
  --bs-link-hover-color: #165f99;
  --bs-link-hover-color-rgb: 22, 95, 153;
  --bs-focus-ring-color: rgba(28, 117, 188, .35);
}

body { margin: 0; }

/* Bootstrap-rijen met brede tussenruimte (g-5) mogen op gsm niet buiten de container van 16px marge steken */
@media (max-width: 767.98px) {
  .bb-container .row.g-5 { --bs-gutter-x: 2rem; }
}
a { color: var(--brand-blue); text-underline-offset: 3px; }
a:hover { color: var(--brand-blue-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Koppen en tekst ---------- */
.bb-h1, .bb-h2 { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 400; }
.bb-h1 { font-size: 40px; line-height: 46px; }
.bb-h2 { font-size: 30px; line-height: 36px; }
.bb-h3 { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 800; }
.bb-lead { margin: 0; color: var(--ink-muted); font-size: 20px; line-height: 30px; font-weight: 500; max-width: 640px; }
.bb-muted { color: var(--ink-muted); }
.bb-small { font-size: 14px; line-height: 22px; }
.bb-caption { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }

/* ---------- Secties ---------- */
.bb-section { padding: var(--space-7) 0; }
.bb-section--alt { background: var(--surface-200); }
.bb-section__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); max-width: var(--content-max); }
@media (min-width: 768px) { .bb-section { padding: var(--space-8) 0; } }

/* Kop van een subpagina (kleiner dan de hero) */
.bb-pagehead { padding: var(--space-7) 0; background: var(--surface-200); border-bottom: 1px solid var(--border); }
.bb-pagehead__inner { display: flex; flex-direction: column; gap: var(--space-3); }
.bb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.bb-crumbs a { color: var(--ink-muted); }
.bb-crumbs a:hover { color: var(--ink); }
@media (min-width: 768px) { .bb-pagehead { padding: var(--space-8) 0 var(--space-7); } }

/* ---------- Lijst met vinkjes ---------- */
.bb-checklist { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.bb-checklist li { display: flex; align-items: flex-start; gap: var(--space-3); }
.bb-checklist .bb-icon { margin-top: 5px; color: var(--brand-blue); }

/* ---------- Stappen (werkwijze) ---------- */
.bb-steps { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.bb-step { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--brand-blue); counter-increment: stap; }
.bb-step::before { content: counter(stap, decimal-leading-zero); font-family: var(--font-display); font-size: 30px; line-height: 36px; color: var(--brand-blue); }
.bb-step__title { margin: 0; font-size: 16px; line-height: 26px; font-weight: 800; color: var(--ink); }
.bb-step__text { margin: 0; color: var(--ink-muted); }

/* ---------- Oproep onderaan ---------- */
.bb-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-cta__text { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
@media (min-width: 768px) { .bb-cta { padding: var(--space-7); } }

/* ---------- Badges (status) ---------- */
.bb-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.bb-badge--ok { background: var(--surface-200); color: var(--brand-blue); border-color: var(--brand-blue); }
.bb-badge--neutral { background: var(--surface-300); color: var(--ink); }
.bb-badge--open { background: var(--surface-100); color: var(--brand-orange); border-color: var(--brand-orange); }
.bb-badge--danger { background: var(--surface-100); color: var(--danger); border-color: var(--danger); }

/* ---------- Tabellen (Bootstrap .table, merkstijl) ---------- */
.bb-tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-tablewrap .table { margin: 0; --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-200); min-width: 640px; }
.bb-tablewrap .table th { padding: var(--space-3) var(--space-4); background: var(--surface-200); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.bb-tablewrap .table td { padding: var(--space-4); vertical-align: middle; }
.bb-tablewrap .table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Klantenzone ---------- */
.bb-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); }
.bb-panel__side { flex: 1 1 220px; max-width: 100%; }
.bb-panel__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 768px) { .bb-panel__side { max-width: 260px; } }

.bb-sidenav { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-sidenav__title { margin: 0; padding: var(--space-1) var(--space-3); font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.bb-sidenav__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.bb-sidenav__link { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; }
.bb-sidenav__link:hover { background: var(--surface-200); color: var(--ink); }
.bb-sidenav__link[aria-current="page"] { background: var(--surface-200); color: var(--brand-blue); }
/* A POST action in the menu, such as Afmelden: a button that looks like the links */
button.bb-sidenav__link { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.bb-sidenav hr { margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }

.bb-tile { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-tile__label { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.bb-tile__value { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; color: var(--ink); }
.bb-tile__meta { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.bb-tile--danger { border-color: var(--danger); }

.bb-box { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Inklapbaar blok (afgelopen diensten) */
.bb-disclosure { margin-top: var(--space-4); }
.bb-disclosure > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--brand-blue); font-size: 14px; line-height: 20px; font-weight: 700; list-style: none; cursor: pointer; }
.bb-disclosure > summary::-webkit-details-marker { display: none; }
.bb-disclosure > summary .bb-icon { transition: transform .15s ease; }
.bb-disclosure[open] > summary .bb-icon { transform: rotate(90deg); }
.bb-disclosure > .bb-tablewrap { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .bb-disclosure > summary .bb-icon { transition: none; } }

/* Keuzepillen (filter facturen) */
.bb-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bb-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; cursor: pointer; }
.bb-pill:hover { background: var(--surface-300); }
.bb-pill[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--on-brand); }
a.bb-pill { text-decoration: none; }
a.bb-pill[aria-current="page"] { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--on-brand); }

/* Paginering (Bootstrap .pagination, merkstijl) */
.bb-pager { display: flex; justify-content: center; margin-top: var(--space-4); }
.bb-pager .pagination {
  --bs-pagination-color: var(--brand-blue);
  --bs-pagination-bg: var(--surface-100);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--surface-300);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(28, 117, 188, .25);
  --bs-pagination-active-bg: var(--brand-blue);
  --bs-pagination-active-border-color: var(--brand-blue);
  --bs-pagination-disabled-color: var(--ink-muted);
  --bs-pagination-disabled-bg: var(--surface-100);
  --bs-pagination-border-radius: var(--radius-md);
  margin: 0;
  font-weight: 700;
}
.bb-pager .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Keuzekaarten (betaalmethode) */
.bb-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-100); cursor: pointer; }
.bb-choice:hover { background: var(--surface-200); }
.bb-choice--on { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); background: var(--surface-200); }
.bb-choice .form-check-input { margin-top: 5px; flex: none; }

/* Bootstrap-formulierelementen in merkstijl */
.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.form-check-input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 .2rem rgba(28, 117, 188, .25); }
.form-check-label { color: var(--ink); }

/* Definitielijst (bedrijfsgegevens, factuur) */
.bb-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.bb-dl dt { font-size: 14px; line-height: 26px; font-weight: 700; color: var(--ink-muted); }
.bb-dl dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 399.98px) {
  .bb-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bb-dl dd { margin-bottom: var(--space-3); }
}

/* ---------- Juridische pagina's ---------- */
.bb-toc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
.bb-toc ol { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font-size: 14px; line-height: 22px; }
.bb-toc a { color: var(--ink-muted); text-decoration: none; }
.bb-toc a:hover { color: var(--ink); text-decoration: underline; }
.bb-prose { max-width: var(--content-max); }
.bb-prose h2 { margin: var(--space-7) 0 var(--space-3); font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ink); scroll-margin-top: var(--space-5); }
.bb-prose h2:first-child { margin-top: 0; }
.bb-prose p, .bb-prose ul, .bb-prose ol { margin: 0 0 var(--space-4); }
.bb-prose ul, .bb-prose ol { padding-left: var(--space-5); }
.bb-prose li + li { margin-top: var(--space-1); }
.bb-ph { padding: 0 4px; border-radius: 4px; background: var(--surface-300); font-weight: 700; }

/* ---------- Modals (Bootstrap .modal, merkstijl) ----------
   Gebruik: Bootstrap-markup (.modal > .modal-dialog > .modal-content) met bb-knoppen in .modal-footer.
   Optioneel: .bb-modal__icon (--danger) en .bb-modal__sub in de header. */
.modal {
  --bs-modal-width: 520px;
  --bs-modal-margin: var(--space-4);
  --bs-modal-padding: var(--space-6);
  --bs-modal-color: var(--ink);
  --bs-modal-bg: var(--surface-100);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: 0 24px 64px rgba(22, 32, 43, .24), 0 2px 6px rgba(22, 32, 43, .08);
  --bs-modal-header-padding: var(--space-6) var(--space-6) 0;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  --bs-modal-title-line-height: 30px;
}
.modal-sm { --bs-modal-width: 420px; }
@media (min-width: 992px) { .modal-lg, .modal-xl { --bs-modal-width: 800px; } }
.modal-backdrop { --bs-backdrop-bg: #16202b; --bs-backdrop-opacity: .55; }
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform .2s ease-out; }
.modal.show .modal-dialog { transform: none; }
.modal-header { align-items: flex-start; gap: var(--space-4); }
.modal-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.bb-modal__heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; padding-top: var(--space-1); }
.bb-modal__sub { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.bb-modal__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--surface-300); color: var(--brand-blue); font-size: 22px; }
.bb-modal__icon--danger { background: #fbeceb; color: var(--danger); }
.modal-header .btn-close {
  flex: none; width: 40px; height: 40px; padding: 0; margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) 0 auto;
  border-radius: var(--radius-full); background-size: 14px; opacity: .65;
}
.modal-header .btn-close:hover { background-color: var(--surface-300); opacity: 1; }
.modal-header .btn-close:focus { box-shadow: none; }
.modal-header .btn-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; opacity: 1; }
.modal-body { padding-top: var(--space-4); color: var(--ink-muted); }
.modal-body > :last-child { margin-bottom: 0; }
.modal-body strong { color: var(--ink); }
.modal-body .bb-field + .bb-field { margin-top: var(--space-5); }
.modal-footer { gap: var(--space-3); padding: var(--space-2) var(--space-6) var(--space-6); }
.modal-footer > * { margin: 0; }
.modal-dialog-scrollable .modal-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.modal-dialog-scrollable .modal-body { padding-top: var(--space-5); color: var(--ink); }
.modal-dialog-scrollable .modal-body h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 800; }
.modal-dialog-scrollable .modal-body h3:first-child { margin-top: 0; }
.modal-dialog-scrollable .modal-footer { padding-top: var(--space-4); border-top: 1px solid var(--border); }
@media (max-width: 575.98px) {
  .modal { --bs-modal-padding: var(--space-5); --bs-modal-header-padding: var(--space-5) var(--space-5) 0; }
  .modal-footer { flex-direction: column-reverse; align-items: stretch; padding: var(--space-2) var(--space-5) var(--space-5); }
  .modal-footer .bb-btn { width: 100%; }
  .bb-modal__icon { width: 40px; height: 40px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; transform: none; } }

/* Gevaarlijke actie (opzeggen, verwijderen): enkel in een bevestiging, nooit als gewone knop */
.bb-btn--danger { background: var(--danger); color: var(--on-brand); }
.bb-btn--danger:hover { background: #8c1d18; color: var(--on-brand); }

/* Voorbeeldweergave van open modals (alleen voor de onderdelenpagina) */
.bb-modal-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: var(--space-6); align-items: start; padding: var(--space-6); border-radius: var(--radius-lg); background: rgba(22, 32, 43, .55); }
.bb-modal-demo .modal { position: static; display: block; width: auto; height: auto; overflow: visible; z-index: auto; }
.bb-modal-demo .modal-dialog { max-width: 100%; margin: 0; pointer-events: auto; }
.bb-modal-demo .modal-dialog-scrollable { height: 460px; }

/* ---------- Alleen in de statische versie ---------- */
.bb-skip:focus { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--brand-blue); color: var(--on-brand); font-weight: 700; }

/* ---------- Captcha (contactformulier) ---------- */
.bb-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.bb-captcha__image { display: block; border-radius: var(--radius-sm); }
.bb-captcha .bb-input { width: 80px; text-align: center; }