/* === FORM LAYOUT & STYLING === */

/* The flex container for each label + input row */
.field-group {
    display: flex;
    align-items: center; /* Vertically aligns the label with the input */
    margin-bottom: 24px; /* Space between form fields */
    position: relative; /* Needed for error message positioning */
}

.field-group label {
    width: 150px;       /* Consistent width for all labels */
    text-align: right;  /* Right-justifies the label text */
    margin-right: 15px; /* Space between label and input */
    flex-shrink: 0;     /* Prevents the label from shrinking on small screens */
}

/* The container for the input and its error message */
.input-container {
    flex: 1; /* Allows this container to grow and fill the remaining space */
}

input[type="text"],
input[type="email"],
select {
    width: 100%; /* Makes the input field fill its container */
    padding: 8px;
    box-sizing: border-box; /* Ensures padding and border don't increase the width */
}


/* === VALIDATION STYLES === */

/* Style for the input field itself when invalid */
input.is-invalid, select.is-invalid {
    border: 2px solid #ff0000 !important;
    box-shadow: none !important;
}

/* Style for the label text when its field is invalid */
label.is-invalid {
    color: #ff0000 !important;
}

/* Styling for the error message text and visibility animation */
.error-message {
    display: block;
    color: #ff0000;
    font-size: 0.9em;
    margin-top: 5px;
    
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s, max-height 0.3s ease-out, visibility 0.3s;
}

.error-message.is-visible {
    visibility: visible;
    opacity: 1;
    max-height: 50px;
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake-annoyed {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}