/* MapPackAI Plugin Styles */
:root {
  --mpa-green: #22c55e;
  --mpa-green-dark: #16a34a;
  --mpa-black: #030712;
  --mpa-dark: #0a0f1e;
  --mpa-card: #0d1526;
  --mpa-border: rgba(255,255,255,0.07);
  --mpa-text: #f1f5f9;
  --mpa-muted: #64748b;
}

/* ── PRICING ── */
.mpa-pricing-wrap { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.mpa-billing-toggle { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.mpa-toggle-label { font-size: .875rem; color: var(--mpa-muted); font-weight: 500; }
.mpa-toggle-label.mpa-on { color: var(--mpa-text); }
.mpa-toggle-btn { width: 48px; height: 26px; background: var(--mpa-green); border-radius: 999px; position: relative; cursor: pointer; border: none; transition: background .3s; }
.mpa-toggle-btn::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform .3s; }
.mpa-toggle-btn.mpa-yr::after { transform: translateX(22px); }
.mpa-save-badge { background: rgba(34,197,94,.12); color: var(--mpa-green); font-size: .68rem; font-weight: 700; padding: .3rem .875rem; border-radius: 999px; border: 1px solid rgba(34,197,94,.2); }

.mpa-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1rem; }
@media(max-width: 640px) { .mpa-plans-grid { grid-template-columns: 1fr; } }

.mpa-plan-card { background: var(--mpa-card); border: 1px solid var(--mpa-border); border-radius: 24px; padding: 2.5rem; position: relative; overflow: hidden; }
.mpa-plan-hot { border-color: rgba(34,197,94,.35); background: linear-gradient(135deg,rgba(34,197,94,.05) 0%,var(--mpa-card) 100%); }
.mpa-plan-hot::before { content: 'MOST POPULAR'; position: absolute; top: 1.5rem; right: 1.5rem; font-size: .62rem; font-weight: 800; letter-spacing: .15em; color: var(--mpa-green); background: rgba(34,197,94,.1); padding: .3rem .85rem; border-radius: 999px; border: 1px solid rgba(34,197,94,.25); }
.mpa-plan-name { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .375rem; color: var(--mpa-text); }
.mpa-plan-tagline { font-size: .82rem; color: var(--mpa-muted); margin-bottom: 1.75rem; }
.mpa-plan-price { display: flex; align-items: baseline; gap: .25rem; margin-bottom: .375rem; }
.mpa-price-amt { font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--mpa-text); }
.mpa-dollar { font-size: 2rem; vertical-align: top; margin-top: .4rem; }
.mpa-price-per { font-size: .875rem; color: var(--mpa-muted); }
.mpa-price-yr { font-size: .8rem; color: var(--mpa-green); min-height: 1.2em; margin-bottom: 1.75rem; }
.mpa-plan-divider { height: 1px; background: var(--mpa-border); margin: 1.25rem 0; }
.mpa-plan-feats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .625rem; margin-bottom: 2rem; }
.mpa-plan-feats li { display: flex; align-items: flex-start; gap: .625rem; font-size: .84rem; color: var(--mpa-muted); }
.mpa-plan-feats li::before { content: '✓'; color: var(--mpa-green); font-weight: 700; flex-shrink: 0; }
.mpa-plan-cta { display: block; width: 100%; text-align: center; padding: .9rem; border-radius: 10px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: all .2s; box-sizing: border-box; }
.mpa-cta-pri { background: var(--mpa-green); color: #000; }
.mpa-cta-pri:hover { background: var(--mpa-green-dark); transform: translateY(-2px); color: #000; }
.mpa-cta-sec { background: transparent; color: var(--mpa-text); border: 1px solid var(--mpa-border); }
.mpa-cta-sec:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.mpa-pricing-fine { text-align: center; color: var(--mpa-muted); font-size: .78rem; margin: 1rem 0 3rem; }

/* ── ADDONS ── */
.mpa-addons-section { border-top: 1px solid var(--mpa-border); padding-top: 3rem; }
.mpa-addons-title { font-size: 1.5rem; font-weight: 900; color: var(--mpa-text); text-align: center; margin-bottom: .5rem; }
.mpa-addons-sub { text-align: center; color: var(--mpa-muted); font-size: .9rem; margin-bottom: 2rem; }
.mpa-addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media(max-width: 768px) { .mpa-addons-grid { grid-template-columns: repeat(2,1fr); } }
.mpa-addon-card { background: var(--mpa-card); border: 1px solid var(--mpa-border); border-radius: 14px; padding: 1.5rem; text-align: center; transition: all .3s; }
.mpa-addon-card:hover { border-color: rgba(34,197,94,.3); transform: translateY(-3px); }
.mpa-addon-icon { font-size: 1.75rem; display: block; margin-bottom: .625rem; }
.mpa-addon-name { font-weight: 700; font-size: .875rem; color: var(--mpa-text); margin-bottom: .25rem; }
.mpa-addon-desc { font-size: .75rem; color: var(--mpa-muted); margin-bottom: .75rem; line-height: 1.5; }
.mpa-addon-price { font-size: 1.4rem; font-weight: 900; color: var(--mpa-green); }

/* ── BUTTONS ── */
.mpa-btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--mpa-green); color: #000; font-weight: 700; font-size: .95rem; padding: .9rem 2.25rem; border-radius: 10px; text-decoration: none; transition: all .2s; }
.mpa-btn-primary:hover { background: var(--mpa-green-dark); transform: translateY(-2px); color: #000; }
.mpa-btn-secondary { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--mpa-text); font-weight: 600; font-size: .95rem; padding: .9rem 2.25rem; border-radius: 10px; text-decoration: none; border: 1px solid var(--mpa-border); transition: all .2s; margin-left: 1rem; }
.mpa-btn-secondary:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }

/* ── AFFILIATE CTA ── */
.mpa-affiliate-cta { background: var(--mpa-card); border: 1px solid rgba(34,197,94,.2); border-radius: 20px; padding: 3rem; text-align: center; }
.mpa-affiliate-cta h2 { color: var(--mpa-text); font-size: 2rem; font-weight: 900; margin-bottom: 1rem; }
.mpa-affiliate-cta p { color: var(--mpa-muted); margin-bottom: 2rem; }

/* ── HOME CTA ── */
.mpa-home-cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; padding: 2rem 0; }

.mpa-plan-hot * { opacity: 1 !important; color: inherit; }
.mpa-plan-hot .mpa-plan-feats li { color: #94a3b8 !important; }
.mpa-plan-hot .mpa-plan-name { color: #f1f5f9 !important; }
.mpa-plan-hot .mpa-price-amt { color: #f1f5f9 !important; }