/* Application-wizard CTA buttons — the footer button canon, made reachable outside the wizards.
 *
 * WHY THIS FILE EXISTS
 * The six CTA classes below (close-btn, btn-back, btn-cancel, btn-save-draft, btn-next, btn-submit)
 * were defined only inside NewApplicationStraightFormPage.razor.css and
 * NewApplicationSimplifiedFormPage.razor.css. Blazor scoped CSS is rewritten to `.btn-next[b-xxxxx]`
 * and only ever matches elements rendered by its own component, so putting one of those class names
 * on another page's button styles nothing at all. That is the phantom-class bug that produced
 * unstyled `.form-input`, `btn-brand` and `btn-outline-brand` buttons on the borrower questionnaire.
 * This file is the same promotion input-components.css did for the intake field styles.
 *
 * WHY THE `wizard-cta` COMPANION CLASS RATHER THAN BARE SELECTORS
 * These six names are not free at global scope. `btn-cancel` alone appears in 31 other .razor files
 * and `close-btn`, `btn-back`, `btn-save-draft` and `btn-submit` in another 20 between them, mostly
 * as `class="btn btn-cancel"` where the base look comes from Bootstrap or modal-theme.css and the
 * page's own scoped CSS adds only a :hover. Defining `.btn-cancel { padding; border-radius; background }`
 * globally would silently restyle every one of them. Compounding each selector with `wizard-cta`
 * makes adoption opt-in and the blast radius exactly the buttons that ask for it, and lifts
 * specificity to (0,2,0) so the canon wins over Bootstrap's `.btn` without !important.
 *
 * Usage:  <button class="wizard-cta btn-next">  — the companion class, then the role class.
 *
 * WHY THE TWO WIZARDS STILL CARRY THEIR OWN SCOPED COPIES
 * They are the reference rendering and must not move by a single pixel, so they were left untouched.
 * Consuming this file from them would mean adding `wizard-cta` to 22 button tags spread over four
 * modal surfaces as well as the two footer rows; one missed tag renders a wizard CTA unstyled, which
 * is the very failure this file exists to prevent. Those scoped copies remain the source these rules
 * were lifted from, verbatim and in source order — change them together.
 */

/* ---------- base tier: lifted from the wizards' first CTA block, in source order ---------- */

.wizard-cta.close-btn {
    padding: 10px 20px;
    background: transparent;
    color: #64748B;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.wizard-cta.close-btn:hover {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #0F172A;
}

/* Destructive secondary — quiet danger tint, fills solid red on hover */
.wizard-cta.btn-cancel {
    padding: 10px 20px;
    background: var(--error-50, #FEF2F2);
    border: 1px solid #FECACA;
    border-radius: 10px;
    color: var(--error-600, #DC2626);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wizard-cta.btn-cancel:hover {
    background: var(--error-600, #DC2626);
    border-color: var(--error-600, #DC2626);
    color: #fff;
}

/* Affirmative secondary — brand outline */
.wizard-cta.btn-save-draft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--brand-300, #80B7D9);
    border-radius: 10px;
    color: var(--brand-600, #004980);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wizard-cta.btn-save-draft:hover {
    background: var(--brand-50, #E6F2F8);
    border-color: var(--brand-600, #004980);
    color: var(--brand-700, #003760);
}

.wizard-cta.btn-submit {
    padding: 10px 24px;
    background: var(--brand-600, #004980);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wizard-cta.btn-submit:hover {
    background: var(--brand-700, #003760);
}

.wizard-cta.btn-submit:disabled {
    background: #9CA3AF;
    color: #E5E7EB;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

.wizard-cta.btn-submit:disabled:hover {
    background: #9CA3AF;
    box-shadow: none;
    transform: none;
}

/* Modal Button Styles — the wizards group .btn-confirm into this rule, which no markup in either
   page uses; only the .btn-cancel half is carried over. */
.wizard-cta.btn-cancel {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .wizard-cta.btn-save-draft,
    .wizard-cta.btn-submit,
    .wizard-cta.btn-cancel {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- footer tier: the wizard footer row's own block, which overrides the base tier above.
              Kept in this order because that is how the two files resolve it. ---------- */

.wizard-cta.btn-back,
.wizard-cta.btn-next,
.wizard-cta.btn-submit {
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    line-height: 1.4;
}

.wizard-cta.btn-back {
    background: transparent;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

.wizard-cta.btn-back:hover {
    background: #F1F5F9;
    color: #0F172A;
}

.wizard-cta.btn-next {
    background: var(--brand-600, #004980);
    color: white;
}

.wizard-cta.btn-next:hover {
    background: var(--brand-700, #003760);
}

.wizard-cta.btn-submit {
    background: var(--success-600, #059669);
    color: white;
}

.wizard-cta.btn-submit:hover {
    background: var(--success-700, #047857);
}

.wizard-cta.btn-save-draft {
    padding: 10px 18px;
    background: #fff;
    color: var(--brand-600, #004980);
    border: 1px solid var(--brand-300, #80B7D9);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.wizard-cta.btn-save-draft:hover {
    background: var(--brand-50, #E6F2F8);
    border-color: var(--brand-600, #004980);
    color: var(--brand-700, #003760);
}

@media (max-width: 768px) {
    .wizard-cta.btn-back,
    .wizard-cta.btn-next,
    .wizard-cta.btn-submit,
    .wizard-cta.btn-cancel,
    .wizard-cta.btn-save-draft {
        width: 100%;
        justify-content: center;
    }
}