/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   vip_ladder.css — the plan cards as ONE sideways-sliding row: Free · Bronze · Silver · Gold (10 Oct 2026).
   The owner: «پلان مجانی رو هم مثل پلان های دیگه کادرش رو در کنار پلان برونز قرار بده … اگه جاشون نمیشه … اسکرول افقی … یه
   طراحی زیبا … که بشود همه پلن ها رو دید». Shared by /vip.php and /MIBL_Mobile/vip.php (so the app shows it too).
   · wide screen: the row breaks out of the page column (up to 1260px) so all four cards stand side by side;
   · narrower, and on every phone: a swipeable row that snaps card by card, the next card peeking in from the edge, soft fades
     at the edges, a floating bar with ‹ ● ● ● ● › (keeps itself under the header while the tall cards scroll past);
   · RTL languages mirror (the first card is on the right, the arrows turn round).
   Cards keep their own look (the two pages style .vp-tier themselves); this file is the track, the controls and the Free card.
   ⚠️ The crown sits 26px ABOVE a card (cr_crown_html) and the active card's glow reaches ~58px below it: a scrolling box
   clips both, so the track carries that room as padding.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vp-ladder{position:relative;margin-top:22px;margin-inline:calc((100% - min(1260px, 100vw - 32px)) / 2)}
@media(max-width:700px){.vp-ladder{margin-inline:calc(50% - 50vw)}}

.vp-tiers{display:flex;align-items:flex-start;gap:var(--vpgap,18px);margin:-8px 0 -14px;padding:58px 10px 46px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:10px;scroll-behavior:smooth;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;outline:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.vp-tiers::-webkit-scrollbar{display:none}
.vp-tiers:focus-visible{box-shadow:inset 0 0 0 2px rgba(34,211,238,.55);border-radius:18px}
.vp-tier{flex:0 0 max(268px, calc((100% - (var(--vpn,4) - 1) * var(--vpgap,18px)) / var(--vpn,4)));scroll-snap-align:start;
  transition:opacity .35s ease}
@media(max-width:700px){
  .vp-tiers{padding-inline:16px;scroll-padding-inline:16px}
  .vp-tier{flex-basis:min(84%,330px)}
}
/* sliding: a card only half in view steps back, so the one to read is obvious */
.vp-ladder.is-scroll .vp-tier:not(.is-in){opacity:.5}
@media(prefers-reduced-motion:reduce){.vp-tiers{scroll-behavior:auto}.vp-tier{transition:none}}

/* the floating control bar: ‹ dots › */
.vp-ctl{display:none;position:sticky;top:var(--vp-top,76px);z-index:7;width:max-content;max-width:100%;margin:0 auto -4px;
  align-items:center;gap:10px;padding:6px 8px;border-radius:999px;background:rgba(9,11,22,.8);
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.vp-ladder.is-scroll .vp-ctl{display:flex}
.vp-nav{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;
  display:grid;place-items:center;padding:0;cursor:pointer;transition:opacity .2s,background .15s,transform .15s}
.vp-nav:hover:not(:disabled){background:rgba(255,255,255,.16)}
.vp-nav:active:not(:disabled){transform:scale(.9)}
.vp-nav:disabled{opacity:.28;cursor:default}
.vp-nav:focus-visible,.vp-dot:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
html[dir="rtl"] .vp-nav svg{transform:scaleX(-1)}
.vp-dots{display:flex;align-items:center;gap:8px;padding:0 4px}
.vp-dot{--c:#22d3ee;width:9px;height:9px;border-radius:99px;border:0;padding:0;background:var(--c);opacity:.38;cursor:pointer;
  transition:width .3s cubic-bezier(.2,.9,.3,1.2),opacity .25s}
.vp-dot.free{--c:#22d3ee}.vp-dot.bronze{--c:#e0a670}.vp-dot.silver{--c:#e2e8f0}.vp-dot.gold{--c:#fbbf24}
.vp-dot.on{width:24px;opacity:1}
@media(prefers-reduced-motion:reduce){.vp-dot,.vp-nav{transition:none}}

/* the Free card — the first rung, cool cyan beside the three metals */
.vp-tier.free{border-color:rgba(34,211,238,.30);background:linear-gradient(165deg,rgba(34,211,238,.075),rgba(255,255,255,.015) 60%)}
.vp-tier.free .vp-tier-name{color:#67e8f9}
.vp-tier.free .vp-tier-price b{color:#e6fbff}
.vp-tier.free .vp-tier-rate{color:#67e8f9;background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.24)}
.vp-tier.free > ul > li::before{color:#22d3ee}   /* the spec list's ticks — not the drawer's green ✓ / red ✕ */
.vp-tier.free .vp-tier-cta,.vp-tier.free:not(.is-offer) .vp-tier-cta{color:#a5f3fc;background:rgba(34,211,238,.10);
  border:1px solid rgba(34,211,238,.45);box-shadow:none}
.vp-tier.free .vp-tier-cta:hover{background:rgba(34,211,238,.2)}
.vp-seed{position:absolute;top:-26px;inset-inline-end:16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:3;
  pointer-events:none;color:#67e8f9;background:radial-gradient(circle at 30% 22%,#155e75,#0a1b2b 70%);
  border:1px solid rgba(34,211,238,.5);box-shadow:0 6px 22px rgba(34,211,238,.28),inset 0 1px 0 rgba(255,255,255,.18);
  animation:vpSeedIn .9s cubic-bezier(.2,.8,.3,1) both,vpSeedFloat 5.5s ease-in-out 1s infinite}
.vp-seed svg{width:26px;height:26px}
@keyframes vpSeedIn{from{opacity:0;transform:translateY(-14px) scale(.82)}to{opacity:1;transform:none}}
@keyframes vpSeedFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.vp-seed{animation:none}}