@import "../../../assets/scss/variables";
:root {
  --banner-background-image: url('../../../../src/assets/images/activate_dua_banner_lm.svg');
}
:root[data-theme="dark"] {
  --banner-background-image: url('../../../../src/assets/images/activate_dua_banner_lm.svg');
}
.header-linktoegov {
  display: none;
}

#activatedua {
.banner{
  .inner{
    position: relative;
    right: 0;
    background-image: var(--banner-background-image);
    min-height: 590px;
    width: 100%;
    height: 100%;
    max-width: 590px;
    max-height: 590px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  @media (max-width: 991px) {
    display: none;
  }
  max-width: 590px;
  width: 100%;
  position: fixed;
  z-index: -20;
  bottom: 0px;
  img {
    width: 100%;
  }
  right:0!important;
}
  //main content - wrapper
  .main-content {

    .step {

      &-wrapper {

        &--title {

          h1 {

            span {
              font-size: $subtext-size;
              font-weight: $thin;
              letter-spacing: 0.32px;
              line-height: 35px;
            }
          }

          p {
            font-size: $text-size;
            font-weight: $extra-light;
            letter-spacing: 0.4px;
            line-height: 35px;
            color: $text-color;
          }
        }

        &--afm {
          margin: 3.7rem 0 4rem 0;

          input {
            width: 0;
            height: 0;
            border: none;

            &:focus ~ label {
              border-color: $secondary-color;

              .step-wrapper--afm--input {
                .filled {
                  color: $secondary-color;
                }

                .empty {
                  border-color: $secondary-color;
                }
              }
            }
          }

          &--label {
            height: 9.2rem;
            border-radius: 0.5rem;
            border: 1px solid #D0E4FF;
            background-color: #F3F8FC;
            padding: 2rem 3rem;
            width: auto;
            max-width: 55rem;
            min-width: 54.1rem;

            span {
              color: $title-color;
              font-size: $info-size;
              font-weight: $bold;
              margin-bottom: 1.1rem;
            }
          }

          &--input {
            display: flex;
            margin-top: 1.1rem;

            .filled {
              font-size: $text-size;
              font-weight: $thin;
              color: $text-color;
              margin-right: 1.1rem;
              line-height: .7;
              width: 1.5rem;
            }

            .empty {
              border-bottom: .1rem solid $text-color;
              width: 1.5rem;
              margin-right: 1.1rem;

            }
          }

          &--trials {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-left: 1.5rem;
            p {
              font-size: $btn-txt-size;
              margin-left: 8px;
              line-height: 1;
            }

            img {
              width: 22px;
              height: 19px;
            }
          }
        }

        &--wrongafm {
          margin-top: 6.9rem;

          a {
            &:hover {
              cursor: pointer;
            }

            text-decoration: underline;
            color: $title-color;
            font-size: $subtext-size;
            letter-spacing: 0.32px;
            line-height: 1.9rem;
            font-weight: $extra-light;
          }
        }

        &--result {
          padding-left: 2.0rem;

          &--img {
            img {
              width: 6.5rem;
              height: 5rem;
            }

            margin-bottom: 2.9rem;
            margin-top: 2.6rem;
          }

          &--text {
            line-height: 3.5rem;
            margin-bottom: 6.1rem;
          }

          &--button {
            button {
              height: 6.4rem;
            }
          }
        }
      }

      &--submit-button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 4rem;
      }
    }
  }

  //afm form
  #step-afm-form {

    form {
      scroll-margin-top: 30px;
      #guidehelperalt {
        margin-bottom: 30px;
        justify-content: left;

      }

      .rescom-error {
        font-size: 1.6rem;
        color: #040059;
        font-weight: 700;
      }


    }
  }


.contract-true {
  display: flex;
  align-items: center;
  gap: 1.2rem;

  p {
    padding-left: 0.5rem;
    border-left: 5px solid $success-color;
    color: #707070;
    font-size: 1.2rem;
    font-weight: 100;

    span {
      font-weight: 900;
    }
  }

// Checkmark styles and animation
  .wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: $success-color;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
  }

  .checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: white;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0 0 0 $success-color;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
  }

  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
  }

    @keyframes stroke{100%{stroke-dashoffset: 0}}
    @keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}
    @keyframes fill{100%{box-shadow: inset 0 0 0 30px $success-color}}
  }
}

#step-afm-verified {
  .guidehelperalt-text-wrapper {
    div {
      display: flex;
      gap: 2rem;
      align-items: center;
      justify-content: space-between;

      @media only screen and (max-width:1200px) {
        flex-direction: column;
        gap: 1rem;
      }

      @media only screen and (max-width:991px) {
        flex-direction: row;
        gap: 2rem;
      }

      @media only screen and (max-width:430px) {
        flex-direction: column;
        gap: 1rem;
      }
    }
  }
}