@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");

.ibk-body {
  display: none;
}

.ibk-dialog-background--hide {
  display: none;
}

.ibk-dialog-background {
  /* -- Variáveis CSS -- */
  --brand-color: #1b1b1b;
  --brand-color-second: #ff0000;
  --text-white: #ffffff;
  --text-black: #000000;
  /* -- Fim variáveis -- */

  background-color: rgba(33, 33, 33, 0.2);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Exo 2", sans-serif;
  z-index: 100;
}

.ibk-dialog {
  min-height: 480px;
  width: 100%;
  max-width: 800px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.ibk-header {
  background-color: var(--brand-color);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
}

.ibk-header h4 {
  color: var(--text-white);
  font-size: 22px;
  font-weight: 600;
  line-height: 26.4px;
  margin: 0;
}

#ibk-btn-close {
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.ibk-content-wrapper {
  padding: 32px 24px;
  display: flex;
  gap: 10px;
  flex: 1;
}

.ibk-bar-progress {
  height: 4px;
  width: 100%;
  background-color: #e2e2e2;
}

.ibk-bar-progress__fill {
  height: 100%;
  width: 0;
  background-color: var(--brand-color-second);
  transition: width 300ms ease-in-out;
}

#ibk-title-content {
  color: var(--text-black);
  font-size: 22px;
  font-weight: 600;
  line-height: 26.4px;
  margin: 16px 0 32px;
}

.ibk-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#ibk-form {
  margin: 0;
  flex: 1;
  display: flex;
}

.ibk-content__step-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* STEP 1 */

.ibk-step-1 h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  margin: 0;
}

.ibk-content__gender {
  margin: 16px 0 24px;
  display: flex;
  gap: 16px;
}

.ibk-content__field-gender {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-left: 24px;
}

.ibk-content__field-gender input {
  display: none;
  cursor: pointer;
}

.ibk-content__field-gender .ibk-checkmark {
  position: absolute;
  top: 50%;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #131313;
  box-sizing: border-box;
  transform: translateY(-40%);
}

.ibk-content__field-gender input:checked ~ .ibk-checkmark {
  border: 2px solid #fff;
  background-color: #000000;
}

.ibk-content__range-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ibk-content__height-field {
  position: relative;
}

#ibk-height-field {
  width: 73px;
  height: 33px;
  border-radius: 8px;
  border: 1px solid #131313;
  text-align: right;
  font-family: "Exo 2";
  -moz-appearance: textfield;
  padding: 0px 28px 0 0;
}

#ibk-height-field::-webkit-outer-spin-button,
#ibk-height-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.ibk-content__height-field-sufix {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-60%);
}

.ibk-content__range-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  /*  */
  position: relative;
  overflow: hidden;
}

.ibk-content__range-field input[type="range"]:focus {
  outline: none;
}

/* Firefox */
.ibk-content__range-field input[type="range"]::-moz-range-track {
  background-color: #e2e2e2;
  height: 4px;
  width: 100%;
  border-radius: 4px;
  pointer-events: none;
}

.ibk-content__range-field input[type="range"]::-moz-range-thumb {
  border: none;
  margin-top: -8px;
  background-color: #131313;
  height: 20px;
  width: 20px;
  border-radius: 50%;
}

.ibk-content__range-field input[type="range"]::-moz-range-progress {
  background-color: #131313;
  height: 4px;
  border-radius: 4px 0 0 4px;
}

/* Chrome, Safari, Opera, and Edge Chromium */
.ibk-content__range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  width: 100%;
  border-radius: 4px;
  pointer-events: none;
  background: linear-gradient(#e2e2e2 0 0) scroll no-repeat center;
}

input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  transition: all ease 100ms;
  height: 20px;
}

.ibk-content__range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -8px;

  /* Cria progresso do range */
  --thumb-width: 20px;
  --thumb-height: 20px;
  --track-height: 0.125em;
  --track-color: rgba(0, 0, 0, 0.2);
  --brightness-hover: 180%;
  --brightness-down: 80%;
  --clip-edges: 0.125em;
  --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
  --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
  --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
    100vmax #131313;

  width: var(--thumb-width, var(--thumb-height));
  background: linear-gradient(#131313 0 0) scroll no-repeat left center / 50%
    calc(var(--track-height) + 1px);
  background-color: #131313;
  box-shadow: var(--box-fill);
  border-radius: var(--thumb-width, var(--thumb-height));

  clip-path: polygon(
    100% -1px,
    var(--clip-edges) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--clip-edges) 100%,
    var(--clip-further) var(--clip-further)
  );
}

