/*
 * Creddo BE Lead Generation v4 — scoped styles.
 *
 * All interactive elements (buttons, sliders, checkboxes, JA/NEE toggle)
 * use brand blue (#2B7DF6) on white. Buttons render as filled blue pills
 * with white text in default, hover, focus, and active states.
 */
:root {
  --creddo-blue: #2B7DF6;
  --creddo-blue-dark: #1f5fc9;
  --creddo-navy: #0c2340;
  --creddo-ink: #0b1320;
  --creddo-mute: #6b7280;
  --creddo-border: #d1d5db;
  --creddo-soft: #f3f6fb;
}
.creddo-be-v4 { max-width: 720px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--creddo-ink); }
.creddo-be-v4 *, .creddo-be-v4 *::before, .creddo-be-v4 *::after { box-sizing: border-box; }
.creddo-be-v4__logo { text-align: center; padding: 16px 0; }
.creddo-be-v4__logo img { max-height: 40px; width: auto; }
.creddo-be-v4__card { background: #fff; border: 1px solid var(--creddo-border); border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px rgba(12, 35, 64, .06); }
.creddo-be-v4__card--center { text-align: center; padding: 60px 28px; }
.creddo-be-v4__title { font-size: 24px; margin: 0 0 8px; color: var(--creddo-navy); }
.creddo-be-v4__lead { color: var(--creddo-mute); margin: 0 0 24px; }
.creddo-be-v4__subtitle { font-size: 16px; margin: 24px 0 12px; color: var(--creddo-navy); }

.creddo-be-v4__sliders { display: grid; gap: 16px; margin-bottom: 8px; }
.creddo-be-v4__slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-weight: 600; }
.creddo-be-v4__slider-head output { color: var(--creddo-blue); font-weight: 700; }
.creddo-be-v4 input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--creddo-soft); outline: none; }
.creddo-be-v4 input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 22px; width: 22px; border-radius: 50%; background: var(--creddo-blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: pointer; }
.creddo-be-v4 input[type="range"]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 50%; background: var(--creddo-blue); border: 3px solid #fff; cursor: pointer; }

.creddo-be-v4__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .creddo-be-v4__row--two { grid-template-columns: 1fr; } }
.creddo-be-v4__field { margin: 10px 0; }
.creddo-be-v4 input[type="text"], .creddo-be-v4 input[type="email"], .creddo-be-v4 input[type="tel"], .creddo-be-v4 select {
  width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--creddo-border); border-radius: 10px; background: #fff; color: var(--creddo-ink);
}
.creddo-be-v4 input:focus, .creddo-be-v4 select:focus { outline: none; border-color: var(--creddo-blue); box-shadow: 0 0 0 3px rgba(43, 125, 246, .15); }

.creddo-be-v4__yesno { border: none; padding: 0; margin: 16px 0; }
.creddo-be-v4__yesno legend { font-weight: 600; margin-bottom: 10px; color: var(--creddo-navy); }
.creddo-be-v4__yesno-group { display: flex; gap: 10px; }
.creddo-be-v4__yesno-btn { flex: 1; padding: 12px 16px; border-radius: 999px; border: 2px solid var(--creddo-blue); background: var(--creddo-blue) !important; color: #ffffff !important; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.creddo-be-v4__yesno-btn:hover, .creddo-be-v4__yesno-btn:focus, .creddo-be-v4__yesno-btn:active { background: var(--creddo-blue-dark) !important; color: #ffffff !important; outline: none; }
.creddo-be-v4__yesno-btn.is-active, .creddo-be-v4__yesno-btn.is-active:hover { background: var(--creddo-blue-dark) !important; color: #ffffff !important; box-shadow: inset 0 0 0 2px #ffffff; }

.creddo-be-v4__check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; color: var(--creddo-ink); }
.creddo-be-v4__check input[type="checkbox"] { accent-color: var(--creddo-blue); width: 18px; height: 18px; margin-top: 2px; }
.creddo-be-v4__check a { color: var(--creddo-blue); }

.creddo-be-v4__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.creddo-be-v4__btn {
  display: inline-block; background-color: #2B7DF6 !important; color: #ffffff !important; border: none;
  padding: 14px 22px; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer;
  width: 100%; text-align: center; text-decoration: none; transition: background .15s;
}
.creddo-be-v4__btn, .creddo-be-v4__btn:link, .creddo-be-v4__btn:visited, .creddo-be-v4__btn:hover, .creddo-be-v4__btn:focus, .creddo-be-v4__btn:active { color: #ffffff !important; }
.creddo-be-v4__btn:hover, .creddo-be-v4__btn:focus, .creddo-be-v4__btn:active { background-color: var(--creddo-blue-dark) !important; outline: none; }
.creddo-be-v4__btn[disabled], .creddo-be-v4__btn.is-loading { opacity: .7; cursor: progress; }
.creddo-be-v4__btn.is-loading::after { content: ""; display: inline-block; margin-left: 10px; width: 14px; height: 14px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; vertical-align: middle; animation: creddoSpin .8s linear infinite; }

.creddo-be-v4__small { color: var(--creddo-mute); font-size: 12px; margin-top: 12px; }
.creddo-be-v4__error { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; padding: 10px 12px; border-radius: 10px; margin: 12px 0; font-size: 14px; }

.creddo-be-v4__spinner { width: 48px; height: 48px; border: 4px solid var(--creddo-soft); border-top-color: var(--creddo-blue); border-radius: 50%; margin: 0 auto 16px; animation: creddoSpin 1s linear infinite; }
@keyframes creddoSpin { to { transform: rotate(360deg); } }

.creddo-be-v4__summary { display: grid; gap: 8px; margin: 16px 0 24px; }
.creddo-be-v4__summary > div { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--creddo-soft); border-radius: 10px; }
.creddo-be-v4__summary span { color: var(--creddo-mute); }
.creddo-be-v4__summary strong { color: var(--creddo-navy); }

.creddo-offers { display: grid; gap: 16px; margin: 8px 0 16px; }
.creddo-offer { background: var(--creddo-navy); color: #fff; border-radius: 14px; padding: 20px; }
.creddo-offer__tab { display: inline-block; background: var(--creddo-blue); color: #fff; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: .04em; margin-bottom: 12px; }
.creddo-offer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.creddo-offer__grid > div { display: flex; flex-direction: column; }
.creddo-offer__grid span { color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .06em; }
.creddo-offer__grid strong { color: #fff; font-size: 16px; margin-top: 2px; }
@media (max-width: 520px) { .creddo-offer__grid { grid-template-columns: 1fr 1fr; } }

.creddo-be-v4__back { background: none; border: none; color: var(--creddo-blue); cursor: pointer; padding: 8px 0; font-size: 14px; }
.creddo-be-v4__back:hover { text-decoration: underline; }