@import url('./index.css');

.registration-consent {
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}
.registration-consent a {
  color: var(--via-accent);
  font-weight: 800;
  text-decoration: none;
}
.registration-consent a:hover { text-decoration: underline; }
.registration-consent input {
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--via-muted);
  border-radius: 5px;
  background: var(--via-panel-2);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.registration-consent input:checked {
  border-color: var(--via-accent);
  background: var(--via-accent);
}
.registration-consent input:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.registration-consent.is-invalid input {
  border-color: var(--via-danger);
  animation: registration-consent-blink .6s ease-in-out 3;
}
@keyframes registration-consent-blink {
  0%, 100% { background: var(--via-panel-2); box-shadow: 0 0 0 0 transparent; }
  50% { background: var(--via-danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--via-danger) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .registration-consent.is-invalid input { animation: none; }
}