/* ==========================================================================
   FolieTotaal Configurator — scoped styles (.ftc-*)
   Self-contained; does not rely on Tailwind or theme CSS.
   ========================================================================== */

.ft-configurator-root {
  --ftc-bg: #0b0c0e;
  --ftc-panel: #131418;
  --ftc-panel-2: #18191e;
  --ftc-border: #26272d;
  --ftc-border-soft: #1f2025;
  --ftc-text: #f4f4f5;
  --ftc-muted: #a1a1aa;
  --ftc-muted-2: #71717a;
  --ftc-radius: 16px;
  --ftc-radius-sm: 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ftc-text);
  -webkit-font-smoothing: antialiased;
}

.ftc-root {
  width: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, #15171c 0%, #0b0c0e 60%);
  border-radius: var(--ftc-radius);
  overflow: hidden;
}

.ftc-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 36px;
}

@media (prefers-reduced-motion: reduce) {
  .ft-configurator-root * { transition: none !important; animation: none !important; }
}

/* Header */
.ftc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ftc-brand__name { font-size: 1.125rem; font-weight: 800; font-style: italic; letter-spacing: -0.02em; line-height: 1; }
.ftc-brand__a { color: #fff; }
.ftc-brand__sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ftc-muted-2); margin-top: 4px; }
.ftc-reset { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ftc-muted-2); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color .2s; }
.ftc-reset:hover { color: var(--ftc-text); }

/* Progress */
.ftc-progress { margin-bottom: 24px; }
.ftc-progress__track { height: 4px; width: 100%; border-radius: 999px; background: #26272d; overflow: hidden; }
.ftc-progress__fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.ftc-progress__label { font-size: 11px; color: var(--ftc-muted-2); margin-top: 8px; }

/* Typography */
.ftc-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 8px; }
.ftc-h1 { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 4px; line-height: 1.2; }
.ftc-h2 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 16px; line-height: 1.25; }
.ftc-h2--tight { margin-bottom: 4px; }
.ftc-lead { font-size: 0.875rem; color: var(--ftc-muted); margin: 0 0 20px; line-height: 1.6; }
.ftc-label { display: block; font-size: 0.875rem; color: #d4d4d8; margin-bottom: 8px; }
.ftc-muted { color: var(--ftc-muted-2); }

/* Grid */
.ftc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .ftc-grid--2 { grid-template-columns: 1fr 1fr; } }

