#kotios-form--multistep {
  font-size: 1em;
}

@media (min-width: 800px) {
  #kotios-form--multistep {
    font-size: 1.4em;
  }
}

@media (min-width: 1000px) {
  #kotios-form--multistep {
    font-size: 1.6em;
  }
}

@media (min-width: 1500px) {
  #kotios-form--multistep {
    font-size: 2em;
  }
}

.form-section {
  display: none;
}

.form-section.active {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.form-section.final {
  text-align: center;
}

.flex {
  width: 100%;
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* TITLE */
.form-title {
  font-size: 1em;
}

/* QUESTION */
.question-header {
  color: #fdf9f9;
  padding: 5%;
  background-color: var(--KOTIOS-purple);
}

.question {
  display: none;
}

.question.active {
  display: flex;
  flex-direction: column;
}

.question-header .indicator {
  font-weight: bold;
  font-size: 0.8em;
}

.question-header .text {
  font-size: 1.2em;
  line-height: 1.5em;
  font-weight: bold;
}

.question-header .info {
  font-size: 0.8em;
  line-height: 1.5em;
}

/* INPUT */
.input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  height: 100%;
  padding: 5%;
  gap: 0.5em;
}

.input-wrapper label {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 0.8em;
  font-weight: bold;
}

.input-wrapper input[type="email"] {
  height: 2.5em;
  max-width: 25em;
  min-width: 35%;
  border-width: 1px;
  text-align: center;
  border-radius: 0.5em;
}

.input-wrapper .kotios-terms {
  max-width: 25em;
  min-width: 35%;
}

.input-wrapper input[type="checkbox"],
.input-wrapper input[type="radio"] {
  appearance: none;
  margin: 0;
  width: 1.2em;
  height: 1.2em;
  aspect-ratio: 1/1;
  background-color: var(--KOTIOS-unselected);
}
.input-wrapper input[type="radio"] {
  border-radius: 50%;
}

.input-wrapper input[type="checkbox"]:checked,
.input-wrapper input[type="radio"]:checked {
  background-color: var(--KOTIOS-selected);
}
.input-wrapper input[type="radio"]:checked {
  border-radius: 50%;
}

.form-section.final .input-wrapper {
  align-items: center;
  gap: 1em;
  font-size: 0.8em;
  line-height: 1.5em;
}

/* CONTROLS */
.form-controls {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-controls button {
  background-color: var(--KOTIOS-pink);
  font-size: 0.7em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  font-weight: bold;
  color: white;

  border: none;
  cursor: pointer;
  outline: inherit;
}

/* INDICATOR DOTS */
.indicator-wrapper {
  display: flex;
  gap: 0.2em;
}

.indicator-dot {
  background-color: var(--KOTIOS-unselected);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
}

.indicator-dot.selected {
  background-color: var(--KOTIOS-selected);
}