.ripro-validity {
  margin-block: 20px;
  padding: 18px;
  border: 1px solid var(--ripro-border, var(--ri-border-color));
  border-radius: var(--ripro-radius, 0);
  background: var(--ripro-surface, var(--ri-body-bg));
  color: var(--ripro-text, var(--ri-body-color));
  font-size: var(--ripro-font-size, 14px);
}
.ripro-validity[hidden],
.ripro-validity [hidden] { display: none !important; }
.ripro-validity .rv-header,
.ripro-validity .rv-title,
.ripro-validity .rv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ripro-validity .rv-header { justify-content: space-between; }
.ripro-validity .rv-header h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1em;
  font-weight: 500;
}
.ripro-validity .rv-header h3::before { display: none; }
.ripro-validity p { margin: 0; overflow-wrap: anywhere; }
.ripro-validity .rv-summary,
.ripro-validity .rv-count,
.ripro-validity .rv-meta,
.ripro-validity .rv-message {
  color: var(--ripro-muted, var(--ri-secondary-color));
  font-size: .9em;
}
.ripro-validity .rv-summary { margin-top: 6px; }
.ripro-validity .rv-message { margin-top: 12px; }
.ripro-validity .rv-links:not(:empty) { margin-top: 12px; }
.ripro-validity button,
.ripro-validity select,
.ripro-validity .rv-open {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--ripro-control-border, var(--ri-border-color));
  border-radius: var(--ripro-radius, 0);
  font: inherit;
  color: inherit;
  background: var(--ripro-surface, var(--ri-body-bg));
}
.ripro-validity button { cursor: pointer; }
.ripro-validity button:disabled { opacity: .6; cursor: wait; }
.ripro-validity .rv-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ripro-validity .rv-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 12px;
  border-top: 1px solid var(--ripro-border, var(--ri-border-color));
}
.ripro-validity .rv-resource:last-child { padding-bottom: 0; }
.ripro-validity .rv-info { min-width: 0; flex: 1 1 220px; }
.ripro-validity .rv-title strong { font-weight: 500; overflow-wrap: anywhere; }
.ripro-validity .rv-meta { margin-top: 4px; }
.ripro-validity .rv-actions { flex: none; max-width: 100%; }
.ripro-validity .rv-actions a,
.ripro-validity .rv-actions button { white-space: nowrap; }
.ripro-validity .rv-actions button:not(.btn-primary),
.ripro-validity .rv-header button {
  border-color: transparent;
  padding-inline: 0;
  color: var(--ripro-primary, var(--ri-primary));
}
.ripro-validity .rv-status { font-size: .85em; color: var(--ripro-muted, var(--ri-secondary-color)); }
.ripro-validity .rv-status[data-state=invalid] { color: var(--ripro-danger, #be3030); }
.ripro-validity .rv-status[data-state=pending] { color: var(--ripro-warning, #91600b); }
.ripro-validity .rv-status[data-state=valid] { color: var(--ripro-success, #087d57); }
.ripro-validity .rv-login,
.ripro-validity .rv-retry { margin-top: 12px; }
.rv-feedback-dialog {
  box-sizing: border-box;
  width: 420px;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 40px);
  margin: auto;
  box-shadow: var(--ripro-dialog-shadow, 0 15px 50px #0003);
}
.rv-feedback-dialog::backdrop { background: #0006; }
.rv-feedback-dialog form { display: grid; gap: 12px; }
.rv-feedback-dialog select { display: block; width: 100%; margin-top: 6px; }
.rv-feedback-dialog .rv-header { align-items: flex-start; }
@media (max-width: 767px) {
  .ripro-validity { padding: 14px; }
  .ripro-validity button,
  .ripro-validity select,
  .ripro-validity .rv-open { min-height: 44px; }
  .ripro-validity select { font-size: 16px; }
}