/* ============ متجر ريدكس — طبقة الحركة والتفاعل (fx.css) ============
   تُحمَّل بعد site.css. كل ما هنا إضافات تحسينية؛ حذف الملف يعيد الموقع كما كان. */
:root{--fx-e:cubic-bezier(.22,1,.36,1);--fx-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- المؤشر الذهبي ---------- */
#fxRing.is-field::before{transform:scale(.5);background:var(--gold);border-color:var(--gold)}
#fxGlow::before{width:620px;height:620px;left:-310px;top:-310px;background:radial-gradient(closest-side,rgba(232,199,126,.11),rgba(210,31,60,.09) 40%,transparent 72%)}
#fxGlow::after{display:none}
html[data-theme=light] #fxGlow::before{background:radial-gradient(closest-side,rgba(210,31,60,.07),transparent 70%)}
html[data-theme=light] #fxRing::before{border-color:rgba(184,22,50,.7);box-shadow:none}
html[data-theme=light] #fxRing.has-txt::before{background:var(--red);border-color:var(--red)}
html[data-theme=light] #fxRing span{color:#fff}

/* ---------- لوحة الشرارات ---------- */
#fxSparks{position:fixed;inset:0;z-index:420;pointer-events:none}

/* ---------- تموّج الأزرار ---------- */
.fx-rip-host{overflow:hidden;isolation:isolate}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(255,246,234,.38),rgba(255,246,234,0) 60%);transform:scale(0);opacity:1;animation:fxRip .65s var(--fx-e) forwards}
.btn:not(.pri) .fx-rip,.chip .fx-rip,.ibtn .fx-rip,.ubtn .fx-rip,.sg .fx-rip{background:radial-gradient(circle,rgba(232,199,126,.32),rgba(232,199,126,0) 60%)}
@keyframes fxRip{to{transform:scale(1);opacity:0}}

/* ---------- جمرات البطل ---------- */
.fx-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9;mix-blend-mode:screen}
html[data-theme=light] .fx-embers{mix-blend-mode:multiply;opacity:.45}

/* ---------- بقعة الضوء على الكروت ---------- */
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;opacity:0;transition:opacity .45s var(--fx-e);
  background:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(232,199,126,.10),transparent 45%);}
.fx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(260px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(232,199,126,.85),rgba(210,31,60,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){[data-fx-spot]:hover>.fx-spot{opacity:1}}
html[data-theme=light] .fx-spot{background:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(210,31,60,.06),transparent 45%)}

