overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss

/**
 *  MAIN CONTENT
 */

#subscription-dashboard-root {
  .hover-highlight {
    &:hover,
    &:focus {
      background-color: var(--neutral-10);
    }
  }

  li.row-link {
    display: flex;
    border: 0;
    padding: 0;

    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-02) 0;
      text-decoration: none;
      color: var(--neutral-90);
      width: 100%;

      &:hover {
        background-color: var(--neutral-10);
      }
    }
  }
}

/**
 *  MODALS
 */

.group-subscription-modal {
  .circle {
    font-size: var(--font-size-06);
    border-radius: 50%;
    background-color: var(--green-70);
    color: white;
    white-space: nowrap;
    height: 180px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-02);
    font-weight: bold;

    .small {
      opacity: 0.85;
    }

    .circle-subtext {
      font-size: var(--font-size-03);
    }
  }

  .legend-as-label {
    font-size: var(--font-size-02);
    font-weight: 600;
    color: var(--content-secondary);
    margin-bottom: 0;
  }

  .educational-discount-badge {
    height: 50px;

    p {
      display: inline-block;
      font-weight: bold;
      padding-left: var(--spacing-02);
      padding-right: var(--spacing-02);
    }

    .applied {
      background-color: rgba($green-70, 0.1);
      color: var(--green-70);
    }

    .ineligible {
      background-color: var(--neutral-10);
    }
  }
}

#change-plan {
  table {
    @include media-breakpoint-up(lg) {
      th:last-child,
      td:last-child {
        width: 1%; // will expand to fit the content
      }
    }

    @include media-breakpoint-down(lg) {
      display: block;

      thead {
        display: none;
      }

      tbody,
      td,
      tr {
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
        width: 100%;
      }

      td:first-child {
        padding-top: var(--spacing-07);
      }

      td:last-child {
        padding-top: var(--spacing-03);
        padding-bottom: var(--spacing-07);
      }

      tr {
        border-bottom: 1px solid var(--bs-border-color);

        td,
        th {
          border: 0 !important;
        }
      }

      tr:last-child {
        border-bottom: 0;
      }
    }
  }
}

.payment-container {
  padding-top: var(--spacing-13);
  display: flex;
  gap: var(--spacing-10);
  justify-content: center;

  @include media-breakpoint-down(lg) {
    flex-direction: column;
    align-items: center;
  }

  .payment-review-panel {
    width: 339px;

    @include media-breakpoint-down(lg) {
      width: 100%;
    }

    h4 {
      color: var(--neutral-70);
      font-weight: 600;

      @include heading-sm;
    }

    .price-feature-description {
      color: var(--neutral-70);
      font-weight: 400;

      @include body-base;

      h4 {
        margin-bottom: var(--spacing-06);
      }

      .features-list {
        margin-top: var(--spacing-08);
      }

      .price-summary {
        .price-summary-line {
          display: flex;
          justify-content: space-between;

          .price-summary-line-width {
            width: 70%;
          }
        }

        p {
          margin: unset;
        }

        .price-nowrap {
          white-space: nowrap;
        }

        .price-summary-total-line {
          margin-top: var(--spacing-06);

          .price-summary-due {
            color: var(--green-50);
          }
        }
      }

      .price-cancel-anytime {
        @include body-xs;
      }
    }

    hr {
      margin-top: var(--spacing-08);
      margin-bottom: var(--spacing-08);
    }
  }

  .payment-checkout {
    padding: var(--spacing-08);
    width: 408px;

    @include media-breakpoint-down(lg) {
      width: 100%;
    }

    h1 {
      @include heading-md;
    }

    .student-disclaimer {
      @include body-sm;
    }
  }
}

.group-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
  margin-bottom: var(--spacing-06);

  h2 {
    @include heading-lg;

    margin: 0;
    word-break: break-all;
  }

  .btn-ghost {
    --bs-btn-bg: transparent;
  }
}

.change-currency {
  .dropdown-item:not(:first-child) {
    margin-top: var(--spacing-02);
  }
}

.change-currency-toggle {
  padding-left: 0;
  text-decoration: underline;
  color: var(--content-secondary);

  &:hover,
  &:focus,
  &:active {
    // !important is unfortunately necessary to override btn:first-child:active
    color: var(--content-secondary) !important;
  }

  &:not(:hover) {
    text-decoration: underline;
  }

  // Hide the dropdown caret, BS5 react-bootstrap does not have a prop for this
  &::after {
    display: none;
  }

  @include body-xs;
}

.change-currency-dropdown-selected-icon {
  position: absolute;
  right: 10px;
  top: var(--bs-dropdown-item-padding-y);
}

.payment-method-toggle {
  .form-check {
    margin-bottom: var(--spacing-05);
  }

  .payment-method-logos {
    display: inline-block;
    margin-left: var(--spacing-05);

    img:not(:last-child) {
      margin-right: var(--spacing-04);
    }
  }
}