/**
 * newsletter.css — Anovance Technologies
 * Styles for the footer newsletter widget.
 * No inline styles needed — all states controlled via CSS classes.
 *
 * Place at: C:\xampp\htdocs\Anovance_Technologies\css\newsletter.css
 * Then link it in header.php:
 *   <link rel="stylesheet" href="css/newsletter.css">
 */

/* ── Hidden state (replaces style="display:none") ──────────────────────────── */
.ano-nl-hidden { display: none !important; }

/* ── Feedback message box ──────────────────────────────────────────────────── */
.ano-nl-msg {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    animation: nl-pop 0.22s ease;
}

@keyframes nl-pop {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* Success state */
.ano-nl-msg.nl-ok {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Error state */
.ano-nl-msg.nl-err {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

/* ── Button sent state (replaces btn.style.background = '#10b981') ─────────── */
#ano-nl-btn.nl-sent {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}