/* Compact Dova-style feedback, scoped to explicitly opted-in forms. */
form[data-cloudata-validate] .cloudata-field-invalid {
  border-color: #df352e !important;
  box-shadow: 0 0 0 2px rgba(223, 53, 46, .1);
}
form[data-cloudata-validate] input[type="checkbox"].cloudata-field-invalid,
form[data-cloudata-validate] input[type="radio"].cloudata-field-invalid {
  outline: 1px solid #df352e;
  outline-offset: 2px;
}
form[data-cloudata-validate] :is(input[type="checkbox"], input[type="radio"]).cloudata-field-invalid:focus-visible {
  outline: 3px solid #7787f7;
  outline-offset: 3px;
}
.cloudata-validation-tooltip {
  position: fixed;
  z-index: 2147483646;
  inset: auto;
  margin: 0;
  width: max-content;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #e79c97;
  border-radius: 6px;
  background: #fff;
  color: #b42318;
  box-shadow: 0 6px 18px rgba(24, 35, 57, .12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  overflow: visible;
  pointer-events: none;
}
.cloudata-validation-tooltip[hidden] { display: none !important; }
.cloudata-validation-tooltip::before {
  content: "";
  position: absolute;
  left: var(--cloudata-validation-arrow, 22px);
  width: 8px;
  height: 8px;
  border: solid #e79c97;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.cloudata-validation-tooltip[data-placement="bottom"]::before { top: -5px; border-width: 1px 0 0 1px; }
.cloudata-validation-tooltip[data-placement="top"]::before { bottom: -5px; border-width: 0 1px 1px 0; }
.cloudata-validation-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #cc3029;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
}
.cloudata-validation-text { min-width: 0; overflow-wrap: anywhere; }
.cloudata-validation-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (forced-colors: active) {
  .cloudata-validation-tooltip { border-color: CanvasText; color: CanvasText; }
  .cloudata-validation-tooltip::before { border-color: CanvasText; }
  .cloudata-validation-icon { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  form[data-cloudata-validate] .cloudata-field-invalid { outline: 2px solid Mark; }
}