/* FRA Prop HQ v6.24.3 — selected plan highlight and separate current-plan status */
.membership-plan {
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.membership-plan.featured {
  border-color: var(--border) !important;
  background: var(--panel-2) !important;
}
.membership-plan.current {
  box-shadow: none !important;
}
.membership-plan:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.membership-plan.plan-selected {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 14px 34px rgba(0,0,0,.12) !important;
  transform: translateY(-2px);
}
.membership-plan.plan-selected .membership-plan-name {
  color: var(--accent);
}
.membership-plan:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.membership-plan-badges {
  position: absolute;
  top: -10px;
  right: -8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: calc(100% - 70px);
  pointer-events: none;
}
.membership-plan-badge,
.membership-current-badge {
  position: static !important;
  padding: 6px 8px;
  border-radius: 999px;
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}
.membership-plan-badge {
  color: #11170b;
  background: var(--accent);
}
.membership-current-badge {
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border-strong);
}
:root[data-theme="light"] .membership-plan.featured,
:root[data-theme="light"] .membership-plan.current {
  background: #ffffff !important;
  border-color: rgba(148,163,184,.2) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.04) !important;
}
:root[data-theme="light"] .membership-plan.plan-selected {
  background: linear-gradient(145deg, #ffffff, #f1fae8) !important;
  border-color: rgba(132,204,22,.75) !important;
  box-shadow: inset 0 0 0 1px rgba(132,204,22,.18), 0 14px 34px rgba(15,23,42,.08) !important;
}
:root[data-theme="light"] .membership-current-badge {
  color: #334155;
  background: #f1f5f9;
  border-color: rgba(148,163,184,.28);
}
@media (prefers-reduced-motion: reduce) {
  .membership-plan { transition: none; }
  .membership-plan.plan-selected { transform: none; }
}