// Define variables for colors and dimensions if needed
$primary-color: #3F04FE;
$secondary-color: #00B4FF;
$heading-color: #0E003C;
$description-color: #73707D;
$color-white: #ffffff;
$banner-height: 812px;
$border-radius: 10px;
$primary-font: 'Roboto', sans-serif;

// button container common class
%button-container{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

%section-container{
  margin-top: 34px;
  border-radius: 10px;
  background: #FFF;
  padding: 40px 40px 44px 40px;
  box-shadow: 0px 1px 1px 0px rgba(184, 177, 206, 0.70);

  @media (max-width: 768px) {
    padding: 35px 35px 39px 35px;
  }
}

// common button class
%common-button{
  display: block;
  text-decoration: none;
  text-align: center;
  font-family: $primary-font;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  padding: 17px 22px;

  @media (max-width: 768px) {
    font-size: 17px;
    padding: 15px 20px;
  }
}

// heading common class
.setup-wizard__heading-one {
  color: $heading-color;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  font-family: $primary-font;
  line-height: 1;

  .setup-wizard__heading-one-highlight {
    font-weight: 600;
  }

  @media (max-width: 1280px) {
    font-size: 30px;
  }

  @media (max-width: 768px) {
    font-size: 28px;
  }
}

// description common class
.setup-wizard__description {
  font-size: 16px;
  color: $description-color;
  text-align: center;
  line-height: 1.625;
  max-width: 655px;
  margin: 0 auto;
  font-weight: 400;
  font-family: $primary-font;
  font-style: normal;
  margin-top: 20px;

  @media (max-width: 768px) {
    font-size: 15px;
  }

}

.setup-wizard__button {
  background-color: $primary-color;
  color: #fff;
  border-radius: $border-radius;
  font-family: "Roboto";
  font-weight: 500;
  font-size: 18px;
  border: none;
  box-shadow: 0px 9px 14px 0px rgba(176, 189, 212, 0.5) !important;
  cursor: pointer;
}

.setup-wizard__button-shadow {
  box-shadow: 0px 9px 14px 0px rgba(176, 189, 212, 0.5) !important;
}

.setup-wizard__input-shadow {
  box-shadow: 0px 1px 1px 0px rgba(8, 30, 67, 0.12) !important;
}

.merchant-auth-container {
  max-width: 963px;
  margin: 0 auto;
}


// Define styles for the container
.setup-wizard__container {

  // Define styles for the inner container
  .setup-wizard__inner-container {
    margin: 0 auto;
    padding: 32px 15px 0 15px;
    max-width: 930px;

    // welcome section container
    .setup-wizard__welcome-section-container {
      @extend %section-container;

      .setup-wizard__welcome-text-content{
        margin-bottom: 25px;
      }

      // select your marchant start

      .rex-wpvr-setup-wizard-page-builder-selection{
        max-width: 830px;
        margin: 0 auto;

        .search-merchant-wrapper {
          position: relative;
          max-width: 500px;
          margin: 0 auto;


          input[type="text"] {
            border-radius: 10px;
            border: 1px solid #EAE4FF;
            background: #FFF;
            width: 100%;
            padding: 5px 15px;
            height: 50px;
            color: #6E786E;
            font-family: "Roboto";
            font-weight: 400;
            font-size: 16px;

            &::placeholder {
              color: #6E786E;
              font-family: "Roboto";
              font-weight: 400;
              font-size: 16px;
            }

            &:focus {
              border-color: #3F04FE;
              outline: none;
              box-shadow: 0 0 5px rgba(184, 196, 217, 0.5);
            }
          }

          svg {
            position: absolute;
            top: 50%;
            left: 95%;
            transform: translate(-50%, -50%);
          }
        }
        .rex-wpvr-setup-heading{
          font-weight: 400;
          b{
            font-weight: 600;
          }
        }
        .rex-wpvr-setup-wizard-page-builder-wrapper{
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 20px;
          margin-top: 28px;

          .rex-wpvr-no-result-found{
            grid-column: span 5;
            font-size: 16px;
            font-weight: 500;
          }

          .rex-wpvr-setup-wizard-single-builder{
            border: 2px solid #EAE4FF;
            border-radius: 10px;
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover{
              border: 2px solid #3F04FE;
              box-shadow: 0px 9px 14px rgba(184, 196, 217, 0.5);
            }

            .rex-wpvr-builder-heading{
              color: #363B4E;
              font-size: 14px;
              font-style: normal;
              font-weight: 500;
              line-height: 1.14;
              margin: 0;
              font-family: 'Roboto', sans-serif;
            }

            &:hover .rex-wpvr-setup-builder-image path {
              fill: #3F04FE;
            }
          }
        }
      }
      // select your merchant end

      // email subscribe
      .rex-wpvr-setup-wizard-subscribe-form{
        margin-top: 30px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;

        .rex-wpvr-setup-form-group{
          margin-bottom: 16px;

          .rex-wpvr-required-text{
            font-size: 12px;
            font-family: 'Roboto';
            text-align: start;
            margin-top: 8px;
            color: red;
            display: none;

            &.active{
              display: block;
            }
          }

          &:last-child{
            margin-bottom: 0;
          }

          label{
            color: #363B4E;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 1;
            margin-bottom: 8px;
            display: inline-block;
          }

          input{
            border-radius: 10px;
            border: 1px solid #EAE4FF;
            background: #FFF;
            color: #363B4E;
            width: 100%;
            padding: 5px 15px;
            height: 50px;
            font-size: 16px;
            font-family: 'Roboto';
            font-weight: 400;
            color: #6C798F;

            &::placeholder {
              font-size: 16px;
              font-family: 'Roboto';
              font-weight: 400;
              color: #6C798F
            }

            &:focus {
              border-color: #3F04FE;
              outline: none;
              box-shadow: 0 0 5px rgba(184, 196, 217, 0.5);
            }
          }
        }

        .rex-wpvr-wizard-settings {
          margin-bottom: 25px;

          &:last-child {
            margin-bottom: 0;
          }

          input[type="checkbox"] {
            display: none;
          }

          input[type="checkbox"] + label {
            display: inline-block;
            text-align: start;
            font-size: 15px;
            font-weight: 400;
            font-family: 'Inter', sans-serif;
            color: #626A70;
            position: relative;
            cursor: pointer;
            line-height: 25px;
            padding: 20px 40px 20px 68px;
            max-width: 524px;
            width: 100%;
            background: #FAF9FF;
            border: 1px solid #EAE4FF;
            border-radius: 3px;
            transition: all 0.3s;
          }

          input[type="checkbox"] + label:before {
            content: "";
            display: inline-block;
            width: 25px;
            height: 25px;
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #FFFFFF;
            border: 1px solid #D8CCFF;
            border-radius: 4px;
          }

          input[type="checkbox"]:checked + label:before {
            content: "";
            background-color: #3f04fe;
            background-image: url('data:image/svg+xml;utf8,<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.625L4.375 10L13.375 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
          }

          input[type="checkbox"] + label:hover {
            border-color: #3F04FE;
          }

          // input[type="checkbox"]:focus + label {
          //   border-color: #3f04fe;
          //   outline: none;
          // }

          // input[type="checkbox"]:focus + label:before {
          //   box-shadow: 0 0 0 3px rgba(63, 4, 254, 0.5);
          // }
        }


        .rex-wpvr-setup-wizard-legal-text {
          color: #6C798F;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 1.71;
          text-align: left;
          margin-top: 8px;
          font-family: 'Inter';


          & a {
            color: #3F04FE;
          }
        }
      }

      // email subscribe end

      h2 {
        @extend .setup-wizard__heading-one;
      }

      p {
        @extend .setup-wizard__description;
      }

      // welcome page
      // Define class name for welcome page banner image
      .setup-wizard__welcome-video-container {
        position: relative;
        margin-bottom: 28px;

        .setup-wizard__welcome-video-preview {
          max-width: 836px;
          width: 100%;
          margin: 0 auto;
          border-radius: 10px;
        }

        iframe {
          height: 480px;
          max-width: 836px;
          width: 100%;
          margin: 0 auto;

          @media (max-width: 1024px) {
            height: 400px;
          }
        }

        .setup-wizard__video-play-button {
          position: absolute;
          top: 42%;
          left: 45%;

          button{
            border: none;
            cursor: pointer;
            background: none;
          }
        }

      }

      .setup-wizard__main-buttons {
        @extend %button-container;

        .setup-wizard__button-left {
          @extend %common-button;
          color: $color-white;
          background-color: $primary-color;
        }
        .setup-wizard__button-right {
          @extend %common-button;
          color: $heading-color;
          border: 1px solid #ebe4ff;
          background: #f7f4ff;
        }
      }


      // activate license page
      .setup-wizard__activate-license-container {
        max-width: 963px;
        background-color: #DEEEDE;
        border-radius: 3px;
        margin: 0 auto;
        border: 1px solid #DEEEDE;

        @media (max-width: 1024px) {
          margin: 0px 25px;
        }

        @media (max-width: 1280px) {
          max-width: 763px;
        }

        .setup-wizard__activate-license-inner-container {
          display: flex;
          align-items: center;
          justify-content: center;

          .setup-wizard__activate-license-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 92%;

            @media (max-width: 1280px) {
              flex-direction: column;
            }

            .setup-wizard__activate-license-loader-container {
              display: flex;
              align-items: center;
              height: 150px;
              margin: 0 auto;
              display: none;

              #loading {
                display: inline-block;
                width: 40px;
                height: 40px;
                border: 5px solid rgba(0, 0, 0, 0.398);
                border-radius: 50%;
                border-top-color: #fff;
                animation: spin 1s ease-in-out infinite;
                -webkit-animation: spin 1s ease-in-out infinite;
              }

              @keyframes spin {
                to {
                  -webkit-transform: rotate(360deg);
                }
              }

              @-webkit-keyframes spin {
                to {
                  -webkit-transform: rotate(360deg);
                }
              }
            }

            .setup-wizard__activate-license-input-container {
              margin: 15px 0 40px 0;
              // display: none;

              @media (max-width: 1280px) {
                margin: 15px 0px 18px 0px;
              }

              label {
                display: block;
                font-weight: 600;
                color: #535963;
                font-size: 14px;
                text-align: start;
                padding: 8px 4px;
              }

              input[type='password'] {
                @extend .setup-wizard__input-shadow;
                font-size: 18px;
                height: 56px;
                min-width: 585px;
                background-color: #fff;
                color: #535963;
                border: none;
                border-radius: $border-radius;
                outline: none;
                padding: 0 28px;

                @media (max-width: 1024px) {
                  margin: 0px 0px 18px 0px;
                  min-width: 520px;
                }
              }
            }

            .setup-wizard__activate-license-button {
              @extend .setup-wizard__button;
              // display: none;
              padding: 16px 40px;
              margin: 49px 0 40px 0;

              @media (max-width: 1024px) {
                margin: 0px 0px 10px 0px;
              }

              @media (max-width: 1280px) {
                margin: 20px 0 35px 0;
                padding: 18px 16px 18px 16px;
              }
            }
          }
        }
      }

      .setup-wizard__activate-license-error {
        text-align: start;
        padding: 15px 130px 0 130px;
        color: #535963;
        font-size: 18px;
        display: none;

        .setup-wizard__activate-license-error-highlight {
          color: #FF0000;
        }

        @media (max-width: 1280px) {
          text-align: center;
          padding: 15px 0px 0 0px;
        }
      }

      .setup-wizard__activate-license-success {
        text-align: start;
        padding: 15px 130px 0 130px;
        color: #535963;
        font-size: 18px;
        color: #2BAF2B;
        display: none;

        @media (max-width: 1280px) {
          text-align: center;
          padding: 15px 0px 0 0px;
        }
      }

      .setup-wizard__activate-license-next {
        display: none;

        button{
          @extend .setup-wizard__button;
          margin:3rem 0 0 0;
          padding: 13px 20px;
        }
      }

      //Done page
      .setup-wizard__done-heading-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;

        .setup-wizard__done-heading-circle {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 42px 0 20px 0;
        }
      }

      .setup-wizard__done-video-container {
        position: relative;
        padding: 16px 0 20px 0;

        @media (max-width: 1240px) {
          padding: 16px 10px 20px 10px;
        }

        img {
          display: block;
        }

        iframe,
        img {
          height: 480px;
          width: 962px;
          margin: 0 auto;
          border-radius: $border-radius;

          @media (max-width: 1240px) {
            width: 850px;
          }
          @media (max-width: 1024px) {
            height: 400px;
            width: 650px;
          }
        }


        // Define styles for the button container
        .setup-wizard__done-video-button {
          position: absolute;
          top: 40%;
          left: 45%;

          @media (max-width: 1024px) {
            top: 41%;
          }

          // block absolute inset-y-[10rem] lg:inset-y-[16rem] inset-x-1/4
          button {
            padding: 20px 36px;
            border-radius: 16px;
            @extend .setup-wizard__button;
            background-color: #FF2E3B !important;
          }
        }

      }

      .setup-wizard__done-buttons {
        padding: 20px 0 0 0;

        .setup-wizard__done-buttons-back {
          padding: 15px 33px;
          background: transparent;
          color: #6C798F;
          border: 1px solid #E3E9F4;
          border-radius: $border-radius;
          margin: 0 15px;
          cursor: pointer;
          font-family: 'Roboto', sans-serif;

          svg{
            margin-right: 5px
          }
        }

        .setup-wizard__done-buttons-progress {
          @extend .setup-wizard__button;
          padding: 13px 33px;
          margin: 0 15px;
        }

        // .setup-wizard__auth-buttons{
        //     display:flex;
        //     align-items: center;
        // }
      }

      // select marchent
      .setup-wizard__select-marchent-content {
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 35px;
        margin-top: 37px;

        @media (max-width: 1240px) {
          max-width: 650px;
          grid-template-columns: repeat(3, 1fr);
        }
      }

      .setup-wizard__select-marchent-item {
        border: 1.5px solid #DEEEDE;
        border-radius: 6px;
        position: relative;

        &__logo {
          padding: 30px 32px 12px 32px;
        }

        &__title {
          font-size: 14px;
          padding: 10px 5px 24px 5px;
          color: #363B4E;
          font-weight: 600;
          margin: 0 auto;
        }

        &.card-enabled {
          &:hover {
            background: #FFFFFF;
            box-shadow: 0px 10px 20px rgba(43, 175, 43, 0.2);
            transition: 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            border: 1.75px solid #2BAF2B;
            cursor: pointer;
          }
        }

        &.comming-soon {
          &:hover {
            cursor: not-allowed;
          }

          &::after {
            content: "Comming Soon";
            position: absolute;
            background-color: #EEF6EE;
            border: 1px solid #D2E3D2;

            top: -15px;
            transform: translateX(-50%);
            border-radius: 30px;
            width: 95px;
            font-size: 10px;
            font-weight: 500;
            padding: 6px 0px;
            color: #000000;

            // @media #{$device_992_1199} {
            //     top: -13px;
            //     left: 50%;
            //     transform: translateX(-50%);
            //     border-radius: 30px;
            //     width: 95px;
            //     font-size: 10px;
            //     font-weight: 600;
            //     padding: 4px 6px;
            // }
          }
        }
      }

    }

    // feature section
    .setup-wizard__features-section-container {
      @extend %section-container;

      .setup-wizard__features-text-content {
        margin-bottom: 50px;
      }

      .setup-wizard__feature-lists {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 165px;
        row-gap: 50px;

        @media (max-width: 768px) {
          column-gap: 50px;
          row-gap: 40px;
        }
        .setup-wizard__single-feature {
          display: flex;
          align-items: start;
          gap: 27px;
          .setup-wizard__feature-image {
            img{
              width: 35px;
              @media (max-width: 768px) {
                max-width: 30px;
              }
            }
          }
          .setup-wizard__feature-text-content {
            .setup-wizard__feature-heading {
              color: $heading-color;
              font-family: $primary-font;
              font-size: 18px;
              font-style: normal;
              font-weight: 500;
              line-height: 27px;
              margin: 0;
              text-align: start;

              @media (max-width: 768px) {
                font-size: 17px;
              }
            }
            .setup-wizard__feature-description {
              color: $description-color;
              font-family: $primary-font;
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 1.6;
              margin-top: 3px;
              text-align: start;


              @media (max-width: 768px) {
                font-size: 15px;
              }

            }
          }
        }
      }

      .setup-wizard__feature-list-button-container{
        margin-top: 42px;
        margin-bottom: 67px;
        @media (max-width: 768px) {
          margin-bottom: 50px;
        }

        .setup-wizard__feature-list-button{
          @extend %common-button;
          background: #F7F4FF;
          border: 1px solid #EBE4FF;
          font-weight: 600;
          font-size: 16px;
          line-height: 1.6;
          text-transform: uppercase;
          letter-spacing: 1.6px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15px;
          color: $primary-color;

          @media (max-width: 768px) {
            font-size: 15px;
          }
        }
      }

      .setup-wizard__pro-features-section-container{
        background: linear-gradient(100.82deg, #C0ECFF 0.77%, #E0F6FF 20.23%, #F4F0FF 79.76%, #E7DEFF 100.21%);

        .setup-wizard__pro-features{
          padding: 38px 46px 46px 46px;

          @media (max-width: 768px) {
            padding: 34px 40px 40px 40px;
          }

          .setup-wizard__pro-features-text-content {
            margin-bottom: 28px;

            @media (max-width: 768px) {
              margin-bottom: 24px;
            }

            .setup-wizard__pro-feature-heading{
              color: #0E003C;
              font-family: Inter;
              font-size: 24px;
              font-style: normal;
              font-weight: 600;
              line-height: 42px;

              @media (max-width: 768px) {
                font-size: 22px;
              }

              .setup-wizard__pro-feature-heading-highlight{
                color: #3F04FE;
                font-family: Inter;
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 42px;
              }
            }
          }

          .setup-wizard__pro-feature-lists{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 143px;
            row-gap: 25px;

            @media (max-width: 768px) {
              column-gap: 60px;
              row-gap: 20px;
            }

            .setup-wizard__single-pro-feature{
              display: flex;
              align-items: center;
              justify-content: start;
              gap: 17px;

              .setup-wizard__single-pro-feature-icon{

              }
              .setup-wizard__single-pro-feature-title{
                color: #000;
                font-family: $primary-font;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 27px;

                @media (max-width: 768px) {
                  font-size: 17px;
                }
              }
            }
          }
        }
        .setup-wizard__pro-features-price{
          position: relative;
          .pro-text{
            color: #73707D;
            text-align: center;
            font-family: $primary-font;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
            padding: 45px 40px 26px 40px;
            border-top: 1px solid #FFF;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;

            @media (max-width: 768px) {
              font-size: 18px;
              gap: 20px;
            }
          
            p:nth-child(2){
              font-family: $primary-font; 
              font-style: normal; 
              font-weight: 400; 
              color: #73707D;
              font-size: 15px; 
              line-height: 28px;
            }
          }
          .setup-wizard__pro-features-price-amount {
            color: #3F04FE;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;

            @media (max-width: 768px) {
              font-size: 22px;
            }
          }

          .setup-wizard__pro-features-price-tag {
            position: absolute;
            font-family: "Urbanist", sans-serif;
            display: block;
            border-radius: 16px 16px 16px 0px;
            background: #3f04fe;
            font-size: 13px;
            color: #ffffff;
            font-weight: 500;
            padding: 8px 9px;
            text-transform: capitalize;
            z-index: 1;
            line-height: 0.8;
            transform: translate(-50%, -50%);
            top: 30px;
            left: 50%;
            max-width: 78px;
            @media (max-width: 768px) {
              max-width: 72px;
              font-size: 12px;
              padding: 7px 8px;
            }
          }
        }
        .setup-wizard__pro-feature-list-button-container{

          .setup-wizard__pro-feature-list-button{
            @extend %common-button;
            background: $primary-color;
            font-weight: 400;
            font-size: 16px;
            font-family: $primary-font;
            line-height: 1.6;
            text-transform: capitalize;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            color: $color-white;
          }
        }
      }


            .setup-wizard__subscribe-button-container{
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 11px;
        margin-top: 24px;

        @media (max-width: 768px) {
          align-items: start;
        }

        p{
          color: $description-color;
          font-family: $primary-font;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 2.1;

          @media (max-width: 768px) {
            font-size: 15px;
            line-height: 1.5;
          }
        }

        // switcher
        .setup-wizard__switch {
          position: relative;
          display: inline-block;
          width: 42px;
          height: 22px;

          @media (max-width: 768px) {
            margin-top: 5px;
          }
          input{
            opacity: 0;
            width: 0;
            height: 0;
          }
          .setup-wizard__switch-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;

            &:before {
              position: absolute;
              content: "";
              height: 18px;
              width: 18px;
              left: 4px;
              bottom: 2px;
              background-color: white;
              transition: 0.4s;
            }
          }

          input:checked + .setup-wizard__switch-slider {
            background-color: $primary-color;
          }

          input:focus + .setup-wizard__switch-slider {
            box-shadow: 0 0 1px #2196F3;
          }

          input:checked + .setup-wizard__switch-slider:before {
            -webkit-transform: translateX(16px);
            -ms-transform: translateX(16px);
            transform: translateX(16px);
            @media (max-width: 768px) {
              -webkit-transform: translateX(12px);
              -ms-transform: translateX(12px);
              transform: translateX(12px);
            }

          }

          .setup-wizard__switch-round {
            border-radius: 34px;

            &:before {
              border-radius: 50%;
            }
          }

        }



      }

    }

    .setup-wizard__footer-buttons {
      padding-top: 30px;
      padding-bottom: 153px;
      @extend %button-container;

      .setup-wizard__button-left {
        @extend %common-button;
        color: $color-white;
        background-color: $primary-color;
      }
      .setup-wizard__button-right {
        @extend %common-button;
        color: $primary-color;
        border: 1px solid #ebe4ff;
        background: $color-white;
      }
    }

    // industry section container
    .setup-wizard__industry-section-container{
      @extend %section-container;

      .setup-wizard__industry-text-content {
        margin-bottom: 35px;
      }

      .setup-wizard__popular-industries {
        max-width: 820px;
        margin: 0 auto;

        .setup-wizard__popular-industry-list{
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 18px;
          margin-top: 28px;

          .setup-wizard__single-industry{
            border: 1.5px solid #EAE4FF;
            border-radius: 10px;
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 40px;
            cursor: pointer;
            transition: all 0.3s;

            @media (max-width: 768px) {
              padding: 18px 5px;
              gap: 20px;
            }

            &:hover{
              border: 1.5px solid #3F04FE;
              box-shadow: 0px 9px 14px rgba(184, 196, 217, 0.5);
            }

            .setup-wizard__single-industry-title{
              color: #363B4E;
              font-size: 14px;
              text-align: center;
              font-style: normal;
              font-weight: 500;
              line-height: 1.14;
              margin: 0;
              font-family: $primary-font;

              @media (max-width: 768px) {
                font-size: 13px;
              }
            }

            &:hover .setup-wizard__single-industry-image path {
              fill: #3F04FE;
            }

            &.active{
              border: 1.5px solid #3F04FE;
              box-shadow: 0px 9px 14px rgba(184, 196, 217, 0.5);

              .setup-wizard__single-industry-image path{
                fill: #3F04FE;
              }
            }
          }

        }
      }
    }

    // general settings section
    .setup-wizard__settings-section-container{
      @extend %section-container;

      .setup-wizard__settings-text-content {
        margin-bottom: 20px;
      }

      // checkbox section
      .setup-wizard__settings-content{
        margin-top: 30px;
        max-width: 632px;
        margin-left: auto;
        margin-right: auto;

        .setup-wizard__settings-single-content {
          margin-bottom: 25px;
          position: relative;

          .setup-wizard__settings-single-content--pro-content{
            position: absolute;
            font-family: $primary-font;
            right: 0;
            top: -20px;
            display: block;
            border-radius: 9px 9px 9px 0px;
            background: $primary-color;
            font-size: 13px;
            color: #ffffff;
            font-weight: 600;
            padding: 5px 6px;
            text-transform: capitalize;
            z-index: 1;
            line-height: 0.8;

            @media (max-width: 768px) {
              top: -20px;
              font-size: 12px;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }

          input[type="checkbox"] {
            display: none;
          }

          input[type="checkbox"] + label {
            display: inline-block;
            text-align: start;
            font-size: 15px;
            font-weight: 400;
            font-family: $primary-font;
            color: $description-color;
            position: relative;
            cursor: pointer;
            line-height: 25px;
            padding: 17px 40px 17px 68px;
            width: 100%;
            background: #FAF9FF;
            border: 1px solid #EAE4FF;
            border-radius: 3px;
            transition: all 0.3s;

            @media (max-width: 768px) {
              font-size: 14px;
              padding: 15px 40px 15px 68px;
            }
          }

          input[type="checkbox"] + label:before {
            content: "";
            display: inline-block;
            width: 25px;
            height: 25px;
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #FFFFFF;
            border: 1px solid #D8CCFF;
            border-radius: 4px;

            @media (max-width: 768px) {
              width: 23px;
              height: 23px;
            }
          }

          input[type="checkbox"]:checked + label:before {
            content: "";
            background-color: #3f04fe;
            background-image: url('data:image/svg+xml;utf8,<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.625L4.375 10L13.375 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            border: none;
          }

          input[type="checkbox"] + label:hover {
            border-color: #3F04FE;
          }
        }


        .rex-wpvr-setup-wizard-legal-text {
          color: #6C798F;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 1.71;
          text-align: left;
          margin-top: 8px;
          font-family: 'Inter';


          & a {
            color: #3F04FE;
          }
        }
      }
    }

    // done section
    .setup-wizard__done-section-container{
      @extend %section-container;

      .setup-wizard__done-text-content{
        margin-bottom: 40px;
        @media (max-width: 768px) {
          margin-bottom: 30px;
        }
      }

      .setup-wizard__done-text-content--done-icon{
        display: flex;
        align-items: end;
        justify-content: center;
        gap: 30px;

        @media (max-width: 768px) {
          gap: 20px;
        }

      }

      .setup-wizard__testimonial{
        padding: 25px 30px 50px 30px;
        border: 1px solid #F5F2FF;
        border-radius: 10px;

        @media (max-width: 768px) {
          padding: 25px 30px 35px 30px;
        }
        .setup-wizard__testimonial-title{
          color: $heading-color;
          font-family: $primary-font;
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
          line-height: 34px;
          margin-bottom: 50px;

          @media (max-width: 768px) {
            font-size: 22px;
          }
        }
        .setup-wizard__testimonial-card{
          display: flex;
          align-items: start;
          justify-content: center;
          gap: 35px;
          .setup-wizard__testimonial-single-card{
            position: relative;
            border-radius: 5px;
            background: linear-gradient(115deg, #DDD3FF -22.47%, #F3EFFF 41.78%, #ECF7FF 100%);
            box-shadow: 0px 1px 1px 0px rgba(63, 4, 254, 0.15);
            padding: 30px;
            width: 100%;

            @media (max-width: 768px) {
              padding: 25px;
            }
            .setup-wizard__testimonial-text-content{
              color: $heading-color;
              font-family: $primary-font;
              font-size: 15px;
              font-style: italic;
              font-weight: 400;
              line-height: 26px;
            }
            .setup-wizard__testimonial-text-author{
              margin-top: 18px;
              color: $heading-color;
              font-family: $primary-font;
              font-size: 18px;
              font-style: normal;
              font-weight: 400;
              line-height: 26px;

              @media (max-width: 768px) {
                margin-top: 15px;
                font-size: 17px;
              }
            }
            .setup-wizard__testimonial-quote-icon{
              position: absolute;
              top: -65px;
              left: 0px;

            }
          }
        }
      }

    }

    //merchant auth and data
    .setup-wizard__merchant-auth-title-container {
      @extend .merchant-auth-container;
      background-color: #DEEEDE;
      border-radius: $border-radius $border-radius 0px 0px;
      box-shadow: 0px 1px 1px 0px rgba(26, 112, 26, 0.10);

      .setup-wizard__merchant-auth-title {
        text-align: left;
        font-size: 18px;
        color: #0E350E;
        font-weight: 600;
        padding: 12px 29px;
      }
    }

    .setup-wizard__merchant-auth-form-container {
      @extend .merchant-auth-container;
      border-radius: 0px 0px $border-radius $border-radius;
      background-color: #F5FAF5;

      .setup-wizard__merchant-auth-form-container-inner {
        padding: 15px 29px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 0px;

        .setup-wizard__merchant-auth-form-item {
          padding: 10px 0px 18px 0px;

          .setup-wizard__merchant-auth-form-item-label {
            text-align: left !important;
            font-size: 14px;
            font-weight: 500;
            color: #6E786E;
            padding-bottom: 7px;
          }


          .setup-wizard__merchant-auth-form-item-select {
            @extend .setup-wizard__input-shadow;
            background: #FFFFFF;
            border-radius: 3px;
            height: 46px;

            select {
              border: none;
              outline-color: #ffffff;
              height: 95%;
              width: 85%;
              margin: 0 auto;
              color: gray;
              background: transparent;
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              padding: 0px 0px;
              background-image: url("../icon/icon-svg/down_arrow.svg");
              background-repeat: no-repeat;
              background-position: right center;
            }

            select:focus {
              border: 0px solid #ffff;
              outline-color: #ffffff;
            }
          }

        }
      }
    }

    .setup-wizard__auth-buttons {
      padding: 20px 0 0 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .setup-wizard__auth-buttons-back {
        padding: 15px 33px;
        background: transparent;
        color: #A3B1A3;
        border: 1px solid #DEEEDE;
        border-radius: $border-radius;
        margin: 0 15px;
      }

      .setup-wizard__auth-buttons-progress {
        @extend .setup-wizard__button;
        padding: 13px 33px;
        margin: 0 15px;
        display: none;
      }

      .setup-wizard__auth-buttons {
        padding: 0;
        cursor: pointer;
        background: #EFF8EF;

        .setup-wizard__auth-button-logo {
          border: 1px solid #2BAF2B;
          border-radius: $border-radius 0px 0px $border-radius;
          padding: 8px 13px;
        }

        .setup-wizard__auth-button-text {
          border-top: 1px solid #2BAF2B;
          border-right: 1px solid #2BAF2B;
          border-bottom: 1px solid #2BAF2B;
          border-radius: 0px $border-radius $border-radius 0px;
          padding: 11px 35px;
          color: #2BAF2B;
          font-weight: 500;
        }
      }
    }

    .setup-wizard__auth-success-text {
      font-size: 15px;
      font-weight: 500;
      color: #2BAF2B;
      text-align: center;
      display: none;
    }

    // necessary plugins
    .rex-wpvr-setup-plugins-wrapper{

      .rex-wpvr-setup-single-plugin{
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #F1EFF7;
        max-width: 390px;
        border-radius: 10px;
        padding: 26px 32px;
        position: relative;
        margin: auto;

        .rex-wpvr-setup-plugin-info{

          .rex-wpvr-setup-plugin-heading{
            margin: 0;
            text-align: start;
            font-family: "Inter";
            font-weight: 600;
            font-size: 14px;
            color: #0F2F72;
            line-height: 1.1;
          }
          .rex-wpvr-setup-plugin-subheading{
            margin: 0;
            text-align: start;
            font-family: "Roboto";
            font-weight: 400;
            font-size: 14px;
            color: #6C798F;
            line-height: 1.4;
            margin-top: 6px;
          }
        }

        .rex-wpvr-required-tag,
        .rex-wpvr-installed-tag{
          position: absolute;
          top: 10px;
          right: 10px;
          color: #00B4FF;
          text-align: center;
          font-size: 13px;
          font-style: normal;
          font-weight: 500;
          line-height: 1.53;
          letter-spacing: 0.39px;
          text-transform: uppercase;
          border-radius: 5px;
          border: 1px solid #F1EFF7;
          background: #FFF;
          padding: 4px 8px;
          font-family: 'Roboto';
        }
      }
    }
  }

  .setup-wizard__pregress-step {
    cursor: pointer;
  }
}