/* =========================================
   NEWSLETTER — layout (één kolom, links uitgelijnd)
   ========================================= */

/* Override van .newsletter-block uit style.css */
.newsletter-block {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
}

/* =========================================
   NEWSLETTER — feedback (inline, klein)
   ========================================= */

/* AJAX-melding: vlak onder het formulier, klein, subtiel */
.newsletter-feedback-inline {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.newsletter-feedback-inline--ok {
    color: rgba(180, 230, 195, 0.95);
}

.newsletter-feedback-inline--err {
    color: rgba(245, 180, 180, 0.95);
}

.newsletter-feedback-inline--fade {
    opacity: 0;
}

/* No-JS fallback (server-redirect met ?nb=...) */
.newsletter-feedback {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.newsletter-feedback--ok {
    color: rgba(180, 230, 195, 0.95);
}

.newsletter-feedback--err {
    color: rgba(245, 180, 180, 0.95);
}

/* Submit-knop tijdens AJAX-call */
.newsletter-form button.is-loading {
    opacity: 0.6;
    cursor: wait;
}

/* =========================================
   NEWSLETTER — browser autofill override
   =========================================
   Chrome/Edge/Safari kleuren een autofilled input lichtblauw of geel.
   Op de zwarte achtergrond ziet dat er niet uit. We overrulen via een
   inset box-shadow (de enige werkende truc — background-color zelf
   wordt door de browser genegeerd op autofilled inputs). */

.newsletter-form input:-webkit-autofill,
.newsletter-form input:-webkit-autofill:hover,
.newsletter-form input:-webkit-autofill:focus,
.newsletter-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--black) inset !important;
    box-shadow: 0 0 0 1000px var(--black) inset !important;
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--white);
    transition: background-color 9999s ease-in-out 0s;
}