/* General Styles */
.leads-form-wrapper,
.leads-form {
  width: 100%;
}

.leads-form .form-head,
.leads-form .form-body,
.leads-form .form-body .input-fields,
.leads-form .form-footer {
  display: grid;
}

.leads-form .form-body,
.leads-form .form-body .input-fields {
  gap: var(--sp-8, 8px);
}

.leads-form .form-footer {
  gap: var(--sp-16, 16px);
}

.leads-form .form-body .input-fields .field {
  display: block;
}

.leads-form .error-summary {
  color: var(--color-validation, #cb3837);
  font-size: 1.4rem;
  margin-top: 4px;
}

.leads-form .error input,
.leads-form .error select {
  border-color: var(--color-validation, #cb3837);
}

/* Fix browsers default opacity for placeholders */
.leads-form .form-body .input-fields input::placeholder {
  opacity: 1;
}

/* Input Spin Button Styles */
/* Chrome, Safari, Edge, Opera */
.leads-form input::-webkit-outer-spin-button,
.leads-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.leads-form input[type="number"] {
  -moz-appearance: textfield;
}

/* Layout: Main */
.leads-form.layout-main .form-body .input-fields {
  grid-template-columns: 1fr 1fr;
}

.leads-form.layout-main .form-body .demographic-data {
  order: 1;
}

.leads-form.layout-main .form-body .user-data .email {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

/* Layout: Candy Bar */
.leads-form.layout-candy-bar .form-body .input-fields {
  grid-template-columns: 1fr 1fr;
}

.leads-form.layout-candy-bar .form-body .user-data {
  grid-template-columns: 1fr 1fr 1fr;
}

.leads-form.layout-candy-bar .form-body .user-data .email {
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

.leads-form.layout-candy-bar .form-body .demographic-data {
  grid-template-columns: 1fr 1fr;
  order: 1;
}

/* Layout: Multi-Steps */
.leads-form.layout-multi-steps .form-head .steps-bar {
  display: flex;
  height: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 10px;
}

.leads-form.layout-multi-steps .form-head .steps-bar .step {
  background: var(--gray-200, #f1f5f9);
  height: 100%;
  width: 100%;
  border-radius: 8px;
}

.leads-form.layout-multi-steps .form-head .steps-bar .step.current {
  background: var(--color-primary, #020617);
  height: 100%;
  width: 100%;
}

.leads-form.layout-multi-steps .form-head .steps-title {
  font-weight: 600;
  font-size: 2rem;
  padding-top: 15px;
}

.leads-form.layout-multi-steps .form-body .input-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.leads-form.layout-multi-steps .form-body .step {
  display: none;
}

.leads-form.layout-multi-steps .form-body .step.current-step {
  display: grid;
}

.leads-form.layout-multi-steps .form-body .user-data .email {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

.leads-form.layout-multi-steps .form-footer .next-step {
  background-color: var(--color-primary, #020617);
  text-align: center;
  font-weight: 700;
  padding: 16px 24px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.leads-form.layout-multi-steps .form-footer .next-step:hover {
  background-color: var(--color-button-hover, #000);
}

/* Responsive Styles */
@media only screen and (max-width: 649px) {
  /* Layout: Main */
  .leads-form.layout-main .form-body .demographic-data {
    grid-template-columns: 1fr;
  }

  /* Layout: Candy Bar */
  .leads-form.layout-candy-bar .form-body .user-data {
    grid-template-columns: 1fr 1fr;
  }

  .leads-form.layout-candy-bar .form-body .demographic-data {
    grid-template-columns: 1fr;
  }

  .leads-form.layout-candy-bar .form-body .user-data .email {
    grid-row: unset;
  }

  /* Layout: Multi-Steps */
  .leads-form.layout-multi-steps .form-body .demographic-data {
    grid-template-columns: 1fr;
  }
}