.ibk-content__range-field,
.ibk-content__range-field {
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* FIM - STEP 1 */

/* STEP 2 */

.ibk-step-2 h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  margin: 0 0 8px;
}

.ibk-content__text-about-size {
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
}

.ibk-content__type-wrapper {
  margin: 32px 0 0;
  display: flex;
}

.ibk-content__type-box {
  height: 110px;
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(19, 19, 19, 0.3);
  color: rgba(19, 19, 19, 0.3);
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  cursor: pointer;
}

.ibk-content__type-box:last-child {
  margin-right: 0;
}

.ibk-content__type-box--selected {
  color: rgba(19, 19, 19, 1);
  border-color: var(--brand-color-second);
}

/* FIM - STEP 2 */

/* STEP 3 - ULTIMO */
div[data-ibk-current-step="3"] #ibk-title-content {
  display: none;
}

div[data-ibk-current-step="3"] .ibk-content-btn-next {
  display: none;
}

.ibk-last-step {
  align-items: center;
  justify-self: center;
}

.ibk-last-step h4 {
  margin: 16px 0 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 26.4px;
  text-align: center;
  max-width: 500px;
}

.ibk-last-step img {
  width: 169px;
  object-fit: cover;
}

.ibk-last-step h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.4px;
}

.ibk-last-step-footer {
  display: none;
}

.ibk-last-step-footer button {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 19.2px;
  font-family: "Exo 2", sans-serif;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid var(--brand-color);
  border-radius: 4px;
  cursor: pointer;
}

.ibk-last-step-footer button:last-child {
  color: var(--text-white);
  border-color: var(--brand-color-second);
  background-color: var(--brand-color-second);
}

.ibk-last-step-footer button:first-child {
  margin-right: 16px;
  color: var( --text-black);
}

.ibk-last-step-footer button:first-child:hover {
  color: var( --text-white);
}

/* FIM - STEP 3 - ULTIMO */

/* VERIFICA ETAPA A SER EXIBIDA */

/* Barra de progresso */

div[data-ibk-current-step="1"] .ibk-bar-progress__fill {
  width: calc(100% / 3);
}

div[data-ibk-current-step="2"] .ibk-bar-progress__fill {
  width: calc(100% / 3 * 2);
}

div[data-ibk-current-step="3"] .ibk-bar-progress__fill {
  width: 100%;
}

div[data-ibk-step] {
  display: none;
}

div[data-ibk-current-step="1"] div[data-ibk-step="1"] {
  display: block;
}

div[data-ibk-current-step="2"] div[data-ibk-step="2"] {
  display: block;
}

div[data-ibk-current-step="3"] div[data-ibk-step="3"] {
  display: flex;
  flex-direction: column;
}

div[data-ibk-current-step="3"] .ibk-last-step-footer {
  display: flex;
}

/* FOOTER COM AS AÇÕES DA PESQUISA */

.ibk-content-btn-next {
  border: none;
  background-color: var(--brand-color);
  color: var(--text-white);
  border-radius: 4px;
  display: block;
  width: 100%;
  padding: 8px;
  font-family: "Exo 2";
  font-size: 16px;
  font-weight: 600;
  line-height: 19.2px;
  cursor: pointer;
}

.ibk-content-footer {
  padding-top: 24px;
  margin-top: auto;
}

/* Exibição da imagem de genero */

.ibk-body-type {
  min-width: 170px;
}

.ibk-body-type img {
  height: 100%;
  object-fit: contain;
  animation: appear 300ms ease-in;
}

.ibk-body-type .ibk-woman,
.ibk-body-type .ibk-man {
  display: none;
}

.ibk-body-type__man-with-ruler,
.ibk-body-type__woman-with-ruler {
  display: none;
}

div[data-ibk-current-step="1"] .ibk-body-type__man-with-ruler,
div[data-ibk-current-step="1"] .ibk-body-type__woman-with-ruler {
  display: initial;
}

div[data-ibk-current-step="1"] .ibk-body-type__man,
div[data-ibk-current-step="1"] .ibk-body-type__woman {
  display: none;
}

@media only screen and (max-width: 768px) {
  .ibk-body-type {
    display: none;
  }

  .ibk-content__type-wrapper {
    flex-direction: column;
  }
  .ibk-content__type-box {
    margin-top: 10px;
    padding: 10px;
  }
}

@keyframes appear {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}