/* ---------- ميلان الكروت ثلاثي الأبعاد ---------- */
@media (hover:hover) and (pointer:fine){
  .card[data-fx-tilt]{transform:perspective(1000px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transform-style:preserve-3d;transition:translate .5s var(--fx-e),border-color .3s,box-shadow .5s var(--fx-e)}
  .card[data-fx-tilt]:hover{box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(232,199,126,.22),0 18px 50px -20px rgba(210,31,60,.45)}
  .card[data-fx-tilt]:hover .card-num{transform:translateZ(30px)}
  .card-num{transition:transform .5s var(--fx-e)}
}

/* ---------- ظهور الصور ---------- */
img.fx-ld{opacity:0;filter:blur(14px) saturate(.6);transform:scale(1.04);transition:opacity .7s var(--fx-e),filter .9s var(--fx-e),transform 1.1s var(--fx-e)}
img.fx-ld.fx-ok{opacity:1;filter:none;transform:none}
.card-img:has(img.fx-ld:not(.fx-ok))::after{background:linear-gradient(110deg,transparent 30%,rgba(232,199,126,.08) 50%,transparent 70%),linear-gradient(180deg,rgba(11,2,5,.35),transparent 30%,transparent 55%,rgba(11,2,5,.92));background-size:220% 100%,auto;animation:fxShim 1.4s linear infinite}
@keyframes fxShim{from{background-position:120% 0,0 0}to{background-position:-120% 0,0 0}}

/* ---------- كشف العناوين ---------- */
h2.fx-h{opacity:0;filter:blur(10px);transform:translateY(22px);clip-path:inset(0 0 -20% 0);transition:opacity .9s var(--fx-e),filter 1s var(--fx-e),transform 1s var(--fx-e)}
h2.fx-h.fx-in{opacity:1;filter:none;transform:none}
.sec-h h2.fx-in::after,.fnd-h h2.fx-in::after{animation:fxLine 1.1s var(--fx-e) .25s backwards}
@keyframes fxLine{from{transform:scaleX(0)}}

/* ---------- الشريط المتحرك: انحناء مع سرعة التمرير ---------- */
.ticker-in>*{display:inline-block;transform:skewX(var(--fx-skew,0deg));transition:transform .25s linear}
.ticker span{transition:color .3s}
@media (hover:hover){.ticker:hover .ticker-in{animation-play-state:paused}.ticker span:hover{color:var(--gold)}}

/* ---------- انتقال الصفحات ---------- */
#app.fx-page>*:nth-child(-n+4){animation:fxPage .75s var(--fx-e) backwards}
#app.fx-page>*:nth-child(2){animation-delay:.06s}
#app.fx-page>*:nth-child(3){animation-delay:.12s}
#app.fx-page>*:nth-child(4){animation-delay:.18s}
@keyframes fxPage{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}

/* ---------- أزرار مغناطيسية + لمسات الأزرار ---------- */
.btn[data-fx-mag]{translate:var(--fx-mx,0px) var(--fx-my,0px);transition:translate .35s var(--fx-e),transform .16s var(--e),background .25s,border-color .25s,box-shadow .3s}
.btn{transition:transform .2s var(--fx-spring),background .25s,border-color .25s,box-shadow .3s}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.97)}}
.btn.pri .ic{position:relative;z-index:1}

/* ---------- المفضلة: نبضة القلب ---------- */
.fav.fx-pop svg{animation:fxPop .55s var(--fx-spring)}
@keyframes fxPop{0%{transform:scale(.6)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.fav.on svg{fill:currentColor}

/* ---------- الهيدر عند التمرير ---------- */
.hdr-in{transition:box-shadow .4s var(--fx-e),background .4s var(--fx-e),border-color .4s}
html.fx-scrolled .hdr-in{box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,246,234,.05)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:1.5px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .4s var(--fx-e)}
@media (hover:hover){.nav a:not([aria-current]):hover::after{transform:scaleX(1)}}

/* ---------- زر الدعم ---------- */
.sup{transition:transform .5s var(--fx-e),opacity .4s,padding .4s var(--e),gap .4s}
.sup.fx-hide{transform:translateX(calc(-100% - 40px));opacity:0;pointer-events:none}
[dir=ltr] .sup.fx-hide{transform:translateX(calc(100% + 40px))}
@media (max-width:1020px){
  .sup{width:48px;padding:0;justify-content:center;gap:0}
  .sup span{max-width:0!important;opacity:0!important}
}

/* ---------- الأسئلة الشائعة: فتح ناعم ---------- */
@supports (interpolate-size:allow-keywords){
  .faq-l details{interpolate-size:allow-keywords}
  .faq-l details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--fx-e),content-visibility .45s allow-discrete}
  .faq-l details[open]::details-content{block-size:auto}
}
.faq-l summary{transition:color .25s}
@media (hover:hover){.faq-l summary:hover{color:var(--gold)}}

/* ---------- الشريط السفلي (الجوال) ---------- */
.tabbar a{transition:color .3s var(--fx-e),transform .35s var(--fx-spring)}
.tabbar a:active{transform:scale(.9)}
.tabbar a[aria-current] svg{animation:fxTab .5s var(--fx-spring)}
@keyframes fxTab{0%{transform:translateY(4px) scale(.8)}100%{transform:none}}

