/* ============================================================
   SelfServe area shell styles — loaded once by Views/Shared/SelfServe.Master.

============================================================ */
:root {
    --signup-btn: #286090;
    --signup-btn-hover: #1f4c73;
    --signup-link-btn: var(--blue);
    --signup-welcome-bg: #e6f4ec;
    --signup-welcome-fg: #1f8a5b;
    --signup-readonly-bg: #f6f8fa;
    --footer-note-line: #e6ebee;
    --footer-note-bg: #f4f6f8;
}

.body .btn-primary {
    background: var(--signup-btn);
}

.body .btn-primary:not(:disabled):hover {
    background: var(--signup-btn-hover);
}

/* ---- Titles:---- */
.title--center {
    text-align: center;
}

/* Email echoed back read-only on the account-details screen. Needs .body to out-rank
   create-npo-flow.css's plain .field, which SelfServe.Master links after this file. */
.body .field--readonly {
    background: var(--signup-readonly-bg);
}

/* ---- Card header: full-bleed photo on desktop, small icon bar on mobile ---- */
.signup-banner {
    flex: none;
}

.signup-banner--desktop {
    height: 270px;
    background-image: url('/Content/images/SelfServe/auction-podium.png');
    background-size: cover;
    background-position: center calc(50% + 15px);
}

.signup-banner--mobile {
    display: none;
    height: 96px;
    background: var(--card-bg);
    align-items: center;
    justify-content: center;
}

.signup-banner--mobile img {
    height: 56px;
    width: auto;
    display: block;
}

.footer-note {
    display: none;
    border-top: 1px solid var(--footer-note-line);
    background: var(--footer-note-bg);
    padding: 18px 26px 20px;
    flex: none;
}

.footer-note.is-shown {
    display: block;
}

.footer-note p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    text-align: center;
}

/* ---- Terminal "You're all set" screen ---- */
.welcome {
    text-align: center;
    padding: 6px 0 4px;
}

.welcome__check {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--signup-welcome-bg);
    color: var(--signup-welcome-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 14px;
}

.welcome__text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 auto 18px;
    max-width: 400px;
}

.btn-link-primary {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--signup-link-btn);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 600px) {
    h1.title {
        text-align: center;
    }

    .signup-banner--desktop {
        display: none;
    }

    .signup-banner--mobile {
        display: flex;
    }

    .footer-note {
        padding: 16px 20px 18px;
        margin-top: auto;
    }
}