/* ============================================================
   Create-new-NPO donation-request flow — SHARED styles across its steps
   (SignUp / CreateNPO / CreateEvent).
============================================================ */
:root {
    /* Form controls */
    --field-text: #16242e;
    --field-placeholder: #9aa6ad;

    /* OAuth button (account page) */
    --oauth-border: var(--border);
    --oauth-text: var(--navy);

    /* Divider / helper text */
    --divider-line: #e6ebee;
    --divider-text: #9aa6ad;
    --text-soft: #46555e;

    /* Error banner */
    --error-fg: #d9534f;
    --error-bg: #f2dede;
    --error-border: #ebccd1;
}

/* ---- Stepper: shared component (Content/css/common/stepper.css) — page positioning only. */
#signupStepper {
    margin: -2px 0 24px;
}


/* ---- Form controls ---- */
.field {
    height: var(--field-height);
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--field-text);
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.field:focus {
    border-color: var(--blue);
}

.field::placeholder {
    color: var(--field-placeholder);
}

.row {
    display: flex;
    gap: 10px;
}

/* ---- reCAPTCHA, centred on the final signup screen ---- */
.captcha-row {
    display: flex;
    justify-content: center;
}

.mb-6 { margin-bottom: 6px; }
.mb-11 { margin-bottom: 11px; }
.mb-13 { margin-bottom: 13px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }

/* ---- Buttons ---- */
.btn-primary {
    height: 46px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

.btn-primary:not(:disabled):hover {
    background: var(--navy-dark);
}

.btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ---- Links / footer ---- */
.link-back {
    font-size: 12.5px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.center-mt {
    margin-top: 14px;
    text-align: center;
}

.foot-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12.5px;
}

.foot-links a {
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
}

.foot-links .sep {
    color: var(--border);
}

/* ---- Error banner ---- */
.error-messenger {
    color: var(--error-fg);
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 13px;
}

.error-messenger ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.field-wrapper .field:required ~ .field-placeholder span::after {
    content: " *";
    color: var(--error-fg);
}

/* ---- Field icon (e.g. the location pin on Event location) ---- */
.field-wrapper--icon .field {
    padding-right: 38px;
}

.field-wrapper--icon .field-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: var(--field-height);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #9aa6ad;
    font-size: 15px;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 600px) {
    .row {
        flex-direction: column;
        gap: 12px;
    }
}