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

.plans__categories {
  background: #111114;

  border: 1px solid rgba(255, 255, 255, 0.05);

  border-radius: 18px;

  padding: 1.75rem;

  overflow: hidden;

  @media only screen and (max-width: 1000px) {
    padding: 1rem;
  }

  a {
    text-decoration: none;

    background: transparent !important;
  }

  /* =======================================
     HEADER
  ======================================= */

  &--header {
    margin-bottom: 2rem;

    h1 {
      color: #ffffff;

      font-size: 1.15rem;

      font-weight: 600;

      margin-bottom: 0rem;
    }

    p {
      color: rgba(255, 255, 255, 0.55);

      font-size: 0.82rem;

      line-height: 1.7;
    }
  }

  /* =======================================
     GRID
  ======================================= */

  &--grid {
    display: grid;

    grid-template-columns: repeat(
      auto-fit,
      minmax(320px, 1fr)
    );

    gap: 1rem;

    @media only screen and (max-width: 1000px) {
      grid-template-columns: 1fr;
    }

    /* =======================================
       CARD
    ======================================= */

    &--item {
      position: relative;

      display: flex;

      flex-direction: column;

      min-height: 210px;

      padding:.5rem 1.4rem;

      background: #151518;

      border: 1px solid rgba(255, 255, 255, 0.05) !important;

      border-radius: 16px;

      overflow: hidden;

      transition: all 0.25s ease;

      cursor: pointer;

      &:hover {
        background: #18181c;

        border-color: rgba(
          255,
          255,
          255,
          0.08
        ) !important;

        transform: translateY(-2px);
      }

      &--header {
        display: flex;

        align-items: center;

        gap: 1rem;

        padding-bottom: 1rem;

        margin-bottom: .2rem;

        border-bottom: 1px solid
          rgba(255, 255, 255, 0.04);

        img {
          width: 48px !important;

          height: 48px !important;

          padding: 0.75rem;

          border-radius: 12px;

          background: rgba(
            255,
            255,
            255,
            0.03
          );

          border: 1px solid
            rgba(
              255,
              255,
              255,
              0.06
            );

          flex-shrink: 0;
        }

        h1 {
          color: #ffffff;

          font-size: 0.95rem;

          font-weight: 500;

          line-height: 1.4;
        }
      }

      p {
        color: rgba(
          255,
          255,
          255,
          0.62
        );

        font-size: 0.8rem;
        font-weight: 500 !important;
        line-height: 1.85;

        // margin-bottom: auto;
      }

      &--recommend {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: fit-content;

        margin-top: 1.25rem;

        padding: 0.45rem 0.9rem;

        border-radius: 999px;

        background: rgba(
          34,
          197,
          94,
          0.08
        );

        border: 1px solid
          rgba(
            34,
            197,
            94,
            0.15
          );

        color: #22c55e;

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 0.02em;
      }

      &--not-recommended {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: fit-content;

        margin-top: 1.25rem;

        padding: 0.45rem 0.9rem;

        border-radius: 999px;

        background: rgba(
          255,
          255,
          255,
          0.03
        );

        border: 1px solid
          rgba(
            255,
            255,
            255,
            0.05
          );

        color: rgba(
          255,
          255,
          255,
          0.45
        );

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 0.02em;
      }
    }
  }
}

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

.skeleton {
  background: #151518;

  border-radius: 16px;

  border: 1px solid
    rgba(255, 255, 255, 0.05);

  min-height: 230px;

  position: relative;

  overflow: hidden;

  &::before {
    content: "";

    position: absolute;

    inset: 0;

    transform: translateX(-100%);

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

    animation: shimmer 1.8s infinite;
  }

  .skeleton-logo {
    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(
      255,
      255,
      255,
      0.05
    );
  }

  .skeleton-title {
    width: 140px;

    height: 16px;

    border-radius: 6px;

    background: rgba(
      255,
      255,
      255,
      0.05
    );
  }

  .skeleton-desc {
    width: 100%;

    height: 14px;

    border-radius: 6px;

    background: rgba(
      255,
      255,
      255,
      0.04
    );
  }

  .skeleton-badge {
    width: 90px;

    height: 28px;

    border-radius: 999px;

    background: rgba(
      255,
      255,
      255,
      0.05
    );
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}