/* ------------------------------------------- */
/* 1. NEWSLETTER MODAL OVERLAY (.newsletter-modal) */
/* This handles the full-screen dark background and centering */
/* ------------------------------------------- */
.newsletter-modal {
    /* DEFAULT STATE: HIDE MODAL */
    display: none; /* Crucial: Hides the modal initially */

    /* OVERLAY POSITIONING */
    position: fixed;
    z-index: 99999; /* Use a very high z-index to ensure it is on top */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* VISUALS */
    background-color: rgba(0, 0, 0, 0.6); /* Dark background w/ opacity */

    /* FLEXBOX CENTERING (These properties are active when JS sets display: flex) */
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------- */
/* 2. MODAL CONTENT BOX (.newsletter-modal-content) */
/* This styles the actual box that holds the thank you message */
/* ------------------------------------------- */
.newsletter-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s;
}

/* ------------------------------------------- */
/* 3. CLOSE BUTTON (X) */
/* ------------------------------------------- */
.newsletter-close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.newsletter-close:hover,
.newsletter-close:focus {
    color: #000;
    text-decoration: none;
}

/* ------------------------------------------- */
/* 4. ANIMATION */
/* ------------------------------------------- */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}