/* ============================================================
   PRICING.CSS — Pricing Page
   ============================================================ */

.pricing-section { padding: var(--space-4xl) 0; }

/* Toggle */
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.pricing-toggle span { font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-medium); }
.pricing-toggle span.active { color: var(--text-primary); }
.toggle-switch { width: 52px; height: 28px; border-radius: var(--radius-full); background: var(--border-light); border: 1px solid var(--border-subtle); position: relative; cursor: pointer; transition: background var(--duration-fast); }
.toggle-switch.active { background: var(--accent-primary); border-color: var(--accent-primary); }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform var(--duration-fast) var(--ease-spring); }
.toggle-switch.active::after { transform: translateX(24px); }
.pricing-save { font-size: var(--fs-xs); color: var(--success); font-weight: var(--fw-semibold); }

/* Pricing Cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: start; }
.pricing-card { padding: var(--space-2xl); background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); position: relative; transition: all var(--duration-normal) var(--ease-out); }
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pricing-card.popular { border-color: var(--accent-primary); box-shadow: var(--shadow-glow-sm); }
.pricing-card.popular::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-gradient); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: var(--space-2xs) var(--space-md); background: var(--accent-gradient); color: white; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-full); }
.pricing-card-header { text-align: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border-subtle); }
.pricing-card-header h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.pricing-card-header .pricing-desc { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--space-lg); }
.pricing-amount { display: flex; align-items: baseline; justify-content: center; gap: var(--space-2xs); }
.pricing-amount .currency { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-primary); }
.pricing-amount .price { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-extrabold); color: var(--text-primary); line-height: 1; }
.pricing-amount .period { font-size: var(--fs-small); color: var(--text-muted); }
.pricing-features { margin-bottom: var(--space-xl); }
.pricing-features li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; font-size: var(--fs-small); color: var(--text-secondary); }
.pricing-features li svg { width: 16px; height: 16px; flex-shrink: 0; }
.pricing-features li svg.check { color: var(--success); }
.pricing-features li svg.cross { color: var(--text-muted); }
.pricing-features li.disabled { color: var(--text-muted); }
.pricing-card .btn { width: 100%; }

/* Comparison Table */
.comparison-section { background: var(--bg-secondary); padding: var(--space-4xl) 0; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table thead th { padding: var(--space-md) var(--space-lg); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-primary); text-align: center; border-bottom: 1px solid var(--border-subtle); }
.comparison-table thead th:first-child { text-align: left; }
.comparison-table tbody td { padding: var(--space-md) var(--space-lg); font-size: var(--fs-small); color: var(--text-secondary); text-align: center; border-bottom: 1px solid var(--border-subtle); }
.comparison-table tbody td:first-child { text-align: left; font-weight: var(--fw-medium); color: var(--text-primary); }
.comparison-table .check-icon { color: var(--success); }
.comparison-table .cross-icon { color: var(--text-muted); }

@media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
@media (max-width: 768px) { .comparison-table { font-size: var(--fs-xs); } .comparison-table thead th, .comparison-table tbody td { padding: var(--space-sm); } }