/* Style the form container to stack elements vertically */
.email-verify-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all form elements horizontally */
    width: 100%;
    max-width: 350px; /* Limits the form width */
    margin: 0 auto; /* Centers the form on the page */
}

/* Make the wrapper a positioning context */
.input-wrapper {
    position: relative; /* Label will be positioned relative to this */
    width: 100%;
    max-width: 300px; /* Matches the input width */
}

/* Position the label over the top-left corner of the input */
.input-wrapper label[for="email"] {
    position: absolute;
    top: -25px; /* Places the label above the input */
    left: 0px; /* Aligns it slightly in from the left edge */
    font-size: 0.8em; /* Keeps the font small */
    background-color: inherit; /* Ensures readability over the input border */
    padding: 0 5px; /* Adds space around the text */
}

/* Style the search box with a visible outline */
.email-verify-form .wide-email-input {
    width: 100%;
    max-width: 350px; /* Sets a reasonable width */
    margin-bottom: 10px; /* Adds space between input and button */
    border: 1px solid #ddd; /* Creates a grey outline */
    border-radius: 4px; /* Optional: rounds the corners */
}

/* Center the submit button */
.email-verify-form .submit-button {
    margin-top: 20px; /* Adds space above the button for better spacing */
}

.entry-content .email-not-found {
    text-align: center;
    margin-bottom: 30px; /* Adds 20 pixels of space below the message */
}

.email-verify-instruction {
    text-align: center;
    padding-bottom: 50px;
    font-size: 18px;
    color: #333;
}