/* ==========================================================================
   CONTACT-FORM MAIN CONTAINER
   ========================================================================== */
.contact-form {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-form__body {
  width: 100%;
  padding: 1rem 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--color-secondary-100);
  gap: 0.75rem;
  box-shadow:
    0.0625rem 0.1875rem 0.5rem 0 #9494941a,
    0.375rem 0.8125rem 0.9375rem 0 #94949417,
    0.8125rem 1.875rem 1.25rem 0 #9494940d,
    1.4375rem 3.375rem 1.4375rem 0 #94949403,
    2.3125rem 5.25rem 1.625rem 0 #94949400;
}

.contact-form__text-content {
  gap: 0.5rem;
  text-align: center;
}

.contact-form__title {
  font-size: var(--fs-md);
  line-height: 2.375rem;
  color: var(--color-neutral-12);
  text-align: center;
}

.contact-form__description {
  font-size: var(--fs-sm);
  line-height: 1.5rem;
  color: var(--color-neutral-300);
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* === input-field component === */
.input-field {
  flex: 1;
  width: 100%;
  gap: 0.25rem;
}

.input-field__label {
  display: flex;
  padding: 0 0.125rem;
  font-size: var(--fs-xs);
  line-height: 1.1875rem;
  color: var(--color-neutral-300);
}

.input-field__required {
  padding-left: 0.25rem;
  color: #bf1d1d;
}

.input-field__input {
  width: 100%;
  padding: 0.6875rem 0.75rem;
  border: 0.0625rem solid var(--color-secondary-500);
  border-radius: 0.625rem;
  box-sizing: border-box;
  font-size: var(--fs-sm);
  line-height: 1.5rem;
  color: var(--color-secondary-700);
}

.input-field__input::placeholder {
  color: var(--color-secondary-700);
}

.input-field__input:focus {
  outline: none;
  border-color: var(--color-primary) !important;
}

.input-field__error {
  display: none; /* Hidden by default */
  padding: 0 1rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  color: #bf1d1d;
}

.input-field__remaining-length {
  padding: 0 1rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  color: var(--color-neutral-200);
  text-align: right;
}

/* === input-field dynamic states === */
/* When field has value, change border and text color */
.input-field[data-has-value="true"] .input-field__input {
  border-color: var(--color-neutral-700);
  color: var(--color-neutral-700);
}

/* When field has error */
.input-field[data-error="true"] .input-field__label {
  color: #bf1d1d;
}

.input-field[data-error="true"] .input-field__input {
  border-color: #bf1d1d;
}

.input-field[data-error="true"] .input-field__input::placeholder {
  color: #bf1d1d;
}

.input-field[data-error="true"] .input-field__error {
  display: block;
}

.contact-form__submit {
  padding: 0.625rem 1.25rem;
  border-radius: 0.125rem;
  background-color: var(--color-neutral-700);
  font-size: var(--fs-sm);
  line-height: 1.5625rem;
  color: var(--color-secondary-50);
}

.contact-form__other-options {
  padding: 1rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--color-secondary-100);
  background-color: #ffffff;
  gap: 1rem;
}

.contact-form__options-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form__option {
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: #ffffff;
  box-shadow:
    0 0.4375rem 0.9375rem 0 #d1d1d11a,
    0 1.6875rem 1.6875rem 0 #d1d1d117,
    0 3.8125rem 2.3125rem 0 #d1d1d10d,
    0 6.8125rem 2.75rem 0 #d1d1d103,
    0 10.625rem 3rem 0 #d1d1d100;
  gap: 1rem;
}

.contact-form__option-title {
  font-size: var(--fs-sm);
  line-height: 1.5625rem;
  color: var(--color-primary-500);
}

.contact-form__option-description {
  font-size: var(--fs-xs);
  line-height: 1.375rem;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   MEDIA QUERIES (Tablet Overrides)
   ========================================================================== */
@media (min-width: 50rem) {
  .contact-form {
    padding: 3rem 2rem;
  }

  .contact-form__body {
    padding: 2.5rem 3rem;
    gap: 1.5rem;
  }

  .contact-form__row {
    flex-direction: row;
    gap: 1.5rem;
  }

  .contact-form__other-options {
    padding: 2.5rem 1.5rem;
  }

  .contact-form__options-list {
    flex-direction: row;
    justify-content: center;
  }
}

/* ==========================================================================
   INPUT DISABLED STATE (during reCAPTCHA validation)
   ========================================================================== */
.input-field__input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   RECAPTCHA SUCCESS LABEL
   ========================================================================== */
.contact-form__recaptcha-ok {
  display: none;
  padding: 0.5rem 0.875rem;
  border-radius: 0.25rem;
  border-left: 3px solid #2e7d32;
  background-color: #f0faf1;
  color: #1b5e20;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ==========================================================================
   FORM STATUS MESSAGE (bottom — success / server error)
   ========================================================================== */
.contact-form__status-msg {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border-left: 3px solid currentColor;
  font-size: 0.875rem;
  line-height: 1.4;
}

.contact-form__status-msg--success {
  color: #1b5e20;
  background-color: #f0faf1;
  border-left-color: #2e7d32;
}

.contact-form__status-msg--error {
  color: #b71c1c;
  background-color: #fff5f5;
  border-left-color: #c62828;
}

/* ==========================================================================
   MEDIA QUERIES (Desktop Overrides)
   ========================================================================== */
@media (min-width: 90rem) {
  .contact-form {
    padding: 3rem var(--horizontal-padding-desktop);
    flex-direction: row-reverse;
  }

  .contact-form__body {
    width: 50.6875rem;
  }

  .contact-form__options-list {
    flex-direction: column;
  }
}