@use '../../../style/variables.scss';

.modalWrapper {
  & > div {
    display: flex;
    row-gap: 64px;
  }

  .paymentDetails {
    display: flex;
    flex-direction: column;
    max-width: 460px;

    ul {
      list-style-type: none;
      margin-top: 16px;
    }

    li {
      display: flex;
      align-items: center;
      column-gap: 16px;

      svg {
        width: 24px;
        height: 24px;

        & {
          stroke: #0eaf00;
          fill: #0eaf00;
        }
      }
    }

    .learnMoreBtn {
      padding: 0 !important;
      margin-top: 40px;
    }

    .paymentButton {
      padding: 32px !important;
    }

    .pricing {
      flex-direction: column;
      align-items: stretch;
      margin: 16px 0;
    }

    .planSelector {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
    }

    .planButton {
      flex: 1;
      padding: 16px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      background: white;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      color: #000;

      &:hover {
        border-color: #0eaf00;
      }

      &.selected {
        border-color: #0eaf00;
        border-width: 3px;
        background: #f0fff0;
        box-shadow: 0 0 8px rgba(14, 175, 0, 0.3);
      }

      .price {
        font-size: 1.25rem;
        font-weight: bold;
        color: #0eaf00;
      }

      .savings {
        position: absolute;
        top: -20px;
        right: 10px;
        background: #0eaf00;
        color: white;
        font-size: 0.75rem;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 12px;
        z-index: 1;
        opacity: 0.75;
      }

      &.selected .savings {
        opacity: 1;
      }

      .bonus {
        font-size: 0.8rem;
        color: #0eaf00;
        font-weight: 500;
        text-align: center;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
      }
    }
  }

  .loadingSpinner {
    display: flex;
    margin: auto;

    .spinner {
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

  .rightCol {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 380px;
    height: 350px;

    & > svg {
      position: absolute;
      width: 100%;
      height: 100%;

      * {
        stroke: #0eaf00;
        fill: #0eaf00;
      }
    }

    .checkoutWithBtn {
      position: absolute;
    }

    .paymentPlaceholder {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      opacity: 0.3;
    }

    .unAuth {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      row-gap: 16px;

      & > p {
        font-size: 24px !important;
        font-weight: 500;
      }
    }
  }
}
