div:has([id^="err-"]:not(:empty)) > input,
div:has([id^="err-"]:not(:empty)) > select,
div:has([id^="err-"]:not(:empty)) > textarea {
  border-color: #dc2626; /* Tailwind red-600 */
  outline: none;
  box-shadow: 0 0 0 1px #dc2626;
}

div:has([id^="err-"]:not(:empty)) > input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px #dc2626;
}

.flash-container {
    position: fixed;
    top: 96px;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none; /* clicks pass through */
    z-index: 999999;
  }

  #flash {
    opacity: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  #flash.fade-out {
    opacity: 0;
    transform: translateY(-20px); /* slight slide up */
  }