.klaviyo-subscription-form__wrapper {
  background-color: var(--background-color);
  border-radius: 50px 50px 0 0;
  position: relative;

  & .klaviyo-subscription-form__decor {
    display: block;
    max-width: var(--decor-size);
    position: absolute;
    top: var(--decor-top);
    left: var(--decor-left);
    transform: translate(-50%, -50%);

    &.klaviyo-subscription-form--mobile {
      display: none;
    }

    & .klaviyo-subscription-form__decor-image {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    @media screen and (max-width: 749px) {
      max-width: var(--decor-size-mobile);
      top: var(--decor-top-mobile);
      left: var(--decor-left-mobile);

      &.klaviyo-subscription-form--mobile {
        display: block;
      }

      &.klaviyo-subscription-form--desktop {
        display: none;
      }
    }
  }

  & .klaviyo-subscription-form__inner-wrapper {
    padding-top: var(--padding-top-desktop);
    padding-bottom: var(--padding-bottom-desktop);
    border-radius: 50px 50px 0 0;

    & .klaviyo-subscription-form__form-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;

      width: fit-content;
      margin: 0 auto 40px;
      padding: 8px 18px;

      background: var(--logo-background-color, #D2E59A);
      border-radius: 13px;

      transform: rotate(-2deg);

      & .form-logos__logos-title {
        color: var(--logo-accent-color, #2A783A);
        
        font-family: Poppins;
        font-size: 21px;
        font-style: normal;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: -0.625px;
        text-transform: uppercase;
      }
      
      & .form-logos__logo {
        display: flex;
        justify-content: center;
        align-items: center;

        max-height: 32px;

        & .logo__image {
          width: auto;
          height: auto;
          object-fit: contain;

          &.logo--mobile {
            display: none;
          }
        }
      }
    }

    & .klaviyo-subscription-form__content-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 80px;

      & .klaviyo-subscription-form__content {
        flex: 1 1 50%;

        & .klaviyo-subscription-form__heading {
          color: #2C2926;
          font-family: Poppins;
          font-size: 48px;
          font-style: normal;
          font-weight: 600;
          line-height: 110%;
          letter-spacing: -2px;

          margin: 0 0 25px;
        }

        & .klaviyo-subscription-form__description {
          color: #4B4744;
          font-family: Poppins;
          font-size: 18px;
          font-style: normal;
          font-weight: 500;
          line-height: 160%;
        }

        & .klaviyo-subscription-form__steps {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          margin-top: 20px;

          & .klaviyo-subscription-form__step {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 15px;

            position: relative;
            padding-bottom: 25px;

            &:not(:last-child)::after {
              content: "";
              display: block;
              width: 2px;
              height: 100%;

              border: 1px dashed #7B6B5D;

              position: absolute;
              top: 0;
              left: 40px;
            }

            & .step__image-wrapper {
              display: flex;
              justify-content: center;
              align-items: center;

              min-width: 80px;
              width: 80px;
              height: 80px;
              position: relative;
              z-index: 1;

              background: var(--step-image-background-color, #FFF2CA);
              border-radius: 50%;

              & .step__image {
                width: 40px;
                height: auto;
                object-fit: contain;
              }

              & .step__number {
                display: flex;
                justify-content: center;
                align-items: center;

                width: 30px;
                height: 30px;

                position: absolute;
                top: 0;
                right: 0;

                background: var(--step-number-background-color, #584576);
                border-radius: 50%;

                color: var(--step-number-color, #FFF);
                text-align: center;
                font-variant-numeric: lining-nums proportional-nums;
                font-family: Poppins;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 250%;
              }
            }

            & .step__content {
              & .step__title {
                color: #2C2926;
                
                font-family: Poppins;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 130%;

                margin: 0 0 10px;
              }

              & .step__description {
                color: #2C2926;
                
                font-family: Poppins;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 160%;

                & p {
                  &:first-child {
                    margin-top: 0;
                  }

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

      & .klaviyo-subscription-form__form {
        flex: 1 1 50%;
        width: 100%;

        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: #FFF;
        box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.04);
        
        padding: 40px;

        & klaviyo-step-form {
          display: grid;
          grid-template-rows: 0fr;
          margin-bottom: 0;
          opacity: 0;
          pointer-events: none;
          transform: translateY(-8px);
          transition:
            opacity 220ms ease,
            transform 260ms ease;

          &[data-open="true"] {
            grid-template-rows: 1fr;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
          }

          & .klaviyo-step-form__inner {
            min-height: 0;
            position: relative;

            & .klaviyo-step-form__header {
              margin-bottom: 20px;

              & .step__title {
                color: #2C2926;
                text-align: center;

                font-family: Poppins;
                font-size: 30px;
                font-style: normal;
                font-weight: 600;
                line-height: 130%;
                letter-spacing: -0.8px;

                margin: 0 0 10px;
              }

              & .step__description {
                color: #6E6A67;
                text-align: center;
                
                font-family: Poppins;
                font-size: 15px;
                font-style: normal;
                font-weight: 500;
                line-height: 160%;

                & p {
                  &:first-child {
                    margin-top: 0;
                  }

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

            & .klaviyo-step-form__close {
              appearance: none;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 38px;
              height: 38px;
              border: 0;
              border-radius: 50%;
              background-color: #fff;
              color: #100f0f;
              cursor: pointer;
              padding: 0;
              transition: opacity 180ms ease;

              position: absolute;
              top: -38px;
              right: -20px;

              &:hover {
                opacity: 0.82;
              }

              & .icon {
                width: 14px;
                height: 14px;
              }
            }

            & .klaviyo-step-form__form {
              display: grid;
              grid-template-columns: 1fr;
              gap: 10px;

              & .klaviyo-step-form__field {
                display: flex;
                flex-direction: column;
                gap: 6px;
                position: relative;

                &::after {
                  position: absolute;
                  right: 14px;
                  bottom: 17px;
                  display: none;
                  align-items: center;
                  justify-content: center;
                  width: 22px;
                  height: 22px;
                  border-radius: 50%;
                  font-size: 18px;
                  font-weight: 700;
                  line-height: 1;
                  pointer-events: none;
                }

                &.is-valid::after {
                  content: "✓";
                  display: flex;
                  color: #1f6f35;
                }

                &.is-invalid::after {
                  content: "×";
                  display: flex;
                  color: #b3261e;
                }

                & .klaviyo-step-form__input {
                  width: 100%;
                  min-height: 56px;
                  border: 1px solid rgba(0, 0, 0, 0.16);
                  border-radius: 10px;
                  background-color: #fff;
                  padding: 0 44px 0 14px;

                  color: #2C2926;
                  font-family: Poppins;
                  font-size: 15px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 24px;

                  &:focus {
                    border-color: var(--accent-color);
                    outline: 2px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
                    outline-offset: 1px;
                  }

                  &.is-invalid {
                    border-color: #b3261e;
                  }

                  &.is-valid {
                    border-color: #1f6f35;
                  }
                }
              }

              & .klaviyo-step-form__submit {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                gap: 10px;

                appearance: none;
                border: 1px solid var(--accent-color);
                border-radius: 8px;
                background-color: var(--accent-color);
                color: var(--accent-text-color);
                cursor: pointer;
                
                text-align: center;
                font-family: Poppins;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                letter-spacing: -0.3px;

                min-height: 56px;
                padding: 0 25px;
                margin-top: 10px;
                transition: .18s ease;

                &:hover {
                  background-color: var(--accent-text-color);
                  color: var(--accent-color);
                }

                &:disabled {
                  cursor: default;
                  opacity: 0.65;
                }
              }
            }

            & .klaviyo-step-form__notification {
              margin-top: 10px;
              border-radius: 8px;
              font-family: Poppins;
              font-size: 14px;
              font-weight: 500;
              line-height: 140%;
              padding: 10px 12px;

              &[data-status="success"] {
                background-color: #e7f4ea;
                color: #1f6f35;
              }

              &[data-status="error"] {
                background-color: #fce8e6;
                color: #b3261e;
              }
            }

            & .klaviyo-step-form__privacy-badge {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 5px;

              margin-top: 16px;

              & .privacy-badge__text {
                color: #999;
                text-align: center;
                font-family: Poppins;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
              }

              & .privacy-badge__icon {
                width: 20px;
                height: 20px;
                object-fit: contain;
              }
            }
          }
        }

        & reverse-counter {
          margin-top: 20px;

          display: flex;
          gap: 16px;
          align-items: center;
          width: auto;
          justify-content: center;
          padding-left: 30px;
          padding-right: 20px;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;

          &.bf-back__counter--initialized {
            opacity: 1;
          }

          & .reverse-counter__time-block {
            min-width: 40px;
            background: #4B4744;
            padding: 7px;
            border-radius: 5px;
            color: #FFF;
            font-family: Poppins-Semi;
            font-size: 19px;
            font-style: normal;
            font-weight: 700;
            line-height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            &.separator:after {
              content: ":";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: -10px;
              color: #4B4744;
              font-family: Poppins;
              font-size: 19px;
              font-style: normal;
              font-weight: 700;
              line-height: normal;
            }

            & .time-block__unit {
              color: #999999;
              font-family: Poppins;
              font-size: 8px;
              font-style: normal;
              font-weight: 700;
              line-height: 100%;
            }
          }

          .reverse-counter__time-text {
            & p {
              color: #4B4744;
              font-family: Poppins;
              font-size: 15px;
              font-style: normal;
              font-weight: 600;
              line-height: 130%;
            }
            
            &.time-text--mobile {
              display: none;
            }
          }

          @media screen and (max-width: 749px) {
            flex-wrap: wrap;
            justify-content: center;
            width: 100%;

            &.bf-back__counter--initialized {
              opacity: 1;
            }

            .reverse-counter__time-text {
              width: 100%;
              text-align: center;

              &.time-text--mobile {
                display: block;
              }

              &:not(.time-text--mobile) {
                display: none;
              }
            }
          }

          &[data-style-type="alternative"] {
            padding: 0;

            & .reverse-counter__time-block {
              background: #2C2926;
              flex-direction: row;
              align-items: center;
              gap: 2px;
              min-height: 40px;

              &.separator::after {
                font-size: 20px;
                color: #2C2926 !important;
              }

              & .time-block__value {
                color: #FFF;
                font-family: Poppins;
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 100%;
              }

              & .time-block__unit {
                color: #CCC;
                font-family: Poppins;
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 100%;
                text-transform: lowercase;
              }
            }

            & .reverse-counter__time-text {
              order: -1;
              margin: 0;

              p {
                font-family: Poppins;
                font-size: 24px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;
                text-transform: uppercase;
                margin: 0;
              }
            }

            @media screen and (max-width: 767px) {
              gap: 6px 12px;

              & .reverse-counter__time-text p {
                margin-right: 0;
                font-size: 20px;
              }

              & .reverse-counter__time-block {
                min-width: 26px;
                min-height: 32px;
                padding: 4px;

                &.separator::after {
                  color: #fff;
                  right: -8px;
                }

                & .time-block__value {
                  font-size: 16px;
                }

                & .time-block__unit {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }

    & .klaviyo-subscription-form__policy-text {
      margin-top: 40px;

      color: #6E6A67;
      text-align: center;
      font-family: Poppins;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;

      & a {
        color: #584576;
      }
    }
  }

  @media screen and (max-width: 749px) {
    border-radius: 20px 20px 0 0;

    & .klaviyo-subscription-form__inner-wrapper {
      padding-top: var(--padding-top-mobile);
      padding-bottom: var(--padding-bottom-mobile);

      & .klaviyo-subscription-form__form-logos {
        gap: 8px;
        margin: 0 auto 25px;
        padding: 5px 12px;

        border-radius: 8px;

        & .form-logos__logos-title {
          font-size: 13px;
        }
        
        & .form-logos__logo {
          max-height: 20px;

          & .logo__image {
            &.logo--mobile {
              display: block;
            }

            &.logo--desktop {
              display: none;
            }
          }
        }
      }

      & .klaviyo-subscription-form__content-wrapper {
        flex-direction: column;
        gap: 0;

        & .klaviyo-subscription-form__content {
          flex: 1 1 100%;

          & .klaviyo-subscription-form__heading {
            font-size: 30px;
            text-align: center;

            margin: 0 0 15px;
          }

          & .klaviyo-subscription-form__description {
            font-size: 16px;
            text-align: center;
          }

          & .klaviyo-subscription-form__steps {
            margin-top: 15px;

            & .klaviyo-subscription-form__step {
              &:not(:last-child)::after {
                left: 35px;
              }

              & .step__image-wrapper {
                min-width: 70px;
                width: 70px;
                height: 70px;

                & .step__image {
                  width: 35px;
                }

                & .step__number {
                  width: 27px;
                  height: 27px;

                  font-size: 14px;
                }
              }

              & .step__content {
                & .step__title {
                  font-size: 17px;
                }

                & .step__description {
                  font-size: 13px;
                }
              }
            }
          }
        }

        & .klaviyo-subscription-form__form {
          flex: 1 1 100%;

          border-radius: 16px;
          border: 1px solid rgba(0, 0, 0, 0.07);
          background: #FFF;
          box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.04);
          
          padding: 30px 20px;

          & klaviyo-step-form {
            & .klaviyo-step-form__inner {
              & .klaviyo-step-form__header {
                margin-bottom: 15px;

                & .step__title {
                  font-size: 22px;

                  margin: 0 0 8px;
                }

                & .step__description {
                  font-size: 14px;
                }
              }

              & .klaviyo-step-form__form {
                & .klaviyo-step-form__submit {
                  font-size: 17px;

                  padding: 0 5px;
                }
              }

              & .klaviyo-step-form__notification {
                font-size: 12px;
              }

              & .klaviyo-step-form__privacy-badge {
                margin-top: 12px;

                & .privacy-badge__text {
                  font-size: 13px;
                }

                & .privacy-badge__icon {
                  display: flex;
                  width: 16px;
                  height: 16px;

                  & svg {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                  }
                }
              }
            }
          }
        }
      }

      & .klaviyo-subscription-form__policy-text {
        margin-top: 25px;
      }
    }
  }
}