:root {
  --rms-validation-inline-bg: var(--rms-no-bg, #fef2f2);
  --rms-validation-inline-border: var(--rms-no-border, #fecaca);
  --rms-validation-inline-fg: var(--rms-no-fg, #991b1b);
  --rms-validation-icon-bg: var(--rms-no-solid, #b42318);
  --rms-validation-popover-bg: #2c2c2e;
  --rms-validation-popover-border: #707075;
  --rms-validation-popover-fg: #f5f5f7;
  --rms-validation-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.2);
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--rms-validation-icon-bg) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rms-validation-icon-bg) 18%, transparent) !important;
}

.rms-validation-popover {
  position: fixed;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: max-content;
  min-width: min(260px, calc(100vw - 24px));
  max-width: min(390px, calc(100vw - 24px));
  min-height: 58px;
  margin: 0;
  padding: 11px 14px 11px 11px;
  border: 1px solid var(--rms-validation-popover-border);
  border-radius: 12px;
  background: var(--rms-validation-popover-bg);
  color: var(--rms-validation-popover-fg);
  box-shadow: var(--rms-validation-shadow);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px) scale(0.985);
  transform-origin: var(--rms-validation-arrow-left, 28px) top;
  transition: opacity 120ms ease, transform 120ms ease;
}

.rms-validation-popover[hidden] {
  display: none !important;
}

.rms-validation-popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.rms-validation-popover[data-placement="top"] {
  transform: translateY(3px) scale(0.985);
  transform-origin: var(--rms-validation-arrow-left, 28px) bottom;
}

.rms-validation-popover[data-placement="top"].is-visible {
  transform: translateY(0) scale(1);
}

.rms-validation-popover::before {
  content: "";
  position: absolute;
  left: calc(var(--rms-validation-arrow-left, 28px) - 7px);
  width: 13px;
  height: 13px;
  border: solid var(--rms-validation-popover-border);
  background: var(--rms-validation-popover-bg);
  transform: rotate(45deg);
}

.rms-validation-popover[data-placement="bottom"]::before {
  top: -7px;
  border-width: 1px 0 0 1px;
}

.rms-validation-popover[data-placement="top"]::before {
  bottom: -7px;
  border-width: 0 1px 1px 0;
}

.rms-validation-icon,
.rms-feedback-error::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--rms-validation-icon-bg) !important;
  color: #ffffff !important;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none !important;
}

.rms-validation-message {
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit !important;
}

.rms-feedback-error {
  position: relative;
  min-height: 44px;
  padding: 11px 13px 11px 50px !important;
  border: 1px solid var(--rms-validation-inline-border) !important;
  border-radius: var(--rms-radius-control, 9px) !important;
  background: var(--rms-validation-inline-bg) !important;
  color: var(--rms-validation-inline-fg) !important;
  font-size: max(13px, 0.8125rem) !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.rms-feedback-error::before {
  content: "!";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
}

html[data-theme="dark"] {
  --rms-validation-inline-bg: var(--rms-no-bg, #291d1f);
  --rms-validation-inline-border: var(--rms-no-border, #5d4145);
  --rms-validation-inline-fg: var(--rms-no-fg, #dfb0b2);
  --rms-validation-icon-bg: var(--rms-no-solid, #b47b7e);
  --rms-validation-popover-bg: #242424;
  --rms-validation-popover-border: #646464;
  --rms-validation-popover-fg: #f0f0f0;
}

html[data-theme="dark"] :where(.admin-main, .login-page) .rms-feedback-error {
  border-color: var(--rms-validation-inline-border) !important;
  background: var(--rms-validation-inline-bg) !important;
  color: var(--rms-validation-inline-fg) !important;
}

html[data-theme="dark"] :where(.admin-main, .login-page) .rms-feedback-error::before {
  background: var(--rms-validation-icon-bg) !important;
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rms-validation-inline-bg: #291d1f;
    --rms-validation-inline-border: #5d4145;
    --rms-validation-inline-fg: #dfb0b2;
    --rms-validation-icon-bg: #b47b7e;
    --rms-validation-popover-bg: #242424;
    --rms-validation-popover-border: #646464;
    --rms-validation-popover-fg: #f0f0f0;
  }
}

@media (prefers-contrast: more) {
  :root {
    --rms-validation-popover-border: #ffffff;
    --rms-validation-inline-border: currentColor;
  }

  :where(input, select, textarea)[aria-invalid="true"] {
    outline: 2px solid var(--rms-validation-icon-bg) !important;
    outline-offset: 1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rms-validation-popover {
    transition: none;
  }
}

@media (max-width: 480px) {
  .rms-validation-popover {
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    max-width: calc(100vw - 20px);
    padding: 10px 12px 10px 10px;
    font-size: 14px;
  }
}