/* General Styles */
.ic-leads-form-wrapper,
.ic-leads-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

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

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

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

.ic-leads-form .form-footer .submit-button {
  justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ic-leads-form.layout-multi-steps .form-footer .next-step:hover {
  background-color: var(--uni-btn-bg-color-primary-hover, #000);
}

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

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

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

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

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