/* Local mapping to app variables (light theme) */
.lp-plans { --color-bg-primary: var(--color-bg); --color-bg-secondary: var(--card-bg, #fff); --color-bg-tertiary: var(--panel-bg, #f3f4f6); --color-bg-hover: var(--panel-bg, #f5f7fb); --color-text-primary: var(--color-text); --color-text-secondary: var(--text-secondary, #6b7280); --color-text-tertiary: var(--text-secondary, #9ca3af); --color-text-dark: var(--text-main, #0b1021); --color-accent-primary: var(--color-primary); --color-accent-primary-dark: var(--color-primary-dark); --color-accent-primary-alpha-10: rgba(var(--color-primary-rgb, 30,136,229), .15); --color-accent-positive: var(--success, #22c55e); --color-accent-warning: var(--color-secondary); --color-accent-negative: var(--error, #cf6679); --color-border-primary: var(--border-color, #e5e7eb); --color-border-secondary: var(--border-color, #eef0f3); --z-modal: 1000; --spacing-xs: 6px; --spacing-sm: 10px; --spacing-md: 14px; --spacing-lg: 20px; --spacing-xl: 28px; --border-radius-small: 6px; --border-radius-medium: 10px; --border-radius-large: 16px; --shadow-small: 0 2px 8px rgba(0,0,0,.08); --shadow-medium: 0 6px 20px rgba(0,0,0,.12); --shadow-large: 0 16px 40px rgba(0,0,0,.2); --theme-transition: all .25s ease; }
.lp-plans .plans-grid { display:flex; gap:var(--spacing-xl); margin-bottom:var(--spacing-xl); padding:var(--spacing-sm) 0 var(--spacing-lg) 0; overflow-x:auto; overflow-y:hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.lp-plans .plans-grid::-webkit-scrollbar { height:8px; }
.lp-plans .plans-grid::-webkit-scrollbar-track { background: var(--color-bg-tertiary); }
.lp-plans .plans-grid::-webkit-scrollbar-thumb { background: var(--color-accent-primary); border-radius:8px; }
.lp-plans .plan-card { background:var(--color-bg-secondary); border:2px solid var(--color-border-primary); border-radius:var(--border-radius-large); padding:var(--spacing-xl); position:relative; transition:.3s; overflow:hidden; width:360px; max-width:90vw; flex:0 0 auto; scroll-snap-align:center; }
.lp-plans .plan-card:hover { border-color:var(--plan-accent-color, var(--color-accent-primary)); box-shadow:0 8px 25px rgba(0,0,0,.15); transform:translateY(-2px); }
.lp-plans .plan-name{color:var(--color-text-primary); font-size:1.25rem; font-weight:700; margin-bottom:var(--spacing-xs)}
.lp-plans .plan-pricing{text-align:center; margin-bottom:var(--spacing-lg)}
.lp-plans .plan-price-amount{color:var(--color-text-primary); font-size:1.9rem; font-weight:700; display:block}
.lp-plans .plan-price-period{color:var(--color-text-secondary); font-size:.9rem; font-weight:500}
.lp-plans .plan-price-savings{display:flex; align-items:center; justify-content:center; gap:6px; color:var(--color-accent-primary); font-size:.9rem; font-weight:600; margin:.25rem 0; padding:4px 8px; background:var(--color-accent-primary-alpha-10); border-radius:8px}
.lp-plans .plan-price-total{color:var(--color-text-secondary); font-size:.85rem; padding-top:var(--spacing-sm); border-top:1px solid var(--color-border-secondary)}
.lp-plans .plan-features{list-style:none; margin-bottom:var(--spacing-xl)}
.lp-plans .plan-features li{display:flex; gap:8px; color:var(--color-text-primary); margin-bottom:var(--spacing-md)}
.lp-plans .plan-features li::before{content:"✓"; color:var(--color-accent-primary); font-weight:700}
.lp-plans .feature-level-item{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--spacing-md)}
.lp-plans .feature-level-name{color:var(--color-text-primary); font-weight:500; font-size:.9rem}
.lp-plans .feature-level-slider{display:flex; gap:2px; margin-left:var(--spacing-md)}
.lp-plans .slider-segment{width:12px; height:8px; background:var(--color-bg-tertiary); border-radius:2px}
.lp-plans .slider-segment.active{background:var(--color-accent-primary)}
.lp-plans .plan-btn{width:100%; padding:12px 16px; border:none; border-radius:10px; font-weight:700; cursor:pointer; transition:var(--theme-transition); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; isolation:isolate; overflow:hidden}
.lp-plans .plan-btn-primary{background:var(--color-accent-primary); color:#fff; box-shadow:0 10px 24px rgba(var(--color-primary-rgb, 30,136,229), .35), 0 2px 6px rgba(0,0,0,.12); animation: cta-pulse 2.2s ease-in-out infinite}
.lp-plans .plan-btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(var(--color-primary-rgb, 30,136,229), .45), 0 4px 10px rgba(0,0,0,.16)}
.lp-plans .plan-btn-secondary{background:transparent; color:var(--color-accent-primary); border:1.5px solid var(--color-accent-primary)}
.lp-plans .plan-btn-secondary:hover{background:var(--color-accent-primary-alpha-10); transform:translateY(-1px)}
@keyframes cta-pulse{0%,100%{transform:translateZ(0) scale(1)}50%{transform:translateZ(0) scale(1.035)}}
@keyframes cta-shine{0%{left:-30%; opacity:0}12%{opacity:1}40%,100%{left:115%; opacity:0}}
.lp-plans .plan-btn-primary::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,.06) 100%); pointer-events:none; mix-blend-mode:screen; z-index:1}
.lp-plans .plan-btn-primary::after{content:""; position:absolute; top:-30%; bottom:-30%; width:18%; left:-25%; border-radius:20px; transform:skewX(-20deg); background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,0) 100%); filter:blur(2px); animation: cta-shine 2.8s ease-in-out infinite; opacity:.9; z-index:2; pointer-events:none}
.lp-plans .plan-details-action{ display:flex; justify-content:center; }
.lp-plans .plan-details-btn{background:transparent; color:var(--color-text-secondary); border:1px solid var(--color-border-secondary); padding:8px 12px; border-radius:8px; font-size:.9rem; cursor:pointer; min-width:140px; text-align:center}
.lp-plans .plan-details-btn:hover{color:var(--color-accent-primary); border-color:var(--color-accent-primary)}
.lp-plans .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:var(--z-modal); opacity:0; visibility:hidden; transition:.3s}
.lp-plans .modal-overlay.active{opacity:1; visibility:visible}
.lp-plans .modal-content{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.95); background:var(--color-bg-primary); width:90vw; height:90vh; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-large); transition:.3s}
.lp-plans .modal-overlay.active .modal-content{transform:translate(-50%,-50%) scale(1)}
.lp-plans .modal-header{padding:10px 14px; border-bottom:1px solid var(--color-border-primary); background:var(--color-bg-secondary); display:flex; align-items:center; position:relative}
.lp-plans .modal-close{position:absolute; right:14px; top:10px; background:var(--color-bg-secondary); border:1px solid var(--color-border-primary); width:32px; height:32px; border-radius:8px; cursor:pointer}
.lp-plans .modal-close i{color:var(--color-text-primary)}
.lp-plans .modal-body{padding:10px; height:calc(90vh - 60px); overflow:auto}
.lp-plans .comparison-wrapper{width:100%; overflow-x:auto; margin:0; padding:0}
.lp-plans .feature-header{background:var(--color-bg-secondary); padding:10px; font-weight:700; color:var(--color-text-primary); display:flex; align-items:center; border-right:2px solid var(--color-border-primary)}
.lp-plans .plan-header{background:var(--color-bg-secondary); padding:10px; text-align:center; border-bottom:2px solid var(--color-border-primary)}
.lp-plans .feature-name{background:var(--color-bg-secondary); padding:12px 18px; border-right:2px solid var(--color-border-primary)}
.lp-plans .feature-title{font-weight:600; color:var(--color-text-primary); margin-bottom:4px}
.lp-plans .feature-description{font-size:.8rem; color:var(--color-text-tertiary)}
.lp-plans .feature-value{background:var(--color-bg-secondary); padding:12px; display:flex; align-items:center; justify-content:center; min-height:60px}
.lp-plans .feature-available{display:flex; align-items:center; gap:8px; color:var(--color-accent-positive); font-weight:500}
.lp-plans .feature-unavailable{color:var(--color-text-tertiary)}
@media (max-width: 1200px){ .lp-plans .plans-grid{ gap:var(--spacing-lg); } }
@media (max-width: 768px){ .lp-plans .plans-grid{ gap:var(--spacing-md); }}