/* Afonds donations form — self-contained, no theme build dependency.
   Brand: --af-red #E84B38, --blue-normal #003F72 (matches theme vars). */

.afd {
    --afd-red: #E84B38;
    --afd-blue: #003F72;
    --afd-border: #B8B8B8;
    max-width: 1200px;
    margin: 0 auto;
}

.afd__testbadge {
    background: #FFF3CD;
    border: 1px solid #E0A800;
    color: #7a5d00;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

.afd__notice {
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 16px;
}

.afd__notice--ok   { background: #E8F5E9; border: 1px solid #2e7d32; }
.afd__notice--err  { background: #FDECEA; border: 1px solid #b23b2e; }
.afd__notice--wait { background: #E3F2FD; border: 1px solid #1565c0; }

.afd__title {
    color: var(--afd-red);
    font-size: 2.25rem;
    margin-bottom: 2rem;
}

.afd__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .afd__grid { grid-template-columns: 1fr; }
}

.afd__label {
    color: var(--afd-blue);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 10px;
}

.afd__amounts {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.afd__preset {
    flex: 1 1 70px;
    padding: 14px 0;
    border: 2px solid var(--afd-border);
    border-radius: 8px;
    background: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: all .2s;
}

.afd__preset.is-active {
    border-color: var(--afd-red);
    background: var(--afd-red);
    color: #fff;
}

.afd__custom {
    flex: 1.4 1 110px;
    padding: 14px;
    border: 2px solid var(--afd-border);
    border-radius: 8px;
    font-size: 16px;
    min-width: 0;
}

.afd__custom:focus,
.afd__input:focus {
    outline: none;
    border-color: var(--afd-blue);
}

.afd__input {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid var(--afd-border);
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    margin-bottom: 18px;
}

.afd__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .afd__row { grid-template-columns: 1fr; }
}

.afd__hp {
    position: absolute !important;
    left: -9999px !important;
    height: 0;
    width: 0;
    opacity: 0;
}

.afd__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    margin-bottom: 20px;
    cursor: pointer;
}

.afd__consent input { margin-top: 3px; }

.afd__error {
    color: #b23b2e;
    font-size: 14px;
    margin: 0 0 14px;
}

.afd__submit {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: var(--afd-red);
    color: #fff;
    font-size: 18px;
    padding: 16px;
    cursor: pointer;
    transition: background .3s;
}

.afd__submit:hover:not(:disabled) { background: #001b33; }
.afd__submit:disabled { opacity: .7; cursor: wait; }

.afd__aside { padding-left: 20px; }

@media (max-width: 900px) {
    .afd__aside { padding-left: 0; }
}

.afd__hint {
    font-size: 15px;
    color: #555;
    margin-bottom: 16px;
}

.afd__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.afd__method {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 14px;
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 40px;
}

.afd__method img {
    height: 22px;
    width: auto;
    display: block;
    max-width: 96px;
}

.afd__method--swedbank img { height: 17px; }
.afd__method--luminor img { height: 19px; }
.afd__method--seb img { height: 24px; }
.afd__method--citadele img { height: 26px; }

.afd__fineprint { font-size: 13px; color: #888; margin-bottom: 12px; }

.afd__brands {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #999;
}

.afd__brands img {
    height: 24px;
    width: auto;
    display: block;
    opacity: .9;
}

.afd__brands img[alt="Visa"] { height: 13px; }
.afd__brands img[alt="Mastercard ID Check"] { height: 22px; }
.afd__brands img[alt="Visa Secure"] { height: 26px; }

/* Submit spinner */
.afd__submit-wait::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: afd-spin .8s linear infinite;
}

@keyframes afd-spin {
    to { transform: rotate(360deg); }
}

/* Focus visibility for keyboard users */
.afd__preset:focus-visible,
.afd__submit:focus-visible,
.afd__custom:focus-visible,
.afd__input:focus-visible {
    outline: 3px solid rgba(0, 63, 114, .35);
    outline-offset: 2px;
}