.cc-field {
  display: grid;
  gap: 8px;
}

.cc-field label {
  color: var(--cc-text, #F7F2E8);
  font-weight: 800;
}

.cc-input,
.cc-select,
.cc-textarea,
input.cc-input,
select.cc-select,
textarea.cc-textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(247, 242, 232, .18);
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(11, 17, 24, .72);
  color: var(--cc-text, #F7F2E8);
}

.cc-textarea,
textarea.cc-textarea {
  min-height: 140px;
  resize: vertical;
}

.cc-input::placeholder,
.cc-textarea::placeholder {
  color: var(--cc-text-muted, #A9A195);
}

.cc-input:focus,
.cc-select:focus,
.cc-textarea:focus {
  outline: 3px solid rgba(107, 203, 61, .38);
  border-color: rgba(107, 203, 61, .55);
}

.cc-field__help {
  color: var(--cc-text-soft, #D8D0C2);
  font-size: 14px;
}

.cc-field__error {
  color: #FFC7BE;
  font-size: 14px;
}

.cc-field.is-error .cc-input,
.cc-field.is-error .cc-select,
.cc-field.is-error .cc-textarea {
  border-color: var(--cc-red, #D65B4A);
}

.cc-field.is-success .cc-input,
.cc-field.is-success .cc-select,
.cc-field.is-success .cc-textarea {
  border-color: var(--cc-green, #6BCB3D);
}