/* Container styles */
.footer-email-signup {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Form styles */
.footer-email-signup form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px; /* Adjust gap as needed */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; /* Added transition for smoothness */
}

/* Input field styles */
.footer-email-signup input[type="email"] {
    flex: 1;
    padding: 10px;
    font-size: 16px; /* Default font size; will be overridden by inline styles if set */
    border: 1px solid #ccc;
    border-radius: 0;
    outline: none;
}

/* Submit button styles */
.footer-email-signup button {
    cursor: pointer;
    background-color: #000; /* Default background color; overridden by inline styles */
    color: #fff;            /* Default text color; overridden by inline styles */
    border: none;
    padding: 10px 20px;     /* Adjust padding as needed */
    font-size: 16px;        /* Default font size; overridden by inline styles */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.footer-email-signup button:hover {
    background-color: #333;
}

/* Form fade-out animation */
.footer-email-signup form.submitting {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Animate both opacity and position */
    opacity: 0;
    transform: translateY(-20px); /* Slide the form up while fading out */
}

/* Success message styles targeting h4 */
h4#footer-email-message {
    font-size: inherit;
    color: inherit;
    opacity: 0;
    transform: translateY(20px); /* Initially hidden and moved down */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; /* Transition for smooth fade and move */
}

/* When the message is shown */
h4#footer-email-message.showing {
    opacity: 1;
    transform: translateY(0); /* Slide up and fade in */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; /* Transition for smooth fade and move */

}