// Define styles for the container
.wp-cart-lift-setup-wizard__container {
  
    // Define variables for colors and dimensions if needed
    $primary-color: #6E42D3;
    $secondary-color: #00B4FF;
    $button-bg-right: #F9F6FF;
    $heading-color: #393546;
    $description-color: #5F5B6B;
    $color-white: #ffffff;
    $banner-height: 812px;
    $border-radius: 10px;
    $step_color_primary: #6E42D3;
    font-family: "Roboto", sans-serif;
    
    // button container common class
    %button-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
    }

    %section-container {
      margin-top: 40px;
      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-size: 18px;
      font-style: normal;
      font-weight: 500;
      padding: 17px 22px;

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

    }
  
    margin: 0 auto;
    padding: 0 15px;
    max-width: 930px;
  
    // heading common class
    .setup-wizard__heading-one {
      color: $heading-color;
      font-size: 32px;
      font-weight: 400;
      text-align: center;
      line-height: 1;
      margin: 0;
  
      .setup-wizard__heading-one-highlight {
        font-weight: 600;
      }
  
      @media (max-width: 1280px) {
        font-size: 30px;
      }
  
      @media (max-width: 768px) {
        font-size: 28px;
      }
    }
  
    // Define class name for heading
    .setup-wizard__main-heading {
      font-size: 32px;
      font-weight: 500;
      margin: 0;
      color: $heading-color;
      padding-bottom: 30px;
  
      .setup-wizard__main-heading-highlight {
        font-weight: 700;
      }
  
      @media (max-width: 1280px) {
        font-size: 28px;
        padding-bottom: 20px;
      }
    }
  
    // description common class
    .setup-wizard__description {
      font-size: 16px;
      text-align: center;
      line-height: 1.625;
      max-width: 655px;
      margin: 0 auto;
      font-weight: 400;
      font-style: normal;
      margin-top: 20px;
      color: $description-color;
  
      @media (max-width: 768px) {
        font-size: 15px;
      }
  
    }
  
    .setup-wizard__button {
      font-weight: 500;
      font-size: 18px;
      border: none;
      background-color: $primary-color;
      color: #fff;
      border-radius: $border-radius;
      box-shadow: 0px 9px 14px 0px rgba(176, 189, 212, 0.5) !important;
      cursor: pointer;
    }
  
    .setup-wizard__checkbox-container {
        input[type="checkbox"] {
          display: none;
        }
  
        input[type="checkbox"]:checked {
          opacity: 0.5;
        }
      
        input[type="checkbox"] + label:before {
          content: "";
          display: inline-block;
          width: 25px;
          height: 25px;
          position: absolute;
          left: 35px;
          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:$primary-color;
          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;
          opacity: 0.5;
        }
  
        input[type="checkbox"] + label:hover {
          border-color: #3F04FE;
        }
    }
  
    .setup-wizard__logo {
      padding: 30px 0;
      text-align: center;
      margin: auto;
      display: block;
      max-width: 100%;
    }
  
    // Styles for the progress bar container
    .setup-wizard__pregress-bar {
      width: 100%;
      text-align: center;
      display: flex;
      border: 1px solid #EBEFF5;
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
  
      // Styles for each step in the progress bar
      .setup-wizard__pregress-step {
        flex-grow: 1;
        position: relative;
        padding: 15px 16px 15px 50px;
        background-color: transparent;
        cursor: pointer;
  
        &:first-child {
          padding: 15px 16px;
        }
  
        // Decorative triangle before each step
        &:before {
          content: "";
          position: absolute;
          z-index: 2;
          top: 0;
          bottom: 0;
          right: -18px;
          margin: auto 0;
          width: 40px;
          height: 43px;
          background: #fff;
          transform: rotate(-43deg);
          clip-path: polygon(100% 2%, 2% 100%, 100% 100%);
          border-radius: 0 0 10px 0;
          border-right: 2px solid #EBEFF5;
          border-bottom: 2px solid #EBEFF5;
        }
  
        // Styles for step labels
        p {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          gap: 9px;
          margin: 0;
          color: $description-color;
  
          // Styles for step indicators
          span {
            border: 1px solid $step_color_primary;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
  
      // Styles for steps that have not been visited
      .step-not-visited {
        p {
          color: rgba(83, 89, 99, 1);
  
          span {
            border: 1px solid rgba(229, 232, 243, 1);
            color: rgba(36, 34, 60, 0.2);
          }
        }
      }
  
      // Styles for the active step
      .step-active {
        background: $step_color_primary;
        color: #ffffff;
  
        &:before {
          background: $step_color_primary;
          border-right: none;
          border-bottom: none;
        }
  
        p {
          font-weight: 600;
          color: #fff;
  
          span {
            border: 1px solid #ffffff;
          }
        }
      }
  
      // Styles for steps that have been visited
      .step-visited {
        background: #FFFFFF;
  
        p {
          font-weight: 600;
          color: $description-color;
  
          span {
            display: flex;
            align-items: center;
            justify-content: center;
  
            // SVG icon styles inside step indicators
            svg {
              width: 9px;
              height: 9px;
            }
  
            svg path {
              fill: $step_color_primary;
            }
  
          }
        }
      }
    }
  
    // Define styles for the inner container
    .setup-wizard__inner-container {

      * {
        box-sizing: border-box;
      }
  
      // Define styles for the main content
      .setup-wizard__content {
        // email subscribe
        .rex-wpfm-setup-wizard-subscribe-form {
          margin-top: 30px;
          max-width: 560px;
          margin-left: auto;
          margin-right: auto;
  
          .rex-wpfm-setup-form-group{
            margin-bottom: 16px;
  
            .rex-wpfm-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 #EEF0F3;
              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: #4A90E2;
                outline: none;
                box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
              }
            }
          }
  
          .rex-wpfm-setup-wizard-legal-text {
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.71;
            text-align: left;
            margin-top: 8px;
            color: #6C798F;
  
            & a {
              color: #216DF0;
            }
          }
        }
  
        // email subscribe end
  
        h2 {
          @extend .setup-wizard__main-heading;
        }
  
        p {
          @extend .setup-wizard__description;
        }
  
        // Define class name for welcome page banner image
        .setup-wizard__banner-image {
          padding: 20px 0px 15px 0px;
          max-height: 480px;
          max-width: 962px;
          border-radius: $border-radius;
          display: block;
          margin: 0 auto;
  
          @media (max-width: 1280px) {
            padding: 20px 20px 15px 20px;
          }
  
          & img{
            max-width: 962px;
            width: 100%;
          }
        }
  
        // Define class name for button
        .setup-wizard__main-buttons {
          padding: 30px 0px 0px 0px;
  
          .setup-wizard__start-button {
            @extend .setup-wizard__button;
            padding: 13px 26px;
          }
  
          // Define class name for link
          .skip-link {
            color: rgba($secondary-color, 0.8);
            font-size: 15px;
            font-weight: 500;
            font-family: 'Roboto';
            text-decoration: underline;
            margin-left: 20px;
  
            &:hover {
              color: rgba($secondary-color, 0.7);
            }
          }
  
          @media (max-width: 1100px) {
            padding: 40px 0px 40px 0px;
          }
        }
  
        .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;
  
            svg {
              margin-right: 5px
            }
          }
  
          .setup-wizard__done-buttons-progress {
            @extend .setup-wizard__button;
            padding: 13px 33px;
            margin: 0 15px;
          }
        }
  
        .setup-wizard__select-marchent-item {
          position: relative;
          border: 1.5px solid #DEEEDE;
          border-radius: 6px;
  
          &__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;
              // }
            }
          }
        }
  
      }
  
      .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-wpfm-setup-plugins-wrapper {
        display: flex;
        gap: 20px;
        max-width: 740px;
        margin: 0 auto;

        .rex-wpfm-setup-single-plugin {
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid #F1EFF7;
          max-width: 360px;
          border-radius: 10px;
          padding: 30px 32px 30px 50px;
          position: relative;
          width: 100%;  

          .rex-wpfm-setup-plugin-info {
  
            .rex-wpfm-setup-plugin-heading {
              font-weight: 600;
              font-size: 14px;
              color: $heading-color;
              line-height: 1.1;
              margin: 0;
              text-align: start;

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

            }
  
            .rex-wpfm-setup-plugin-subheading {
              margin: 0;
              text-align: start;
              font-weight: 400;
              font-size: 14px;
              color: $description-color;
              line-height: 1.4;
              margin-top: 4px;
            }
          }
  
          .rex-wpfm-required-tag,
          .rex-wpfm-installed-tag {
            position: absolute;
            top: 8px;
            right: 8px;
            color: #EE8134;
            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: 1px 8px;

            @media(max-width: 768px) {
              top: 8px;
              right: 8px;
              font-size: 12px;
            }
            
          }
  
        }
      }
     
      // welcome section container
      .setup-wizard__welcome-section-container {
        @extend %section-container;
  
        .setup-wizard__welcome-text-content{
          margin-bottom: 25px;
        }
        
        h2 {
          @extend .setup-wizard__heading-one;
        }
  
        p {
          @extend .setup-wizard__description;
        }
  
        // 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: 1240px) {
              width: 750px;
            }
            @media (max-width: 1024px) {
              height: 400px;
              width: 650px;
            }
          }
  
          .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 #EFE8FF;
          background: $button-bg-right;
        }
      }
  
        //done tab 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;
            }
          }
  
        }
  
        // 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;
  
            }
          }
        }
  
      }
  
      // 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: 30px;

            .setup-wizard__feature-image {
              img {
                @media (max-width: 768px) {
                  max-width: 30px;
                }
              }
            }

            .setup-wizard__feature-text-content {
              .setup-wizard__feature-heading {
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                color: $heading-color;
                line-height: 1.1;
                margin: 0;
                text-align: start;
  
                @media (max-width: 768px) {
                  font-size: 17px;
                }
              }

              .setup-wizard__feature-description {
                color: $description-color;
                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;
            font-weight: 700; 
            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;
            border: 1px solid #EFE8FF;
            background: #F9F6FF;
  
            @media (max-width: 768px) {
              font-size: 15px;
            }
          }
        }
    
        .setup-wizard__pro-features-section-container {
            background: linear-gradient(101deg, #E5DAFF 0.77%, #F5F1FF 20.23%, #FFF9F4 79.76%, #FFF0E6 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 {
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 42px;
                color: #0E003C;
  
                @media (max-width: 768px) {
                  font-size: 22px;
                }
      
                .setup-wizard__pro-feature-heading-highlight {
                  color:  $primary-color;
                  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: 76px;
              row-gap: 25px;
  
              @media (max-width: 768px) {
                column-gap: 19px;
                row-gap: 20px;
              }
    
              .setup-wizard__single-pro-feature{
                display: flex;
                align-items: center;
                justify-content: start;
                gap: 17px;
    
                .setup-wizard__single-pro-feature-title {
                  color: #0C2044;
                  font-size: 18px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 27px;
                  margin: 0;
  
                @media (max-width: 768px) {
                  font-size: 17px;
                }
                }
              }
            }
          }

          .setup-wizard__pro-features-price {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-size: 15px;
            padding: 39px 40px 28px;
            border-top: 1px solid #FFF;
            color: #73707D;
            text-align: center;

            @media (max-width: 768px) {
              padding: 29px 40px 18px;
            }
            
            .setup-wizard__discount-price-label {
              position: relative;
              font-size: 20px;
              margin: 0;
              &::before {
                content: var(--discount-content-value, "Save 30%");
                position: absolute;
                background: #EF7E32;
                border-radius: 16px 16px 16px 0;
                font-weight: 600;
                font-size: 12px;
                line-height: 13px;
                text-align: center;
                color: #fff;
                padding: 7px 11px;
                top: -26px;
                left: 74%;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%);
                min-width: 82px;
              }
            }

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

            }

            .setup-wizard__pro-features-price-amount {
              font-size: 24px;
              font-style: normal;
              font-weight: 700;
              line-height: 28px;
              color: #3F04FE;
  
              @media (max-width: 768px) {
                font-size: 22px;
              }
            }
  
            .setup-wizard__pro-features-price-tag {
              position: absolute;
              font-family: "Urbanist", sans-serif;
              right: 0;
              top: -21px;
              display: block;
              border-radius: 16px 16px 16px 0px;  
              background: #3f04fe;
              font-size: 13px;
              color: #ffffff;
              font-weight: 600;
              padding: 8px 9px;
              text-transform: capitalize;
              z-index: 1;
              line-height: 0.8;
              transform: translate(-50%, -50%);
              top: 10px;
              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: 500; 
              font-size: 16px; 
              line-height: 1.6;
              text-transform: capitalize;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 15px;
              color: $color-white;
            }
          }

        }
      }
  
      .setup-wizard__footer-buttons {
        padding-top: 30px;
        padding-bottom: 126px;
        @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 #fff;
          background: #fff;
          box-shadow: 0px 1px 1px 0px rgba(33, 109, 240, 0.10);
        }
  
      }
  
      // 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 {
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: 34px;
            color: $heading-color;
            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, #E2D6FF -22.47%, #F9F6FF 41.78%, #FFF6F0 100%);
              box-shadow: 0px 1px 1px 0px rgba(110, 66, 211, 0.15);
              padding: 30px;
              width: 100%;
  
              @media (max-width: 768px) {
                padding: 25px;
              }

              .setup-wizard__testimonial-text-content {
                font-size: 15px;
                font-style: italic;
                font-weight: 500;
                line-height: 1.5;
                color: $heading-color;
              }

              .setup-wizard__testimonial-text-author {
                margin-top: 18px;
                color: #0E003C;
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px;
  
                @media (max-width: 768px) {
                  margin-top: 15px;
                  font-size: 17px;
                }
              }

              .setup-wizard__testimonial-quote-icon {
                position: absolute;
                top: -65px;
                left: 0px;

                svg {
                  filter: drop-shadow(0px -10px 30px rgba(33, 109, 240, 0.12)) drop-shadow(0px 1px 1px rgba(33, 109, 240, 0.10));
                }
                
              }
            }
          }
        }
  
        .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 {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 2.1;
            color: $description-color;
  
            @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: 18px;
            }

            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__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 {
        display: none;
        font-size: 15px;
        font-weight: 500;
        color: #2BAF2B;
        text-align: center;
      }

      // 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: 30px auto 0;
          max-width: 632px;

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

          .setup-wizard__settings-single-content--pro-content {
            position: absolute;
            right: 0;
            top: -21px;
            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: 'Inter', sans-serif;
                color: #626A70;
                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;
              }
          }
          }
      }
  
    }
}