/* Steps 2 to 7 of the DailyDebtSolution form. Colors come from the live
   site's custom.min.css (brand blue #2334b8, hover #0e54e2). */

:root {
  --dds-blue: #2334b8;
  --dds-blue-hover: #0e54e2;
  --dds-text: #535961;
  --dds-muted: #676c76;
  --dds-border: #b8c2c6;
  --dds-error: #d6203f;
  --dds-bg: #f3f5f9;
}

#apply { background: var(--dds-bg); padding: 96px 16px 56px; min-height: 100vh; }
#apply[hidden], .dds-step[hidden], .dds-panel[hidden], #dds-app[hidden], [hidden] { display: none !important; }

.dds-card { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(35, 52, 184, 0.08); padding: 24px 20px 28px; font-family: "Inter", sans-serif; color: var(--dds-text); }
@media (min-width: 600px) { .dds-card { padding: 32px 36px 36px; } }

.dds-progress { height: 6px; background: #e6e9f2; border-radius: 3px; overflow: hidden; }
.dds-progress-bar { height: 100%; width: 0; background: var(--dds-blue); transition: width 250ms ease; }
.dds-step-count { margin: 10px 0 18px; font-size: 13px; color: var(--dds-muted); font-weight: 600; letter-spacing: 0.02em; }

.dds-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.dds-step legend { border: 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: #1d2240; margin-bottom: 8px; outline: none; width: 100%; }
.dds-intro { font-size: 14px; line-height: 1.5; color: var(--dds-muted); margin: 0 0 16px; }

.dds-field { margin-bottom: 18px; }
.dds-label { display: block; font-size: 14px; font-weight: 600; color: var(--dds-text); margin-bottom: 6px; line-height: 1.35; }
.dds-field input[type="text"], .dds-field input[type="tel"], .dds-field input[type="date"], .dds-field select {
  display: block; width: 100%; height: 48px; padding: 0 14px; font-size: 16px; font-family: inherit; font-weight: 500; color: #1d2240;
  background: #fff; border: 1px solid var(--dds-border); border-radius: 8px; box-shadow: none; -webkit-appearance: none; appearance: none;
  transition: border-color 150ms ease;
}
.dds-field select { background-image: url("../images/arrow-down.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
.dds-field input:focus, .dds-field select:focus { outline: none; border-color: var(--dds-blue); box-shadow: 0 0 0 3px rgba(35, 52, 184, 0.15); }
.dds-help { font-size: 13px; color: var(--dds-muted); margin: 6px 0 0; line-height: 1.4; }
.dds-error { font-size: 13px; color: var(--dds-error); margin: 6px 0 0; font-weight: 600; }
.dds-error:empty { display: none; }
.dds-invalid input[type="text"], .dds-invalid input[type="tel"], .dds-invalid input[type="date"], .dds-invalid select { border-color: var(--dds-error); }

.dds-prefix { position: relative; }
.dds-prefix span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--dds-muted); }
.dds-prefix input { padding-left: 28px !important; }

.dds-yesno { display: flex; gap: 10px; }
.dds-choice { flex: 1; margin: 0; cursor: pointer; }
.dds-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dds-choice span { display: block; text-align: center; height: 46px; line-height: 44px; border: 1px solid var(--dds-border); border-radius: 8px; font-weight: 600; color: var(--dds-text); transition: all 150ms ease; }
.dds-choice input:checked + span { background: var(--dds-blue); border-color: var(--dds-blue); color: #fff; }
.dds-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(35, 52, 184, 0.25); }
.dds-invalid .dds-choice span { border-color: var(--dds-error); }

.dds-consent { background: #f7f8fb; border: 1px solid #e3e6ef; border-radius: 8px; padding: 12px 14px; }
.dds-check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--dds-text); cursor: pointer; }
.dds-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--dds-blue); }
.dds-invalid.dds-consent { border-color: var(--dds-error); }
.dds-submit-text { font-size: 12px; line-height: 1.5; color: var(--dds-muted); margin: 4px 0 0; }
.dds-submit-text a, .dds-consent a { color: var(--dds-blue); }

.dds-nav { display: flex; gap: 12px; margin-top: 24px; }
.dds-btn { height: 52px; border: 0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; transition: background 150ms ease; }
.dds-btn-next { flex: 1; background: var(--dds-blue); color: #fff; }
.dds-btn-next:hover, .dds-btn-next:focus-visible { background: var(--dds-blue-hover); }
.dds-btn-back { flex: 0 0 96px; background: #fff; color: var(--dds-blue); border: 1px solid var(--dds-border); }
.dds-btn-back:hover { border-color: var(--dds-blue); }

.dds-panel { text-align: center; padding: 24px 0 8px; }
.dds-panel h2 { font-size: 22px; font-weight: 700; color: #1d2240; margin: 0 0 10px; }
.dds-panel p { font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.dds-panel .dds-btn { padding: 0 32px; }
a.dds-btn { display: inline-block; line-height: 52px; text-decoration: none; color: #fff; }
a.dds-btn:hover, a.dds-btn:focus { color: #fff; text-decoration: none; }
.dds-spinner { width: 44px; height: 44px; margin: 0 auto 18px; border: 4px solid #e6e9f2; border-top-color: var(--dds-blue); border-radius: 50%; animation: dds-spin 0.9s linear infinite; }
@keyframes dds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dds-spinner { animation-duration: 3s; } .dds-progress-bar { transition: none; } }

.dds-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.dds-hero-error { max-width: 640px; margin: 4px auto 8px; padding: 8px 14px; border-radius: 6px; background: var(--dds-error); color: #fff; font-weight: 600; font-size: 14px; text-align: center; position: relative; z-index: 3; }
.dds-hero-error:empty { display: none; }

.dds-test-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; background: #ffb504; color: #1a1a1a; font: 600 13px/1.4 "Inter", sans-serif; padding: 8px 16px; text-align: center; }
body[data-mode="test"] { padding-bottom: 40px; }

.dds-noscript { background: #fff3cd; color: #1a1a1a; padding: 12px 16px; text-align: center; margin: 0; }