.form {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.form-item {
  display: flex;
  flex-direction: column;
}

.label {
  font-weight: bold;
  margin-bottom: 8px;
}

/* text */
.text {
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--color-nord4) inset;
  outline: 0;
}

.text::placeholder {
  color: var(--color-nord4);
  font-weight: bold;
}

.text:focus {
  box-shadow:
    0 0 0 1px var(--color-nord10) inset,
    0 0 0 4px var(--color-nord4);
}

/* textarea */
.textarea {
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--color-nord4) inset;
  outline: 0;
  min-height: 200px;
  field-sizing: content;
}

.textarea::placeholder {
  color: var(--color-nord4);
  font-weight: bold;
}

.textarea:focus {
  box-shadow:
    0 0 0 1px var(--color-nord10) inset,
    0 0 0 4px var(--color-nord4);
}

/* select-wrap */
.select-wrap {
  width: 280px;
  position: relative;
}

.select-wrap::after {
  content: "";
  display: inline-block;
  background-image: url("../img/icon-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}

.select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--color-nord4) inset;
  outline: 0;
  cursor: pointer;
  font-weight: bold;
}

.select:focus {
  box-shadow:
    0 0 0 1px var(--color-nord10) inset,
    0 0 0 4px var(--color-nord4);
}

/* radio-wrap */
.radio-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.radio-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-nord4) inset;
}

.radio:checked + .radio-text {
  color: var(--color-nord10);
}

.radio:checked + .radio-text::before {
  background-color: var(--color-nord10);
  box-shadow: 0 0 0 1px transparent inset;
}

.radio:checked + .radio-text::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-white);
  position: absolute;
  left: 5px;
  top: 50%;
  translate: 0 -50%;
}

.radio:focus-visible + .radio-text {
  color: var(--color-nord10);
}

.radio:focus-visible + .radio-text::before {
  box-shadow:
    0 0 0 1px var(--color-nord10) inset,
    0 0 0 4px var(--color-nord4);
}

/* checkbox-wrap */
.checkbox-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.checkbox-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--color-nord4) inset;
}

.checkbox:checked + .checkbox-text {
  color: var(--color-nord10);
}

.checkbox:checked + .checkbox-text::before {
  background-color: var(--color-nord10);
  box-shadow: 0 0 0 1px transparent inset;
}

.checkbox:checked + .checkbox-text::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  background-image: url("../img/icon-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.checkbox:focus-visible + .checkbox-text {
  color: var(--color-nord10);
}

.checkbox:focus-visible + .checkbox-text::before {
  box-shadow:
    0 0 0 1px var(--color-nord10) inset,
    0 0 0 4px var(--color-nord4);
}