/* Pricing-card-specific layout not yet shared by a third page -- see
   agent_docs/frontend-css-conventions.md. .card--lift/.card--bordered/
   .card__badge come from static/shared/css/cards.css (the light-gray
   outline is the shared .card--bordered modifier). */

.pricing-card__price {
  line-height: 1;
}

/* .card--bordered supplies the 1px solid base; the popular card just
   recolors + thickens it. */
.pricing-card--popular {
  border-color: var(--bs-primary, #0d6efd);
  border-width: 2px;
  /* Faint tint of the accent color over the card's own themed background,
     rather than a hardcoded color, so this still reads correctly against
     an admin-chosen --site-card-bg-color. */
  background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 6%, var(--site-card-bg-color, #fff));
}

.pricing-card__popular-badge {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
}

/* The Individuals / Organizations switch above the plan grid is the shared
   .segmented-tabs pill (static/shared/css/tabs.css) in a .catalog-switch
   row (static/shared/css/list-controls.css), like the Articles catalogue's. */

/* A card's "Your current plan" marker and its "why there's no button" note
   take a button's height, so the feature lists still line up across the
   row. The marker is text, not a control. */
.pricing-card__current,
.pricing-card__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: calc(1.5em + 0.75rem + 2px);
  text-align: center;
}

.pricing-card__current {
  border-radius: 50rem;
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success-text-emphasis, #0a3622);
  font-weight: 600;
}

/* The member's own plan, on the Your plan page: a green outline, ahead of
   the popular plan's blue when it's both. */
.pricing-card--current,
.pricing-card--popular.pricing-card--current {
  border-color: #1e7b34;
  border-width: 2px;
}