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

.checkout {
  position: sticky;
  top: 6rem;

  border-radius: 24px;

  overflow: hidden;

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

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

  backdrop-filter: blur(20px);

  color: $col-white;

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

  @media (max-width: 1000px) {
    position: relative;
    top: auto;
  }

  /* =======================
     HERO
  ======================= */

  .checkoutHero {
    padding: 1.5rem;

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

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

    h3 {
      margin-top: .85rem;

      font-size: 1.23rem;

      font-weight: 500;
    }

    p {
      margin-top: .6rem;

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

      font-size: .84rem;

      line-height: 1.8;
    }
  }

  .checkoutBadge {
    display: inline-flex;

    align-items: center;

    padding: .45rem .8rem;

    border-radius: 999px;

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

    color: $col-orange;

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

    font-size: .72rem;

    font-weight: 600;
  }

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

  &--header {
    padding: 1.5rem 1.5rem 0;

    h2 {
      font-size: 1rem;

      font-weight: 600;
    }

    p {
      margin-top: .45rem;

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

      font-size: .8rem;

      line-height: 1.7;
    }
  }

  /* =======================
     BODY
  ======================= */

  &--body {
    padding: 1.5rem;

    /* amount */

    &--amount {
      label {
        display: block;

        margin-bottom: .7rem;

        font-size: .78rem;

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

      input {
        width: 100%;

        height: 54px;

        padding: 0 1rem;

        border-radius: 14px;

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

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

        color: $col-white;

        font-size: 1rem;

        font-weight: 400;

        transition: all .2s ease;

        &:focus {
          border-color:
            rgba(
              247,
              147,
              24,
              .35
            ) !important;

          box-shadow:
            0 0 0 4px
            rgba(
              247,
              147,
              24,
              .08
            ) !important;
        }
      }

      &--helper {
        margin-top: .8rem;

        display: flex;

        justify-content: space-between;

        p {
          font-size: .72rem;

          color:
            rgba(
              255,
              255,
              255,
              .5
            );
        }
      }
    }

    /* summary */

    &--fees {
      margin-top: 1.5rem;

      h5 {
        margin-bottom: .85rem;

        font-size: .82rem;

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

      &--content {
        border-radius: 16px;

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

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

        padding: 1rem;
      }

      &--content--item,
      &--content--item-a {
        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: .8rem 0;

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

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

        p {
          font-size: .8rem;
        }

        p:last-child {
          font-weight: 600;
        }
      }
    }

    /* wallet */

    &--method {
      margin-top: 1.5rem;

      h5 {
        margin-bottom: .75rem;

        font-size: .82rem;
      }

      &--item {
        display: flex;

        align-items: center;

        gap: 1rem;

        padding: 1rem;

        border-radius: 16px;

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

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

        transition: all .2s ease;

        cursor: pointer;

        p {
          font-size: .84rem;
        }

        &--active {
          @extend .checkout--body--method--item;

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

          background:
            rgba(
              247,
              147,
              24,
              .05
            );
        }
      }
    }

    /* notice */

    &--notice {
      margin-top: 1.5rem;

      padding: 1rem;

      border-radius: 16px;

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

      background:
        rgba(
          34,
          197,
          94,
          .05
        );

      h5 {
        color: #4ade80;

        margin-bottom: .5rem;
      }

      small {
        display: block;

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

        line-height: 1.7;
      }
    }

    button {
      width: 100%;

      height: 48px;

      margin-top: 1.5rem;

      border-radius: 16px;

      border: none;

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

      color: #111;

      font-size: .85rem;

      font-weight: 600;

      cursor: pointer;

      transition: all .25s ease;

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

        box-shadow:
          0 12px 30px
          rgba(
            247,
            147,
            24,
            .25
          );
      }
    }
  }
}

.checkout--body--amount--error {
  margin-top: .85rem;

  padding: .9rem 1rem;

  border-radius: 14px;

  background:
    rgba(
      239,
      68,
      68,
      .08
    );

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

  color: #f87171;

  font-size: .78rem;

  line-height: 1.6;
}




input {
  @include formInput;

  &:focus,
  &:focus-visible,
  &:active {
    outline: none !important;

    border: 1px solid rgba(247, 147, 24, 0.35) !important;

    box-shadow:
      0 0 0 4px rgba(247, 147, 24, 0.08) !important;
  }
}