@use "../../../../styles/abstracts/variables" as *;
@use "../../../../styles/abstracts/mixins" as *;

.upgrade {
  @include pageBase;

  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 140, 66, 0.05),
      transparent 35%
    ),
    #101012;

  &__overview {
    margin-bottom: 2rem;

    padding: 1.5rem 1.75rem;

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,.01)
      );

    border: 1px solid rgba(
      255,
      255,
      255,
      .06
    );

    display: flex;
    justify-content: space-between;
    align-items: center;

    &::before {
      content: "";

      position: absolute;

      inset: 0;

      background:
        radial-gradient(
          circle at top right,
          rgba(247,147,24,.08),
          transparent 45%
        );

      pointer-events: none;
    }

    @media(max-width:1000px){
      padding: 1.25rem;

      flex-direction: column;

      align-items: flex-start;

      gap: 1rem;
    }

    &__left {
      position: relative;
      z-index: 2;

      span {
        display: inline-flex;

        padding: .45rem .8rem;

        border-radius: 999px;

        background:
          rgba(
            247,
            147,
            24,
            .08
          );

        color: $col-orange;

        font-size: .7rem;

        font-weight: 600;

        letter-spacing: .08em;

        margin-bottom: .85rem;
      }

      h2 {
        color: white;

        font-size: 1.2rem;

        font-weight: 600;

        // margin-bottom: .6rem;
      }

      p {
        max-width: 700px;

        color:
          rgba(
            255,
            255,
            255,
            .65
          );

        font-size: .85rem;

        line-height: 1.9;
      }
    }

    &__badge {
      padding: .85rem 1rem;

      border-radius: 14px;

      background:
        rgba(
          247,
          147,
          24,
          .08
        );

      border: 1px solid
        rgba(
          247,
          147,
          24,
          .15
        );

      color: $col-orange;

      font-size: .8rem;

      font-weight: 600;
    }
  }

  &__plans {
    display: flex;

    gap: 24px;

    overflow-x: auto;

    padding-bottom: .5rem;

    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

      overflow: visible;
    }
  }
}

/* ===========================
   PREMIUM SKELETON
=========================== */

.plan-card-skeleton {
  flex: 0 0 330px;

  min-width: 330px;

  height: 560px;

  border-radius: 24px;

  border: 1px solid
    rgba(
      255,
      255,
      255,
      .05
    );

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.01)
    );

  padding: 1.6rem;

  position: relative;

  overflow: hidden;

  @media(max-width:1000px){
    min-width: 100%;
    width: 100%;
    height: 500px;
  }

  &::before {
    content: "";

    position: absolute;

    top: 0;
    left: -200px;

    width: 200px;
    height: 100%;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.06),
        transparent
      );

    animation:
      shimmer 2s infinite;
  }

  &__badge {
    width: 90px;
    height: 24px;

    border-radius: 999px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );

    margin-left: auto;
  }

  &__header {
    width: 55%;
    height: 24px;

    margin-top: 2rem;

    border-radius: 8px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );
  }

  &__text {
    width: 90%;
    height: 14px;

    margin-top: 1rem;

    border-radius: 6px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );
  }

  &__price {
    width: 45%;
    height: 42px;

    margin-top: 2rem;

    border-radius: 10px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );
  }

  &__feature {
    width: 90%;
    height: 14px;

    margin-top: 1rem;

    border-radius: 6px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );
  }

  &__button {
    position: absolute;

    bottom: 1.6rem;

    left: 1.6rem;
    right: 1.6rem;

    height: 50px;

    border-radius: 14px;

    background:
      rgba(
        255,
        255,
        255,
        .05
      );
  }
}

@keyframes shimmer {
  from {
    transform:
      translateX(-250px);
  }

  to {
    transform:
      translateX(800px);
  }
}