/* stylelint-disable property-no-vendor-prefix */
.loyalty-block__wrapper {
  position: relative;
  background: var(--light-theme-interactive-surface-selected);
  background-color: var(--tertiary-color);
  padding: var(--sizing-m);
  overflow: hidden;
  overflow: visible;
  max-width: max-content;
  margin: 0 auto var(--spacing-l);

  .loyalty-block__info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-14);

    .loyalty-block__img-wrapper {
      flex-shrink: 0;
    }

    .loyalty-block__text-wrapper,
    .loyalty-block__points {
      .loyalty-block__text {
        font-size: var(--fs-small);
        font-weight: var(--fw-300);
        margin: 0;
        color: var(--ui-text-icon-high);
        display: inline;

        &.loyalty-block__title {
          font-weight: var(--fw-700);
        }

        .loyalty-block__info-icon {
          background: transparent;
          padding: 0;
          margin: 0;
          width: 18px;
          height: 18px;
          display: inline-flex;
          vertical-align: middle;
          margin-top: -2px;

          &::before {
            content: '';
            position: absolute;
            right: -5px;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
          }

          &.tooltip--below::before {
            bottom: -9px;
            border-bottom: 12px solid var(--tooltip-bg-color-light);
          }

          &.tooltip--above::before {
            top: -8px;
            border-top: 12px solid var(--tooltip-bg-color-light);
          }
        }
      }
    }
  }

  .loyalty-block__my-rewards-btn {
    background-color: var(--light-primary);
    color: var(--primary-color);
    font-size: var(--fs-small);
    border-radius: 100px;
    width: 100%;
    margin-top: var(--spacing-14);
    height: 32px;
  }

  &.rewards-earn-block.cart-page {
    @media (width >= 1024px) {
      max-width: 100%;
    }
  }

  &.rewards-earned-block {
    .loyalty-block__points {
      .loyalty-block__text {
        color: var(--instock-green);
        font-weight: var(--fw-700);
      }
    }
  }

  &.rewards-redeem-block {
    max-width: 100%;
    background-image: none;
    background-color: var(--shimmer-card-bg);

    @media (width >= 1024px) {
      background-color: var(--tertiary-color);
    }

    .loyalty-block__info {
      display: block;

      .loyalty-block__text-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-14);

        .loyalty-block__title {
          display: flex;
          align-items: center;
          gap: var(--spacing-xsmall);

          .loyalty-block__redeemable-rewards {
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-400);
            color: var(--original-price);

            .redeemable-rewards {
              font-weight: var(--fw-700);
              color: var(--ui-text-icon-high);
            }
          }
        }

        .loyalty-block__balance {
          font-size: var(--fs-xxsmall);
          font-weight: var(--fw-500);
          background-color: var(--success-bg);
          padding: var(--spacing-xxsmall) var(--spacing-xsmall);
          border-radius: var(--sizing-s);

          &.loyalty-block__no-balance {
            background-color: var(--ui-surface-glass-regular);
          }
        }
      }
    }

    .loyalty-block__apply-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-14);
      background-color: var(--ui-surface-glass-thin);
      padding: var(--spacing-12) var(--spacing-10);
      margin-top: var(--spacing-14);

      .loyalty-block__applied-points {
        font-size: var(--fs-small);
        font-weight: var(--fw-400);
        color: var(--original-price);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .loyalty-block__points-to-inr {
          display: inline-flex;
          align-items: center;
        }

        .loyalty-points {
          margin: 0 3px;
          font-weight: var(--fw-700);
          color: var(--ui-text-icon-high);
        }

        .loyalty-block__success-icon {
          width: 18px;
          margin-right: 3px;
        }

        .loyalty-block__info-icon {
          width: 18px;
          transform: rotate(180deg);
          cursor: pointer;
        }
      }

      .button--tertiary {
        background: none;
        margin: 0;
        padding: 0;
        font-size: var(--fs-small);
        font-weight: var(--fs-500);
        color: var(--primary-color);
        text-decoration: underline;
      }
    }
  }

  .loyalty-block__alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-14);
    padding: var(--spacing-l) var(--spacing-14);
    font-size: var(--fs-small);
    font-weight: var(--fw-400);
    color: var(--ui-text-icon-medium);
    border-radius: var(--sizing-xs);
    margin-top: var(--spacing-14);

    &.loyalty-block__alert--warning {
      background-color: var(--semantic-surface-tonal-warning);
    }

    &.loyalty-block__alert--error {
      background-color: var(--semantic-surface-tonal-error);
    }

    &.loyalty-block__emi-help {
      margin-top: 0;
    }
  }

  .loyalty-block__slider-wrapper {
    margin-top: var(--spacing-big);
  }

  .loyalty-block__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-14);
    margin-top: var(--spacing-l);
    margin-bottom: var(--spacing-6);

    .button {
      border-radius: 100%;
      border: 1px solid var(--neutrals-sub-texts-grey);
      height: 36px;
      width: 36px;
      padding: 0;
      flex-shrink: 0;
    }

    .incrementer__input {
      width: 100%;
      height: 36px;
      font-size: var(--fs-small);
      text-align: center;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

      &[type='number'] {
        -moz-appearance: textfield;
      }
    }
  }
}

.tnc-tooltip-box.tooltip-box {
  position: absolute;
  display: none;
  max-width: 300px;
  padding: var(--sizing-s) var(--spacing-xsmall) var(--sizing-s) var(--sizing-s);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-300);
  line-height: 1.6rem;
  color: var(--neutrals-sub-texts-paragraphs);
  background: linear-gradient(90deg, var(--tooltip-bg-color-light), var(--tooltip-bg-color-dark));
  text-align: left;
  z-index: 1;

  .tooltip-content {
    font-weight: var(--fw-400);
    max-width: 215px;

    .tnc-content-title {
      font-size: var(--fs-small);
      font-weight: var(--fw-700);
      line-height: var(--lh-medium);
      margin-bottom: var(--spacing-xsmall);
    }

    .tnc-content-description {
      color: var(--ui-text-icon-medium);
      font-size: var(--fs-13);
      font-weight: var(--fw-400);
      line-height: var(--lh-medium);
      letter-spacing: 0.14px;
    }
  }
}

.modal .loyalty-block__modal-container.no-dialog-modal {
  .modal-header {
    display: none;
  }

  .modal-content {
    padding: var(--spacing-l);
    text-align: center;
    font-size: var(--fs-small);
    font-weight: var(--fw-300);
    line-height: 1.6rem;
    color: var(--ui-text-icon-medium);

    .loyalty-block__modal-description {
      margin-top: var(--spacing-14);
    }

    .loyalty-block__modal-action-wrapper {
      .loyalty-block__ok-btn {
        width: 100%;
        margin-top: var(--spacing-l);
      }
    }
  }

  &.point-calculations-info {
    .modal-header {
      display: block;
      margin-bottom: -30px;
    }

    .modal-content {
      text-align: left;

      .loyalty-block__info-icon {
        width: 55px;
        margin-bottom: var(--spacing-14);
      }

      .loyalty-block__modal-title {
        font-size: var(--fs-medium);
        font-weight: var(--fw-700);
        color: var(--neutrals-sub-texts-paragraphs);
      }

      .loyalty-block__modal-description {
        margin-top: var(--spacing-14);

        .description-lines {
          margin-bottom: var(--spacing-14);
        }

        .description-note {
          font-size: var(--fs-xsmall);
        }
      }
    }
  }
}