:host {
  display: block;
  width: 100%;
}

.account-page {
  --menu-content-prefix-gap: 0;

  display: block;
  width: 100%;
  max-width: 600px;
}

.purchase-back-link {
  color: #888888;

  &:hover,
  &:focus-visible {
    color: var(--color-primary);
  }
}

.purchase-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.purchase-id {
  font-weight: bold;
  color: #666666;
  font-size: 13px;
}
.purchase-date {
  font-weight: 325;
  color: #666666;
  font-size: 10px;
}

.purchase-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.purchase-total-label {
  font-size: 17px;
  color: #666666;
  font-weight: 325;
}
.purchase-total-value {
  color: var(--bs-primary, #5b75ff);
  font-weight: bold;
  font-size: 17px;
}

.purchase-review {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dddddd;
}

.purchase-review__title {
  margin: 0 0 0.5rem;
  color: var(--color-primary, var(--tenant-primary, #5b75ff));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.purchase-review__message {
  margin: 0 0 1.5rem;
  color: #777777;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.purchase-review__button {
  width: 185px;
}

.purchase-loading,
.purchase-empty {
  color: #666666;
  font-size: 12px;
  margin: 0;
}
