input:not([type]),
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=url],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
textarea,
select {
  font-size: var(--crp-fs-heading-h6);
  line-height: var(--crp-lh-heading-h6);
  border: solid 1px var(--crp-color-dark-gray);
  border-radius: 8px;
  color: var(--crp-color-black);
  padding-block: 4px;
  padding-inline: 8px;
}
@media (min-width: 768px) {
  input:not([type]),
  input[type=text],
  input[type=search],
  input[type=password],
  input[type=email],
  input[type=number],
  input[type=tel],
  input[type=url],
  input[type=date],
  input[type=time],
  input[type=datetime-local],
  input[type=month],
  input[type=week],
  textarea,
  select {
    padding-block: 13px;
    padding-inline: 12px;
  }
}

form {
  display: flex;
  flex-flow: nowrap column;
  gap: var(--crp-space-layout-text);
  max-inline-size: var(--crp-width-small);
}
form > .form__item {
  margin: 0;
}

details > *:not(:first-child) {
  margin-block-start: var(--crp-space-layout-text);
}

.form__item {
  display: flex;
  flex-flow: nowrap column;
  gap: 4px;
  margin-block-end: var(--crp-space-layout-text);
}

label,
legend,
.form__label {
  font-size: var(--crp-fs-heading-h6);
  line-height: var(--crp-lh-heading-h6);
  display: block;
  font-family: var(--crp-ff-body);
  font-weight: var(--crp-fw-bold);
  margin-block: 0 4px;
}

legend {
  margin-block-end: 4px;
}

fieldset {
  border: none;
  margin-inline: 0;
  padding: 0;
}

input:not([type]),
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=url],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week] {
  block-size: 32px;
  inline-size: 100%;
}
@media (min-width: 768px) {
  input:not([type]),
  input[type=text],
  input[type=search],
  input[type=password],
  input[type=email],
  input[type=number],
  input[type=tel],
  input[type=url],
  input[type=date],
  input[type=time],
  input[type=datetime-local],
  input[type=month],
  input[type=week] {
    block-size: 52px;
  }
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--crp-color-white);
  background-image: var(--crp-i-triangle-down);
  background-repeat: no-repeat;
  background-position: calc(100% - 6px) center;
  background-size: 26px;
  block-size: 32px;
  inline-size: 100%;
  padding-inline-end: 32px;
}
@media (min-width: 768px) {
  select {
    block-size: 52px;
  }
}

select::-ms-expand {
  display: none;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search],
input[name=search] {
  background-image: var(--crp-i-search);
  background-repeat: no-repeat;
  background-position: 8px 9px;
  background-size: 16px;
  padding-inline-start: 30px;
}
@media (min-width: 768px) {
  input[type=search],
  input[name=search] {
    background-position: 12px 7px;
    background-size: 26px;
    padding-inline-start: 44px;
  }
}

.form__item--checkboxes,
.form__item--checkboxes .bef-checkboxes,
.form__item--radios {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}
.form__item--checkboxes > .form__item,
.form__item--checkboxes .bef-checkboxes > .form__item,
.form__item--radios > .form__item {
  margin: 0;
}

.form__item--checkbox,
.form__item--radio {
  align-items: center;
  flex-flow: row wrap;
  gap: 0;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  position: relative;
}
.form__item--checkbox label,
.form__item--radio label {
  display: flex;
  font-weight: var(--crp-fw-regular);
  gap: 4px;
}
.form__item--checkbox label:before,
.form__item--radio label:before {
  background-color: var(--crp-color-navy);
  block-size: 20px;
  content: "";
  display: block;
  flex: 0 0 26px;
  inline-size: 20px;
  inset-block-start: 0;
  inset-inline-start: -1px;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
          mask-size: 20px;
  position: relative;
}
@media (min-width: 768px) {
  .form__item--checkbox label:before,
  .form__item--radio label:before {
    block-size: 26px;
    inline-size: 26px;
    -webkit-mask-size: 26px;
            mask-size: 26px;
  }
}
.form__item--checkbox input,
.form__item--radio input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  block-size: 100%;
  cursor: pointer;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: 0;
  position: absolute;
  z-index: var(--crp-zi-default);
}
.form__item--checkbox input:checked + label,
.form__item--radio input:checked + label {
  font-weight: var(--crp-fw-bold);
}
.form__item--checkbox .form__description,
.form__item--radio .form__description {
  inline-size: 100%;
}

.form__item--checkbox label:before {
  -webkit-mask-image: var(--crp-i-checkbox-unselected);
          mask-image: var(--crp-i-checkbox-unselected);
}
.form__item--checkbox input:checked + label:before {
  -webkit-mask-image: var(--crp-i-checkbox-selected);
          mask-image: var(--crp-i-checkbox-selected);
}

.form__item--radio label:before {
  -webkit-mask-image: var(--crp-i-radio-unselected);
          mask-image: var(--crp-i-radio-unselected);
}
.form__item--radio input:checked + label:before {
  -webkit-mask-image: var(--crp-i-radio-selected);
          mask-image: var(--crp-i-radio-selected);
}

.description,
.form__description,
.form__description p {
  font-size: var(--crp-fs-body-16);
  line-height: var(--crp-lh-body-16);
  color: var(--crp-color-dark-gray);
  margin-block: 4px 0;
}

input[type=button],
input[type=submit],
input[type=reset] {
  font-size: var(--crp-fs-body-18);
  line-height: var(--crp-lh-body-18);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  text-decoration: underline;
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  text-underline-offset: 2px;
  transition: -webkit-text-decoration 0.35s var(--transition-easeInOutQuad);
  transition: text-decoration 0.35s var(--transition-easeInOutQuad);
  transition: text-decoration 0.35s var(--transition-easeInOutQuad), -webkit-text-decoration 0.35s var(--transition-easeInOutQuad);
}
input[type=button]:hover, input[type=button]:focus,
input[type=submit]:hover,
input[type=submit]:focus,
input[type=reset]:hover,
input[type=reset]:focus {
  text-decoration: underline;
  -webkit-text-decoration: underline currentColor;
          text-decoration: underline currentColor;
}

input[type=submit] {
  background-color: var(--crp-color-navy);
  background-image: var(--crp-i-input-arrow);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: none;
  border-radius: 100px;
  color: var(--crp-color-white);
  font-weight: var(--crp-fw-medium);
  padding-block: 8px;
  padding-inline: 16px 44px;
}
@media (min-width: 768px) {
  input[type=submit] {
    background-position: right 12px center;
    background-size: 24px;
    padding-inline: 28px 52px;
  }
}

input[name=reset] {
  background: var(--crp-i-close) no-repeat 4px center/24px transparent;
  color: var(--crp-color-black);
  padding-inline: 32px;
}

.form-actions {
  align-self: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: 8px 32px;
}
@media (min-width: 768px) {
  .form-actions {
    align-self: auto;
  }
}

.form-required:not(input):after,
.required:not(input):after {
  content: "*";
  color: var(--crp-color-black);
  margin-inline-start: 4px;
}
.form-required.error,
.required.error {
  color: var(--crp-color-red);
  border: solid 1px var(--crp-color-red);
}
.form-required:has(~ .error),
.required:has(~ .error) {
  color: var(--crp-color-red);
}
.form-required:has(~ .error):after,
.required:has(~ .error):after {
  color: var(--crp-color-red);
}

.error ~ .description {
  color: var(--crp-color-red);
}

.is-disabled,
input[disabled] {
  color: var(--crp-color-medium-gray);
  cursor: not-allowed;
}