.rf-registration {
  --registration-danger: #dc3545;
  --registration-danger-dark: #b42318;
  --registration-danger-bg: #fff4f4;
  --registration-focus-ring: rgba(220, 53, 69, .18);
}

.rf-registration .registration-optional-marker {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: #eef4f8;
  color: #607080;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
  vertical-align: middle;
}

/* Required state belongs to PHP through the required attribute. CSS only renders one marker. */
.rf-registration .ir-field:has(> input[required], > select[required], > textarea[required]) > label::after,
.rf-registration .grx-field:has(> input[required], > select[required], > textarea[required]) > label::after,
.rf-registration .ir-consent-card > label::after,
.rf-registration .grx-consent > span::after {
  content: " *";
  color: var(--registration-danger);
  font-weight: 800;
}

.rf-registration input.registration-invalid:not([type="checkbox"]):not([type="radio"]),
.rf-registration select.registration-invalid,
.rf-registration textarea.registration-invalid,
.rf-registration input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.rf-registration select[aria-invalid="true"],
.rf-registration textarea[aria-invalid="true"] {
  border-color: var(--registration-danger) !important;
  background: var(--registration-danger-bg) !important;
  box-shadow: 0 0 0 1px var(--registration-danger) !important;
}

.rf-registration input.registration-invalid:focus:not([type="checkbox"]):not([type="radio"]),
.rf-registration select.registration-invalid:focus,
.rf-registration textarea.registration-invalid:focus,
.rf-registration input[aria-invalid="true"]:focus:not([type="checkbox"]):not([type="radio"]),
.rf-registration select[aria-invalid="true"]:focus,
.rf-registration textarea[aria-invalid="true"]:focus {
  border-color: var(--registration-danger-dark) !important;
  box-shadow: 0 0 0 4px var(--registration-focus-ring) !important;
  outline: none;
}

.rf-registration input[type="checkbox"].registration-invalid,
.rf-registration input[type="radio"].registration-invalid,
.rf-registration input[type="checkbox"][aria-invalid="true"],
.rf-registration input[type="radio"][aria-invalid="true"] {
  outline: 2px solid var(--registration-danger);
  outline-offset: 2px;
}

.rf-registration .grx-error:not(:empty),
.rf-registration .registration-error:not(:empty) {
  display: block;
  margin-top: .35rem;
  color: var(--registration-danger-dark);
  font-size: .78rem;
  font-weight: 650;
}

.rf-registration .rf-nik-after-email {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .rf-registration .rf-nik-after-email {
    grid-column: span 2;
  }
}

/* PPDB_NIK_OPTIONAL_V15_1_4 */
.rf-registration [data-registration-optional-field="nik"] .registration-required-marker,
.rf-registration [data-registration-optional-field="nik"] .required-marker,
.rf-registration [data-registration-optional-field="nik"] label::after,
.rf-registration .rf-optional-field .registration-required-marker,
.rf-registration .rf-optional-field .required-marker,
.rf-registration .rf-optional-field label::after {
  display: none !important;
  content: none !important;
}
/* /PPDB_NIK_OPTIONAL_V15_1_4 */