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

.card {
  position: relative;

  width: 350px;
  flex: 0 0 350px;

  display: flex;
  flex-direction: column;

  padding: 1.8rem 1.5rem;

  border-radius: 24px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(22, 22, 24, 0.98) 0%,
      rgba(15, 15, 18, 1) 100%
    );

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

  transition: all 0.35s ease;

  cursor: pointer;

  backdrop-filter: blur(20px);

  @media only screen and (max-width: 1000px) {
    width: 100%;
    flex: none;
  }

  &::before {
    content: "";

    position: absolute;

    inset: 0;

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

    opacity: 0;

    transition: 0.35s ease;

    pointer-events: none;
  }

  &:hover {
    transform: translateX(3px);

    border-color: rgba(
      247,
      147,
      24,
      0.14
    );

    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.45);

    &::before {
      opacity: 1;
    }
  }
}

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

.header {
  position: relative;

  z-index: 2;

  margin-bottom: 1.5rem;

}

.badge {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.4rem 0.8rem;

  border-radius: 999px;

  background:
    rgba(
      247,
      147,
      24,
      0.1
    );

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

  color: #f79318;

  font-size: 0.6rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* ==========================================
   WIN RATE HERO
========================================== */

 h3 {
    color: $col-white;

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.4;

    margin-top: 0.9rem;
  }

.meta {
  display: inline-flex;

  align-items: center;

  gap: .65rem;

  width: fit-content;

  margin-bottom: .5rem;
  margin-top: 1rem;

  padding: .4rem 1rem;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(34, 197, 94, .12),
      rgba(34, 197, 94, .06)
    );

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

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      .03
    );

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

    font-size: .65rem;

    font-weight: 500;

    letter-spacing: .02em;

    text-transform: uppercase;
  }

  strong {
    color: #22c55e;

    font-size: .9rem;

    font-weight: 600;

    line-height: 1;
  }
}

/* ==========================================
   DESCRIPTION
========================================== */

.description {
  color:
    rgba(
      255,
      255,
      255,
      0.65
    ) !important;

  font-size: 0.82rem !important;

  line-height: 1.85;

  // margin-bottom: 1.4rem;

  min-height: 78px;

  font-weight: 400 !important;
}

/* ==========================================
   PRICING
========================================== */

.pricing {
  display: flex;
  flex-direction: column;

  gap: 0.85rem;

  margin-bottom: 1.6rem;

  padding: .7rem 1rem;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.01)
    );

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

.priceItem {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 0.85rem;

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

  &:last-child {
    border-bottom: none;

    padding-bottom: 0;
  }

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

    font-size: 0.78rem;

    font-weight: 500;
  }

  strong {
    color: $col-white;

    font-size: 0.75rem;

    font-weight: 500;

    text-align: right;
  }
}

/* ==========================================
   SUBSCRIBE BUTTON
========================================== */

.subscribeBtn {
  width: 100%;

  height: 44px;

  margin-top: auto;

  border: none;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #f79318,
      #ffb454
    );

  color: #111111;

  font-size: 0.85rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;

  &:hover {
    transform: translateY(-2px);

    box-shadow:
      0 14px 35px rgba(
        247,
        147,
        24,
        0.28
      );
  }
}

/* ==========================================
   ADMIN ACTIONS
========================================== */

.actions {
  display: flex;

  gap: 0.75rem;

  margin-top: auto;

  padding-top: 1.3rem;

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

.editBtn,
.deleteBtn {
  flex: 1;

  height: 46px;

  border: none;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;
}

.editBtn {
  background:
    rgba(
      34,
      197,
      94,
      0.1
    );

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

  color: #22c55e;

  &:hover {
    background:
      rgba(
        34,
        197,
        94,
        0.18
      );
  }
}

.deleteBtn {
  background:
    rgba(
      239,
      68,
      68,
      0.1
    );

  border:
    1px solid rgba(
      239,
      68,
      68,
      0.15
    );

  color: #ef4444;

  &:hover {
    background:
      rgba(
        239,
        68,
        68,
        0.18
      );
  }
}