/* ── 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; }

/* ── 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; }