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

.details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  &__header {
    span {
      display: inline-flex;

      align-items: center;

      height: 28px;

      padding: 0 0.8rem;

      border-radius: 999px;

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

      color: $col-orange;

      font-size: 0.72rem;

      font-weight: 600;

      text-transform: uppercase;
    }

    h2 {
      margin-top: 0.9rem;

      color: #FFF !important;

      font-size: 1.2rem;

      font-weight: 500;
    }

    p {
      margin-top: 0.1rem;

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

      line-height: 1.8;

      font-size: 0.88rem;

      max-width: 650px;
    }
  }

  /* =======================
     METRICS
  ======================= */

  &__grid {
    display: grid;

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

    gap: 1rem;

    &__card {
      background:
        linear-gradient(
          180deg,
          rgba(255,255,255,.02),
          rgba(255,255,255,.01)
        );

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

      border-radius: 16px;

      padding: 1.25rem;

      display: flex;

      flex-direction: column;

      gap: 0.75rem;

      transition: all .25s ease;

      svg {
        color: $col-orange;

        font-size: 1.15rem;
      }

      span {
        font-size: 0.7rem;

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

        text-transform: uppercase;

        letter-spacing: .04em;
      }

      h5 {
        color: $col-white;

        font-size: .9rem;

        font-weight: 500;
      }

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

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

        background:
          linear-gradient(
            180deg,
            rgba(
              247,
              147,
              24,
              .04
            ),
            rgba(
              255,
              255,
              255,
              .01
            )
          );
      }
    }
  }

  /* =======================
     INFO CARDS
  ======================= */

  &__info {
    display: grid;

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

    gap: 1rem;

    margin-top: 0.5rem;
  }

  &__note,
  &__support {
    display: flex;

    gap: 1rem;

    padding: 1.25rem;

    border-radius: 16px;

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

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

    h4 {
      color: $col-white;

      margin-bottom: 0.45rem;

      font-size: 0.95rem;
    }

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

      font-size: 0.84rem;

      line-height: 1.8;
    }

      @media screen and (max-width: 760px) {
        flex-direction: column;
      }
  }

  &__note {
    border-color:
      rgba(
        34,
        197,
        94,
        .15
      );
  }

  &__support {
    border-color:
      rgba(
        59,
        130,
        246,
        .15
      );
  }

  &__note__icon,
  &__support__icon {
    width: 52px;

    height: 52px;

    flex-shrink: 0;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;
  }

  &__note__icon {
    background:
      rgba(
        34,
        197,
        94,
        .12
      );

    color: #22c55e;
  }

  &__support__icon {
    background:
      rgba(
        59,
        130,
        246,
        .12
      );

    color: #60a5fa;
  }
}