/* beIN SPORT Shop — باقات متحركة */
@property --pkx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.pkx-sec{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 90% 0%,rgba(124,58,237,.35),transparent 60%),radial-gradient(700px 420px at 0% 100%,rgba(245,179,1,.12),transparent 60%),linear-gradient(160deg,#0f0a1f 0%,#1a1233 55%,#241347 100%);color:#fff;padding:clamp(2.2rem,5vw,3.6rem) 0}
.pkx-sec:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.pkx{position:relative}
.pkx-head{text-align:center;margin:0 auto 1.2rem;max-width:760px}
.pkx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:#e9ddff;background:rgba(124,58,237,.25);border:1px solid rgba(167,139,250,.45);padding:.3rem .9rem;border-radius:999px}
.pkx-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pkxPing 1.8s infinite}
.pkx-title{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.3;margin:.7rem 0 0;font-weight:800;color:#fff}
.pkx-title span{background:linear-gradient(90deg,#c4b5fd,#f5b301,#c4b5fd);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pkxShine 6s linear infinite}
.pkx-ctl{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:1rem 0 1.6rem}
.pkx-cc{position:relative;display:inline-flex;gap:.25rem;padding:.35rem;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.pkx-cc button{position:relative;z-index:1;display:flex;align-items:center;gap:.45rem;border:0;background:transparent;color:#d9d0f0;font:inherit;font-weight:800;font-size:1rem;padding:.65rem 1.1rem;border-radius:14px;cursor:pointer;transition:color .25s}
.pkx-cc button small{font-size:.7rem;font-weight:700;opacity:.75;letter-spacing:.5px}
.pkx-cc button.on{color:#1a1233;background:linear-gradient(135deg,#fff,#efe7ff);box-shadow:0 8px 24px rgba(124,58,237,.45);transform:translateY(-1px)}
.pkx-cc button{transition:color .25s,background .35s,box-shadow .35s,transform .25s}
.pkx-flag{width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:0 0 auto}
.pkx-ink{position:absolute;z-index:0;top:.35rem;bottom:.35rem;left:0;width:0;border-radius:14px;background:linear-gradient(135deg,#fff,#efe7ff);box-shadow:0 8px 24px rgba(124,58,237,.45);transition:left .45s cubic-bezier(.2,.9,.3,1.2),width .45s cubic-bezier(.2,.9,.3,1.2)}
.pkx-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.pkx-seg,.pkx-dur{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pkx-seg button,.pkx-dur button{position:relative;border:0;background:transparent;color:#cfc4ea;font:inherit;font-weight:700;font-size:.92rem;padding:.5rem .9rem;border-radius:10px;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.pkx-seg button:hover,.pkx-dur button:hover{color:#fff}
.pkx-seg button.on{background:#7c3aed;color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.5)}
.pkx-dur button.on{background:#f5b301;color:#1a1233;box-shadow:0 6px 18px rgba(245,179,1,.4)}
.pkx-dur button em{position:absolute;top:-9px;left:-6px;font-style:normal;font-size:.62rem;font-weight:800;background:#22c55e;color:#fff;border-radius:999px;padding:1px 6px;animation:pkxBob 2.4s ease-in-out infinite}
.pkx-dur[hidden]{display:none}
.pkx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.2rem;align-items:stretch}
.pkx-card{position:relative;border-radius:22px;padding:2px;isolation:isolate;opacity:0;transform:translateY(26px) scale(.97)}
.pkx-grid.show .pkx-card{animation:pkxIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 110ms)}
.pkx-ring{position:absolute;inset:0;border-radius:22px;z-index:-1;background:conic-gradient(from var(--pkx-a),rgba(167,139,250,.25),#7c3aed,#c4b5fd,rgba(167,139,250,.25) 40%,rgba(167,139,250,.25));animation:pkxSpin 6s linear infinite}
.pkx-card.is-hot .pkx-ring{background:conic-gradient(from var(--pkx-a),#f5b301,#ff7a18,#7c3aed,#f5b301 35%,rgba(245,179,1,.3) 60%,#f5b301);animation-duration:3.5s;filter:drop-shadow(0 0 14px rgba(245,179,1,.45))}
.pkx-card.is-best .pkx-ring{background:conic-gradient(from var(--pkx-a),#a78bfa,#22d3ee,#7c3aed,#a78bfa 40%,rgba(167,139,250,.3) 65%,#a78bfa)}
.pkx-body{position:relative;height:100%;display:flex;flex-direction:column;gap:.55rem;border-radius:20px;padding:1.25rem 1.2rem 1.15rem;background:linear-gradient(170deg,rgba(38,24,78,.96),rgba(18,12,38,.98));overflow:hidden}
.pkx-body:after{content:"";position:absolute;top:-60%;left:-60%;width:50%;height:220%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:pkxSweep 5.5s ease-in-out infinite;animation-delay:calc(var(--i) * .6s);pointer-events:none}
.pkx-card:hover{transform:translateY(-8px)}
.pkx-grid.show .pkx-card:hover{animation:none;opacity:1;transform:translateY(-8px)}
.pkx-card{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pkx-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;min-height:26px}.pkx-tag,.pkx-fire{white-space:nowrap}
.pkx-tag{font-size:.75rem;font-weight:800;color:#e9ddff;background:rgba(124,58,237,.35);border:1px solid rgba(167,139,250,.4);padding:.2rem .6rem;border-radius:999px}
.pkx-fire{font-size:.72rem;font-weight:800;color:#1a1233;background:linear-gradient(90deg,#f5b301,#ffd65a);padding:.22rem .6rem;border-radius:999px;animation:pkxPulse 1.6s ease-in-out infinite}
.pkx-img{display:block;margin:.2rem -.4rem 0;border-radius:14px;background:radial-gradient(circle at 50% 60%,rgba(124,58,237,.35),transparent 70%)}
.pkx-img img{display:block;width:100%;height:150px;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));animation:pkxFloat 4.5s ease-in-out infinite}
.pkx-name{margin:.1rem 0 0;font-size:1.35rem;font-weight:800;line-height:1.25;color:#fff}
.pkx-name small{display:block;font-size:.78rem;letter-spacing:2px;font-weight:800;color:#c4b5fd}
.pkx-ch{font-size:.9rem;color:#cfc4ea}.pkx-ch b{font-size:1.15rem;color:#fff}
.pkx-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.pkx-num{font-size:2.5rem;line-height:1;font-weight:900;background:linear-gradient(180deg,#fff,#e2d6ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.pkx-card.is-hot .pkx-num{background:linear-gradient(180deg,#ffe28a,#f5b301);-webkit-background-clip:text;background-clip:text}
.pkx-sym{font-weight:800;color:#f5b301}
.pkx-price em{font-style:normal;color:#b8acd6;font-size:.9rem}
.pkx-sub{font-size:.82rem;color:#b8acd6;line-height:1.6}
.pkx-feats{list-style:none;margin:.3rem 0 .4rem;padding:0;display:grid;gap:.35rem}
.pkx-feats li{position:relative;padding-right:1.5rem;font-size:.9rem;line-height:1.55;color:#e8e2f6}
.pkx-feats li:before{content:"";position:absolute;right:0;top:.35em;width:1rem;height:1rem;border-radius:50%;background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/70% no-repeat}
.pkx-btns{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.pkx-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:.55rem .6rem;border-radius:12px;font-weight:800;font-size:.92rem;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s}
.pkx-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.pkx-pay{grid-column:1/-1;position:relative;overflow:hidden;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;box-shadow:0 10px 24px rgba(124,58,237,.45)}
.pkx-card.is-hot .pkx-pay{background:linear-gradient(135deg,#f5b301,#ff8a00);color:#1a1233;box-shadow:0 10px 24px rgba(245,179,1,.45)}
.pkx-pay:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-120%);animation:pkxBtn 3s ease-in-out infinite}
.pkx-renew{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff}
.pkx-wa{grid-column:1/-1;background:#1da851;color:#fff}
.pkx-paywrap{margin-top:1.4rem}
.pkx-pays{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:1rem;border-radius:18px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.18)}
.pkx-pays-t{font-weight:800;color:#fff;margin-left:.3rem}
.pkx-pm{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:10px;background:#fff;color:#1a1233;font-weight:800;font-size:.85rem;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:pkxIn .5s both}
.pkx-pm svg{width:20px;height:20px;fill:#ede7fb;stroke:none}
.pkx-pm-knet svg{fill:#d6e7ff;color:#0b4ea2}.pkx-pm-card svg{fill:#dbeafe;color:#1e3a8a}.pkx-pm-apple svg{color:#000}.pkx-pm-tabby{background:#3bffc1}.pkx-pm-tabby svg{fill:#1a1233;color:#3bffc1}.pkx-pm-mada svg{fill:#e0f2fe;color:#0369a1}.pkx-pm-cod svg{fill:#dcfce7;color:#166534}.pkx-pm-stc svg{fill:#f3e8ff;color:#6b21a8}.pkx-pm-sadad svg{fill:#fef3c7;color:#92400e}.pkx-pm-bank svg{fill:#e5e7eb;color:#374151}
.pkx-pays-n{flex-basis:100%;text-align:center;font-size:.8rem;color:#b8acd6}
@keyframes pkxSpin{to{--pkx-a:360deg}}
@keyframes pkxIn{to{opacity:1;transform:none}}
@keyframes pkxSweep{0%,60%{left:-60%}100%{left:130%}}
@keyframes pkxBtn{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes pkxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes pkxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes pkxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pkxShine{to{background-position:200% 0}}
@keyframes pkxPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}80%,100%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
@media(max-width:640px){.pkx-cc button{padding:.55rem .7rem;font-size:.92rem}.pkx-cc button small{display:none}.pkx-seg button,.pkx-dur button{padding:.45rem .6rem;font-size:.84rem}.pkx-num{font-size:2.2rem}.pkx-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pkx *,.pkx *:before,.pkx *:after{animation:none!important;transition:none!important}.pkx-card{opacity:1;transform:none}}
/* الخلاصة + جدول المحتويات */
.bx-sum{background:linear-gradient(135deg,#1a1233,#2a1657);color:#fff;border:2px solid #7c3aed;border-radius:18px;padding:1.1rem 1.3rem;box-shadow:0 12px 30px rgba(91,33,182,.2)}
.bx-sum h2{margin:0 0 .5rem;font-size:1.25rem;color:#f5b301}
.bx-sum ul{margin:0;padding:0 1.2rem 0 0;line-height:1.9}.bx-sum li{color:#f1ecfb}.bx-sum a{color:#c4b5fd;font-weight:700}
.bx-toc{margin-top:.9rem;background:#f7f5fb;border:1px solid #e7e3f0;border-radius:14px;padding:0 1.1rem}
.bx-toc>summary{cursor:pointer;list-style:none;font-weight:800;color:#5b21b6;padding:.8rem 0;display:flex;align-items:center;gap:.5rem}
.bx-toc>summary::-webkit-details-marker{display:none}
.bx-toc>summary:after{content:"▾";margin-right:auto;transition:transform .2s}.bx-toc[open]>summary:after{transform:rotate(180deg)}
.bx-toc ol{margin:0;padding:0 1.2rem .9rem 0;columns:2;gap:1.5rem}.bx-toc li{break-inside:avoid;margin:.2rem 0}.bx-toc a{color:#1f1b2e;text-decoration:none}.bx-toc a:hover{color:#7c3aed}
@media(max-width:640px){.bx-toc ol{columns:1}}

@media(max-width:640px){.pkx-ctl{align-items:stretch}.pkx-cc{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.pkx-cc button{flex-direction:column;gap:.25rem;padding:.55rem .2rem;font-size:.9rem;justify-content:center}.pkx-row{flex-direction:column;align-items:stretch}.pkx-seg,.pkx-dur{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.pkx-seg button,.pkx-dur button{white-space:nowrap;padding:.5rem .15rem;font-size:.8rem}.pkx-eyebrow{font-size:.75rem}.pkx-pm{font-size:.78rem;padding:.35rem .55rem}}

.pkx-pm-taly{background:#ffe14d}.pkx-pm-taly svg{fill:#1a1233;color:#ffe14d}

/* v3: مدة داخل البطاقة + عرض أفقي للجوال */
.pkx-cdur{display:none;gap:.3rem;margin:.15rem 0 .1rem;padding:.25rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pkx-cdur button{flex:1;border:0;background:transparent;color:#cfc4ea;font:inherit;font-weight:800;font-size:.85rem;padding:.45rem .2rem;border-radius:9px;cursor:pointer;transition:background .25s,color .25s}
.pkx-cdur button.on{background:#f5b301;color:#1a1233;box-shadow:0 4px 14px rgba(245,179,1,.35)}
.pkx-wa.pkx-half{grid-column:auto}
.pkx-renew{font-size:.95rem;white-space:nowrap}.pkx-btns .pkx-btn{white-space:nowrap}
.pkx-hint,.pkx-dots{display:none}
@media(max-width:640px){
 .pkx-head{margin-bottom:.6rem}.pkx-title{font-size:1.35rem;margin-top:.5rem}
 .pkx-ctl{margin:.6rem 0 .5rem;gap:.5rem}
 .pkx-dur{display:none!important}
 .pkx-cdur{display:flex}
 .pkx-grid{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:.8rem;padding:.5rem 1rem 1rem;margin:0 -1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .pkx-grid::-webkit-scrollbar{display:none}
 .pkx-card{flex:0 0 85%;scroll-snap-align:center}
 .pkx-feats li:nth-child(n+3){display:none}
 .pkx-img img{height:115px}
 .pkx-body{padding:1rem .95rem}
 .pkx-num{font-size:2.1rem}
 .pkx-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.1rem 0 0;font-size:.8rem;font-weight:700;color:#cfc4ea;transition:opacity .4s}
 .pkx-hint.gone,.pkx-hint[hidden]{opacity:0;height:0;margin:0;overflow:hidden}
 .pkx-hint i{width:28px;height:2px;background:linear-gradient(90deg,transparent,#f5b301);position:relative;animation:pkxSwipe 1.6s ease-in-out infinite}
 .pkx-hint i:before{content:"";position:absolute;left:-2px;top:-4px;border:5px solid transparent;border-right-color:#f5b301}
 .pkx-dots{display:flex;justify-content:center;gap:6px;margin:.2rem 0 .2rem}
 .pkx-dots i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.3);transition:width .3s,background .3s;cursor:pointer}
 .pkx-dots i.on{width:22px;background:#f5b301}
 .pkx-paywrap{margin-top:.8rem}
}
@keyframes pkxSwipe{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}

/* v4: بطاقة واحدة (beIN CONNECT) في الوسط على الجوال */
@media(max-width:640px){.pkx-grid>.pkx-card:only-child{flex:0 0 100%;max-width:440px;margin-inline:auto}}