/* The generic "1 error has been found: • Email" summary Drupal prints above
   the form is redundant with the inline per-field message below the input
   (and unstyled/hard to read on the black background) — hide it, the
   inline message alone is clearer. */
#block-lock-newsletter-subscribe [data-drupal-messages] {
  display: none;
}

#block-lock-newsletter-subscribe .webform-component-email.form-item--error input {
  border: 2px solid #ff4d4d;
  animation: newsletter-shake .4s ease;
}

#block-lock-newsletter-subscribe .form-item--error-message {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #ff8080;
  font-size: 13px;
  text-align: left;
}

#block-lock-newsletter-subscribe .form-item--error-message:before {
  content: "!";
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff4d4d;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

@keyframes newsletter-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}