/* ==========================================================================
   Component: Form (Generic)
   ========================================================================== */

.c-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.c-contact-form__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: var(--font-base);
  color: #666;
}

.c-contact-form__radios {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.c-contact-form__radios-title {
  margin-bottom: 5px;
  font-size: var(--font-base);
  font-weight: 600;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.c-contact-form__radios label {
  margin-left: 8px;
  font-weight: normal;
  font-size: var(--font-base);
}

.c-contact-form__input,
.c-contact-form__select,
.c-contact-form__textarea {
  margin-top: 5px;
  padding: 12px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: var(--font-base);
  color: #666;
}

.c-contact-form__input:focus,
.c-contact-form__select:focus,
.c-contact-form__textarea:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  outline: none;
}

.c-contact-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.c-contact-form__checkbox input[type="checkbox"] {
  margin: 0;
}

.c-contact-form__note {
  font-size: var(--font-xs);
  color: #666;
  display: block;
  margin-top: 5px;
}

.c-contact-form__parallel-elements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
}

.c-form-message {
  padding: 20px;
  border-radius: 5px;
  margin-top: 20px;
}

.c-form-message--error {
  color: rgb(190, 83, 84);
  background-color: rgb(255, 245, 245);
  font-weight: bold;
}

@media (max-width: 864px) {
  .c-contact-form__parallel-elements {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }

  .c-contact-form__label {
    font-size: var(--font-sm);
  }

  .c-contact-form__input,
  .c-contact-form__select,
  .c-contact-form__textarea {
    font-size: var(--font-sm);
  }
}