/* ─────────────────────────────────────────────────────────────
   Document Checklist Wizard — shared across the hub (steps 1-2)
   and each checklist's own page (steps 3-4).
───────────────────────────────────────────────────────────── */

/* Stepper */
.psk-dc-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 36px;
}
.psk-dc-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 92px;
}
.psk-dc-stepper__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef0f3;
    color: #8a8f98;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.psk-dc-stepper__step.is-active .psk-dc-stepper__dot {
    background: #fc5e28;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(252,94,40,0.15);
}
.psk-dc-stepper__step.is-done .psk-dc-stepper__dot {
    background: #1fa971;
    color: #fff;
}
.psk-dc-stepper__label {
    font-size: 11px;
    font-weight: 600;
    color: #8a8f98;
    text-align: center;
    white-space: nowrap;
}
.psk-dc-stepper__step.is-active .psk-dc-stepper__label { color: #040e26; }
.psk-dc-stepper__step.is-done .psk-dc-stepper__label { color: #1fa971; }
.psk-dc-stepper__line {
    width: 40px;
    height: 2px;
    background: #eef0f3;
    margin: 0 4px 22px;
}
.psk-dc-stepper__line.is-done { background: #1fa971; }
@media (max-width: 576px) {
    .psk-dc-stepper__label { display: none; }
    .psk-dc-stepper__line { width: 20px; }
    /* min-width: 92px (set above) was sized to fit the label text next
       to each dot — with the label hidden here, that width is just
       dead space. Left in place, 4 steps + connector lines need more
       room than a phone screen has, so the row wraps into two
       independently re-centered lines that no longer line up with
       each other at all. Shrinking to the dot's own content size lets
       all 4 steps + lines fit on one row like they're meant to. */
    .psk-dc-stepper__step { min-width: auto; }
}

/* Step transitions */
.psk-dc-step {
    display: none;
    animation: pskDcFadeIn .4s ease both;
}
.psk-dc-step.is-active { display: block; }
@keyframes pskDcFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Step 1 — service selection cards */
.psk-dc-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.psk-dc-service-card {
    background: #fff;
    border: 2px solid #e2e6ea;
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.psk-dc-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    border-color: #fc5e28;
}
.psk-dc-service-card.is-selected {
    border-color: #fc5e28;
    background: #fff8f5;
    box-shadow: 0 10px 28px rgba(252,94,40,0.18);
}
.psk-dc-service-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: #fff;
}
.psk-dc-service-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #a8adb5;
    margin-bottom: 4px;
}
.psk-dc-service-card__title {
    font-weight: 700;
    color: #040e26;
    margin-bottom: 6px;
    font-size: 1.05rem;
    line-height: 1.3;
}
.psk-dc-service-card__desc {
    font-size: 13px;
    color: #8a8f98;
    margin: 0;
}
.psk-dc-service-card__count {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fc5e28;
    background: rgba(252,94,40,0.1);
    padding: 3px 10px;
    border-radius: 20px;
}

/* Step 2 — application type cards */
.psk-dc-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.psk-dc-type-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 2px solid #e2e6ea;
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.psk-dc-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: #fc5e28;
    text-decoration: none;
}
.psk-dc-type-card__title { font-weight: 700; color: #040e26; margin-bottom: 4px; }
.psk-dc-type-card__desc { font-size: 13px; color: #8a8f98; margin: 0; }
.psk-dc-type-card__arrow { color: #fc5e28; font-size: 20px; flex-shrink: 0; }

.psk-dc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8a8f98;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    cursor: pointer;
    text-decoration: none;
}
.psk-dc-back-link:hover { color: #fc5e28; text-decoration: none; }

/* Sticky sidebar — content length varies per checklist and per FAQ
   expanded/collapsed state, so the two columns will never match height
   exactly. A static sidebar always ends up either too short (dead space
   under the content) or too long (dead space under the sidebar)
   depending on what's open. Docking it to the viewport as you scroll
   avoids the mismatch being visible at all, instead of chasing it. */
.psk-dc-sidebar {
    position: sticky;
    top: 90px;
}
@media (max-width: 991px) {
    .psk-dc-sidebar { position: static; }
}

.psk-dc-intro-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #eef0f3;
    border-left: 4px solid #fc5e28;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 auto 28px;
    max-width: 720px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.psk-dc-intro-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(252,94,40,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fc5e28;
    font-size: 1.2rem;
}
.psk-dc-intro-card__text { color: #555; line-height: 1.75; font-size: 0.95rem; }
.psk-dc-intro-card__text p:last-child { margin-bottom: 0; }

/* Sidebar link list — exact copy of the rules already used for this same
   component on /news (public/css/psk-gov-updates.css), which isn't loaded
   on this page. Without it the list falls back to plain browser bullets. */
.psk-sidebar-link-list { list-style: none; padding: 0; margin: 0; }
.psk-sidebar-link-list li a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; border-bottom: 1px solid #f5f5f5;
    font-size: 0.83rem; font-weight: 600; color: #040e26;
    text-decoration: none; transition: color 0.15s;
}
.psk-sidebar-link-list li:last-child a { border-bottom: none; }
.psk-sidebar-link-list li a:hover { color: #fc5e28; text-decoration: none; }
.psk-sidebar-link-list li a::after {
    content: '\f105'; font-family: FontAwesome; color: #c9ced6; font-size: 12px;
}
.psk-sidebar-link-list li a:hover::after { color: #fc5e28; }

/* Step 3 — one question at a time */
.psk-dc-question-wrap { max-width: 560px; margin: 0 auto; }
.psk-dc-question-progress {
    font-size: 12px;
    font-weight: 700;
    color: #fc5e28;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    text-align: center;
}
.psk-dc-question-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #040e26;
    text-align: center;
    margin-bottom: 6px;
}
.psk-dc-question-help {
    text-align: center;
    color: #8a8f98;
    font-size: 14px;
    margin-bottom: 24px;
}
.psk-dc-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.psk-dc-option {
    display: block;
    background: #fff;
    border: 2px solid #e2e6ea;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    font-weight: 600;
    color: #040e26;
    cursor: pointer;
    transition: all .2s ease;
}
.psk-dc-option:hover { border-color: #fc5e28; }
.psk-dc-option.is-selected {
    border-color: #fc5e28;
    background: #fff8f5;
    color: #fc5e28;
    box-shadow: 0 6px 18px rgba(252,94,40,0.15);
}
.psk-dc-option input { position: absolute; opacity: 0; pointer-events: none; }
.psk-dc-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
}

/* Step 4 — results dashboard */
.psk-dc-results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #040e26 0%, #1a3a6b 100%);
    border-radius: 16px;
    padding: 28px;
    color: #fff;
    margin-bottom: 28px;
}
.psk-dc-header-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.psk-dc-progress-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.psk-dc-progress-ring svg { transform: rotate(-90deg); }
.psk-dc-progress-ring circle { fill: none; stroke-width: 8; }
.psk-dc-progress-ring .psk-dc-ring-bg { stroke: rgba(255,255,255,0.15); }
.psk-dc-progress-ring .psk-dc-ring-fg { stroke: #fc5e28; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.psk-dc-progress-ring__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
}

.psk-dc-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8a8f98;
    margin: 28px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.psk-dc-section-title .psk-dc-badge-dot { width: 8px; height: 8px; border-radius: 50%; }

.psk-dc-doc-card {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
    transition: border-color .2s ease, background .2s ease;
}
.psk-dc-doc-card.is-have { border-color: #1fa971; background: #f4fbf7; }
.psk-dc-doc-card.is-missing { border-color: #fc5e28; background: #fff8f5; }
.psk-dc-doc-card__name { font-weight: 700; color: #040e26; }
.psk-dc-doc-card__why { font-size: 13px; color: #6b7280; margin: 4px 0; }
.psk-dc-doc-card__meta { font-size: 12px; color: #8a8f98; margin: 2px 0; }
.psk-dc-doc-card__source { font-size: 12px; font-weight: 600; }

.psk-dc-have-toggle { display: flex; gap: 6px; flex-shrink: 0; }
.psk-dc-have-btn {
    border: 1.5px solid #d8dce1;
    background: #fff;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.psk-dc-have-btn:hover { border-color: #fc5e28; color: #fc5e28; }
.psk-dc-have-btn.is-active[data-value="yes"] { background: #1fa971; border-color: #1fa971; color: #fff; }
.psk-dc-have-btn.is-active[data-value="no"] { background: #fc5e28; border-color: #fc5e28; color: #fff; }

.psk-dc-missing-note {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff3ed;
    border-left: 3px solid #fc5e28;
    border-radius: 6px;
    font-size: 12.5px;
    color: #7a3b1f;
}
.psk-dc-missing-note a { font-weight: 600; margin-left: 4px; }
.psk-dc-missing-note__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    margin-left: 0 !important;
    background: #fc5e28;
    color: #fff !important;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.psk-dc-missing-note__cta:hover { background: #e24f1c; text-decoration: none; }

.psk-dc-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8a8f98;
}
.psk-dc-empty-state i { font-size: 40px; color: #d8dce1; margin-bottom: 14px; display: block; }

@media (max-width: 576px) {
    .psk-dc-option-grid { grid-template-columns: 1fr 1fr; }
    .psk-dc-results-header { flex-direction: column; align-items: flex-start; }
    /* Side by side with 10px gap (set above) left them looking cramped
       once they wrapped to 2 lines at this width — same gap applied as
       a column direction instead gives each button its own full-width
       row with a real gap between, rather than an ambiguous half-wrap. */
    .psk-dc-header-actions { flex-direction: column; width: 100%; }
    .psk-dc-header-actions .btn { width: 100%; }
}

/* FAQ — exact copy of the site's shared "psk-faq-new" component (see
   public/css/psk-services-detail.css) so this page looks identical to the
   FAQ sections on /services/* rather than inventing a second style. */
.psk-faq-new { padding: 0; }
.psk-faq-new__intro { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.psk-faq-new__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(252,94,40,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.psk-faq-new__icon .fa { font-size: 1.2rem; color: #fc5e28; }
.psk-faq-new__title { font-size: 1.2rem; font-weight: 700; color: #040e26; margin: 0; }
.psk-faq-new__sub { font-size: 0.82rem; color: #888; margin: 2px 0 0; }
.psk-faq-new__item { border: 1px solid #eee; border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: #fff; transition: border-color 0.2s; }
.psk-faq-new__item--open { border-color: rgba(252,94,40,0.35); }
.psk-faq-new__item--open .psk-faq-new__q { background: rgba(252,94,40,0.04); }
.psk-faq-new__q { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; user-select: none; }
.psk-faq-new__num { width: 26px; height: 26px; border-radius: 50%; background: #f4f4f4; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #888; flex-shrink: 0; transition: all 0.2s; }
.psk-faq-new__item--open .psk-faq-new__num { background: #fc5e28; color: #fff; border-color: #fc5e28; }
.psk-faq-new__q-text { flex: 1; font-size: 0.92rem; font-weight: 600; color: #040e26; line-height: 1.4; }
.psk-faq-new__chevron { font-size: 0.75rem; color: #aaa; transition: transform 0.25s, color 0.25s; flex-shrink: 0; }
.psk-faq-new__item--open .psk-faq-new__chevron { transform: rotate(180deg); color: #fc5e28; }
.psk-faq-new__a { display: none; padding: 0 18px 16px 56px; font-size: 0.875rem; color: #555; line-height: 1.75; }
.psk-faq-new__item--open .psk-faq-new__a { display: block; }