form {
  display: flex;
  flex-flow: nowrap column;
  gap: var(--si-space-40);
}

.columns > * + *,
.columns .form-item + .form-item {
  margin-top: 0;
}

form details > .form-wrapper {
  margin-block: var(--si-space-28);
}

label,
legend,
.form-item__label {
  font-family: var(--si-ff-sans);
  font-weight: var(--si-fw-semibold);
  font-size: var(--si-fs-body-18);
  line-height: var(--si-lh-body-18);
}

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

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

input,
textarea {
  border-radius: 0;
  color: var(--si-color-black);
  max-inline-size: 100%;
}

textarea {
  border: solid 1px var(--si-color-dark-gray);
  display: block;
  font-family: var(--si-ff-sans) !important;
  font-weight: var(--si-fw-regular) !important;
  font-size: var(--si-fs-body-18) !important;
  line-height: var(--si-lh-body-18) !important;
  inline-size: 100%;
  padding-block: 12px;
  padding-inline: 12px;
}
textarea::-moz-placeholder {
  color: var(--si-color-medium-gray);
  font-style: italic;
}
textarea::placeholder {
  color: var(--si-color-medium-gray);
  font-style: italic;
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text] {
  block-size: auto;
  border: solid 1px var(--si-color-dark-gray);
  font-family: var(--si-ff-sans);
  font-weight: var(--si-fw-regular);
  padding-block: 8px;
  padding-inline: 12px;
  font-size: var(--si-fs-body-18);
  line-height: var(--si-lh-body-18);
}
@media (min-width: 768px) {
  input[type=date],
  input[type=email],
  input[type=number],
  input[type=password],
  input[type=search],
  input[type=tel],
  input[type=text] {
    padding-block: 12px;
  }
}
input[type=date]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder {
  color: var(--si-color-medium-gray);
  font-style: italic;
}
input[type=date]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder {
  color: var(--si-color-medium-gray);
  font-style: italic;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--si-i-triangle-down) no-repeat calc(100% - 12px) center;
  background-size: 24px;
  block-size: 52px;
  border: solid 1px var(--si-color-dark-gray);
  border-radius: 0;
  box-shadow: none;
  color: var(--si-color-black);
  font-family: var(--si-ff-sans) !important;
  font-weight: var(--si-fw-regular) !important;
  padding-block: 12px;
  padding-inline: 12px;
  font-size: var(--si-fs-body-18);
  line-height: var(--si-lh-body-18);
}

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

.form-item {
  display: flex;
  flex-flow: nowrap column;
  gap: 4px;
  inline-size: 100%;
}

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] {
  background: var(--si-i-search) no-repeat 12px center;
  background-size: 28px;
  inline-size: 100%;
  padding-inline-start: 48px;
}

.form-type-boolean,
.form-type__checkbox,
.form-type__radio {
  flex-flow: nowrap row;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin-block-start: 4px !important;
  position: relative;
}
.form-type-boolean label:not(.visually-hidden),
.form-type__checkbox label:not(.visually-hidden),
.form-type__radio label:not(.visually-hidden) {
  display: flex;
  font-weight: var(--si-fw-regular);
  gap: 4px;
}
.form-type-boolean label:not(.visually-hidden):before,
.form-type__checkbox label:not(.visually-hidden):before,
.form-type__radio label:not(.visually-hidden):before {
  background-color: var(--si-color-black);
  block-size: 28px;
  content: "";
  display: block;
  inline-size: 28px;
  inset-block-start: -4px;
  inset-inline-start: -2px;
  -webkit-mask-size: cover;
          mask-size: cover;
  position: relative;
}
@media (min-width: 768px) {
  .form-type-boolean label:not(.visually-hidden):before,
  .form-type__checkbox label:not(.visually-hidden):before,
  .form-type__radio label:not(.visually-hidden):before {
    inset-block-start: -1px;
  }
}
.form-type-boolean input,
.form-type__checkbox input,
.form-type__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(--si-zindex-default);
}
.form-type-boolean label:before,
.form-type__checkbox label:before {
  -webkit-mask: var(--si-i-rectangle-empty) no-repeat center;
          mask: var(--si-i-rectangle-empty) no-repeat center;
}
.form-type-boolean input:checked + label:before,
.form-type__checkbox input:checked + label:before {
  -webkit-mask: var(--si-i-rectangle-checked) no-repeat center;
          mask: var(--si-i-rectangle-checked) no-repeat center;
}

