/* Plan cards + billing-cycle toggle, shared by the public Pricing page and the in-app Plan & Upgrade page. */
.cycle-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-surface-muted, #f1f5f9); border: 1px solid var(--color-border, rgba(15,23,42,.1)); gap: 2px; }
.cycle-toggle button { border: 0; background: transparent; padding: .45rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--color-text-secondary); }
.cycle-toggle button.active { background: var(--color-primary-900, #0f172a); color: #fff; }
.cycle-toggle .save-tag { margin-left: .35rem; font-size: .7rem; padding: .1rem .4rem; border-radius: 999px; background: #d1fae5; color: #047857; }
.cycle-toggle button.active .save-tag { background: rgba(255,255,255,.2); color: #fff; }

.plan-card { height: 100%; display: flex; flex-direction: column; padding: 1.75rem; border-radius: 16px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, rgba(15,23,42,.1)); position: relative; }
.plan-card.featured { border: 2px solid var(--color-accent-500); box-shadow: 0 20px 40px -24px rgba(5,150,105,.45); }
.plan-card.current { border-color: var(--color-primary-900, #0f172a); }
.plan-ribbon { position: absolute; top: -12px; left: 1.5rem; padding: .2rem .7rem; border-radius: 999px; background: var(--color-accent-500); color: #fff; font-size: .75rem; font-weight: 700; }
.plan-name { font-size: 1.2rem; font-weight: 700; }
.plan-desc { color: var(--color-text-secondary); font-size: .9rem; min-height: 2.6em; }
.plan-price { margin: .75rem 0 .15rem; font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--color-text-secondary); letter-spacing: 0; }
.plan-billed { font-size: .85rem; color: var(--color-text-secondary); min-height: 1.4em; }
.plan-billed .save { color: #047857; font-weight: 600; }
.plan-setup { margin: .75rem 0 1rem; padding: .5rem .7rem; border-radius: 10px; background: rgba(245,158,11,.1); color: #92400e; font-size: .85rem; }
.plan-setup.paid { background: rgba(16,185,129,.1); color: #047857; }
.plan-list { list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: .92rem; flex: 1 1 auto; }
.plan-list li { position: relative; padding: .3rem 0 .3rem 1.6rem; }
.plan-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent-600); font-weight: 700; }
.plan-note { font-size: .78rem; color: var(--color-text-tertiary, #94a3b8); margin-bottom: .75rem; }
.cycle-price[hidden] { display: none !important; }

.usage-meter { margin-bottom: 1rem; }
.usage-meter .bar { height: 8px; border-radius: 4px; background: rgba(15,23,42,.08); overflow: hidden; }
.usage-meter .bar span { display: block; height: 100%; background: var(--color-accent-500); }
.usage-meter.warn .bar span { background: #f59e0b; }
.usage-meter.full .bar span { background: #dc2626; }

/* ---- Compact plan picker + comparison table (Plan & Upgrade, SuperAdmin Packages & Pricing) ---- */
.div-tabs { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.div-tabs button { border: 1px solid var(--color-border, rgba(15,23,42,.12)); background: var(--color-surface, #fff); padding: .42rem .9rem; border-radius: 10px; font-weight: 600; font-size: .88rem; color: var(--color-text-secondary); }
.div-tabs button:hover { border-color: var(--color-accent-500); }
.div-tabs button.active { background: var(--color-primary-900, #0f172a); color: #fff; border-color: transparent; }
.div-tabs .count { margin-left: .35rem; font-size: .72rem; padding: .05rem .4rem; border-radius: 999px; background: var(--color-surface-muted, #f1f5f9); color: var(--color-text-secondary); }
.div-tabs button.active .count { background: rgba(255,255,255,.2); color: #fff; }

.plan-card.compact { padding: 1.15rem 1.3rem; }
.plan-card.compact .plan-price { font-size: 1.9rem; margin: .5rem 0 .1rem; }
.plan-card.compact .plan-desc { min-height: 0; margin-bottom: .1rem; }
.plan-card.compact .plan-setup { margin: .55rem 0 .7rem; padding: .35rem .6rem; }
.plan-card.compact .plan-list { margin-bottom: .9rem; font-size: .88rem; }
.plan-card.compact .plan-list li { padding: .2rem 0 .2rem 1.5rem; }
.plan-card.compact .plan-more { font-size: .8rem; color: var(--color-text-secondary); margin: -.4rem 0 .9rem; }
.upgrade-status .usage-meter { margin-bottom: .6rem; }
.upgrade-status .usage-meter:last-child { margin-bottom: 0; }

.cmp-wrap { overflow: auto; max-height: max(420px, calc(100vh - 200px)); border: 1px solid var(--color-border, rgba(15,23,42,.12)); border-radius: 14px; background: var(--color-surface, #fff); }
table.cmp { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; }
.cmp th, .cmp td { padding: .6rem .9rem; border-bottom: 1px solid var(--color-border, rgba(15,23,42,.08)); text-align: center; vertical-align: middle; min-width: 132px; font-size: .9rem; background: var(--color-surface, #fff); }
.cmp .cmp-first { position: sticky; left: 0; z-index: 2; text-align: left; min-width: 210px; max-width: 260px; font-weight: 600; border-right: 1px solid var(--color-border, rgba(15,23,42,.08)); }
.cmp thead th { position: sticky; z-index: 3; }
.cmp thead tr.cmp-groups th { top: 0; height: 38px; padding-top: .4rem; padding-bottom: .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); background: var(--color-surface-muted, #f1f5f9); }
.cmp thead tr.cmp-heads th { top: 38px; border-bottom: 2px solid var(--color-border, rgba(15,23,42,.15)); }
.cmp thead .cmp-first { z-index: 4; vertical-align: bottom; }
.cmp-corner { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
.cmp-div-fbr { box-shadow: inset 0 -3px 0 var(--color-accent-500); }
.cmp-div-hybrid { box-shadow: inset 0 -3px 0 var(--color-primary-900, #0f172a); }
.cmp-div-sales { box-shadow: inset 0 -3px 0 var(--color-text-secondary); }
.cmp-name { font-weight: 700; font-size: 1.02rem; }
.cmp-tags { min-height: 1.4rem; margin: .15rem 0 .4rem; display: flex; gap: .25rem; justify-content: center; flex-wrap: wrap; }
.cmp tr.cmp-section th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); background: var(--color-surface-muted, #f1f5f9); padding: .45rem .9rem; position: static; }
.cmp td.is-current, .cmp th.cmp-plan.is-current { background: var(--color-surface-muted, #f1f5f9); }
.cmp .cmp-main { font-weight: 600; }
.cmp .cmp-sub { display: block; font-size: .72rem; color: var(--color-text-secondary); }
.cmp .cmp-yes { color: var(--color-accent-600, #059669); font-size: 1.1rem; }
.cmp .cmp-no, .cmp .cmp-none { color: var(--color-text-tertiary, #94a3b8); font-weight: 400; }
.cmp .cmp-warn { color: var(--bs-warning-text-emphasis, #92400e); font-weight: 600; }
.cmp th.is-off { opacity: .65; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th.cmp-first { background: var(--color-surface-muted, #f1f5f9); }
@media (max-width: 767.98px) { .cmp .cmp-first { min-width: 150px; max-width: 170px; font-size: .82rem; } .cmp th, .cmp td { min-width: 120px; padding: .5rem .6rem; } }