/* plan-card.css — the reusable pricing-card BEM block (eventtpl.PlanCard).
   Shared by the app create funnel, the partner invite page, the gallery re-buy strip,
   and the public marketing home pricing section. Extracted verbatim from create-event.css
   so it can load on the marketing (Elementor) layout without the rest of that stylesheet.
   Loaded immediately BEFORE create-event.css on app pages, so the create page's
   height-media overrides still win exactly as before. Depends only on tokens.css custom
   properties, which every consuming layout loads. */

/* ── Plan card ─────────────────────────────────────────────────────── */

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.plan-card--popular {
  border: 0.125rem solid var(--color-primary);
  /* The popular card sits a little larger than the (equal-height) Standard and
       Corporate cards. transform keeps it out of layout flow, so it grows into the
       surrounding gaps without pushing the page taller (preserves the no-scroll fit). */
  transform: scale(1.04);
  transform-origin: center;
  z-index: 1;
}

.plan-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.plan-card__title {
  font-family: var(--font-brand);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03125rem;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.plan-card__desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  min-height: 2.25rem;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.plan-card__price-amount {
  font-family: var(--font-brand);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.plan-card__price-unit {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.plan-card__bullets {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.plan-card__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.plan-card__check {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-text-muted);
}

.plan-card__highlight {
  font-weight: var(--font-weight-semibold);
}

.plan-card__highlight .plan-card__check {
  color: var(--color-primary);
}

.plan-card__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.plan-card__cta:hover {
  background: var(--color-primary-hover);
}

.plan-card__cta--contact {
  background: var(--color-text);
}

.plan-card__cta--contact:hover {
  background: var(--color-text-secondary);
}

.plan-card__contact-link {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.plan-card__contact-link:hover {
  color: var(--color-primary);
}