body { background: #fff; min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: "Roboto Condensed", sans-serif; }
main { flex: 1; }
.site-header { position: relative; min-height: 175px; height: 20vh; overflow: hidden; }
.site-header .header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.site-header .header-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(38, 39, 96, 1) 0%, rgba(38, 39, 96, 0.5) 100%); }
.site-header .header-content { position: absolute; inset: 0; display: flex; align-items: center; }
.site-logo img { max-width: 170px; height: auto; }
.btn-nav { font-size: 1.2rem; font-weight: 600; background: #38b34a; color: #fff; border: none; padding: 0.4em 1em; border-radius: 20px; text-decoration: none; margin: 0.3em; display: inline-block; white-space: nowrap; }
.btn-nav:hover, .btn-nav:focus { background: #fff; color: #262760; }
.site-footer { background: #262760; padding: 1.25rem 0; margin-top: auto; }
.site-footer img { max-width: 100px; height: auto; }
.site-footer a { color: #efefef; white-space: nowrap; margin: 0.25em; }
.site-footer a:hover, .site-footer a:focus { color: #fff; }
.donor-layout { min-height: 100vh; display: flex; flex-direction: column; }
.donor-main { flex: 1; }
.bold { font-weight: bold; }
.error-icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff3cd; color: #b58100; display: grid; place-items: center; font-size: 2rem; }

@media (max-width: 575.98px) {
    .error-card { margin-top: 0; }
}

@media (max-width: 767.98px) {
    .site-header { height: auto; min-height: 245px; }
    .site-header .header-content { align-items: center; padding: 1rem 0; }
    .header-content .container { flex-direction: column; justify-content: center !important; text-align: center; gap: 0.6rem !important; }
    .site-logo img { max-width: 140px; }
    .site-header nav { display: flex; flex-direction: column; width: 100%; max-width: 260px; /* give it breathing room */ margin: 0 auto; }
    .btn-nav { display: block; width: 100%; margin: 0.25rem 0; font-size: 1rem; padding: 0.5rem 1rem; }
    .btn-nav:last-child { margin-bottom: 0; }
    .site-footer .container { flex-direction: column; text-align: center; }
    .footer-links { display: flex; flex-direction: column; gap: 0.35rem; }
}

.btn-submitted-spinner { position: relative !important; background-color: white !important; border-color: white !important; color: transparent !important; pointer-events: none; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-top-color: #0d6efd; border-radius: 50%; animation: spin 0.75s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.btn .spinner { width: 20px; height: 20px; border-width: 3px; }

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}