/*
 * .cp-multi-form
 *   .form-header
 *
 *   .form-progress
 *     .progress-bar
 *       .progress-fill
 *     .step-indicators
 *       .step-indicator (*)
 *         .step-number
 *         .step-name
 *
 *   .form-area
 *     form#cesar-portes-form
 *       .form-step[data-form-step="n"]
 */

/* Variables for these forms. */
/* TODO: define these from PHP? */
:root {
  /* Font family to use for field labels. */
  --cpmf-label-font-family: "Open Sans", sans-serif;
  /* Font size to use for field labels. */
  --cpmf-label-font-size: 15px;
  /* Font weight to use for field labels. */
  --cpmf-label-font-weight: 600;
  /* Text color to use for field labels. */
  --cpmf-label-color: #333333;
  /* Text color to use for the field required marker in the label. */
  --cpmf-required-marker-color: var(--cp-dark-brown);

  /* Font family to use for input fields. */
  --cpmf-field-font-family: "Open Sans", sans-serif;
  /* Font size to use for input fields. */
  --cpmf-field-font-size: 15px;
  /* Text color to use for input fields. */
  --cpmf-field-color: #333333;

  /* Progress bar background color (for uncompleted separators). */
  --cpmf-progress-bg: #E1E1E1;
  /* Progress bar fill color. */
  --cpmf-progress-color: var(--cp-dark-brown);

  /* Step indicator circle size. */
  --cpmf-step-item-size: 50px;
  /* Step indicator font name. */
  --cpmf-step-font-family: "Playfair Display", serif;
  /* Step indicator font size. */
  --cpmf-step-font-size: 20px;
  /* Step indicator border size. */
  --cpmf-step-border-size: 2px;

  /* Step indicator text color. */
  --cpmf-step-color: #64748B;
  /* Step indicator background color. */
  --cpmf-step-bg: transparent;
  /* Step indicator border color. */
  --cpmf-step-border: #333333;

  /* Step indicator text color for the active step. */
  --cpmf-step-active-color: var(--cp-dark-brown);
  /* Step indicator background color for the active step. */
  --cpmf-step-active-bg: transparent;
  /* Step indicator border color for the active step. */
  --cpmf-step-active-border: var(--cp-dark-brown);

  /* Step indicator text color for completed steps. */
  --cpmf-step-complete-color: #FFFFFF;
  /* Step indicator background color for completed steps. */
  --cpmf-step-complete-bg: var(--cp-dark-brown);
  /* Step indicator border color for completed steps. */
  --cpmf-step-complete-border: var(--cp-dark-brown);
}

.cp-multi-form {
  position: relative;
  max-width: 600px;
}

/**
 * Progress bar area.
 */
.cp-multi-form .progress-area {
  margin-bottom: 40px;
}
.cp-multi-form .progress-area .step-indicators {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-multi-form .progress-area .step-indicators .step-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--cpmf-step-item-size);
  height: var(--cpmf-step-item-size);
  font-family: var(--cpmf-step-font-family);
  font-size: var(--cpmf-step-font-size);
  font-weight: 600;
  color: var(--cpmf-step-color);
  background-color: var(--cpmf-step-bg);
  border: var(--cpmf-step-border-size) solid var(--cpmf-step-border);
  border-radius: 50%;
}
.cp-multi-form .progress-area .step-indicators .step-item.active {
  color: var(--cpmf-step-active-color);
  background-color: var(--cpmf-step-active-bg);
  border-color: var(--cpmf-step-active-border);
}
.cp-multi-form .progress-area .step-indicators .step-item.completed {
  color: var(--cpmf-step-complete-color);
  background-color: var(--cpmf-step-complete-bg);
  border-color: var(--cpmf-step-complete-border);
}
.cp-multi-form .progress-area .step-indicators .step-separator {
  height: 4px;
  width: 100%;
  margin: 0 10px;
  background-color: var(--cpmf-progress-bg);
  border-radius: 2px;
  overflow: hidden;
}
.cp-multi-form .progress-area .step-indicators .step-separator .step-separator-fill {
  height: 100%;
  width: 0%;
  background: var(--cpmf-progress-color);
  transition: width 0.3s ease;
}
.cp-multi-form .progress-area .step-indicators .step-separator.completed .step-separator-fill {
  width: 100%;
}


