/* P&P Schoonmaak Stress-test — Component styles
   Buttons, forms, result screens, CTAs, loading states.
   Base layout + question styles → styles.css
*/

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: #0B2545;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 1.25rem;
  text-decoration: none;
  transition: background .2s, transform .1s;
}

.btn-primary:hover  { background: #142E58; }
.btn-primary:active { transform: scale(.98); }
.btn-primary.gold   { background: #C9A24B; color: #0B2545; }
.btn-primary.gold:hover { background: #B88E3A; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1.5rem;
  background: transparent;
  color: #0B2545;
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  border: 2px solid #D0D8E4;
  border-radius: 10px;
  cursor: pointer;
  margin-top: .6rem;
  text-decoration: none;
  transition: border-color .2s;
}

.btn-secondary:hover { border-color: #0B2545; }

/* ── Contact gate form ────────────────────────────────────── */
.form-field { margin-bottom: 1rem; }

.form-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #0B2545;
  margin-bottom: .35rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"] {
  width: 100%;
  padding: .75rem .9rem;
  border: 2px solid #E2E7EF;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  color: #0B2545;
  transition: border-color .18s;
}

.form-field input:focus { outline: none; border-color: #C9A24B; }

.form-field .field-error { font-size: .76rem; color: #C0392B; margin-top: .3rem; display: none; }

.form-field.invalid .field-error { display: block; }
.form-field.invalid input,
.form-field.invalid textarea { border-color: #C0392B; }

.contact-radio-group { display: flex; flex-direction: column; gap: .5rem; }

/* Native-radio selected state (gate uses real radios, not JS class toggle) */
.contact-radio-group .option-item { margin: 0; }
.contact-radio-group .option-item:has(input:checked) {
  border-color: #0B2545;
  background: #EDF1F9;
}
.contact-radio-group .option-item:has(input:checked) .option-dot {
  border-color: #0B2545;
  background: #0B2545;
}
.contact-radio-group .option-item:has(input:checked) .option-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9A24B;
}

.consent-row {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: .82rem;
  color: #4A5F7A;
  line-height: 1.5;
}

.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #0B2545;
  flex-shrink: 0;
  cursor: pointer;
}

.consent-row a { color: #C9A24B; text-decoration: underline; }

.option-hint { font-size: .78rem; color: #6B7E99; font-style: normal; }

/* ── Teaser / Score screen ────────────────────────────────── */
.score-badge {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.score-badge.hoog  { background: #FDE8E8; color: #8B1A1A; }
.score-badge.matig { background: #FEF3E2; color: #7A4A00; }
.score-badge.laag  { background: #E6F4EE; color: #1A5C36; }

.score-number {
  font-family: 'Domine', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: #0B2545;
  line-height: 1;
  margin-bottom: .25rem;
}

.score-label { font-size: .82rem; color: #6B7E99; margin-bottom: 1.5rem; }

/* ── Exposure bullets ─────────────────────────────────────── */
.exposure-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 1.5rem;
}

.exposure-item {
  padding: .9rem 1rem;
  background: #F8F6F1;
  border-left: 3px solid #C9A24B;
  border-radius: 0 8px 8px 0;
  font-size: .88rem;
  line-height: 1.55;
}

.exposure-item strong { display: block; margin-bottom: .2rem; color: #0B2545; }

/* ── Trust line ───────────────────────────────────────────── */
.trust-line { font-size: .8rem; color: #6B7E99; text-align: center; margin-top: 1rem; line-height: 1.6; padding: 0 .5rem; }

/* ── Loading ──────────────────────────────────────────────── */
.loading-overlay {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #4A5F7A;
  font-size: .9rem;
}

.loading-overlay.active { display: flex; }

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #E2E7EF;
  border-top-color: #C9A24B;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── "Ask directly on WhatsApp" result CTA ────────────────── */
.wa-direct { margin-top: 1rem; }

/* ── CTA group ────────────────────────────────────────────── */
.cta-group { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.cta-group .btn-primary { margin-top: 0; }

/* ── Separator ────────────────────────────────────────────── */
.divider { height: 1px; background: #E8EAF0; margin: 1.25rem 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 480px) {
  body { padding: 2.5rem 1.5rem 4rem; }
  .screen { padding: 2.5rem 2rem 2.5rem; }
  .progress-wrap { padding: 1.5rem 2rem 0; }
}