/* CABECERA FROM */
.formulario-cabecera {
  display: flex;
  width: 100%;
  position: relative;
  padding: 0 15px;
  z-index: 3;
}

.formulario-cabecera #form-cabecera {
  display: block;
  width: 325px;
  height: fit-content;
  border: none;
  background-color: #FAFAFA;
  box-shadow: 0 0px 0px #e1e1e1;
  border-radius: 20px;
  margin: 0 auto 50px;
  overflow: visible;
  position: relative;

  @media (min-width: 1024px) {
    width: 375px;
  }

  @media (min-width: 1280px) {
    width: 400px;
  }
}

.formulario-cabecera #form-cabecera .form__header {
  background: #45B8AC;
  padding: 12px;
  display: flex;
  justify-content: center;
  border-radius: 20px 20px 0 0;
}

.formulario-cabecera #form-cabecera .form__header .form__header-title {
  text-align: center;
  color: #fff;
  font-family: 'Raleway';
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  text-transform: none;
  line-height: 24px;
}

.formulario-cabecera #form-cabecera .form__body {
  padding: 0 24px;
}

@media (max-width: 992px) {
  .formulario-cabecera #form-cabecera {
    width: 410px;
  }

  .formulario-cabecera #form-cabecera .form__body .form__one-col .phone-code {
    top: 18px;
  }
}

@media (max-width: 768px) {
  .formulario-cabecera {
    width: 100%;
  }

  .formulario-cabecera #form-cabecera {
    width: 100%;
    max-width: 450px;
  }
}


@media (min-width: 1024px) {
  .formulario-cabecera {
    width: auto;
  }

  .formulario-cabecera.is-sticky {
    display: flex;
    justify-content: end;
    align-items: flex-end;

    padding: 0;
    margin: 0 40px;

    position: fixed;
    right: -24px;
    top: 60px;
    width: 375px;
    z-index: 99;
  }

  .formulario-cabecera.is-sticky #form-cabecera {
    box-shadow: 0px 4px 24px 0px #00000040;
    margin: 0 auto 60px;
  }
}

@media (min-width: 1280px) {
  .formulario-cabecera.is-sticky {
    padding: 0;
    margin: 0;
    right: 16px;

    width: 400px;
    /* right: var(--sticky-format-1280-right-position); */
  }
}

@media (min-width: 1380px) {
  .formulario-cabecera.is-static {
    flex: 1 0 450px !important;
    justify-content: end;
  }

  .formulario-cabecera.is-static #form-cabecera {
    position: absolute;
    bottom: 0;
    right: 15px;
    margin: 0 auto 70px;
  }
}

@media (min-width: 1680px) {
  .formulario-cabecera.is-sticky {
    position: fixed;
    right: calc((100vw - 1680px) / 2);
    width: unset;
    z-index: 99;
  }

  .formulario-cabecera.is-sticky #form-cabecera {
    margin: 0;
    right: 0;
  }
}

/* CABECERA FROM */


