.reward-card {
  background: var(--gradients-accent-section-bg-1);
  padding: var(--spacing-small);
  margin-bottom: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);

  /* Header */
  .reward-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .reward-card__title {
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-600);
      line-height: var(--lh-small);
      color: var(--schemes-on-surface);

      @media (width >= 786px) {
        font-size: var(--fs-medium);
        font-weight: var(--fw-500);
      }
    }

    .reward-card__balance {
      font-size: var(--fs-xxsmall);
      font-weight: var(--fw-500);
      line-height: var(--lh-xsmall);
      color: var(--ui-text-icon-high);
      background-color: var(--tertiary-color);
      border-radius: 999px;
      padding: 0 var(--spacing-xsmall);
      display: flex;
      height: 20px;
      align-items: center;
    }
  }

  /* Content */
  .reward-card__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xsmall);

    .reward-card__points {
      font-size: var(--fs-medium);
      font-weight: var(--fw-400);
      line-height: var(--lh-small);
      color: var(--schemes-on-surface);

      strong {
        font-size: var(--fs-xlarge);
        font-weight: var(--fw-700);
        line-height: var(--lh-small);
      }
    }

    .reward-card__rs {
      position: relative;
      flex-shrink: 0;
      width: 32px;
      height: 32px;

      img {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &.edit-img {
          width: 24px;
          height: 24px;
          cursor: pointer;
          display: none;

          @media (width >= 786px) {
            display: block;
          }
        }

        &:nth-child(2) {
          width: 17px;
          height: 17px;
        }
      }

      &.disabled {
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.5;
      }
    }

    .reward-card__err {
      font-size: var(--fs-small);
      font-weight: var(--fw-400);
      line-height: var(--lh-20);
      flex: 1 1 100%;
      color: var(--color-error-2);
      display: flex;
      align-items: center;
      gap: var(--spacing-xxsmall);
    }

    .reward-card__slider {
      color: var(--ui-text-icon-medium);
      font-size: var(--fs-small);
      font-weight: var(--fw-400);
      line-height: var(--lh-20);
      letter-spacing: var(--ls-014);
      flex: 1 1 100%;

      .range-slider__thumb--max {
        --right-thumb-color: #ece9f2;
        --left-thumb-color: #faede8;
      }

      @media (width >= 1024px) {
        .range-slider.single-input-slider {
          .range-slider__slider-container {
            margin: 0 0 var(--spacing-xsmall);
          }
        }
      }
    }
  }
}