/* ============================================================
   Centered-card authentication shell (login / register / reset /
   2FA / confirmations). A single focused card on a light background.
   Theme-driven (Veltrix primary). Used by _AuthLayout.cshtml.
   ============================================================ */

.auth-body {
    margin: 0;
    background: var(--bs-tertiary-bg, #f1f3f7);
}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ---- Centered card ---- */
.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(42, 48, 66, 0.08);
    padding: 2.25rem 2.25rem 2rem;
}
.auth-card.auth-form-wide { max-width: 560px; }

/* The wordmark text uses fill:currentColor; inherit the (dark) body colour here
   so it stays readable on the light card — the dark-panel white is gone. */
.auth-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
}
.auth-card-logo .nptex-logo-full { height: 38px; width: auto; }

.auth-heading { font-weight: 700; margin-bottom: 0.25rem; }
.auth-subheading { color: var(--bs-secondary-color); margin-bottom: 1.75rem; }

.auth-card .input-group-text {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-right: 0;
}
.auth-card .input-group .form-control { border-left: 0; }
.auth-card .form-control { padding-top: .5rem; padding-bottom: .5rem; }

.auth-footer-link { text-align: center; margin-top: 1.75rem; color: var(--bs-secondary-color); }

.auth-page-footer {
    margin: 1.5rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    text-align: center;
}

/* The .btn-outline-secondary override lives in nptex-components.css, which the
   auth layout does NOT load — so the "Back" button on the register page fell back
   to Veltrix's near-white, invisible outline button. Re-declare it here so neutral
   auth actions (Back) are a readable, proper secondary button. Mirrors the global
   override; keep the two in sync. */
.btn-outline-secondary {
    --bs-btn-color: #5b626b;
    --bs-btn-bg: #f3f4f7;
    --bs-btn-border-color: #ced4da;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #74788d;
    --bs-btn-hover-border-color: #74788d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #74788d;
    --bs-btn-active-border-color: #74788d;
    --bs-btn-focus-shadow-rgb: 116, 120, 141;
    color: #5b626b;
    background-color: #f3f4f7;
    border-color: #ced4da;
}

/* ---- Selectable choice cards (registration "business type", etc.) ----
   Replaces the washed-out btn-check + .btn-outline-secondary combo (unselected
   options looked disabled; the selected one had no clear affordance). A clean,
   standard radio-card: neutral by default, primary tint + ring + check when
   chosen. The hidden radio keeps .btn-check so it's the label's previous sibling. */
.choice-card {
    position: relative;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.choice-card:hover {
    border-color: var(--bs-secondary-color);
    box-shadow: 0 .125rem .5rem rgba(42, 48, 66, .08);
}
.choice-card__icon {
    display: block;
    font-size: 1.15rem;
    color: var(--bs-secondary-color);
    margin-bottom: .4rem;
}
.choice-card__title { display: block; font-weight: 600; color: var(--bs-body-color); }
.choice-card__desc  { display: block; font-size: .8125rem; line-height: 1.3; color: var(--bs-secondary-color); margin-top: .15rem; }

/* Selected — driven by the sibling .btn-check radio */
.btn-check:checked + .choice-card {
    border-color: var(--bs-primary);
    background: rgba(98, 110, 212, .06);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}
.btn-check:checked + .choice-card .choice-card__icon,
.btn-check:checked + .choice-card .choice-card__title { color: var(--bs-primary); }
.btn-check:checked + .choice-card::after {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: .6rem;
    right: .7rem;
    font-size: .72rem;
    color: var(--bs-primary);
}
/* Keyboard focus ring */
.btn-check:focus-visible + .choice-card { box-shadow: 0 0 0 .2rem rgba(98, 110, 212, .25); }

/* status / confirmation icon */
.auth-status-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    margin: 0 auto 1.25rem;
}

/* On small screens the card spans the width edge-to-edge with no chrome. */
@media (max-width: 575.98px) {
    .auth-wrapper { padding: 1rem; }
    .auth-card { padding: 1.75rem 1.25rem; border: 0; box-shadow: none; }
}