/* ── Layout utilities ── */
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }
.flex-wrap { flex-wrap: wrap; }
.flex-2 { flex: 2; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: 4px; }
.gap-md { gap: 1rem; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* ── Width ── */
.max-w-xs { max-width: 180px; }
.max-w-sm { max-width: 260px; }
.max-w-md { max-width: 600px; }
.min-w-160 { min-width: 160px; }
.min-w-200 { min-width: 200px; }
.w-full { width: 100%; }

/* ── Spacing ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-sm { margin-top: 0.5rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: 1rem; }
.p-compact { padding: 0.75rem 1rem; }
.border-top-none { border-top: none; }

/* ── Typography ── */
.text-center { text-align: center; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.2rem; }
.text-2xl { font-size: 1.3rem; }
.whitespace-nowrap { white-space: nowrap; }
.font-bold { font-weight: bold; }
.letter-wide { letter-spacing: 2px; }

/* ── Opacity ── */
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* ── Display ── */
.hidden-field { display: none; }

/* ── Lists ── */
.list-unstyled { list-style: none; padding: 0; margin: 1rem 0; }

/* ── Background ── */
.bg-surface { background: var(--color-surface, #f8f9fa); }

/* ── Borders ── */
.border-primary-strong { border: 2px solid var(--color-primary, #0d6efd); }
.border-left-primary { border-left: 3px solid var(--color-primary, #4361ee); }

/* ── Buttons ── */
.btn-lg { padding: 12px 32px; font-size: 1.1rem; }
.btn-xl { width: 100%; padding: 14px; font-size: 1.1rem; }

/* ── Components: Progress bar ── */
.progress-track { background: var(--surface-2, #e0e0e0); border-radius: 4px; height: 8px; width: 100px; display: inline-block; vertical-align: middle; }
.progress-fill { background: var(--primary, #4361ee); border-radius: 4px; height: 8px; }

/* ── Components: NPS ── */
.nps-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.nps-label { cursor: pointer; }
.nps-radio { display: none; }
.nps-score { min-width: 40px; text-align: center; }
.nps-scale { display: flex; justify-content: space-between; font-size: 0.85rem; }

/* ── Components: Onboarding ── */
.onboarding-icon-done { font-size: 1.3rem; color: var(--color-success, #28a745); }
.onboarding-icon-todo { font-size: 1.3rem; color: var(--color-muted, #999); }

/* ── Components: Referral code ── */
.referral-code { font-size: 1.4rem; font-weight: bold; letter-spacing: 2px; max-width: 200px; text-align: center; }

/* ── Components: Trust badges (webshop checkout) ── */
.ws-trust-badges { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; padding: 1rem; background: var(--ws-color-surface, #f8f9fa); border-radius: 8px; }
.ws-trust-badge { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.ws-checkout-meta { text-align: center; margin-top: 0.5rem; }

/* ── CSP-strict refactor utilities (uit oude inline style="..." attributes) ── */
.mt-md-spacing { margin-top: 1rem 0 0; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.mt-pull { margin-top: -0.4em; }
.mt-half { margin: 0.6em 0 0; }
.mt-mb-zero { margin: 0 0 0.5em; }
.mt-zero-row { margin: 0; }
.m-auto-3em { margin: 3em auto; }
.mb-row { margin-bottom: 1em; }
.p-md { padding: 1rem; }
.p-lg { padding: 2em; }
.p-pad-08em { padding: 0.8em; }
.p-pad-08-1em { padding: 0.8em 1em; }
.p-card { padding: 1em; }
.max-w-560 { max-width: 560px; }
.max-w-32rem { max-width: 32rem; }
.border-left-warn { border-left: 3px solid #d97706; }
.border-left-warn-strong { border-left: 4px solid #d97706; }
.border-left-info { border-left: 3px solid #2563eb; }
.border-left-brand { border-left: 4px solid var(--brand-primary, #2563eb); }
.bg-warn-soft { background: #fef3c7; }
.bg-codeblock { background: var(--surface-2, #f1f5f9); padding: 12px; border-radius: 8px; font-size: .85rem; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; }
.font-tiny { font-weight: 400; font-size: .75rem; }
.label-block { display: block; margin-bottom: 0.3em; }
.flex-row { display: flex; gap: 0.5em; align-items: center; }
.flex-1 { flex: 1; }
.flex-spread-center { display: flex; justify-content: space-between; align-items: center; }
.list-naked-soft { list-style: none; padding: 0; margin: .4rem 0; }
.list-naked-soft li { padding: .3rem 0; border-bottom: 1px solid #f1f5f9; }
.hr-wide { margin: 32px 0; }
.opacity-half { opacity: .5; }
.padded-card { padding: 16px; }
.muted-list { font-size: .9rem; color: #475569; line-height: 1.6; }
.note-card { background: #fff; padding: 12px; border-radius: 4px; margin-top: 8px; }
.div-mt-md { margin-top: 16px; }
.form-mb-md { margin-bottom: 16px; }
.form-mt-sm { margin-top: 8px; }
.fav-thumb { width: 32px; height: 32px; border: 1px solid #ccc; background: #fff; }
.invoice-table-spaced { margin-top: 1rem; }

/* JS-injected status messages (geen inline style nodig) */
.js-empty-state { padding: .5rem; color: #94a3b8; font-size: .82rem; }
.js-grid-state { padding: 1rem; color: #888; }
.js-info-note { margin-top: 8px; }
.cal-swatch-avail { background: #dcfce7; }
.cal-swatch-busy { background: #fecaca; }
.xp-close-btn { width: 16px; height: 16px; font-size: 9px; }
.xp-stub-card { padding: 2rem; text-align: center; color: #444; }
.xp-stub-emoji { font-size: 3rem; }
.xp-stub-note { font-size: .85rem; color: #888; }
.xp-stub-card-dark { padding: 2rem; text-align: center; background: #000; height: 100%; color: #fff; }
.xp-stub-note-dark { font-size: .85rem; color: #aaa; }
.roi-good { color: #10b981; }
.roi-ok { color: #3b82f6; }
.roi-bad { color: #ef4444; }

/* ── Components: Timeline ── */
.timeline { position: relative; padding-left: 28px; }
.timeline-item { position: relative; padding-bottom: 1.2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -22px; top: 8px; bottom: -8px; width: 2px; background: var(--color-border, #dee2e6); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-border, #dee2e6); border: 2px solid var(--color-bg, #fff); }
.timeline-dot-active { background: var(--color-primary, #0d6efd); }
.timeline-content { padding-left: 0; }

/* ── PWA install banner (geïnjecteerd door pwa-install.js) ── */
.bh-pwa-install {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 9999;
  background: #fff; color: #222;
  border: 1px solid #ddd; border-radius: .5rem;
  padding: .75rem 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .875rem; max-width: 24rem;
  display: flex; align-items: center; gap: .75rem;
}
.bh-pwa-install__text { flex: 1; }
.bh-pwa-install__sub { color: #666; font-size: .8em; }
.bh-pwa-install__cta {
  background: #2563eb; color: #fff; border: 0; border-radius: .25rem;
  padding: .5rem .75rem; cursor: pointer; font-weight: 600;
}
.bh-pwa-install__close {
  background: transparent; border: 0; font-size: 1.25rem;
  cursor: pointer; color: #888; line-height: 1; padding: 0 .25rem;
}