/* Option cards */
.ftc-option { width: 100%; text-align: left; border-radius: var(--ftc-radius); border: 1px solid var(--ftc-border-soft); background: var(--ftc-panel); padding: 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.ftc-option:hover { border-color: #3f3f46; }
.ftc-option.is-active { background: #1d1e24; }
.ftc-option.is-demo { opacity: 0.6; }
.ftc-option__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ftc-option__main { min-width: 0; }
.ftc-option__titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ftc-option__title { font-size: 1rem; font-weight: 600; color: #fff; }
.ftc-option__sub { font-size: 0.875rem; color: var(--ftc-muted); margin-top: 2px; }
.ftc-option__right { flex-shrink: 0; display: flex; align-items: center; }

/* Badges */
.ftc-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; padding: 2px 6px; }
.ftc-badge.is-solid { color: #09090b; font-weight: 600; }
.ftc-badge.is-demo { color: var(--ftc-muted); border: 1px solid var(--ftc-border); }

/* Chips */
.ftc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ftc-chip { display: inline-flex; align-items: center; font-size: 12px; color: #d4d4d8; border: 1px solid var(--ftc-border); border-radius: 999px; padding: 4px 12px; }

/* Panels */
.ftc-panel { border-radius: var(--ftc-radius); border: 1px solid var(--ftc-border-soft); background: var(--ftc-panel); padding: 20px; }
.ftc-panel--change { padding: 16px; margin-bottom: 16px; }

/* Change/downsell */
.ftc-change__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.875rem; color: #d4d4d8; }
.ftc-strike { text-decoration: line-through; color: var(--ftc-muted); }
.ftc-change__to { font-weight: 600; color: #fff; }
.ftc-change__why { font-size: 0.875rem; color: var(--ftc-muted); margin: 8px 0 0; line-height: 1.5; }
.ftc-change__prev { font-size: 12px; color: var(--ftc-muted-2); margin: 8px 0 0; }

/* Quote */
.ftc-quote__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ftc-quote__svc { font-size: 0.875rem; color: #fff; font-weight: 500; }
.ftc-quote__meta { font-size: 12px; color: var(--ftc-muted); }
.ftc-quote__price { font-size: 1.875rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ftc-quote__fine { font-size: 12px; color: var(--ftc-muted-2); margin-top: 4px; }
.ftc-quote__warranty { font-size: 12px; margin-top: 8px; }

/* Actions */
.ftc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.ftc-stack { display: flex; flex-direction: column; gap: 12px; }

/* Buttons */
.ftc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: var(--ftc-radius-sm); padding: 14px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; border: none; transition: opacity .2s, background .2s, border-color .2s, color .2s; text-decoration: none; box-sizing: border-box; }
.ftc-btn--primary { color: #09090b; }
.ftc-btn--primary:hover { opacity: 0.9; }
.ftc-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.ftc-btn--ghost { background: transparent; color: #e4e4e7; border: 1px solid var(--ftc-border); font-weight: 500; }
.ftc-btn--ghost:hover { border-color: #52525b; background: #1d1e24; }
.ftc-btn--text { background: none; color: var(--ftc-muted); font-size: 0.875rem; font-weight: 500; padding: 12px; }
.ftc-btn--text:hover { color: #67e8f9; }
.ftc-btn--mini { background: none; border: none; color: var(--ftc-muted-2); font-size: 12px; padding: 4px; cursor: pointer; }
.ftc-btn--mini:hover { color: #d4d4d8; }
.ftc-btn--mt { margin-top: 20px; }

/* Inputs */
.ftc-input, .ftc-textarea { width: 100%; border-radius: var(--ftc-radius-sm); border: 1px solid var(--ftc-border); background: var(--ftc-panel); padding: 12px 16px; color: #fff; outline: none; font-family: inherit; font-size: 0.9375rem; transition: border-color .2s; box-sizing: border-box; }
.ftc-input:focus, .ftc-textarea:focus { border-color: #52525b; }
.ftc-input::placeholder, .ftc-textarea::placeholder { color: #52525b; }
.ftc-textarea { resize: vertical; }

.ftc-budget { display: flex; align-items: center; border-radius: var(--ftc-radius-sm); border: 1px solid var(--ftc-border); background: var(--ftc-panel); padding: 0 16px; transition: border-color .2s; }
.ftc-budget:focus-within { border-color: #52525b; }
.ftc-budget__cur { color: var(--ftc-muted); margin-right: 8px; }
.ftc-budget__input { width: 100%; background: transparent; border: none; padding: 14px 0; color: #fff; outline: none; font-family: inherit; font-size: 0.9375rem; }
.ftc-budget__input::placeholder { color: #52525b; }

/* Note */
.ftc-note { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--ftc-muted); background: var(--ftc-panel); border: 1px solid var(--ftc-border-soft); border-radius: var(--ftc-radius-sm); padding: 12px; }
.ftc-note__icon { margin-top: 2px; flex-shrink: 0; }

/* Checkbox in extras */
.ftc-check { width: 20px; height: 20px; border-radius: 6px; border: 1px solid #52525b; display: flex; align-items: center; justify-content: center; }
.ftc-check.is-on { border: none; }
.ftc-check__icon { color: #09090b; }

/* Summary */
.ftc-summary { margin-bottom: 20px; }
.ftc-summary__head { display: flex; align-items: center; gap: 12px; }
.ftc-summary__svc { color: #fff; font-weight: 500; font-size: 0.875rem; }
.ftc-summary__meta { color: var(--ftc-muted); font-size: 12px; }
.ftc-summary__price { margin-top: 12px; color: #d4d4d8; font-size: 0.875rem; }
.ftc-summary__val { color: #fff; font-weight: 600; }

/* Upload */
.ftc-upload { width: 100%; border-radius: var(--ftc-radius-sm); border: 1px dashed var(--ftc-border); background: var(--ftc-panel); padding: 16px; display: flex; align-items: center; gap: 12px; color: var(--ftc-muted); font-size: 0.875rem; cursor: pointer; transition: border-color .2s; text-align: left; }
.ftc-upload:hover { border-color: #52525b; }
.ftc-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ftc-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ftc-panel); border: 1px solid var(--ftc-border-soft); border-radius: 8px; padding: 6px 10px; }
.ftc-file__name { font-size: 12px; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftc-file__remove { background: none; border: none; color: var(--ftc-muted-2); cursor: pointer; display: flex; padding: 2px; border-radius: 4px; flex-shrink: 0; }
.ftc-file__remove:hover { color: #f87171; }

/* Error / hint */
.ftc-error { margin-top: 16px; border-radius: var(--ftc-radius-sm); border: 1px solid #7f1d1d; background: rgba(127,29,29,.15); color: #fca5a5; padding: 12px 16px; font-size: 0.875rem; }
.ftc-hint { font-size: 12px; color: var(--ftc-muted-2); margin-top: 8px; text-align: center; }

/* Back button */
.ftc-back { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--ftc-muted-2); background: none; border: none; cursor: pointer; margin-bottom: 16px; padding: 4px; border-radius: 4px; transition: color .2s; }
.ftc-back:hover { color: #e4e4e7; }

/* Done */
.ftc-done { text-align: center; padding-top: 8px; }
.ftc-done__check { width: 64px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.ftc-done__title { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.ftc-done__sub { margin-bottom: 24px; }
.ftc-recap { text-align: left; }
.ftc-recap__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ftc-muted-2); margin-bottom: 12px; }
.ftc-restart { margin: 24px auto 0; display: inline-flex; }

/* Rows */
.ftc-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.ftc-row__k { font-size: 0.875rem; color: var(--ftc-muted); }
.ftc-row__v { font-size: 0.875rem; font-weight: 500; color: #fff; }
.ftc-divider { height: 1px; background: var(--ftc-border); margin: 12px 0; }

/* Spinner */
.ftc-spin { animation: ftc-spin 0.8s linear infinite; }
@keyframes ftc-spin { to { transform: rotate(360deg); } }