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

.subscription {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  background: rgba(5, 5, 8, .82);

  backdrop-filter: blur(14px);

  &__content {
    position: relative;

    width: 100%;
    max-width: 470px;

    overflow: hidden;

    padding: 1.25rem;

    border-radius: 24px;

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

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

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

  &__content::before {
    content: "";

    position: absolute;
    inset: 0;

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

    pointer-events: none;
  }

  &__content > * {
    position: relative;
    z-index: 2;
  }

  &__close {
    position: absolute;
    z-index: 999;
    top: 1rem;
    right: 1rem;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 10px;

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

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

    cursor: pointer;

    transition: .25s ease;

    &:hover {
      background: rgba(255,255,255,.08);
      color: #fff;
    }
  }

  &__header {
    margin-bottom: 1.1rem;

    h2 {
      margin: .6rem 0 .4rem;

      color: #fff;

      font-size: 1.1rem;

      font-weight: 700;

      line-height: 1.3;
    }

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

      font-size: .76rem;

      line-height: 1.7;
    }
  }

  &__badge {
    display: inline-flex;

    padding: .35rem .75rem;

    border-radius: 999px;

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

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

    color: #f79318;

    font-size: .6rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
  }

  &__wallet {
    margin-bottom: 1rem;

    padding: .9rem 1rem;

    border-radius: 18px;

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

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

    span {
      display: block;

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

      font-size: .72rem;

      margin-bottom: .35rem;
    }

    strong {
      color: #22c55e;

      font-size: 1.15rem;

      font-weight: 700;
    }
  }

  &__section {
    margin-bottom: 1rem;
  }

  &__label {
    display: block;

    margin-bottom: .65rem;

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

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
  }

  &__cycles {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: .55rem;
  }

  &__cycle,
  &__cycleActive {
    padding: .75rem;

    border-radius: 16px;

    border: none;

    cursor: pointer;

    text-align: center;

    transition: .25s ease;

    small {
      display: block;

      margin-bottom: .3rem;

      font-size: .65rem;

      text-transform: uppercase;
    }

    strong {
      font-size: .8rem;

      font-weight: 700;
    }

    @media (max-width: 768px) {
      display: flex;
      align-items: center !important;
      justify-content: center;
      gap: 6px;
      padding: 1rem;

      small {
        margin-bottom: 0 !important;
      }
    }
  }

  &__cycle {
    background:
      rgba(255,255,255,.025);

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

    small {
      color: rgba(255,255,255,.55);
    }

    strong {
      color: #fff;
    }

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

  &__cycleActive {
    background:
      rgba(247,147,24,.08);

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

    small,
    strong {
      color: #f79318;
    }
  }

  &__summary {
    margin-bottom: 1rem;

    padding: 1rem;

    border-radius: 18px;

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

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

  &__row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: .65rem 0;

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

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

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

      font-size: .72rem;
    }

    strong {
      color: #fff;

      font-size: .75rem;

      font-weight: 600;
    }
  }

  &__rowTotal {
    h3 {
      color: #f79318;

      font-size: 1rem;

      font-weight: 700;
    }
  }

  &__notice {
    margin-bottom: 1rem;

    padding: .85rem;

    border-radius: 16px;

    background:
      rgba(59,130,246,.05);

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

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

      font-size: .72rem;

      line-height: 1.6;
    }
  }

  &__submit {
    width: 100%;

    height: 44px;

    border: none;

    border-radius: 14px;

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

    color: #111;

    font-size: .82rem;

    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

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

      box-shadow:
        0 10px 24px rgba(247,147,24,.18);
    }

    &:disabled {
      opacity: .55;
      cursor: not-allowed;
    }
  }

  &__error {
    margin-top: .75rem;

    padding: .75rem .85rem;

    border-radius: 14px;

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

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

    color: #ef4444;

    font-size: .72rem;

    text-align: center;
  }

  @media (max-width: 768px) {
    &__content {
      max-width: 100%;
    }

    &__cycles {
      grid-template-columns: 1fr;
    }
  }
}