/* Scinov Africa – Donate Equipment form
   Uses the same variables as team-section.css; change them in one place. */
.donate-section {
    --team-accent: #0d6efd;
    --team-accent-soft: #e8f0ff;
    --team-ink: #1b2430;
    --team-muted: #5b6675;
    --donate-field-bg: #f0f3f4;

    padding: 4rem 0;
    background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
}

/* ---------- Header ---------- */
.donate-header { margin-bottom: 2rem; }
.donate-eyebrow {
    display: inline-block;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--team-accent-soft);
    color: var(--team-accent);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.donate-title {
    margin: 1rem 0 .75rem;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--team-ink);
}
.donate-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: .9rem auto 0;
    border-radius: 4px;
    background: var(--team-accent);
}
.donate-intro { margin: 0; color: var(--team-muted); line-height: 1.7; }

/* ---------- Card ---------- */
.donate-card {
    padding: 2.25rem;
    background: #fff;
    border: 1px solid rgba(27, 36, 48, .06);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(27, 36, 48, .08);
}

.donate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.donate-field { display: flex; flex-direction: column; min-width: 0; }
.donate-field label {
    margin-bottom: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--team-ink);
}

/* ---------- Inputs ---------- */
.donate-field input,
.donate-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .9rem;
    font: inherit;
    font-size: .95rem;
    color: var(--team-ink);
    background: var(--donate-field-bg);
    border: 2px solid transparent;
    border-radius: 10px;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.donate-field textarea { resize: vertical; min-height: 110px; }
.donate-field input::placeholder,
.donate-field textarea::placeholder { color: #8b95a3; }
.donate-field input:hover,
.donate-field textarea:hover { background: #e9edef; }
.donate-field input:focus,
.donate-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--team-accent);
    box-shadow: 0 0 0 4px var(--team-accent-soft);
}

/* ---------- Button ---------- */
.donate-actions { margin-top: 1.75rem; text-align: center; }
.donate-btn {
    min-width: 200px;
    padding: .85rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--team-accent);
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(13, 110, 253, .28);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.donate-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 22px rgba(13, 110, 253, .32); }
.donate-btn:active { transform: translateY(0); }
.donate-btn:focus-visible { outline: 3px solid var(--team-accent-soft); outline-offset: 3px; }
.donate-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Layout ---------- */
@media (min-width: 576px) {
    .donate-grid { grid-template-columns: 1fr 1fr; }
    .donate-field--full { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .donate-card { padding: 1.5rem 1.25rem; }
    .donate-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .donate-btn, .donate-field input, .donate-field textarea { transition: none; }
    .donate-btn:hover { transform: none; }
}