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

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

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

  &__header {
    span {
      display: inline-flex;

      align-items: center;

      height: 30px;

      padding: 0 0.85rem;

      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;
    }
  }

  /* ==========================
     WALLET
  ========================== */

  &__wallet,
  &__notice {
    display: flex;

    gap: 1rem;

    align-items: flex-start;

    padding: 1.25rem;

    border-radius: 18px;

    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.4rem;

      font-size: .95rem;
    }

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

      line-height: 1.8;

      font-size: .84rem;
    }

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

  &__wallet__icon,
  &__notice__icon {
    width: 54px;

    height: 54px;

    flex-shrink: 0;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;
  }

  &__wallet__icon {
    background:
      rgba(
        247,
        147,
        24,
        .10
      );

    color: $col-orange;

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

  &__notice__icon {
    background:
      rgba(
        59,
        130,
        246,
        .10
      );

    color: #60a5fa;

    border: 1px solid
      rgba(
        59,
        130,
        246,
        .15
      );
  }

  /* ==========================
     PROCESS
  ========================== */

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

    border-radius: 18px;

    padding: 1.4rem;

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

    &__header {
      margin-bottom: 1.5rem;

      h4 {
        color: $col-white;

        font-size: .95rem;

        margin-bottom: .3rem;
      }

      p {
        color:
          rgba(
            255,
            255,
            255,
            .55
          );

        font-size: .82rem;
      }
    }
  }

  &__steps {
    display: flex;

    align-items: center;

    gap: 1rem;

    overflow-x: auto;

    scrollbar-width: none;

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

    svg {
      color: rgba(
        255,
        255,
        255,
        .3
      );

      flex-shrink: 0;
    }
  }

  &__step {
    min-width: 220px;

    padding: 1rem;

    border-radius: 14px;

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

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

    span {
      display: inline-flex;

      width: 32px;

      height: 32px;

      border-radius: 50%;

      align-items: center;

      justify-content: center;

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

      color: $col-orange;

      font-size: .75rem;

      font-weight: 700;

      margin-bottom: .8rem;
    }

    h5 {
      color: $col-white;

      margin-bottom: .45rem;

      font-size: .9rem;
    }

    p {
      color:
        rgba(
          255,
          255,
          255,
          .6
        );

      line-height: 1.7;

      font-size: .8rem;
    }
  }
}