/* ── Layout ──────────────────────────────────────────────── */
.secnap-wrap {
    max-width: 720px;
    margin-inline: auto;
    color: #111827;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 2rem 2.5rem;
}

/* ── Step visibility (toggled by JS) ─────────────────────── */
.secnap-step { display: none; }
.secnap-step.active { display: block; }

/* ── Progress bar ────────────────────────────────────────── */
.secnap-progress { height: 4px; }

/* ── Section / breakdown label letter-spacing ────────────── */
.secnap-section-label { letter-spacing: 0.08em; }

/* ── Question and step text ──────────────────────────────── */
.secnap-wrap h5      { color: #111827 !important; }
.secnap-wrap p       { color: #374151; }
.secnap-wrap .text-secondary { color: #6b7280 !important; }
.secnap-wrap .small  { color: inherit; }

/* ── Answer cards ────────────────────────────────────────── */
.secnap-answer {
    background-color: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.secnap-answer:hover {
    background-color: #f9fafb;
    border-color: #94a3b8 !important;
    color: #111827;
}

.secnap-answer.selected {
    border-color: #0f172a !important;
    background-color: #f0f9ff;
    color: #111827;
}

/* ── Custom radio dot ────────────────────────────────────── */
.secnap-answer-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.15s, background-color 0.15s;
}

.secnap-answer.selected .secnap-answer-dot {
    border-color: #0f172a;
    background-color: #0f172a;
}

/* ── Contact form inputs — explicit so dark-theme doesn't override ── */
.secnap-wrap .form-label {
    color: #374151;
}

.secnap-wrap .form-control {
    background-color: #ffffff;
    color: #111827;
    border: 2px solid #e5e7eb;
}

.secnap-wrap .form-control:focus {
    background-color: #ffffff;
    color: #111827;
    border-color: #0f172a;
    box-shadow: none;
}

.secnap-wrap .form-control::placeholder {
    color: #9ca3af;
}

/* ── Ghost back button ───────────────────────────────────── */
.secnap-btn-back {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}

.secnap-btn-back:hover { color: #111827; }

/* ── Breakdown dot (color set inline — dynamic value) ────── */
.secnap-breakdown-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 576px) {
    .secnap-wrap h5 { font-size: 1.05rem; }
}