/* ---------- تحديد النص والتمرير ---------- */
html{scroll-padding-top:calc(var(--hdr) + 16px)}

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-embers,#fxSparks,.fx-rip{display:none}
  h2.fx-h{opacity:1;filter:none;transform:none}
  img.fx-ld{opacity:1;filter:none;transform:none}
  #app.fx-page>*{animation:none}
  .card[data-fx-tilt]{transform:none}
}
@media (hover:none),(pointer:coarse){#fxGlow,#fxRing{display:none}}

/* ---------- إصلاح: شريط الشراء المصغّر كان يطل من خلف الهيدر ---------- */
.minibar:not(.on){transform:translateY(calc(-100% - 110px));opacity:0;visibility:hidden;transition:transform .5s var(--fx-e),opacity .3s,visibility 0s .5s}
.minibar.on{opacity:1;visibility:visible;transition:transform .5s var(--fx-e),opacity .3s}
/* ---------- إصلاح: رقم الحساب على الغلاف في الوضع الفاتح ---------- */
html[data-theme=light] .card-num{color:#FFF6EA;text-shadow:0 2px 18px rgba(0,0,0,.7)}

/* ثبات مفاتيح المظهر واللغة: لا تنقلب أماكنها عند تبديل اللغة أو الاتجاه */
html[dir] .sg{direction:rtl;--sd:-1}
.sg span{transition:color .4s,transform .5s var(--e)}
.sg:active span{transform:scale(.88)}
.sg i{transition:transform .6s var(--e),background .4s}

/* الباحث الذكي: طلب بمواصفات خاصة عبر واتساب */
.fnd-wa{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:clamp(18px,3vw,28px);padding:14px 16px;border-radius:var(--r2);border:1px dashed rgba(37,211,102,.45);background:linear-gradient(90deg,rgba(37,211,102,.08),transparent 70%)}
.fnd-wa-t{display:grid;gap:3px}
.fnd-wa-t b{font-size:15px}
.fnd-wa-t label{font-size:12.5px;color:var(--mute)}
.fnd-wa input{min-width:0;height:46px;padding:0 16px;border-radius:99px;border:1px solid var(--line2);background:var(--f6);color:var(--cream);font:500 14.5px var(--ui);outline:0;transition:border-color .2s,box-shadow .2s}
.fnd-wa input:focus{border-color:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.btn.wa{margin:0;background:linear-gradient(180deg,#2bd56e,#1aa952);border-color:rgba(120,255,170,.5);color:#fff;box-shadow:0 10px 28px -12px rgba(37,211,102,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.wa svg{stroke:#fff}
.btn.wa:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(37,211,102,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.wa::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(37,211,102,.55);opacity:0;animation:waPulse 2.6s 1.2s infinite}
@keyframes waPulse{0%{opacity:.8;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.08)}}
html[data-theme=light] .fnd-wa{background:linear-gradient(90deg,rgba(37,211,102,.1),transparent 70%)}
@media (max-width:860px){.fnd-wa{grid-template-columns:1fr}.btn.wa{width:100%}}
@media (prefers-reduced-motion:reduce){.btn.wa::after{animation:none}}

/* زر لوحة التحكم في الرأس */
#admBtn{display:grid;place-items:center}
#admBtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#admBtn{animation:admIn .6s var(--e) both}
@keyframes admIn{from{opacity:0;transform:scale(.6)}}

/* الشعار: تفاعل خفيف بدون أي خلفية */
.brand img{transition:transform .7s var(--e),filter .45s;transform-origin:50% 55%}
@media (hover:hover){.brand:hover img{transform:rotate(-7deg) scale(1.07);filter:drop-shadow(0 0 10px rgba(210,31,60,.55))}}
.brand:active img{transform:scale(.9) rotate(4deg);transition-duration:.2s}
html[data-theme=light] .brand:hover img{filter:drop-shadow(0 4px 10px rgba(210,31,60,.35))}
@media (prefers-reduced-motion:reduce){.brand img{transition:none}}