.wpei-activation-section {
  display: grid;
  gap: 20px;
  margin-top: 40px;

  .activation-cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 40px;
    box-shadow: $defaultBoxShadow;
    border-radius: 13px;

    .wpei-form {
      table {
        button#add_shop_btn {
          padding: 6px;
          min-width: 215px;
          font-size: 1.15em;
          i.spin {
            font-size: 2em;
            vertical-align: middle;
            -webkit-animation: spin 1.5s linear infinite;
            -moz-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
            transform: scale(-1);
          }
        }
      }
    }

    .wpei-notifs {
      .alert {
        font-size: 1.5em;
        margin: 15px auto;

        .alert-success,
        .alert-error {
          border-radius: 6px;
          padding: 5px 15px;

          p {
            font-size: 0.75em;
            line-height: 2.25;

            i {
              vertical-align: middle;
              font-size: 2em;
            }
          }
        }

        .alert-success {
          background-color: $successBackColor;
          border-color: $successBorderColor;
          color: $darkGreen;
        }

        .alert-error {
          background-color: $errorBackColor;
          border-color: $errorBorderColor;
          color: $errorColor;
        }

        .alert-secondary {
          color: #41464b;
          background-color: #e2e3e5;
          border-color: #d3d6d8;
        }

        .alert-secondary a {
          color: #41464b;
        }

        .alert-heading {
          margin: 0;
        }
      }
    }
  }

  .shop-ranking-cont {
    padding: 25px;
    border-radius: 13px;
    max-width: 95%;
    box-shadow: $defaultBoxShadow;
    h2,
    p {
      margin: 0;
    }

    &__header {
      text-align: center;
      padding: 8px;

      .star-rating::after {
        content: "★★★★★";
        --rating-percent: calc(attr(data-rating type(<number>), 0) / 5 * 100%);
        background: linear-gradient(
          90deg,
          #007cba var(--rating-percent),
          #b2b2b2 var(--rating-percent)
        );
        color: transparent;
        background-clip: text;
        font-size: 2em;
      }
    }

    &__content {
      li {
        margin-bottom: 15px;
        font-size: 1.15em;
      }
      .checked,
      .not-checked {
        &::before {
          font-family: "Dashicons";
          margin-right: 5px;
          font-size: 2em;
          vertical-align: middle;
        }
      }

      .checked::before {
        content: "\f147";
        color: $lightBlue;
      }
      .not-checked::before {
        content: "\f158";
        color: $errorColor;
      }

      /* progress bar styles */
      .admin-progress-wrapper {
        padding: 20px 50px;
      }

      .admin-progress {
        width: 100%;
        height: 24px;
        background-color: #e0e0e0;
        border-radius: 50px;
        overflow: hidden;
      }

      .admin-progress .admin-progress-bar {
        height: 100%;
        color: #fff;
        text-align: center;
        line-height: 24px; // vertically centre text
        font-size: 0.85rem;
        transition: width 0.3s ease;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .wpei-activation-section {
    grid-template-columns: repeat(1, 1fr) !important;

    > *:nth-child(odd) {
      order: 2; /* move odd items down */
    }
    > *:nth-child(even) {
      order: 1; /* move even items up */
    }

    .activation-cont {
      padding: 8px;

      .wpei-notifs {
        .alert {
          text-align: center;
        }
      }
    }
  }
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

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

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