/* ═══════════════════════════════════════════════
   Pricing — OPTIMIZED Visual Effects
   ═══════════════════════════════════════════════ */

/* ── Featured Card: Accent Border + Glow ── */
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(139,105,20,0.1);
}

/* ── Popular Badge: Gradient ── */
.popular-badge {
  background: linear-gradient(135deg, #7A5C11, #B08515);
  box-shadow: 0 4px 12px rgba(139,105,20,0.25);
}

/* ── Price: Gradient Text ── */
.tier-price {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards: Hover Depth ── */
.pricing-card {
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(61,46,34,0.1);
}
.pricing-card.featured:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(139,105,20,0.15);
}
[data-theme="dark"] .pricing-card:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

/* ── CTA: Green for purchase actions ("go" signal) ── */
.cta-base {
  background: #16A34A !important;
  box-shadow: 0 4px 16px rgba(22,163,74,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-base:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22,163,74,0.4);
  background: #15803D !important;
}
.cta-pro {
  border-color: #16A34A !important;
  color: #16A34A !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cta-pro:hover {
  transform: translateY(-2px);
  background: #16A34A !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(22,163,74,0.25);
}
.cta-free {
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cta-free:hover {
  transform: translateY(-1px);
}

/* ── Feature List: Hover Shift ── */
.feature-list li { transition: transform 0.15s ease; }
.feature-list li:hover { transform: translateX(3px); }

/* ── Toggle Active: Shadow ── */
.toggle-btn.active { box-shadow: 0 3px 10px rgba(139,105,20,0.25); }

/* ── Mobile ── */
@media (max-width: 900px) {
  .pricing-card:hover { transform: translateY(-3px); }
}