/* static/auth.css */

/* ... (Your existing styles for .auth-container, .h1, .auth-form-wrapper, etc.) ... */

.form-group {
    text-align: left;
    position: relative; /* Needed for absolute positioning of feedback, or just for context */
    margin-bottom: 25px; /* Give more space for feedback below */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.95rem;
}
.login-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Styles for the feedback container */
.field-feedback {
    display: none; /* <-- HIDE BY DEFAULT */
    position: absolute; /* Position relative to .form-group */
    width: 100%;
    left: 0;
    margin-top: 5px; /* Space from input field */
    font-size: 0.85rem;
    line-height: 1.4;
    z-index: 10; /* Ensure it's above other elements if positioned */
    text-align: left;
}

/* Styles for specific feedback types */
.help-text {
    color: #6c757d; /* Muted color for help text */
    display: block; /* Ensure it's on its own line */
}

.error-message {
    color: #dc3545; /* Red for errors */
    font-weight: bold;
    display: block;
}

/* Rules to show feedback */

/* Show help text when the input field is focused */
.form-group .form-control:focus + .field-feedback {
    display: block;
}

/* Show error messages if the input field has an 'is-invalid' class or on form submission */
/* This requires JavaScript to add 'is-invalid' class based on validation */
.form-control.is-invalid + .field-feedback {
    display: block; /* Show if the input itself is marked as invalid */
}

/* Show all feedback if there are any errors in the entire form, usually after submission */



/* Non-field errors - always visible if present */
.form-errors {
    color: #dc3545;
    font-size: 0.85rem;
    border: 1px solid #dc3545;
    background-color: #f8d7da;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: left;
}
.form-errors p {
    margin: 0;
}

/* ... (Rest of your existing .submit-button, .auth-links styles) ... */

.products_container {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    flex-direction: column;
}

.auth-container {background-color: white;
margin:20px;
min-height: 400px;
max-height: 700px;
border-radius:5px;
box-shadow: 5px 5px 10px 5px rgb(43, 41, 41);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding:10px;


}

.auth-form-wrapper, .register-form {
display: flex;
margin-top:10px;
justify-content: center;
flex-direction: column;
align-items: center;
}

.form-group {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wood-button {
    padding: 5px;
}

.auth-links {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top:20px;
}