.form-type__radio label:before {
  -webkit-mask: var(--si-i-circle-empty) no-repeat center;
          mask: var(--si-i-circle-empty) no-repeat center;
}
.form-type__radio input:checked + label:before {
  -webkit-mask: var(--si-i-circle-filled) no-repeat center;
          mask: var(--si-i-circle-filled) no-repeat center;
}

.form-item__description,
.form-item__description p {
  color: var(--si-color-dark-gray);
  font-family: var(--si-ff-sans);
  font-size: 1rem;
  font-weight: var(--si-fw-regular);
}

.form-required legend,
.form-required label {
  position: relative;
}
.form-required legend:after,
.form-required label:after {
  content: "*";
  margin-inline-start: 4px;
}

label.form-required {
  position: relative;
}
label.form-required:after {
  content: "*";
  margin-inline-start: 4px;
}

.form-error {
  color: var(--si-color-error-red);
}
.form-error p {
  color: var(--si-color-error-red);
}
.form-error input[type=text],
.form-error input[type=password],
.form-error input[type=date],
.form-error input[type=email],
.form-error input[type=number],
.form-error input[type=tel] {
  border: solid 1px var(--si-color-error-red);
}

.form-item--disabled {
  color: var(--si-color-disabled);
}
.form-item--disabled p {
  color: var(--si-color-disabled);
}
.form-item--disabled label:before {
  background-color: var(--si-color-disabled);
}
.form-item--disabled input {
  cursor: not-allowed;
}
.form-item--disabled input[type=text],
.form-item--disabled input[type=password],
.form-item--disabled input[type=date],
.form-item--disabled input[type=email],
.form-item--disabled input[type=number],
.form-item--disabled input[type=tel] {
  border: solid 1px var(--si-color-disabled);
  color: var(--si-color-disabled);
}
.form-item--disabled input[type=text]::-moz-placeholder, .form-item--disabled input[type=password]::-moz-placeholder, .form-item--disabled input[type=date]::-moz-placeholder, .form-item--disabled input[type=email]::-moz-placeholder, .form-item--disabled input[type=number]::-moz-placeholder, .form-item--disabled input[type=tel]::-moz-placeholder {
  color: var(--si-color-disabled);
}
.form-item--disabled input[type=text]::placeholder,
.form-item--disabled input[type=password]::placeholder,
.form-item--disabled input[type=date]::placeholder,
.form-item--disabled input[type=email]::placeholder,
.form-item--disabled input[type=number]::placeholder,
.form-item--disabled input[type=tel]::placeholder {
  color: var(--si-color-disabled);
}

.form-actions {
  align-self: flex-start;
  display: flex;
  gap: var(--si-space-28);
}
@media (min-width: 768px) {
  .form-actions {
    align-self: auto;
  }
}
.form-actions input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--si-color-black);
  border: none;
  box-shadow: none;
  color: var(--si-color-white);
  cursor: pointer;
  font-family: var(--si-ff-sans);
  font-weight: var(--si-fw-semibold);
  padding-block: 8px;
  padding-inline: 12px;
  position: relative;
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  text-underline-offset: 2px;
  font-size: var(--si-fs-body-18);
  line-height: var(--si-lh-body-18);
}
@media (min-width: 768px) {
  .form-actions input {
    padding-block: 12px;
    padding-inline: 16px;
  }
}
.form-actions input:hover, .form-actions input:focus {
  color: var(--si-color-white);
  -webkit-text-decoration: underline currentColor;
          text-decoration: underline currentColor;
}
.form-actions input:nth-child(2) {
  background-color: var(--si-color-white);
  color: var(--si-color-black);
}
.form-actions input[value=Clear],
.form-actions input[value=Reset] {
  background: var(--si-i-close) no-repeat left center;
  color: var(--si-color-black);
  background-size: 28px;
  padding-inline-start: 32px;
}

.form--exposed-filters {
  align-items: flex-end;
  display: flex;
  flex-flow: nowrap column;
  gap: var(--si-space-28);
}
@media (min-width: 768px) {
  .form--exposed-filters {
    flex-flow: nowrap row;
  }
}
.form--exposed-filters .form-item {
  margin: 0 !important;
}