.form__body {
  display: flex;
  gap: 12px;
  flex-direction: column;

  margin: 24px 0;

  >div:has(.terms_column),
  >button {
    grid-column: span 2;
  }

  .form_select_container {
    position: relative;
    min-height: 40px;
    z-index: 1;
    transition: all .3s ease-in-out;

    &:has(span.class-error.show) {
      .form_column {
        border-color: #ff00008c !important;
      }
    }

    &:has(ul.show) {
      z-index: 4;
    }

    .form_column {
      position: absolute;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 40px;
      max-height: 40px;
      background-color: #FFFFFF;
      border: 2px solid #B6E1F9;
      border-radius: 12px;
      overflow: hidden;
      transition: all .3s ease-in-out;
    }

    >span.class-error {
      display: block;
      font-family: 'Raleway', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #FF00008C;
      padding: 0 10px 0;
      margin-top: 40px;
      min-height: 0;
      max-height: 0;
      line-height: 14px;
      transition: all .15s ease-in-out;

      &.show {
        padding: 10px 10px 0;
        max-height: 100%;
      }
    }
  }

  .modality_column {
    position: relative;
    z-index: 2;

    .form_column {
      overflow: visible;

      ul {
        max-height: 250px;
        transform: translate(0px, 45px);
      }
    }
  }

  .phone_column {
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;

    &:has(span.class-error.show) {
      .form_column {
        border-color: #ff00008c !important;
      }
    }

    &:has(ul.show) {
      z-index: 4;
    }

    .form_column {
      flex: 1;

      &:first-of-type {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 90px;
        overflow: hidden;
      }

      &:last-of-type {
        label {
          left: 105px;
        }

        input {
          border: 2px solid #B6E1F9;
          padding-left: 105px;
        }
      }

      >div {
        background: #E3F5FF !important;
        border-radius: 10px;
        display: flex;
        align-items: center;
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        font-weight: 500;
        background: unset;
        border: none;
        border-radius: 10px;
        width: 100%;
        min-height: 38px;
        max-height: 38px;
        padding: 15px;
        color: #0473BA;
        cursor: pointer;
        transition: all .15s ease-in-out;
        justify-content: space-between;
      }

      ul {
        width: 100%;
        top: 100%;
        max-height: 200px;

        @media (width >=1024px) {
          max-height: 250px;
        }
      }
    }

    span.class-error {
      display: block;
      font-family: 'Raleway', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #FF00008C;
      padding: 0 10px 0;
      min-height: 0;
      max-height: 0;
      line-height: 14px;
      transition: all .15s ease-in-out;

      &.show {
        padding: 10px 10px 0;
        max-height: 100%;
      }
    }
  }

  .terms_column {
    position: relative;
    overflow: hidden;

    margin-bottom: 10px;

    >input {
      width: auto;
      margin: 0;
      padding: 0;
      cursor: pointer;
    }

    >label {
      position: initial;
      display: inline;
      margin: 0 0 0 4px;
      font-family: 'Raleway', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: #134C8F;
      line-height: 1;
      cursor: text;
      transition: all .15s ease-in-out;

      a {
        font-weight: 600;
        color: #45B8AC;
      }
    }

    span.class-error {
      display: block;
      font-family: 'Raleway', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: #FF00008C;
      padding: 0 10px 0;
      min-height: 0;
      max-height: 0;
      line-height: 13px;
      transition: all .15s ease-in-out;

      &.show {
        padding: 10px 10px;
        max-height: 100%;
      }
    }
  }

  .form_column {
    position: relative;
    overflow: hidden;

    &:has(ul) {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 40px;
      max-height: 40px;
      background-color: #FFFFFF;
      border: 2px solid #B6E1F9;
      border-radius: 12px;
      transition: all .3s ease-in-out;

      img {

        &:has(+ span.loading) {
          &:first-of-type {
            opacity: .5;
          }
        }

        &:first-of-type {
          top: 18px;
          left: 12px;
        }

        &.loupe {
          position: absolute;
          top: calc(40px + (40px / 2) - 4px);
          right: 30px;
          left: unset;
          width: 16px;
          height: 16px;
          pointer-events: none;
        }
      }

      >span:not(.class-error) {
        display: flex;
        align-items: center;
        font-family: 'Raleway', sans-serif;
        font-size: 16px;
        font-weight: 500;
        background: unset;
        border: none;
        border-radius: 10px;
        width: 100%;
        min-height: 36px;
        max-height: 36px;
        padding: 15px;
        color: #0473BA;
        cursor: pointer;
        transition: all .15s ease-in-out;

        &::after {
          content: '';
          position: absolute;
          top: 18px;
          right: 10px;
          transform: translate(0, -50%);
          width: 12px;
          height: 8px;
          background-image: url(/wp-content/themes/fpuniversae/assets/img/icono-flecha-verde-dropdown.svg);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }

        &.loading {
          opacity: .5;
          pointer-events: none;
        }
      }

      >div#phoneCode {
        padding: 0 12px;

        &::after {
          display: none;
        }

        >span {
          margin: auto;
        }
      }

      >input {
        font-weight: 500;
        position: relative;
        line-height: 1;
        width: auto;
        margin: 0 15px;
        padding: 6px 40px 6px 20px;
        border-radius: 17px;
        border: 2px solid #B6E1F9;
        color: #134C8F;
      }

      ul {
        margin: 0 0 10px 0;
        padding: 0px 22px;
        background-color: white;
        border-radius: 6px;
        box-shadow: unset;
        font-size: 16px;
        list-style: none;
        color: #134c8f;
        transform: translate(0px, 10px);
        width: 100%;
        height: max-content;
        max-height: 300px;
        overflow: auto;
        user-select: none;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        transition: all ease-in-out .3s;

        &.show {
          position: initial;
          opacity: 1;
          pointer-events: all;
        }

        li {
          font-family: 'Raleway', sans-serif;
          padding: 8px 0;
          font-size: 15px;
          line-height: 17px;
          cursor: pointer;
          transition: all .3s ease-in-out;

          &:hover {
            background-color: #B6E1F938;
            margin-inline: -22px;
            padding-inline: 22px;
          }
        }
      }

      select {
        display: none;
      }
    }

    &:has(ul.show) {
      max-height: 250px;
      transition: all .3s ease-in-out;
      width: 100% !important;

    }

    &:has(ul#modalCountryList) ul {
      position: initial;
      box-shadow: unset;
    }

    &:has(.terms_column) {
      margin: 0 0 12px;
    }

    &:has(input:focus),
    &:has(input.fill) {
      label {
        top: -10px;
      }
    }

    >label {
      position: absolute;
      top: 20px;
      left: 15px;
      transform: translate(0, -50%);
      font-family: 'Raleway', sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: #0473BA;
      line-height: 1;
      cursor: text;
      transition: all .15s ease-in-out;
    }

    >input {
      font-family: 'Raleway', sans-serif;
      font-size: 16px;
      font-weight: 500;
      background: #FFFFFF;
      border: 2px solid #B6E1F9;
      border-radius: 12px;
      width: 100%;
      max-height: 40px;
      padding: 15px;
      color: #0473BA;
      outline: none;
      transition: all .15s ease-in-out;

      &.error {
        border-color: #ff00008c !important;
      }
    }

    >span.class-error {
      display: block;
      font-family: 'Raleway', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #FF00008C;
      padding: 0 10px 0;
      min-height: 0;
      max-height: 0;
      line-height: 14px;
      transition: all .15s ease-in-out;

      &.show {
        padding: 10px 10px 0;
        max-height: 100%;
      }
    }

    >p {
      display: inline;
      font-family: 'Raleway', sans-serif;
      font-size: 13px !important;
      font-weight: 400;
      color: #134C8F;
      line-height: 1;
      text-align: start;

      &.clamped {
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        @media (width >=1440px) {
          -webkit-line-clamp: 1;
          max-width: 580px;
        }
      }

      >span {
        display: inline;
        padding: 0;
        color: #0473BA;
        font-weight: 700;
        font-size: 100%;
      }

      >a {
        font-weight: 600;
        color: #45B8AC;
      }
    }

    .findOptionInput {
      margin-top: 10px;
    }

    >button {
      appearance: unset;
      background: unset;
      border: unset;
      display: inline;
      padding: 0;
      color: #0473BA;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      outline: none;
    }
  }

  button[type="submit"] {
    margin: 0 auto;
    text-transform: initial;
    font-size: 17px !important;

    max-height: 40px;
    width: 100%;

    @media (width >=1024px) {
      font-size: 18px !important;
    }

    &:hover {
      img {
        filter: brightness(0) saturate(100%) invert(62%) sepia(32%) saturate(647%) hue-rotate(124deg) brightness(95%) contrast(93%);
      }
    }

    >div {
      position: relative;
    }

    img {
      filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(53deg) brightness(105%) contrast(101%);
      transition: all .3s ease-in-out;

      &:first-of-type {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 10px;
        height: auto;
      }

      &:last-of-type {
        transform: translate(0, 4px);
        width: 16px;
      }
    }
  }
}

.form__footer {
  display: grid;
  cursor: pointer;
}

.form__footer span#d-llamanos,
.form__footer a#llamanos {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
  font-size: 15px;
  line-height: 0;
}

.form__footer span#d-llamanos {
  display: flex;
  align-items: center;
  cursor: auto;
  font-family: "Roboto", Sans-serif;
}

.form__footer a#llamanos span {
  margin: auto 0;
}

.form__footer a#llamanos span {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.4px;
}

.form__footer a#llamanos,
.form__footer span#d-llamanos {
  background-color: #FF9C00;
  color: #134C8F;
  font-family: "Raleway", Sans-serif;
  font-weight: 700;
  height: 48px;
  border-radius: 0 0 20px 20px;
}

.form__footer span#d-llamanos {
  font-family: "Roboto", Sans-serif;
}