/* In static/css/custom_styles.css */

/*
  This defines the keyframes for our shake animation.
  It moves the element left and right quickly over 0.4 seconds.
*/
@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/*
  This is the class we add when an error occurs.
  It applies the red border and triggers the shake animation.
  We make it more specific by targeting.form-control.
*/
.form-control.input-error {
    border-color: #dc3545; /* Bootstrap's standard danger red */
    animation: shake-horizontal 0.4s;
}

/*
  THE FIX: This is the new, more powerful rule.
  It specifically targets an input with our error class that is ALSO in focus.
  It overrides Bootstrap's default blue glow with a red one.
*/
.form-control.input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Bootstrap's standard red focus glow */
}