/**
 * Main form area.
 */
@keyframes cpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tfco-loading-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
.cp-multi-form .form-area .form-step {
  display: none;
  animation: cpFadeIn 0.3s ease-in;
}
.cp-multi-form .form-area .form-step.active {
  display: block;
}

.cp-multi-form .form-area .form-step .fields-area {
  display: flex;
  flex-wrap: wrap;
}

.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5px;
  margin-bottom: 10px;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--cpmf-label-font-family);
  font-size: var(--cpmf-label-font-size);
  font-weight: var(--cpmf-label-font-weight);
  text-align: left;
  line-height: 1.6666;
  color: var(--cpmf-label-color);
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper label .required-marker {
  padding-left: 2px;
  color: var(--cpmf-required-marker-color);
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper {
  position: relative;
  max-width: 100%;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-input-elem {
  min-height: 40px;
  padding: 5px 14px;
  font-family: var(--cpmf-field-font-family);
  font-size: var(--cpmf-field-font-size);
  color: var(--cpmf-field-font-color);
  border: 1px solid #69727D; /* TODO: color variable */
  border-radius: 3px;
  vertical-align: middle;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-input-elem::placeholder {
  color: #A3A3A3; /* TODO: color variable */
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper input.tfco-input-elem[type="date"] {
  /* Fix for iOS Safari's garbage inconsistent handling of date fields. */
  appearance: none;
  -webkit-appearance: none;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper select.tfco-input-elem {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .select-caret-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  inset-inline-end: 10px;
  pointer-events: none;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .select-caret-wrapper > svg {
  width: 0.8em;
  color: #696969;
}

.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper input {
  line-height: 1.4;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper input,
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper textarea,
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper select {
  width: 100%;
  max-width: 100%;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-field-group-radio {
  display: flex;
  flex-wrap: wrap;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-field-group-radio span.tfco-radio-option {
  display: flex;
  column-gap: 4px;
  text-align: left;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-field-group-radio.tfco-field-group-inline span.tfco-radio-option {
  padding-inline-end: 10px;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-field-group-radio:not(.tfco-field-group-inline) span.tfco-radio-option {
  flex-basis: 10%;
}
.cp-multi-form .form-area .form-step .fields-area .tfco-field-wrapper .tfco-input-wrapper .tfco-field-group-checkbox {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

/**
 * Button area.
 */
.cp-multi-form .form-area .form-step .action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}
.cp-multi-form .form-area .form-step .action-buttons .nav-button {
  position: relative;
  flex: 1;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.cp-multi-form .form-area .form-step .action-buttons .nav-button.next,
.cp-multi-form .form-area .form-step .action-buttons .nav-button.submit {
  color: #FFFFFF;
  background: linear-gradient(
    135deg,
    #667EEA,
    #764BA2
  );
  background: var(--cp-button-gradient);
}
.cp-multi-form .form-area .form-step .action-buttons .nav-button.prev {
  color: #64748B;
  background-color: #F1F5F9;
}

.cp-multi-form .form-area .form-step .action-buttons .nav-button.submit:disabled {
  background: #CCCCCC !important;
  cursor: not-allowed;
}
.cp-multi-form .form-area .form-step .action-buttons .nav-button.submit .tfco-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #FFFFFF;
  transform: translateY(-50%);
  animation: tfco-loading-spin 1s ease-in-out infinite;
}
.cp-multi-form .form-area .form-step .action-buttons .nav-button.submit.tfco-loading .tfco-loading-spinner {
  display: block;
}



/**
 * Standard field sizes.
 */
.cp-multi-form .tfco-field-wrapper.width-auto { width: auto; flex-basis: auto; }
.cp-multi-form .tfco-field-wrapper.width-10 { width: 10%; flex-basis: 10%; }
.cp-multi-form .tfco-field-wrapper.width-15 { width: 15%; flex-basis: 15%; }
.cp-multi-form .tfco-field-wrapper.width-20 { width: 20%; flex-basis: 20%; }
.cp-multi-form .tfco-field-wrapper.width-25 { width: 25%; flex-basis: 25%; }
.cp-multi-form .tfco-field-wrapper.width-30 { width: 30%; flex-basis: 30%; }
.cp-multi-form .tfco-field-wrapper.width-33 { width: 33.333%; flex-basis: 33.333%; }
.cp-multi-form .tfco-field-wrapper.width-40 { width: 40%; flex-basis: 40%; }
.cp-multi-form .tfco-field-wrapper.width-50 { width: 50%; flex-basis: 50%; }
.cp-multi-form .tfco-field-wrapper.width-60 { width: 60%; flex-basis: 60%; }
.cp-multi-form .tfco-field-wrapper.width-66 { width: 66.666%; flex-basis: 66.666%; }
.cp-multi-form .tfco-field-wrapper.width-70 { width: 70%; flex-basis: 70%; }
.cp-multi-form .tfco-field-wrapper.width-75 { width: 75%; flex-basis: 75%; }
.cp-multi-form .tfco-field-wrapper.width-80 { width: 80%; flex-basis: 80%; }
.cp-multi-form .tfco-field-wrapper.width-85 { width: 85%; flex-basis: 85%; }
.cp-multi-form .tfco-field-wrapper.width-90 { width: 90%; flex-basis: 90%; }
.cp-multi-form .tfco-field-wrapper.width-100 { width: 100%; flex-basis: 100%; }
/* Tablet */
@media (max-width: 1024px) {
  .cp-multi-form .tfco-field-wrapper.width-tab-auto { width: auto; flex-basis: auto; }
  .cp-multi-form .tfco-field-wrapper.width-tab-10 { width: 10%; flex-basis: 10%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-15 { width: 15%; flex-basis: 15%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-20 { width: 20%; flex-basis: 20%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-25 { width: 25%; flex-basis: 25%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-30 { width: 30%; flex-basis: 30%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-33 { width: 33.333%; flex-basis: 33.333%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-40 { width: 40%; flex-basis: 40%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-50 { width: 50%; flex-basis: 50%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-60 { width: 60%; flex-basis: 60%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-66 { width: 66.666%; flex-basis: 66.666%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-70 { width: 70%; flex-basis: 70%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-75 { width: 75%; flex-basis: 75%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-80 { width: 80%; flex-basis: 80%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-85 { width: 85%; flex-basis: 85%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-90 { width: 90%; flex-basis: 90%; }
  .cp-multi-form .tfco-field-wrapper.width-tab-100 { width: 100%; flex-basis: 100%; }
}
/* Mobile */
@media (max-width: 767px) {
  .cp-multi-form .tfco-field-wrapper.width-mob-auto { width: auto; flex-basis: auto; }
  .cp-multi-form .tfco-field-wrapper.width-mob-10 { width: 10%; flex-basis: 10%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-15 { width: 15%; flex-basis: 15%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-20 { width: 20%; flex-basis: 20%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-25 { width: 25%; flex-basis: 25%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-30 { width: 30%; flex-basis: 30%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-33 { width: 33.333%; flex-basis: 33.333%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-40 { width: 40%; flex-basis: 40%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-50 { width: 50%; flex-basis: 50%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-60 { width: 60%; flex-basis: 60%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-66 { width: 66.666%; flex-basis: 66.666%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-70 { width: 70%; flex-basis: 70%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-75 { width: 75%; flex-basis: 75%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-80 { width: 80%; flex-basis: 80%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-85 { width: 85%; flex-basis: 85%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-90 { width: 90%; flex-basis: 90%; }
  .cp-multi-form .tfco-field-wrapper.width-mob-100 { width: 100%; flex-basis: 100%; }
}