:root {
  --red: #e60012;
  --red-dark: #a0000d;
  --red-glow: rgba(230,0,18,0.5);
  --black: #060608;
  --black2: #0e0e12;
  --black3: #16161c;
  --black4: #1e1e26;
  --white: #f0f0f0;
  --gray: #888;
  --gray2: #2a2a32;
  --gray3: #444;
}
*{margin:0;padding:0;box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
html{scroll-behavior:smooth;}
body{font-family:'Tajawal',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:2px;}

/* ★★★ DROPDOWN OPTIONS — fix white-on-white في dark mode ★★★ */
select option,
select optgroup {
  background-color: #0d0d18 !important;
  color: #ffffff !important;
  padding: 8px 12px;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
}
select option:hover,
select option:focus {
  background-color: #1a1a26 !important;
  color: #ffffff !important;
}
select option:checked,
select option[selected] {
  background: linear-gradient(0deg, rgba(230,0,18,0.4), rgba(230,0,18,0.4)) !important;
  background-color: #e60012 !important;
  color: #ffffff !important;
  font-weight: 600;
}
/* للـ Firefox: dropdown على الـ dark theme */
select {
  color-scheme: dark;
}
select option:disabled {
  background-color: #060608 !important;
  color: #555 !important;
}
/* خيار default placeholder */
select option[value=""] {
  color: #999 !important;
}

/* PAGE SYSTEM */
.page{
  display:none;
  min-height:100vh;
  padding-top:72px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.page.active{
  display:block;
  opacity:1;
  transform:translateY(0);
}
.page.visible{
  opacity:1;
  transform:translateY(0);
}

/* PAGE TRANSITION OVERLAY */
.page-transition{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  overflow:hidden;
  visibility:hidden;
}
.page-transition.ready{ visibility:visible; }
.pt-bar{
  position:absolute;
  top:0;
  height:100vh;
  background:var(--red);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s cubic-bezier(.77,0,.18,1);
}
.pt-bar:nth-child(1){left:0;   width:25%; transition-delay:.00s;}
.pt-bar:nth-child(2){left:25%; width:25%; transition-delay:.04s;}
.pt-bar:nth-child(3){left:50%; width:25%; transition-delay:.08s;}
.pt-bar:nth-child(4){left:75%; width:25%; transition-delay:.12s;}
.page-transition.sweep-in .pt-bar{
  transform:scaleY(1);
  transform-origin:bottom;
}
.page-transition.sweep-out .pt-bar{
  transform:scaleY(0);
  transform-origin:top;
}

/* PAGE LABEL FLASH */
.page-label{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(36px,8vw,72px);
  font-weight:700;
  letter-spacing:4px;
  color:#fff;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s;
  text-shadow:0 0 40px rgba(255,255,255,.3);
}
.page-label.ready{ visibility:visible; }
.page-label.show{opacity:1;visibility:visible;}

/* ===== MC HOME TRANSITION CANVAS ===== */
#mcHomeTransCanvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:9997;pointer-events:none;display:none;
}
#mcHomeTransCanvas.active{display:block;}
.mc-home-label{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(32px,6vw,68px);
  font-weight:700;letter-spacing:6px;
  color:#fff;
  text-shadow:0 0 30px rgba(230,0,18,.8),0 2px 0 rgba(0,0,0,.9);
  pointer-events:none;opacity:0;
  visibility:hidden;
  transition:opacity .15s;
  text-transform:uppercase;
  white-space:nowrap;
}
.mc-home-label.ready{ visibility:visible; }
.mc-home-label.show{opacity:1;visibility:visible;}

/* SUPER GAMES product transition label */
#sgProductLabel{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transition:opacity .12s;
}
#sgProductLabel .sg-line{
  display:flex;align-items:center;gap:0;overflow:hidden;
}
#sgProductLabel .sg-word-super{
  font-family:'Rajdhani',sans-serif;font-size:clamp(44px,8vw,88px);
  font-weight:700;letter-spacing:10px;color:#fff;line-height:1;
  display:block;
  transform:translateY(-100%);opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .22s;
}
#sgProductLabel .sg-word-games{
  font-family:'Rajdhani',sans-serif;font-size:clamp(44px,8vw,88px);
  font-weight:700;letter-spacing:10px;line-height:1;
  display:block;
  background:linear-gradient(90deg,#fff 0%,#ff4444 40%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:sgShimmer 1.8s linear infinite;
  transform:translateY(100%);opacity:0;
  transition:transform .32s .08s cubic-bezier(.16,1,.3,1),opacity .22s .08s;
}
@keyframes sgShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
#sgProductLabel .sg-divider{
  width:0;height:2px;background:var(--red);
  box-shadow:0 0 12px var(--red);
  transition:width .4s .18s ease;
}
#sgProductLabel.show{opacity:1;}
#sgProductLabel.show .sg-word-super{transform:translateY(0);opacity:1;}
#sgProductLabel.show .sg-word-games{transform:translateY(0);opacity:1;}
#sgProductLabel.show .sg-divider{width:clamp(180px,32vw,320px);}
/* NOISE */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:0.25;}

/* ===== ANNOUNCEMENT POPUP — floating gaming notification ===== */
#announcementBar.ann-popup{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:480;
  max-width:380px;
  min-width:300px;
  --ann-rgb:230,0,18;
  --ann-text:#ffffff;
  background:linear-gradient(135deg, rgba(14,14,20,.96) 0%, rgba(8,8,14,.98) 100%);
  border:1px solid rgb(var(--ann-rgb));
  padding:14px 18px 14px 14px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow:0 12px 48px rgba(var(--ann-rgb),.32), 0 0 0 1px rgba(var(--ann-rgb),.08), inset 0 1px 0 rgba(255,255,255,.04);
  font-family:'Tajawal',sans-serif;
  text-align:right;
  pointer-events:auto;
  opacity:0;
  transform:translate(40%, 30%) rotate(2deg);
  transition:none;
}
#announcementBar.ann-popup.show{
  animation:ann-slide-in .65s cubic-bezier(.16,1,.3,1) both;
}
#announcementBar.ann-popup.dismissing{
  animation:ann-slide-out .35s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes ann-slide-in{
  0%  { transform:translate(40%, 30%) rotate(2deg); opacity:0; }
  60% { transform:translate(-3%, -4%) rotate(-.5deg); opacity:1; }
  100%{ transform:translate(0,0) rotate(0); opacity:1; }
}
@keyframes ann-slide-out{
  to{ transform:translateX(120%) scale(.9); opacity:0; }
}
.ann-popup-content{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:2;
}
.ann-popup-icon{
  font-size:28px;
  flex-shrink:0;
  animation:ann-icon-pulse 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(var(--ann-rgb),.5));
  line-height:1;
}
@keyframes ann-icon-pulse{
  0%,100%{transform:scale(1) rotate(-4deg)}
  50%   {transform:scale(1.12) rotate(4deg)}
}
.ann-popup-body{
  flex:1;
  min-width:0;
}
.ann-popup-tag{
  font-family:'Rajdhani',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:3px;
  color:rgba(var(--ann-rgb),.85);
  text-transform:uppercase;
  margin-bottom:3px;
  display:flex;
  align-items:center;
  gap:6px;
}
.ann-popup-tag::before{
  content:'';
  width:6px;
  height:6px;
  background:rgb(var(--ann-rgb));
  box-shadow:0 0 8px rgb(var(--ann-rgb));
  animation:ann-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes ann-pulse-dot{
  0%,100%{opacity:1; transform:scale(1)}
  50%   {opacity:.35; transform:scale(.7)}
}
.ann-popup-text{
  font-size:14px;
  font-weight:600;
  color:var(--ann-text);
  line-height:1.5;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  max-height:4.5em;
  overflow:hidden;
}
.ann-popup-close{
  background:rgba(var(--ann-rgb),.12);
  border:1px solid rgba(var(--ann-rgb),.35);
  color:#fff;
  font-size:13px;
  font-weight:700;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  font-family:monospace;
  line-height:1;
  padding:0;
  align-self:flex-start;
  margin-top:2px;
}
.ann-popup-close:hover{
  background:rgba(var(--ann-rgb),.5);
  border-color:rgb(var(--ann-rgb));
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 0 12px rgba(var(--ann-rgb),.5);
}
.ann-popup-close:active{
  transform:rotate(90deg) scale(.92);
}
.ann-popup-scan{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(var(--ann-rgb),.06) 50%, transparent 100%);
  background-size:100% 200%;
  animation:ann-scan 3.5s linear infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes ann-scan{
  from{ background-position:0% -100%; }
  to  { background-position:0% 200%; }
}
.ann-popup-corner{
  position:absolute;
  width:18px;
  height:18px;
  pointer-events:none;
}
.ann-popup-corner.tl{ top:-1px; left:-1px; border-top:2px solid rgb(var(--ann-rgb)); border-left:2px solid rgb(var(--ann-rgb)); }
.ann-popup-corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid rgb(var(--ann-rgb)); border-right:2px solid rgb(var(--ann-rgb)); }

@media (max-width:600px){
  #announcementBar.ann-popup{
    bottom:16px;
    right:12px;
    left:12px;
    max-width:none;
    min-width:0;
  }
}

/* ════════ 🌿 MINECRAFT GRASS SKIN — يُفعّل من لوحة التحكم ════════ */
:root{--mc-plank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60' shape-rendering='crispEdges'%3E%3Crect width='80' height='60' fill='%23808080'/%3E%3Crect y='28' width='80' height='4' fill='%236a6a6a'/%3E%3Crect y='58' width='80' height='2' fill='%236a6a6a'/%3E%3Crect x='0' y='0' width='16' height='10' fill='%23909090'/%3E%3Crect x='40' y='4' width='12' height='8' fill='%238a8a8a'/%3E%3Crect x='60' y='14' width='14' height='10' fill='%23888888'/%3E%3Crect x='20' y='34' width='18' height='10' fill='%238c8c8c'/%3E%3Crect x='52' y='40' width='16' height='10' fill='%23898989'/%3E%3Crect x='24' y='6' width='10' height='8' fill='%23747474'/%3E%3Crect x='8' y='40' width='12' height='8' fill='%23767676'/%3E%3Crect x='68' y='38' width='10' height='10' fill='%23727272'/%3E%3Crect x='44' y='16' width='10' height='8' fill='%23787878'/%3E%3C/svg%3E");}
/* — اللوحة الإعلانية — */
#announcementBar.ann-popup.mc-grass{background-color:transparent!important;background-image:var(--mc-plank),linear-gradient(180deg,#63b03a 0 16px,#8a5a33 16px 100%)!important;background-size:70px 52px,100% 100%!important;background-blend-mode:overlay,normal!important;border:3px solid #2e1c0d!important;image-rendering:pixelated;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:7px!important;clip-path:none!important;box-shadow:inset 2px 2px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.42),0 5px 0 rgba(0,0,0,.4),0 12px 26px rgba(0,0,0,.5)!important;padding:18px 14px 13px 13px!important;max-width:400px!important;min-width:0!important;}
#announcementBar.ann-popup.mc-grass .ann-popup-content{align-items:center!important;}
#announcementBar.ann-popup.mc-grass::after{content:''!important;position:absolute!important;left:0;right:0;top:16px;height:3px;background:repeating-linear-gradient(90deg,#4e8f2c 0 7px,#59a033 7px 14px)!important;box-shadow:none!important;z-index:1;pointer-events:none;}
#announcementBar.mc-grass::before{display:none!important;}
#announcementBar.mc-grass .ann-popup-scan,#announcementBar.mc-grass .ann-popup-corner{display:none!important;}
#announcementBar.mc-grass .ann-popup-content{z-index:2;}
#announcementBar.mc-grass .ann-popup-tag{color:#ffe9a8!important;font-family:'Pixelify Sans','Rajdhani',sans-serif;}
#announcementBar.mc-grass .ann-popup-tag::before{background:#ffe9a8!important;box-shadow:0 0 0 2px rgba(0,0,0,.3)!important;}
#announcementBar.mc-grass .ann-popup-text{color:#fff8ec!important;text-shadow:2px 2px 0 rgba(0,0,0,.45);font-weight:800;}
#announcementBar.mc-grass .ann-popup-icon{width:40px;height:40px;font-size:22px;align-self:center;background:linear-gradient(180deg,#241708,#160e04)!important;border:2px solid rgba(0,0,0,.4);border-radius:5px;padding:4px;filter:none!important;box-shadow:inset 2px 2px 0 rgba(255,255,255,.12),inset -2px -2px 0 rgba(0,0,0,.3);}
#announcementBar.mc-grass .ann-popup-icon img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:3px;display:block;}
#announcementBar.mc-grass .ann-popup-close{background:rgba(0,0,0,.24)!important;border:2px solid rgba(0,0,0,.32)!important;color:#fff8ec!important;border-radius:4px!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.15)!important;}

/* — إشعار الطلبات — */
#purchaseNotif.mc-grass{width:min(420px,calc(100vw - 24px))!important;background-color:transparent!important;background-image:var(--mc-plank),linear-gradient(180deg,#63b03a 0 34%,#8a5a33 34% 100%)!important;background-size:70px 52px,100% 100%!important;background-blend-mode:overlay,normal!important;border:3px solid #2e1c0d!important;image-rendering:pixelated;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:7px!important;box-shadow:inset 2px 2px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.42),0 5px 0 rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.55)!important;}
#purchaseNotif.mc-grass::before{display:none!important;}
#purchaseNotif.mc-grass::after{content:''!important;top:34%!important;left:0;right:0;bottom:auto!important;height:3px!important;background:repeating-linear-gradient(90deg,#4e8f2c 0 7px,#59a033 7px 14px)!important;box-shadow:none!important;z-index:1;}
#purchaseNotif.mc-grass .pn-header,#purchaseNotif.mc-grass .pn-content{z-index:2;}
#purchaseNotif.mc-grass .pn-conf{background:rgba(0,0,0,.3);border:2px solid rgba(0,0,0,.4);border-radius:4px;padding:3px 8px;}
#purchaseNotif.mc-grass .pn-conf>span{color:#68f2a0!important;}
#purchaseNotif.mc-grass .pn-live{border:2px solid rgba(0,0,0,.4)!important;border-radius:4px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.2)!important;}
#purchaseNotif.mc-grass .pn-name{color:#fff8ec!important;text-shadow:2px 2px 0 rgba(0,0,0,.5)!important;}
#purchaseNotif.mc-grass .pn-product{color:#f0e2cf!important;}
#purchaseNotif.mc-grass .pn-product b,#purchaseNotif.mc-grass .pn-product bdi{color:#ffd27a!important;font-weight:700;}
/* اسم المنتج: اتجاه تلقائي (إنجليزي LTR / عربي RTL) — bdi يعزل الاتجاه */
#purchaseNotif .pn-product bdi{unicode-bidi:isolate;}
#purchaseNotif.mc-grass .pn-time{color:#e9dcc7!important;}
#purchaseNotif.mc-grass .pn-ic{background:rgba(0,0,0,.18);border:2px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:inset 2px 2px 0 rgba(255,255,255,.14),inset -2px -2px 0 rgba(0,0,0,.25);}
#purchaseNotif.mc-grass .pn-progress{background:rgba(0,0,0,.42)!important;box-shadow:none!important;}

/* — خط ماينكرافت: إنجليزي بكسل (Pixelify) + عربي مرِح (Marhey) — */
#announcementBar.mc-grass .ann-popup-tag,#announcementBar.mc-grass .ann-popup-text,#announcementBar.mc-grass .ann-popup-close,
#purchaseNotif.mc-grass .pn-conf,#purchaseNotif.mc-grass .pn-conf>span,#purchaseNotif.mc-grass .pn-live,
#purchaseNotif.mc-grass .pn-name,#purchaseNotif.mc-grass .pn-product,#purchaseNotif.mc-grass .pn-product b,#purchaseNotif.mc-grass .pn-time{
  font-family:'Pixelify Sans','Marhey','Tajawal',sans-serif!important;
}
#announcementBar.mc-grass .ann-popup-text{font-size:16px!important;font-weight:700!important;letter-spacing:.2px;line-height:1.5!important;max-height:none!important;overflow:visible!important;}
#announcementBar.mc-grass .ann-popup-tag{font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;margin-bottom:3px!important;}
/* إشعار الطلبات — أنحف وأقصر */
#purchaseNotif.mc-grass .pn-header{padding:7px 10px 0!important;}
#purchaseNotif.mc-grass .pn-content{gap:11px!important;padding:7px 12px 9px!important;}
#purchaseNotif.mc-grass .pn-ic{width:42px!important;height:42px!important;padding:4px;}
#purchaseNotif.mc-grass .pn-body{padding-left:30px!important;}
#purchaseNotif.mc-grass .pn-name{font-size:17px!important;font-weight:700!important;letter-spacing:.3px;line-height:1.1!important;margin-bottom:2px!important;}
#purchaseNotif.mc-grass .pn-product{font-size:16px!important;font-weight:600!important;line-height:1.4!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-word;}
/* اسم المنتج: كتلة مستقلة الاتجاه تلتف كوحدة واحدة */
#purchaseNotif.mc-grass .pn-product bdi{unicode-bidi:isolate;display:inline;}
#purchaseNotif.mc-grass .pn-time{font-size:12px!important;letter-spacing:.5px;margin-top:2px!important;}
#purchaseNotif.mc-grass .pn-conf>span,#purchaseNotif.mc-grass .pn-live{font-size:12px!important;font-weight:700!important;letter-spacing:.5px;}
#purchaseNotif.mc-grass .pn-progress{height:3px!important;}
/* — أيقونة ماينكرافت بدل الشخصية (تظهر فقط في سكين العشب) — */
.pn-mc-icon{display:none;}
#purchaseNotif.mc-grass .pn-ic>svg{display:none!important;}
#purchaseNotif.mc-grass .pn-mc-icon{display:block!important;width:100%;height:100%;perspective:150px;}
.pn-mc-icon svg{width:100%;height:100%;image-rendering:pixelated;display:block;transform-style:preserve-3d;animation:pnMcHeartSpin 2.8s linear infinite;}
@keyframes pnMcHeartSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion: reduce){.pn-mc-icon svg{animation:none!important;}}
/* Pulsing "HOT" indicator for deals */
.nav-deals-pulse{
  display: inline-block;
  width: 6px; height: 6px;
  background: #ff3c4a;
  border-radius: 50%;
  margin-right: 4px;
  box-shadow: 0 0 8px #ff3c4a;
  animation: navPulse 1.6s ease-in-out infinite;
}
@keyframes navPulse{
  0%, 100% { opacity: .4; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

/* ──────────────────────────────────────────────────────────────
   POINTS HUD — gaming-style currency badge in navbar
   ────────────────────────────────────────────────────────────── */
.nav-points{
  /* Gold/amber theme — premium currency feel */
  --np-rgb:255, 184, 0;
  --np-color:rgb(var(--np-rgb));
  position:relative;
  display:none; /* hidden until logged in (JS toggles 'visible') */
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 14px 0 10px;
  background:linear-gradient(135deg, rgba(40,30,8,.92) 0%, rgba(20,15,4,.98) 100%);
  border:1.5px solid rgba(var(--np-rgb),.45);
  color:rgba(255,255,255,.9);
  font-family:'Rajdhani','Tajawal',sans-serif;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow:
    0 4px 18px rgba(var(--np-rgb),.22),
    0 0 0 1px rgba(var(--np-rgb),.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.nav-points.visible{ display:inline-flex; }
.nav-points:hover{
  transform:translateY(-2px);
  border-color:var(--np-color);
  box-shadow:
    0 8px 28px rgba(var(--np-rgb),.42),
    0 0 0 1px rgba(var(--np-rgb),.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-points:active{ transform:translateY(0) scale(.97); }

/* Background glow */
.np-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 25% 50%, rgba(var(--np-rgb),.18) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
  animation:npGlowPulse 3s ease-in-out infinite;
}
@keyframes npGlowPulse{
  0%,100%{ opacity:1; }
  50%   { opacity:.55; }
}

/* Subtle grid pattern */
.np-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(var(--np-rgb),.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--np-rgb),.08) 1px, transparent 1px);
  background-size:8px 8px;
  opacity:.5;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Cyber corners */
.np-corner{
  position:absolute;
  width:7px;
  height:7px;
  pointer-events:none;
  z-index:3;
  opacity:.65;
}
.np-corner.tl{ top:1px; left:1px; border-top:1.5px solid var(--np-color); border-left:1.5px solid var(--np-color); }
.np-corner.br{ bottom:1px; right:1px; border-bottom:1.5px solid var(--np-color); border-right:1.5px solid var(--np-color); }
.nav-points:hover .np-corner{ opacity:1; }

/* Icon container — 3D gold coin with rotating ring */
.np-iconwrap{
  position:relative;
  width:24px;
  height:24px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  /* ★ التوهّج هنا وليس على العملة — أي filter على عنصر preserve-3d يُلغي العمق ثلاثي الأبعاد */
  perspective:130px;
  filter:drop-shadow(0 0 6px rgba(var(--np-rgb),.55));
}
.np-iconring{
  position:absolute;
  inset:-3px;
  border:1px dashed rgba(var(--np-rgb),.55);
  border-radius:50%;
  animation:npIconSpin 9s linear infinite;
  pointer-events:none;
}
@keyframes npIconSpin{
  to{ transform:rotate(360deg); }
}
/* ── العملة الذهبية ثلاثية الأبعاد (نقاط الولاء) ── */
.np-coin{
  position:relative;
  width:21px;
  height:21px;
  transform-style:preserve-3d;
  animation:npCoinFlip 5.4s cubic-bezier(.62,.02,.35,1) infinite,
            npCoinBob 2.8s ease-in-out infinite;
  will-change:transform;
}
/* دورة كاملة بطيئة ثم استراحة — إحساس راقٍ لا يشتّت الانتباه */
@keyframes npCoinFlip{
  0%,38%   { transform:rotateY(0deg); }
  74%,100% { transform:rotateY(360deg); }
}
@keyframes npCoinBob{
  0%,100%{ translate:0 .9px; }
  50%    { translate:0 -.9px; }
}
.np-coin-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:radial-gradient(circle at 32% 26%, #fff6d0 0%, #ffd34d 26%, #ffab00 58%, #b96f00 88%, #8a4f00 100%);
  box-shadow:
    inset 0 0 0 1.4px rgba(255,246,205,.85),
    inset 0 -2px 4px rgba(120,64,0,.55),
    inset 0 2px 3px rgba(255,255,255,.4);
}
.np-coin-front{ transform:translateZ(1.7px); }
.np-coin-back { transform:rotateY(180deg) translateZ(1.7px); }
.np-coin-rim{
  position:absolute;
  inset:2.2px;
  border-radius:50%;
  border:.9px solid rgba(140,78,0,.5);
  box-shadow:inset 0 0 3px rgba(255,255,255,.35);
}
.np-coin-sym{
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  color:#7a4400;
  text-shadow:0 1px 0 rgba(255,247,214,.8);
  transform:translateY(-.3px);
}
.np-coin-star{
  width:11px;
  height:11px;
  fill:#7a4400;
  filter:drop-shadow(0 1px 0 rgba(255,247,214,.75));
}
/* وميض معدني يمرّ على وجه العملة بالتزامن مع الدوران */
.np-coin-gloss{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.75) 46%, transparent 60%);
  mix-blend-mode:screen;
  animation:npCoinGloss 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes npCoinGloss{
  0%,38%   { transform:translateX(-140%); }
  55%      { transform:translateX(140%); }
  56%,100% { transform:translateX(-140%); }
}
/* حافة العملة — تظهر لحظة مرورها عمودياً فتُعطي سماكة حقيقية */
.np-coin-edge{
  position:absolute;
  top:0;
  left:50%;
  width:3.4px;
  height:100%;
  margin-left:-1.7px;
  border-radius:1.7px;
  transform:rotateY(90deg);
  background:linear-gradient(180deg,#7a4400 0%,#ffcf4a 18%,#fff2c4 50%,#ffcf4a 82%,#7a4400 100%);
}
/* بريق صغير يلمع عند اكتمال الدورة */
.np-spark{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px 1px rgba(var(--np-rgb),.95);
  opacity:0;
  pointer-events:none;
}
.np-spark.s1{ top:-1px; right:0; animation:npSpark 5.4s ease-in-out infinite; }
.np-spark.s2{ bottom:0; left:-1px; width:2px; height:2px; animation:npSpark 5.4s ease-in-out .9s infinite; }
@keyframes npSpark{
  0%,44%   { opacity:0; transform:scale(.3); }
  52%      { opacity:1; transform:scale(1); }
  64%,100% { opacity:0; transform:scale(.3); }
}

/* Counter (number + label stacked) */
.np-counter{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
  z-index:2;
  position:relative;
}
.np-num{
  font-family:'Share Tech Mono','Rajdhani',monospace;
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
  background:linear-gradient(90deg, #fff 30%, var(--np-color) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  line-height:1;
  text-shadow:0 0 12px rgba(var(--np-rgb),.4);
}
.np-lbl{
  font-family:'Rajdhani',sans-serif;
  font-size:8px;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(var(--np-rgb),.85);
  text-transform:uppercase;
  margin-top:2px;
}

/* Hover shine sweep */
.np-shine{
  position:absolute;
  top:0;
  bottom:0;
  width:30%;
  right:-30%;
  background:linear-gradient(90deg, transparent, rgba(var(--np-rgb),.35), transparent);
  pointer-events:none;
  z-index:1;
  transition:right .6s cubic-bezier(.4,0,.2,1);
}
.nav-points:hover .np-shine{ right:130%; }

/* Animation when points value changes (call .added class for celebration burst) */
.nav-points.np-bumped{ animation:npBump .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes npBump{
  0%   { transform:scale(1); }
  40%  { transform:scale(1.1); box-shadow:0 0 36px rgba(var(--np-rgb),.6), 0 8px 28px rgba(var(--np-rgb),.4); }
  100% { transform:scale(1); }
}
/* عند تغيّر الرصيد: العملة تدور دورتين سريعتين احتفالاً */
.nav-points.np-bumped .np-coin{
  animation:npCoinCelebrate .95s cubic-bezier(.3,.9,.3,1) 1, npCoinBob 2.8s ease-in-out infinite;
}
@keyframes npCoinCelebrate{
  0%  { transform:rotateY(0) scale(1); }
  55% { transform:rotateY(400deg) scale(1.25); }
  100%{ transform:rotateY(720deg) scale(1); }
}

/* Mobile — compact */
@media (max-width:768px){
  .nav-points{
    height:34px;
    padding:0 10px 0 8px;
    gap:6px;
  }
  .np-num{ font-size:13px; }
  .np-lbl{ display:none; }
  .np-iconwrap{ width:20px; height:20px; }
  .np-coin{ width:18px; height:18px; }
  .np-coin-sym{ font-size:10.5px; }
  .np-coin-star{ width:9.5px; height:9.5px; }
  .np-coin-edge{ width:2.9px; margin-left:-1.45px; }
  .np-coin-front{ transform:translateZ(1.45px); }
  .np-coin-back { transform:rotateY(180deg) translateZ(1.45px); }
}
/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .np-coin, .np-coin-gloss, .np-spark, .np-iconring, .np-glow{ animation:none !important; }
  .np-coin{ transform:rotateY(0deg); }
}
/* ── Counter badge — refined red chip with ring ── */
.badge{
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ff2a3d 0%, #c00018 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: 'Rajdhani', 'Tajawal', sans-serif;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(230,0,18,.55),
    0 0 0 2px var(--black, #060608);
  z-index: 2;
  letter-spacing: -.3px;
}

/* ===== BUTTONS ===== */
.btn-primary{display:inline-block;padding:13px 32px;background:var(--red);color:#fff;border:none;font-family:'Tajawal',sans-serif;font-size:15px;font-weight:700;cursor:pointer;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);transition:all .3s;text-decoration:none;}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 8px 30px var(--red-glow);transform:translateY(-2px);}
.btn-outline{display:inline-block;padding:13px 32px;background:transparent;color:var(--white);border:1px solid var(--gray2);font-family:'Tajawal',sans-serif;font-size:15px;font-weight:600;cursor:pointer;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);transition:all .3s;text-decoration:none;}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-sm{padding:9px 20px;font-size:13px;}

/* ===== SECTION HEADERS — Premium Cyberpunk ===== */
.sec-tag{
  display:inline-block;
  padding:7px 16px;
  background:rgba(230,0,18,.07);
  border:1px solid rgba(230,0,18,.32);
  border-radius:4px;
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:11px;
  letter-spacing:3px;
  font-weight:700;
  color:rgba(255,107,107,.95);
  text-transform:uppercase;
  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}
.sec-tag::before,.sec-tag::after{content:none;}
.sec-tag > *{position:relative;z-index:2;}
.sec-tag::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(230,0,18,.22) 50%,transparent 70%);
  transform:translateX(100%);
  animation:secTagSweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes secTagSweep{
  0%,12%{transform:translateX(100%);}
  42%,100%{transform:translateX(-100%);}
}

.sec-title{
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:clamp(34px,5vw,56px);
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 0 28px rgba(230,0,18,.18);
  margin:0;
}
.sec-title span{
  background:linear-gradient(135deg,#ff8a8a 0%,#ff3a4d 35%,#e60012 70%,#ff5e6e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(230,0,18,.5));
  color:transparent;
}

/* ===== GRID BG ===== */
.grid-bg{background-image:linear-gradient(rgba(230,0,18,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(230,0,18,.03) 1px,transparent 1px);background-size:50px 50px;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes crownBeat{
  0%,100%{transform:scale(1) rotate(-8deg);filter:drop-shadow(0 0 5px rgba(255,200,0,0.8));}
  25%    {transform:scale(1.25) rotate(0deg);filter:drop-shadow(0 0 12px rgba(255,220,0,1)) drop-shadow(0 0 20px rgba(230,0,18,0.6));}
  50%    {transform:scale(1.05) rotate(6deg);filter:drop-shadow(0 0 8px rgba(255,200,0,0.9));}
  75%    {transform:scale(1.2) rotate(-4deg);filter:drop-shadow(0 0 14px rgba(255,220,0,1)) drop-shadow(0 0 22px rgba(230,0,18,0.5));}
}
@keyframes badgeSweep{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}
@keyframes badgeBorderGlow{
  0%,100%{border-color:rgba(230,0,18,0.2);box-shadow:none;}
  50%    {border-color:rgba(230,0,18,0.7);box-shadow:0 0 12px rgba(230,0,18,0.25),inset 0 0 8px rgba(230,0,18,0.06);}
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* ★ أداء: إيقاف دوران الكيوب أثناء الـ scroll (يُلغي تضارب الـ compositor) */
body.is-scrolling .eid-hang{   animation-play-state:paused; }

/* ★ سلاسة قصوى أثناء التمرير: نوقف فقط الأنيميشنات اللانهائية المكلفة (التوهّجات/النبض/الطفو)
   ونُبقي أنيميشن الظهور (fadeUp) والانتقالات تعمل بنعومة — فلا يظهر المحتوى "صلباً".
   (المكعّب 3D مُستثنى — يبقى يدور أثناء التمرير ويتوقّف فقط عند خروجه من الشاشة عبر المراقب) */
body.is-scrolling [class*="pulse"],  body.is-scrolling [class*="glow"],
body.is-scrolling [class*="float"],  body.is-scrolling [class*="shine"],
body.is-scrolling [class*="blink"],  body.is-scrolling [class*="glitch"],
body.is-scrolling [class*="spin"],   body.is-scrolling [class*="scan"],
body.is-scrolling [class*="Beat"],   body.is-scrolling [class*="Pulse"],
body.is-scrolling [class*="Glow"],   body.is-scrolling [class*="Scan"],
body.is-scrolling .eid-hang,
body.is-scrolling .deals-particle{
  animation-play-state: paused !important;
}

/* Reuse the existing .hpc-badge styles from before */
.hpc-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding: 4px 10px;
  background: linear-gradient(90deg, rgba(230,0,18,1), rgba(255,40,60,.9));
  color:#fff;
  font-family:'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-radius: 4px;
  position:relative;
  box-shadow:
    0 0 14px rgba(230,0,18,.5),
    0 0 4px rgba(230,0,18,.4) inset;
  animation: hpcBadgePulse 2s ease-in-out infinite;
}
.hpc-badge i{
  width:5px; height:5px;
  background:#fff;
  border-radius:50%;
  display:inline-block;
  box-shadow: 0 0 6px #fff;
  animation: blink 1.4s infinite;
}
@keyframes hpcBadgePulse{
  0%,100%{box-shadow: 0 0 14px rgba(230,0,18,.5), 0 0 4px rgba(230,0,18,.4) inset;}
  50%   {box-shadow: 0 0 24px rgba(230,0,18,.85), 0 0 6px rgba(255,80,90,.6) inset;}
}
@keyframes dgCountPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* ═══ ★★★ PROFESSIONAL BREADCRUMB ★★★ ═══ */
.sg-bc-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 4px 0;
}
.sg-bc-pro-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(230,0,18,0.25);
  border-radius: 4px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.18s ease;
  cursor: pointer;
  font-family: 'Tajawal', sans-serif;
  white-space: nowrap;
}
.sg-bc-pro-item:hover {
  background: rgba(230,0,18,0.1);
  border-color: rgba(230,0,18,0.55);
  color: #fff;
  transform: translateY(-1px);
}
.sg-bc-pro-item.current {
  background: rgba(230,0,18,0.14);
  border-color: rgba(230,0,18,0.65);
  color: #ff4455;
  font-weight: 700;
  cursor: default;
}
.sg-bc-pro-item.current:hover {
  transform: none;
}
.sg-bc-pro-sep {
  color: rgba(230,0,18,0.4);
  font-size: 16px;
  font-weight: 700;
  user-select: none;
}
.sg-bc-pro-home-icon { font-size: 14px; }

/* ═══ ★★★ SALE COUNTDOWN ★★★ ═══ */
.dg-sale-banner {
  background: linear-gradient(135deg, rgba(230,0,18,0.95), rgba(255,34,51,0.95));
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(230,0,18,0.3);
}
.dg-sale-icon {
  animation: dgSaleFlash 1.5s ease-in-out infinite;
}
@keyframes dgSaleFlash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.15); }
}
.dg-countdown {
  font-family: 'Inter', 'Rajdhani', monospace;
  font-weight: 800;
  background: rgba(0,0,0,0.35);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-size: 11px;
}
.dg-sale-pct {
  background: rgba(230,0,18,0.85);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

/* ═══ ★★★ CATEGORY DESCRIPTION (في أسفل صفحة القسم) ★★★ ═══ */
.dg-cat-description {
  margin-top: 40px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(15,15,25,0.6) 0%, rgba(10,10,18,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.dg-cat-description::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--red), transparent);
}
.dg-cat-description-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--red);
  margin-bottom: 10px;
  opacity: 0.9;
}
.dg-cat-description-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}
.dg-cat-description-text {
  color: rgba(255,255,255,0.78);
  font-size: 14.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.dgp-topleft .dg-sale-banner{position:static;margin:0}
.dg-prod-from{display:none}
.dg-prod-count{display:none}

/* ─── LOADING ─── */
.dg-loading{
  text-align:center;padding:80px 20px;color:var(--t3);font-size:13px;grid-column:1/-1;
}
.dg-spinner{
  width:44px;height:44px;
  border:3px solid rgba(230,0,18,0.1);
  border-top-color:var(--red);
  border-radius:50%;
  animation:dgSpin 1s linear infinite;
  margin:0 auto;
  box-shadow:0 0 20px rgba(230,0,18,0.3);
}
@keyframes dgSpin{to{transform:rotate(360deg);}}

/* ── SCROLL REVEAL ANIMATIONS ── */
.sr{opacity:0;will-change:opacity,transform;}
.sr-up{transform:translateY(40px);}
.sr-scale{transform:scale(.92) translateY(20px);}
.sr-visible{opacity:1!important;transform:translateY(0) scale(1)!important;}
.sr-visible.sr-up,.sr-visible.sr-scale{transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94);}

/* PRODUCTS SECTION */
.prods-section{padding:80px 40px 60px;background:#060609;position:relative;overflow:hidden;}
.prods-section::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(230,0,18,.02) 60px,rgba(230,0,18,.02) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(230,0,18,.02) 60px,rgba(230,0,18,.02) 61px);pointer-events:none;}
.prods-section::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(230,0,18,.5) 30%,rgba(230,0,18,.5) 70%,transparent);}
.prods-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:16px;position:relative;z-index:1;}
.view-all-link{color:rgba(230,0,18,.7);text-decoration:none;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;display:flex;align-items:center;gap:8px;transition:all .3s;cursor:pointer;border:1px solid rgba(230,0,18,.2);padding:8px 18px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));}
.view-all-link:hover{color:#fff;background:rgba(230,0,18,.1);border-color:rgba(230,0,18,.5);gap:14px;}
.prods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px;position:relative;z-index:1;}

/* ── PRODUCT ROW CAROUSEL ── */
.prod-row{position:relative;z-index:1;margin-bottom:72px;}
.prod-row:last-child{margin-bottom:0;}
.prod-row-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.prod-row-right{display:flex;align-items:center;gap:20px;}
.prod-row-nav{display:flex;align-items:center;gap:8px;}
.prod-row-dots{display:flex;gap:5px;align-items:center;}
.prod-row-dot{width:20px;height:2px;background:rgba(255,255,255,.1);cursor:pointer;transition:all .6s cubic-bezier(.22,.61,.36,1);border-radius:1px;}
.prod-row-dot.active{background:var(--red);box-shadow:0 0 10px rgba(230,0,18,.4);width:36px;height:2.5px;}
.prod-row-btn{width:32px;height:32px;background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .3s cubic-bezier(.16,1,.3,1);flex-shrink:0;-webkit-tap-highlight-color:transparent;}
@media (hover: hover) and (pointer: fine){
  .prod-row-btn:hover{border-color:rgba(230,0,18,.4);color:#fff;background:rgba(230,0,18,.08);}
}
.prod-row-btn:active{transform:scale(.9);transition:transform .1s;border-color:rgba(230,0,18,.4);color:#fff;background:rgba(230,0,18,.08);}
.prod-row-viewport{
  overflow:hidden;
  position:relative;
  cursor:grab;
  /* Allow vertical page scroll, only intercept horizontal swipe */
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
.prod-row-viewport.dragging{cursor:grabbing;}
.prod-row-viewport::before,.prod-row-viewport::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none;}
.prod-row-viewport::before{right:0;background:linear-gradient(270deg,#060609 5%,transparent);}
.prod-row-viewport::after{left:0;background:linear-gradient(90deg,#060609 5%,transparent);}
.prod-row-track{display:flex;gap:2px;will-change:transform;-webkit-user-select:none;user-select:none;}
.prod-row-track.animating{transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.prod-row-track .p-card{flex:0 0 calc(25% - 1.5px);min-width:200px;pointer-events:auto !important;}
/* ★ ضمان أن الكروت تستجيب دائماً للـ clicks، حتى أثناء الـ animation */
.prod-row-track .p-card *,
.prod-row-track .p-card button,
.prod-row-track .p-card a {
  pointer-events: auto;
}
.prod-row-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.prod-row-progress{flex:1;height:1px;background:rgba(255,255,255,.05);position:relative;overflow:hidden;margin-left:16px;}
.prod-row-progress-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--red),rgba(230,0,18,.2));transition:left 1.1s cubic-bezier(.22,.61,.36,1),width .4s cubic-bezier(.22,.61,.36,1);}
/* Wide screens: show 5 cards per row to fill viewport instead of leaving empty space */
@media(min-width:1400px){.prod-row-track .p-card{flex:0 0 calc(20% - 1.6px);}}
@media(min-width:1700px){.prod-row-track .p-card{flex:0 0 calc(16.666% - 1.67px);}}
@media(max-width:960px){.prod-row-track .p-card{flex:0 0 calc(50% - 1px);}}
@media(max-width:560px){.prod-row-track .p-card{flex:0 0 100%;}}

/* PRODUCT CARD */
/* ★★★ RICH PRODUCT CARD — صفوف الرئيسية فقط (.p-card.rc) ★★★ */
.prod-row-viewport{padding-top:14px;padding-bottom:14px;}
.prod-row-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:46px;height:46px;border-radius:50%;background:rgba(16,16,28,.92);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,box-shadow .25s;box-shadow:0 10px 28px rgba(0,0,0,.55);}
.prod-row-arrow:hover{background:#e60012;border-color:#e60012;box-shadow:0 10px 30px rgba(230,0,18,.5);}
.prod-row-arrow.prev{right:6px;}.prod-row-arrow.next{left:6px;}
@media(max-width:560px){.prod-row-arrow{width:40px;height:40px;font-size:19px;}}
@keyframes p-scan{0%{top:-30%;}100%{top:130%;}}
@keyframes p-hot-pulse{
  0%,100%{transform:scale(1);box-shadow:0 4px 16px rgba(255,107,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset;}
  50%{transform:scale(1.06);box-shadow:0 4px 24px rgba(255,107,0,.85), 0 0 0 1px rgba(255,255,255,.2) inset;}
}
@keyframes pImgShimmer{
  0%{background-position:-150% 0;}
  100%{background-position:150% 0;}
}

.sg-out{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sg-out::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(9,3,6,.26) 0%, rgba(9,3,6,.54) 100%);
}
.sg-out-band{
  position:relative;
  width:150%;
  padding:8px 0;
  transform:rotate(-11deg);
  background:linear-gradient(180deg, rgba(28,4,9,.96), rgba(11,2,4,.97));
  border-top:1.5px solid rgba(230,0,18,.9);
  border-bottom:1.5px solid rgba(230,0,18,.9);
  box-shadow:0 0 24px rgba(230,0,18,.38), inset 0 0 22px rgba(230,0,18,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  overflow:hidden;
}
/* خطوط تحذير قُطرية خفيفة داخل الشريط */
.sg-out-band::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg, rgba(230,0,18,.17) 0 8px, transparent 8px 16px);
  pointer-events:none;
}
/* ومضة ضوء تمرّ على الشريط لجذب النظر */
.sg-out-band::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  left:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent);
  animation:sgOutSweep 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sgOutSweep{
  0%      { left:-40%; }
  55%,100%{ left:112%; }
}
.sg-out-txt{
  position:relative;
  font-family:'Tajawal',sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:2.5px;
  color:#fff;
  text-shadow:0 0 12px rgba(230,0,18,.95), 0 2px 3px rgba(0,0,0,.85);
  white-space:nowrap;
  line-height:1.1;
}
.sg-out-sub{
  position:relative;
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:3px;
  color:rgba(255,120,132,.9);
  white-space:nowrap;
  line-height:1;
}
/* ضمان احتواء الشريط داخل حاوية الصورة مهما كان السياق */
  .pd-main-img{ position:relative; }
/* شارة ركنية إضافية — تبقى ظاهرة حتى لو الشريط خارج مجال النظر
   (أسفل اليسار حتى لا تصطدم بشارات الخصم/الجديد أعلى البطاقة) */
.sg-out-chip{
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:20px;
  background:rgba(14,2,5,.92);
  border:1px solid rgba(230,0,18,.75);
  color:#ff6b7a;
  font-family:'Tajawal',sans-serif;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.5px;
  box-shadow:0 3px 12px rgba(230,0,18,.3);
  pointer-events:none;
  white-space:nowrap;
}
.sg-out-chip i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#e60012;
  box-shadow:0 0 7px #e60012;
  animation:sgOutDot 1.4s ease-in-out infinite;
  font-style:normal;
}
@keyframes sgOutDot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.75); }
}
@media (max-width:600px){
  .sg-out-txt{ font-size:11.5px; letter-spacing:1.5px; }
  .sg-out-sub{ font-size:7px; letter-spacing:2px; }
  .sg-out-band{ padding:6px 0; }
  .sg-out-chip{ font-size:8.5px; padding:3px 7px; bottom:8px; left:8px; }
}
@media (prefers-reduced-motion:reduce){
  .sg-out-band::after, .sg-out-chip i{ animation:none; }
}
/* صفحة المنتج — شريط أكبر يليق بالصورة الرئيسية */
.pd-main-img.is-out > img{ filter:grayscale(1) contrast(.9) brightness(.52) !important; }
.pd-main-img .sg-out{ z-index:9; }
.pd-main-img .sg-out-txt{ font-size:26px; letter-spacing:5px; }
.pd-main-img .sg-out-sub{ font-size:12px; letter-spacing:6px; }
.pd-main-img .sg-out-band{ padding:16px 0; }
.pd-main-img .sg-out-chip{ font-size:12px; padding:6px 13px; bottom:16px; left:16px; }
@media (max-width:768px){
  .pd-main-img .sg-out-txt{ font-size:19px; letter-spacing:3px; }
  .pd-main-img .sg-out-sub{ font-size:9.5px; letter-spacing:4px; }
  .pd-main-img .sg-out-band{ padding:11px 0; }
}
.btn-wish{width:38px;height:38px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);}
@media (hover: hover) and (pointer: fine){
  .btn-wish:hover{border-color:rgba(230,0,18,.5);color:var(--red);background:rgba(230,0,18,.08);box-shadow:0 0 12px rgba(230,0,18,.15);}
}
.btn-wish.active{border-color:rgba(230,0,18,.5);color:var(--red);background:rgba(230,0,18,.08);box-shadow:0 0 12px rgba(230,0,18,.15);}

/* ── Add-to-cart animation ── */
@keyframes cartBtnSquish{0%{transform:scale(1)}40%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes cartBtnCheck{0%{transform:scale(0) rotate(-45deg);opacity:0}50%{transform:scale(1.2) rotate(0);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

.btn-primary.added{animation:cartBtnSquish .3s ease;background:#00c853!important;pointer-events:none;}
.badge.cart-pop{animation:cartBtnCheck .35s ease;}
.feats-bar-title{font-family:'Rajdhani',sans-serif;font-size:42px;font-weight:900;letter-spacing:6px;text-transform:uppercase;display:inline-block;position:relative;color:#fff;animation:sg-glow-cycle 3s ease-in-out infinite;}
.feats-bar-title .sg-super{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 30px rgba(255,255,255,.4),0 0 60px rgba(255,255,255,.2);}
.feats-bar-title .sg-games{color:#e60012;text-shadow:0 0 10px rgba(230,0,18,1),0 0 30px rgba(230,0,18,.8),0 0 60px rgba(230,0,18,.5),0 0 100px rgba(230,0,18,.3);}
/* ★ أداء: width:0→50% كان يُعيد التخطيط كل إطار. العرض ثابت الآن ونمدّد بـ scaleX
   — التدرّج يُقاس مع الصندوق فتبدو النتيجة مطابقة تماماً. */
.feats-bar-title::before,.feats-bar-title::after{content:'';position:absolute;bottom:-8px;height:2px;width:50%;transform:scaleX(0);animation:sg-line-grow 3s ease-in-out infinite;will-change:transform;}
.feats-bar-title::before{left:50%;transform-origin:left center;background:linear-gradient(90deg,transparent,rgba(230,0,18,.8));animation-delay:.1s;}
.feats-bar-title::after{right:50%;transform-origin:right center;background:linear-gradient(270deg,transparent,rgba(230,0,18,.8));animation-delay:.1s;}
@keyframes sg-line-grow{
  0%{transform:scaleX(0);}
  60%,100%{transform:scaleX(1);}
}
.feat-ico-svg svg{width:32px;height:32px;display:block;color:inherit;overflow:visible;}

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */
.page-hero{padding:60px 40px 40px;background:var(--black2);border-bottom:1px solid var(--gray2);}
.page-hero h1{font-family:'Rajdhani',sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;}
.page-hero p{font-size:15px;color:var(--gray);margin-top:8px;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-bottom:12px;}
.breadcrumb span{color:var(--red);}
.breadcrumb a{color:var(--gray);cursor:pointer;}
.breadcrumb a:hover{color:var(--white);}

.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:2px;min-height:600px;margin-top:28px;}
.sidebar{background:var(--black2);padding:32px 24px;border-left:1px solid var(--gray2);}
.sidebar-section{margin-bottom:32px;}
.sidebar-title{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-bottom:16px;}
.filter-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.filter-list li label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;color:var(--gray);transition:color .3s;}
.filter-list li label:hover{color:var(--white);}
.filter-list input[type=checkbox]{accent-color:var(--red);width:14px;height:14px;}
.price-range{display:flex;flex-direction:column;gap:10px;}
.range-input{width:100%;accent-color:var(--red);cursor:pointer;}
.price-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--gray);}
.filter-tags{display:flex;flex-wrap:wrap;gap:6px;}
.filter-tag{padding:5px 12px;background:var(--black3);border:1px solid var(--gray2);font-size:11px;color:var(--gray);cursor:pointer;transition:all .3s;border-radius:2px;}
.filter-tag:hover,.filter-tag.active{border-color:var(--red);color:var(--red);background:rgba(230,0,18,.06);}
.filter-tag.is-sub{background:rgba(99,179,237,.04);border-color:rgba(99,179,237,.18);}
.filter-tag.is-sub:hover,.filter-tag.is-sub.active{border-color:rgba(99,179,237,.6);color:#63b3ed;background:rgba(99,179,237,.1);}

/* ★★★ ELEGANT SIDEBAR — صفحة المنتجات ★★★ */
.sidebar{background:linear-gradient(180deg,#101019,#0b0b14)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:16px;padding:8px 8px 12px!important;position:relative;}
.sidebar-section{margin-bottom:8px!important;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.sidebar-section:last-child{border-bottom:none;margin-bottom:0!important;padding-bottom:0;}
.sidebar-title{display:flex!important;align-items:center;gap:8px;font-family:'Rajdhani',sans-serif!important;font-size:14px!important;letter-spacing:2px!important;color:#f1f1f7!important;font-weight:700!important;padding:12px 10px 11px!important;margin-bottom:6px!important;text-transform:none!important;}
.sidebar-title::before{content:'';width:7px;height:7px;border-radius:50%;background:#e60012;box-shadow:0 0 10px #e60012;flex-shrink:0;}
.sidebar-title .el-x{margin-right:auto;font-family:'Rajdhani',sans-serif;font-size:11px;color:#6a6a80;letter-spacing:1px;}
.sidebar-title .el-x b{color:#ff2a40;cursor:pointer;font-weight:700;}
/* — الفئات — */
#cat-filters{display:flex!important;flex-direction:column;gap:0;}
.cat-el{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:11px;cursor:pointer;position:relative;transition:background .22s,transform .22s cubic-bezier(.16,1,.3,1);margin-bottom:2px;text-decoration:none;}
.cat-ico{width:29px;height:29px;border-radius:9px;background:linear-gradient(160deg,#1d1d2a,#13131d);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:.25s cubic-bezier(.16,1,.3,1);}
.cat-nm{flex:1;font-size:13px;font-weight:700;color:#cfcfdc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .22s;}
.cat-cnt{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11.5px;color:#6a6a80;background:rgba(255,255,255,.04);border-radius:20px;padding:1px 8px;min-width:26px;text-align:center;transition:.25s;}
.cat-el:hover{background:rgba(255,255,255,.035);transform:translateX(-3px);}
.cat-el:hover .cat-ico{border-color:rgba(255,255,255,.13);transform:scale(1.05);}
.cat-el:hover .cat-cnt{color:#f1f1f7;}
.cat-all{background:linear-gradient(135deg,#e60012,#b8000e);color:#fff;font-weight:800;margin-bottom:8px;box-shadow:0 8px 22px rgba(230,0,18,.3);}
.cat-all .cat-ico{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.25);}
.cat-all .cat-nm{color:#fff;}.cat-all .cat-cnt{background:rgba(255,255,255,.22);color:#fff;}
.cat-all:hover{transform:none;}
.cat-sep{height:1px;margin:8px 10px 6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
.cat-parent .cat-nm{font-size:13.5px;font-weight:800;color:#f1f1f7;}
.cat-parent .cat-ico{background:linear-gradient(160deg,#26101a,#1a0d12);border-color:rgba(230,0,18,.25);color:#ff2a40;}
.cat-kids{position:relative;margin:2px 6px 6px 0;padding-right:15px;}
.cat-kids::before{content:'';position:absolute;top:0;bottom:14px;right:6px;width:1.5px;background:linear-gradient(180deg,rgba(230,0,18,.35),rgba(255,255,255,.13));border-radius:2px;}
.cat-kids .cat-el{padding:6px 9px;}
.cat-kids .cat-el::after{content:'';position:absolute;right:-9px;top:50%;width:9px;height:1.5px;background:rgba(255,255,255,.13);border-radius:2px;}
.cat-sub .cat-ico{width:25px;height:25px;font-size:12px;}
.cat-sub .cat-nm{font-size:12px;font-weight:500;color:#a6a6bb;}
.cat-sub:hover .cat-nm{color:#f1f1f7;}
.cat-el.active{background:linear-gradient(90deg,rgba(230,0,18,.16),rgba(230,0,18,.04));}
.cat-el.active::before{content:'';position:absolute;right:-8px;top:7px;bottom:7px;width:3.5px;border-radius:4px;background:linear-gradient(180deg,#ff2a40,#e60012);box-shadow:0 0 12px rgba(230,0,18,.7);}
.cat-el.active .cat-nm{color:#ff2a40;font-weight:800;}
.cat-el.active .cat-ico{background:linear-gradient(160deg,#e60012,#b8000e);border-color:#e60012;color:#fff;box-shadow:0 4px 14px rgba(230,0,18,.5);}
.cat-el.active .cat-cnt{background:rgba(230,0,18,.18);color:#ff2a40;}
.cat-all.active{background:linear-gradient(135deg,#e60012,#b8000e);}.cat-all.active::before{display:none;}
.cat-all.active .cat-nm{color:#fff;}
.cat-all.active .cat-cnt{background:rgba(255,255,255,.22);color:#fff;}
.cat-all.active .cat-ico{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none;}
.cat-kids .cat-el.active::before{display:none;}
.cat-kids .cat-el.active::after{background:#e60012;}
/* — السعر — */
.price-range{padding:0 4px;}
.pr-in{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center;margin-bottom:13px;direction:ltr;}
.pr-box{display:flex;align-items:center;background:#15151f;border:1px solid rgba(255,255,255,.07);border-radius:10px;transition:.25s;}
.pr-box:focus-within{border-color:#e60012;box-shadow:0 0 0 3px rgba(230,0,18,.12);}
.pr-box .cur{padding-left:7px;color:#6a6a80;font-family:'Share Tech Mono',monospace;font-size:12px;}
.pr-box input{width:100%;background:none;border:none;outline:none;color:#f1f1f7;font-family:'Share Tech Mono',monospace;font-size:12.5px;padding:8px 6px 8px 2px;text-align:center;}
.pr-dash{color:#6a6a80;text-align:center;}
.pr-slider{padding:0 8px;margin-bottom:9px;direction:ltr;}
.range-input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;outline:none;cursor:pointer;direction:ltr;background:linear-gradient(90deg,#e60012 0%,#e60012 var(--p,100%),rgba(255,255,255,.08) var(--p,100%),rgba(255,255,255,.08) 100%);}
.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5a68,#e60012);border:2px solid rgba(255,255,255,.15);box-shadow:0 0 0 4px rgba(230,0,18,.18),0 4px 12px rgba(230,0,18,.5);cursor:grab;transition:transform .15s;}
.range-input::-webkit-slider-thumb:hover{transform:scale(1.12);}
.range-input::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#e60012;border:2px solid rgba(255,255,255,.15);box-shadow:0 0 0 4px rgba(230,0,18,.18);}
.price-vals{display:flex!important;justify-content:space-between;padding:0 8px 11px!important;font-family:'Share Tech Mono',monospace!important;font-size:11.5px!important;color:#a6a6bb!important;direction:ltr;}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px;}
.pr-chip{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:30px;background:#15151f;border:1px solid rgba(255,255,255,.07);color:#a6a6bb;cursor:pointer;transition:.2s;}
.pr-chip:hover{border-color:rgba(255,255,255,.13);color:#f1f1f7;}
.pr-chip.active{background:rgba(230,0,18,.14);border-color:#e60012;color:#ff2a40;}
/* — العلامات — */
.br-search{display:flex;align-items:center;gap:7px;margin:0 4px 10px;background:#15151f;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:7px 10px;}
.br-search input{flex:1;background:none;border:none;outline:none;color:#f1f1f7;font-family:'Tajawal',sans-serif;font-size:12.5px;}
.br-search input::placeholder{color:#6a6a80;}
.br-search span{color:#6a6a80;font-size:13px;}
#brand-filter-list{display:flex!important;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto;padding:0 2px;list-style:none;}
#brand-filter-list::-webkit-scrollbar{width:5px;}#brand-filter-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}
.br-el{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:11px;cursor:pointer;transition:background .2s,transform .2s;}
.br-el:hover{background:rgba(255,255,255,.035);transform:translateX(-3px);}
.br-tile{width:28px;height:28px;border-radius:8px;background:linear-gradient(160deg,#1d1d2a,#13131d);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#a6a6bb;flex-shrink:0;transition:.25s;text-transform:uppercase;}
.br-nm{flex:1;font-size:12.5px;font-weight:700;color:#a6a6bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.br-cnt{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;color:#6a6a80;background:rgba(255,255,255,.04);border-radius:20px;padding:1px 7px;min-width:24px;text-align:center;}
.br-chk{width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;color:transparent;font-size:11px;font-weight:900;}
.br-el.on .br-chk{background:#e60012;border-color:#e60012;color:#fff;box-shadow:0 3px 10px rgba(230,0,18,.45);}
.br-el.on .br-nm{color:#f1f1f7;}
.br-el.on .br-tile{background:linear-gradient(160deg,#26101a,#1a0d12);border-color:rgba(230,0,18,.4);color:#ff2a40;}

.products-main{padding:24px;}
.products-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.results-count{font-size:13px;color:var(--gray);}
.results-count span{color:var(--white);font-weight:600;}
.sort-select{padding:8px 14px;background:var(--black2);border:1px solid var(--gray2);color:var(--white);font-family:'Tajawal',sans-serif;font-size:13px;outline:none;cursor:pointer;}
.sort-select:focus{border-color:var(--red);}
.view-toggle{display:flex;gap:4px;}
.view-btn{width:32px;height:32px;background:var(--black2);border:1px solid var(--gray2);color:var(--gray);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.view-btn.active,.view-btn:hover{border-color:var(--red);color:var(--red);}
.products-main .prods-grid{margin-top:0;}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-detail{padding:0 40px 40px;max-width:1400px;margin:0 auto;}
.pd-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:50px;align-items:start;}
.pd-gallery{position:sticky;top:90px;}

/* ═══════════════════════════════════════════════════════════════════
   🎮 PRODUCT IMAGE SHOWCASE — ROG-Style Cinematic Display
   ═══════════════════════════════════════════════════════════════════ */
.pd-main-img{
  position:relative;
  width:100%;
  height:560px;
  max-height:70vh;
  margin-bottom:18px;
  overflow:visible !important;
  background:
    linear-gradient(135deg,rgba(230,0,18,0.04) 0%,transparent 50%,rgba(230,0,18,0.04) 100%),
    radial-gradient(ellipse at 30% 20%,rgba(230,0,18,0.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(230,0,18,0.05) 0%,transparent 50%),
    linear-gradient(180deg,#08080c 0%,#0d0d14 50%,#08080c 100%);
  border:1px solid rgba(230,0,18,0.18);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .5s ease,box-shadow .5s ease;
}
.pd-main-img:hover{
  border-color:rgba(230,0,18,0.45);
  box-shadow:0 0 60px rgba(230,0,18,0.12),inset 0 0 60px rgba(230,0,18,0.04);
}

/* ── BACKGROUND GRID PATTERN ── */
.pd-img-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(230,0,18,0.045) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;z-index:1;
  mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%);
  opacity:0.7;
  transition:opacity .5s;
}
.pd-main-img:hover .pd-img-grid{opacity:1;}

/* ── RADIAL SPOTLIGHT (red glow behind product) ── */
.pd-img-radial{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(230,0,18,0.13) 0%,transparent 70%);
  pointer-events:none;z-index:1;
  opacity:0.85;
  transition:opacity .5s,transform .8s;
}
.pd-main-img:hover .pd-img-radial{
  opacity:1;
  transform:scale(1.1);
}

/* ── VIGNETTE ── */
.pd-img-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.5) 100%);
  pointer-events:none;z-index:2;
}

/* ── CORNER BRACKETS (cyberpunk frame) ── */
.pd-corner{
  position:absolute;
  width:32px;
  height:32px;
  pointer-events:none;
  z-index:6;
  transition:width .4s cubic-bezier(.23,1,.32,1),height .4s cubic-bezier(.23,1,.32,1),border-color .4s,box-shadow .4s;
}
.pd-corner-tl{
  top:14px;right:14px;
  border-top:2px solid rgba(230,0,18,0.6);
  border-right:2px solid rgba(230,0,18,0.6);
}
.pd-corner-tr{
  top:14px;left:14px;
  border-top:2px solid rgba(230,0,18,0.6);
  border-left:2px solid rgba(230,0,18,0.6);
}
.pd-corner-bl{
  bottom:14px;right:14px;
  border-bottom:2px solid rgba(230,0,18,0.6);
  border-right:2px solid rgba(230,0,18,0.6);
}
.pd-corner-br{
  bottom:14px;left:14px;
  border-bottom:2px solid rgba(230,0,18,0.6);
  border-left:2px solid rgba(230,0,18,0.6);
}
.pd-main-img:hover .pd-corner{
  width:48px;
  height:48px;
  border-color:#ff1a2e;
  box-shadow:0 0 18px rgba(230,0,18,0.6);
}

/* ── TECH HUD LINES (top + bottom) ── */
.pd-tech-line{
  position:absolute;
  height:1px;
  pointer-events:none;
  z-index:3;
}
.pd-tech-top{
  top:0;
  left:60px;
  right:60px;
  background:linear-gradient(90deg,transparent,rgba(230,0,18,0.6),transparent);
}
.pd-tech-bottom{
  bottom:0;
  left:60px;
  right:60px;
  background:linear-gradient(90deg,transparent,rgba(230,0,18,0.4),transparent);
}

/* ── HUD LABELS ── */
.pd-hud-tl,.pd-hud-br{
  position:absolute;
  z-index:7;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.pd-hud-tl{
  top:24px;
  right:60px;
  border-left:2px solid var(--red);
  color:rgba(230,0,18,0.95);
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
}
.pd-hud-br{
  bottom:24px;
  left:60px;
  border-right:2px solid var(--red);
  color:rgba(230,0,18,0.95);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  font-size:11px;
  letter-spacing:3px;
}
.pd-hud-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:#00d676;
  box-shadow:0 0 8px #00d676;
  animation:pdHudPulse 1.4s ease-in-out infinite;
}
@keyframes pdHudPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.45;transform:scale(0.7);}
}

/* ── SCAN LINE (subtle moving highlight) ── */
/* ★ أداء: top:15%→85% كان يُعيد التخطيط كل إطار. الآن غلاف بارتفاع الأب، وطبقة
   داخلية بارتفاعه الكامل تحمل الخطّ عند 15% وتُزاح 70% — نفس المسار تماماً. */
.pd-scan-line{
  position:absolute;
  left:-20%;right:-20%;
  top:0;bottom:0;
  background:none;
  overflow:hidden;
  pointer-events:none;z-index:4;
  opacity:0;
  animation:pdScanLine 6s ease-in-out infinite;
}
.pd-scan-line > i{
  position:absolute;inset:0;display:block;
  animation:pdScanLineY 6s ease-in-out infinite;
}
.pd-scan-line > i::before{
  content:'';position:absolute;left:0;right:0;top:15%;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(230,0,18,0.5) 50%,transparent 100%);
}
@keyframes pdScanLine{
  0%,100%{opacity:0;}
  50%{opacity:0.7;}
}
@keyframes pdScanLineY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(70%);}
}

/* ── PRODUCT IMAGE — center, prominent ── */
.pd-main-img.has-img{
  background:
    linear-gradient(135deg,rgba(230,0,18,0.04) 0%,transparent 50%,rgba(230,0,18,0.04) 100%),
    radial-gradient(ellipse at 30% 20%,rgba(230,0,18,0.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(230,0,18,0.05) 0%,transparent 50%),
    linear-gradient(180deg,#08080c 0%,#0d0d14 50%,#08080c 100%);
}
.pd-main-img > img{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:auto;height:auto;
  max-width:80%;max-height:80%;
  min-width:55%;min-height:55%;
  object-fit:contain;
  display:block;z-index:5;
  transition:transform 0.6s cubic-bezier(.23,1,.32,1),filter .5s;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(230,0,18,0.15));
}
.pd-main-img:hover > img{
  transform:translate(-50%,-50%) scale(1.06);
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(230,0,18,0.3));
}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .pd-main-img{height:480px;}
  .pd-gallery{position:static;}
}
@media(max-width:600px){
  .pd-main-img{height:380px;max-height:60vh;}
  .pd-corner{width:22px;height:22px;}
  .pd-main-img:hover .pd-corner{width:32px;height:32px;}
  .pd-hud-tl,.pd-hud-br{font-size:9px;padding:4px 9px;}
  .pd-hud-tl{top:18px;right:42px;}
  .pd-hud-br{bottom:18px;left:42px;}
  .pd-tech-top,.pd-tech-bottom{left:40px;right:40px;}
}


/* ─── THUMBNAILS ─── */
.pd-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;}
.pd-thumbs::-webkit-scrollbar{height:4px;}
.pd-thumbs::-webkit-scrollbar-thumb{background:rgba(230,0,18,0.3);border-radius:2px;}
.pd-thumb{
  width:76px;height:76px;
  background:linear-gradient(135deg,#0d0d10 0%,#14141c 100%);
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all .3s;flex-shrink:0;overflow:hidden;position:relative;
}
.pd-thumb img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:84%;max-height:84%;width:auto;height:auto;display:block;}
.pd-thumb:hover{border-color:rgba(230,0,18,0.5);transform:translateY(-2px);}
.pd-thumb.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 6px 16px rgba(230,0,18,0.3);}
.pd-thumb.active::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(230,0,18,0.15));pointer-events:none;}

/* ─── INFO COLUMN: tighter and more organized ─── */
.pd-info{display:flex;flex-direction:column;gap:0;}
.pd-header-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
/* ═══════════════════════════════════════════════════════════
   GAMING HERO BAR — Tactical Breadcrumb Navigation
   ═══════════════════════════════════════════════════════════ */
.pd-hero-bar{
  position:relative;
  margin:0 0 28px;
  padding:14px 40px;
  background:linear-gradient(90deg,
    rgba(13,13,16,0.98) 0%,
    rgba(28,18,22,0.92) 50%,
    rgba(13,13,16,0.98) 100%);
  border-bottom:1px solid rgba(230,0,18,0.18);
  border-top:1px solid rgba(230,0,18,0.08);
  overflow:hidden;
  isolation:isolate;
}
.pd-hero-bar-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,0,18,0.04) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none;z-index:0;
  mask-image:linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.pd-hero-bar-scan{
  position:absolute;
  top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,0.15), transparent);
  pointer-events:none;z-index:0;
  animation:pdHeroScan 6s ease-in-out infinite;
}
/* ★ أداء: 160% ÷ 30% = 533.333% — مسار مطابق بالبكسل */
@keyframes pdHeroScan{
  0%   { transform:translateX(0); }
  100% { transform:translateX(533.333%); }
}
.pd-hero-bar-content{
  position:relative;z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1400px;
  margin:0 auto;
}
.pd-hero-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:'Tajawal','Rajdhani',sans-serif;
}
.pd-bc-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#a0a0b0;
  text-decoration:none;
  cursor:pointer;
  padding:5px 10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  transition:all .25s;
  letter-spacing:.5px;
}
.pd-bc-item svg{width:14px;height:14px;}
.pd-bc-item:hover{
  color:#fff;
  background:rgba(230,0,18,0.08);
  border-color:rgba(230,0,18,0.4);
}
.pd-bc-arrow{
  color:rgba(230,0,18,0.6);
  font-size:14px;
  font-weight:700;
}
.pd-bc-current{
  font-size:13px;
  color:#e60012;
  font-weight:700;
  letter-spacing:.5px;
  padding:5px 12px;
  background:rgba(230,0,18,0.08);
  border:1px solid rgba(230,0,18,0.4);
  max-width:300px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-hero-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 12px;
  background:rgba(34,197,94,0.06);
  border:1px solid rgba(34,197,94,0.3);
  font-family:'Rajdhani', monospace;
  font-size:10px;
  letter-spacing:2px;
  color:#22c55e;
  font-weight:600;
}
.pd-hero-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,0.8);
  animation:pdStatusBlink 1.5s ease-in-out infinite;
}
@keyframes pdStatusBlink{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.4; transform:scale(.7); }
}

/* ═══════════════════════════════════════════════════════════
   BADGES ROW — Brand + Category + Subcategory
   ═══════════════════════════════════════════════════════════ */
.pd-badges-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.pd-cat-badge,
.pd-subcat-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  padding:5px 12px;
  cursor:pointer;
  letter-spacing:1px;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-weight:600;
  transition:all .25s;
}
.pd-cat-badge{
  border:1px solid rgba(230,0,18,.4);
  color:#e60012;
  background:rgba(230,0,18,0.04);
}
.pd-cat-badge:hover{
  background:rgba(230,0,18,0.12);
  border-color:#e60012;
  transform:translateY(-1px);
}
.pd-subcat-badge{
  border:1px solid rgba(99,179,237,.4);
  color:#63b3ed;
  background:rgba(99,179,237,0.04);
}
.pd-subcat-badge::before{
  content:'↳';
  font-weight:700;
}
.pd-subcat-badge:hover{
  background:rgba(99,179,237,0.12);
  border-color:#63b3ed;
  transform:translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT NAME — Cinematic Typography
   ═══════════════════════════════════════════════════════════ */
.pd-name{
  position:relative;
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:42px;
  font-weight:700;
  letter-spacing:-1px;
  line-height:1.05;
  margin:0 0 14px;
  color:#fff;
  padding-bottom:14px;
}
.pd-name::after{
  content:'';
  position:absolute;
  bottom:0;right:0;
  width:60px;height:3px;
  background:linear-gradient(90deg, transparent, #e60012);
}

/* ═══════════════════════════════════════════════════════════
   PRICING — Tactical Card with Glow
   ═══════════════════════════════════════════════════════════ */
.pd-pricing{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  padding:22px 24px;
  margin:18px 0 20px;
  background:linear-gradient(135deg,
    rgba(230,0,18,0.08) 0%,
    rgba(230,0,18,0.02) 50%,
    rgba(13,13,16,0) 100%);
  border:1px solid rgba(230,0,18,0.2);
  border-right:4px solid var(--red);
  overflow:hidden;
  isolation:isolate;
}
.pd-pricing::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,0.4), transparent);
}
.pd-pricing::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,0.2), transparent);
}
.pd-price{
  position:relative;z-index:1;
  font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:48px;
  font-weight:700;
  color:#fff;
  line-height:1;
  text-shadow:0 0 24px rgba(230,0,18,0.3);
}
.pd-price::before{
  content:'₪';
  font-size:26px;
  opacity:0.7;
  margin-left:4px;
  font-weight:500;
  color:var(--red);
}
.pd-old-price{
  position:relative;z-index:1;
  font-size:20px;
  color:var(--gray);
  text-decoration:line-through;
  text-decoration-thickness:2px;
}
.pd-discount{
  position:relative;z-index:1;
  padding:6px 14px;
  background:var(--red);
  color:#fff;
  font-family:'Rajdhani', monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow:0 4px 14px rgba(230,0,18,0.4);
  animation:pdDiscountPulse 2.5s ease-in-out infinite;
}
@keyframes pdDiscountPulse{
  0%,100%{ box-shadow:0 4px 14px rgba(230,0,18,0.4); }
  50%    { box-shadow:0 4px 22px rgba(230,0,18,0.7); }
}

/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER — Tactical Line
   ═══════════════════════════════════════════════════════════ */
.pd-section-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:24px 0 14px;
}
.pd-divider-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,0.3), transparent);
}
.pd-divider-tag{
  font-family:'Rajdhani', monospace;
  font-size:10px;
  letter-spacing:3px;
  color:#666;
  font-weight:600;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ADD TO CART — Cinematic Action Button
   ═══════════════════════════════════════════════════════════ */
.pd-btn-add{
  flex:1;
  min-width:200px;
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 28px !important;
  font-size:15px !important;
  letter-spacing:2.5px !important;
  font-weight:700;
  text-align:center;
  background:linear-gradient(135deg, var(--red) 0%, #b8000f 100%) !important;
  border:none;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:all .3s cubic-bezier(.16,1,.3,1) !important;
  clip-path:polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%) !important;
  box-shadow:0 8px 24px rgba(230,0,18,0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.pd-btn-add::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:80%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events:none;
  z-index:0;
  transition:left .6s cubic-bezier(.16,1,.3,1);
}
.pd-btn-add::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.15), transparent 70%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .35s;
}
.pd-btn-add > *{position:relative;z-index:1;}
.pd-btn-add .pd-btn-icon{
  width:18px;height:18px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.pd-btn-add .pd-btn-arrow{
  font-size:18px;
  transform:translateX(0);
  opacity:.6;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.pd-btn-add:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(230,0,18,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.pd-btn-add:hover::before{left:120%;}
.pd-btn-add:hover::after{opacity:1;}
.pd-btn-add:hover .pd-btn-icon{transform:scale(1.1) rotate(-5deg);}
.pd-btn-add:hover .pd-btn-arrow{transform:translateX(-6px); opacity:1;}
.pd-btn-add:active{transform:translateY(0);}

/* ═══════════════════════════════════════════════════════════
   QTY CONTROL — Refined
   ═══════════════════════════════════════════════════════════ */
.pd-qty-ctrl{
  display:flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg, rgba(20,20,28,0.9) 0%, rgba(8,8,16,0.95) 100%);
  border:1px solid rgba(230,0,18,0.25);
  padding:0 6px;
  height:auto;
  min-height:54px;
  transition:border-color .25s;
}
.pd-qty-ctrl:hover{border-color:rgba(230,0,18,0.6);}
.pd-qty-ctrl button{
  background:none;
  border:none;
  color:#888;
  font-size:22px;
  cursor:pointer;
  padding:0 12px;
  line-height:1;
  font-weight:700;
  transition:color .2s, transform .15s;
}
.pd-qty-ctrl button:hover{color:#e60012; transform:scale(1.15);}
.pd-qty-ctrl button:active{transform:scale(0.92);}
.pd-qty-ctrl input{
  width:48px;
  text-align:center;
  background:none;
  border:none;
  color:#fff;
  font-size:17px;
  font-weight:700;
  outline:none;
  font-family:'Rajdhani',sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   SPECS TABLE — Tactical Grid
   ═══════════════════════════════════════════════════════════ */
.pd-specs{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  margin:8px 0 24px;
  background:linear-gradient(135deg, rgba(13,13,16,0.95) 0%, rgba(20,20,26,0.85) 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-left:3px solid rgba(230,0,18,0.6);
  overflow:hidden;
  /* ★ Collapsible: يبدأ يظهر 6 صفوف فقط */
  max-height:312px; /* 6 صفوف × ~52px */
  transition:max-height .4s ease;
}
.pd-specs.expanded{
  max-height:5000px; /* يفتح كل المواصفات */
}
.pd-specs:empty{display:none;}
/* ★ Gradient fade في الأسفل عندما يكون مطوي (يدل المستخدم إن في المزيد) */
.pd-specs:not(.expanded)::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:80px;
  background:linear-gradient(to bottom, transparent 0%, rgba(13,13,16,0.85) 60%, rgba(13,13,16,0.95) 100%);
  pointer-events:none;
  transition:opacity .3s;
}
/* ★ Hide fade when fully expanded */
.pd-specs.expanded::after{opacity:0;}

/* ★ Read More / Less Button */
.pd-specs-toggle{
  display:none; /* يُظهر بواسطة JS لو في أكثر من 6 specs */
  width:100%;
  padding:12px 18px;
  margin:-1px 0 24px;
  background:linear-gradient(135deg, rgba(20,20,26,0.95) 0%, rgba(13,13,16,0.98) 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-top:1px solid rgba(230,0,18,0.4);
  color:#fff;
  font-family:'Tajawal','Cairo',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  transition:background .25s, border-color .25s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pd-specs-toggle.visible{display:flex;}
.pd-specs-toggle:hover{
  background:linear-gradient(135deg, rgba(230,0,18,0.08) 0%, rgba(20,20,26,0.95) 100%);
  border-color:rgba(230,0,18,0.6);
}
.pd-specs-toggle .pd-toggle-icon{
  display:inline-block;
  font-size:14px;
  transition:transform .3s;
}
.pd-specs-toggle.is-open .pd-toggle-icon{
  transform:rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   ACTION BUTTONS LAYOUT — أزرار في سطر واحد
   ═══════════════════════════════════════════════════════════ */
.pd-actions{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin:16px 0;
  flex-wrap:nowrap;
}
.pd-actions .pd-qty-ctrl{
  flex:0 0 auto; /* لا تتمدد — حجم ثابت */
  min-width:120px;
  max-width:140px;
}
.pd-actions .pd-btn-add,
.pd-actions .btn-primary{
  flex:1 1 auto; /* تأخذ المساحة المتبقية */
  min-width:0; /* يسمح بـ shrink */
}
.pd-actions .wish-fab{
  flex:0 0 auto;
  width:54px;
  min-height:54px;
}
.spec-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .25s, padding .25s;
}
.spec-row:last-child{border-bottom:none;}
.spec-row:hover{
  background:rgba(230,0,18,0.04);
  padding-right:22px;
}
.spec-key{
  font-size:12px;
  color:#888;
  font-family:'Rajdhani', monospace;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
}
.spec-val{
  font-size:13px;
  color:#fff;
  font-weight:600;
  font-family:'Tajawal',sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .pd-hero-bar{padding:12px 20px;}
  .pd-hero-bar-content{flex-wrap:wrap;gap:10px;}
  .pd-hero-status{font-size:9px;letter-spacing:1.5px;}
  .pd-name{font-size:32px;}
  .pd-price{font-size:38px;}
}
@media (max-width: 600px){
  .pd-hero-bar{padding:10px 16px;margin-bottom:18px;}
  .pd-hero-breadcrumb{gap:6px;}
  .pd-bc-item{font-size:11px;padding:4px 8px;}
  .pd-bc-item svg{width:12px;height:12px;}
  .pd-bc-current{font-size:11px;padding:4px 9px;max-width:160px;}
  .pd-hero-status{display:none;}
  .pd-name{font-size:26px;padding-bottom:10px;}
  .pd-name::after{width:40px;height:2px;}
  .pd-pricing{padding:16px 18px;}
  .pd-price{font-size:34px;}
  .pd-price::before{font-size:18px;}
  .pd-old-price{font-size:16px;}
  .pd-btn-add{font-size:13px !important; padding:15px 20px !important; letter-spacing:1.5px !important;}
  .pd-btn-add .pd-btn-icon{width:15px;height:15px;}
  .pd-section-divider{margin:18px 0 10px;}
}

/* OLD .pd-meta styles removed — replaced by .pd-stats and .pd-trust-strip */

/* ─── WISH FAB — gaming-style heart button ─── */
.wish-fab{
  --wish-rgb:230, 0, 18;
  --wish-color:rgb(var(--wish-rgb));
  position:relative;
  width:52px;
  height:52px;
  flex-shrink:0;
  background:linear-gradient(135deg, rgba(20,20,28,.92) 0%, rgba(8,8,16,.96) 100%);
  border:1.5px solid rgba(var(--wish-rgb),.35);
  color:rgba(255,255,255,.55);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  isolation:isolate;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .3s, color .3s, box-shadow .3s, background .3s;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.wish-fab::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(var(--wish-rgb),.14) 0%, transparent 60%);
  opacity:0;
  transition:opacity .3s;
  z-index:0;
  pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .wish-fab:hover{
    border-color:var(--wish-color);
    color:var(--wish-color);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(var(--wish-rgb),.32);
  }
  .wish-fab:hover::before{ opacity:1; }
}
.wish-fab:active{ transform:translateY(0) scale(.94); }

/* Active state — item is in wishlist */
.wish-fab[data-active="true"]{
  border-color:var(--wish-color);
  color:var(--wish-color);
  background:linear-gradient(135deg, rgba(var(--wish-rgb),.18) 0%, rgba(var(--wish-rgb),.06) 100%);
  box-shadow:
    0 0 28px rgba(var(--wish-rgb),.32),
    inset 0 0 18px rgba(var(--wish-rgb),.18);
  animation:wishFabGlow 2.4s ease-in-out infinite;
}
@keyframes wishFabGlow{
  0%,100%{ box-shadow:0 0 24px rgba(var(--wish-rgb),.28), inset 0 0 16px rgba(var(--wish-rgb),.15); }
  50%   { box-shadow:0 0 38px rgba(var(--wish-rgb),.5),  inset 0 0 24px rgba(var(--wish-rgb),.28); }
}

/* SVG heart icon */
.wish-fab-icon{
  width:22px;
  height:22px;
  position:relative;
  z-index:2;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), fill .3s;
}
.wish-fab[data-active="true"] .wish-fab-icon{
  fill:var(--wish-color);
  filter:drop-shadow(0 0 6px rgba(var(--wish-rgb),.85));
  animation:wishFabHeartBeat 1.6s ease-in-out infinite;
}
@keyframes wishFabHeartBeat{
  0%, 100%   { transform:scale(1); }
  14%, 42%   { transform:scale(1.18); }
  28%, 56%   { transform:scale(1); }
}

/* Pulse ring on click */
.wish-fab-ring{
  position:absolute;
  inset:0;
  border:2px solid var(--wish-color);
  opacity:0;
  pointer-events:none;
  z-index:1;
  clip-path:inherit;
}
.wish-fab.is-pulsing .wish-fab-ring{
  animation:wishFabRingExpand .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes wishFabRingExpand{
  0%   { opacity:.85; transform:scale(1); }
  100% { opacity:0;   transform:scale(1.55); }
}

/* Subtle corner brackets (top-left, bottom-right) like other gaming UI */
.wish-fab-corner{
  position:absolute;
  width:8px;
  height:8px;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .3s;
}
.wish-fab-corner.tl{ top:1px; left:1px; border-top:1.5px solid var(--wish-color); border-left:1.5px solid var(--wish-color); }
.wish-fab-corner.br{ bottom:1px; right:1px; border-bottom:1.5px solid var(--wish-color); border-right:1.5px solid var(--wish-color); }
.wish-fab:hover .wish-fab-corner,
.wish-fab[data-active="true"] .wish-fab-corner{ opacity:1; }

/* Floating heart particles burst on activation */
.wish-fab-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.wish-fab-particle{
  position:absolute;
  top:50%;
  left:50%;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  background:var(--wish-color);
  border-radius:50%;
  filter:drop-shadow(0 0 4px var(--wish-color));
  opacity:0;
  pointer-events:none;
}
.wish-fab.is-bursting .wish-fab-particle{
  animation:wishFabParticle .7s cubic-bezier(.4,0,.2,1) forwards;
}
.wish-fab.is-bursting .wish-fab-particle:nth-child(1){ --pa:0deg;   animation-delay:0ms; }
.wish-fab.is-bursting .wish-fab-particle:nth-child(2){ --pa:60deg;  animation-delay:30ms; }
.wish-fab.is-bursting .wish-fab-particle:nth-child(3){ --pa:120deg; animation-delay:60ms; }
.wish-fab.is-bursting .wish-fab-particle:nth-child(4){ --pa:180deg; animation-delay:0ms; }
.wish-fab.is-bursting .wish-fab-particle:nth-child(5){ --pa:240deg; animation-delay:30ms; }
.wish-fab.is-bursting .wish-fab-particle:nth-child(6){ --pa:300deg; animation-delay:60ms; }
@keyframes wishFabParticle{
  0%   { opacity:1; transform:rotate(var(--pa,0deg)) translateX(0) scale(1); }
  100% { opacity:0; transform:rotate(var(--pa,0deg)) translateX(28px) scale(.4); }
}

/* ─── META: trust signals ─── */
/* ═══════════════════════════════════════════════════════════
   GAMING FEATURE STATS — Holographic Cards with HUD aesthetics
   ═══════════════════════════════════════════════════════════ */
.pd-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:24px 0 18px;
  position:relative;
}
.pd-stat-card{
  position:relative;
  padding:16px 14px 14px;
  background:linear-gradient(135deg, rgba(13,13,16,0.95) 0%, rgba(20,20,26,0.85) 100%);
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
  cursor:default;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s;
  isolation:isolate;
}
.pd-stat-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(230,0,18,0) 0%, rgba(230,0,18,0) 50%, rgba(230,0,18,0.04) 100%);
  opacity:0;transition:opacity .4s;
  pointer-events:none;z-index:0;
}
.pd-stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(230,0,18,0.4);
}
.pd-stat-card:hover::before{opacity:1}
.pd-stat-card:hover .pd-stat-bg{opacity:.7}
.pd-stat-card:hover .pd-stat-icon{color:#e60012;transform:scale(1.08)}
.pd-stat-card:hover .pd-stat-bar{filter:brightness(1.4) drop-shadow(0 0 8px rgba(230,0,18,0.6))}
.pd-stat-card:hover .pd-stat-corner-tl,
.pd-stat-card:hover .pd-stat-corner-br{
  border-color:#e60012;
  width:14px;height:14px;
}

/* Animated background grid */
.pd-stat-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(230,0,18,0.08), transparent 70%);
  opacity:.3;transition:opacity .4s;
  pointer-events:none;z-index:0;
}
.pd-stat-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:14px 14px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Cyberpunk corner brackets */
.pd-stat-corner{
  position:absolute;width:10px;height:10px;
  border:1.5px solid rgba(230,0,18,0.5);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;z-index:2;
}
.pd-stat-corner-tl{top:6px;right:6px;border-bottom:none;border-left:none;}
.pd-stat-corner-br{bottom:6px;left:6px;border-top:none;border-right:none;}

/* Icon */
.pd-stat-icon{
  position:relative;z-index:1;
  width:32px;height:32px;
  color:#e8e8e8;
  margin-bottom:10px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), color .35s;
}
.pd-stat-icon svg{width:100%;height:100%;}

/* Label */
.pd-stat-label{
  position:relative;z-index:1;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:10px;
  letter-spacing:2.5px;
  color:#7a7a85;
  text-transform:uppercase;
  margin-bottom:6px;
  font-weight:600;
}

/* Value */
.pd-stat-value{
  position:relative;z-index:1;
  font-family:'Tajawal', 'Rajdhani', sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
  letter-spacing:.3px;
  margin-bottom:12px;
  line-height:1.2;
  text-shadow:0 0 12px rgba(255,255,255,0.05);
}

/* Animated meter bar at bottom */
.pd-stat-meter{
  position:relative;z-index:1;
  height:3px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}
.pd-stat-bar{
  height:100%;
  background:linear-gradient(90deg, transparent 0%, #e60012 30%, #ff3855 70%, transparent 100%);
  transition:filter .35s;
  animation:pdStatBarSweep 3s ease-in-out infinite;
}
.pd-stat-bar-stock     { width:95%; animation-delay:0ms; }
.pd-stat-bar-delivery  { width:85%; animation-delay:200ms; }
.pd-stat-bar-warranty  { width:100%; animation-delay:400ms; }
.pd-stat-bar-support   { width:100%; animation-delay:600ms; }
@keyframes pdStatBarSweep{
  0%, 100% { transform:translateX(0); opacity:1; }
  50%      { transform:translateX(-8%); opacity:.7; }
}

/* Pulse dot */
.pd-stat-pulse{
  position:absolute;
  top:14px;left:14px;
  width:6px;height:6px;
  background:#e60012;
  border-radius:50%;
  box-shadow:0 0 8px rgba(230,0,18,0.8), 0 0 14px rgba(230,0,18,0.4);
  z-index:2;
  animation:pdStatDot 2s ease-in-out infinite;
}
@keyframes pdStatDot{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.7); }
}
[data-stat="support"] .pd-stat-pulse{ background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.8), 0 0 14px rgba(34,197,94,0.4); }
[data-stat="warranty"] .pd-stat-pulse{ background:#3b82f6; box-shadow:0 0 8px rgba(59,130,246,0.8), 0 0 14px rgba(59,130,246,0.4); }
[data-stat="delivery"] .pd-stat-pulse{ background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,0.8), 0 0 14px rgba(245,158,11,0.4); }

/* ═══════════════════════════════════════════════════════════
   TRUST STRIP — Mission Control style
   ═══════════════════════════════════════════════════════════ */
.pd-trust-strip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 22px;
  margin-bottom:8px;
  background:linear-gradient(90deg,
    rgba(13,13,16,0.95) 0%,
    rgba(28,18,22,0.88) 50%,
    rgba(13,13,16,0.95) 100%);
  border:1px solid rgba(230,0,18,0.18);
  border-left:3px solid #e60012;
  overflow:hidden;
  isolation:isolate;
}
.pd-trust-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,0,18,0.04) 1px, transparent 1px);
  background-size:20px 20px;
  pointer-events:none;z-index:0;
}
.pd-trust-scan{
  position:absolute;
  top:0;left:-50%;
  width:50%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,0.12), transparent);
  pointer-events:none;z-index:0;
  animation:pdTrustScan 5s ease-in-out infinite;
}
/* ★ أداء: 170% ÷ 50% = 340% — مسار مطابق بالبكسل */
@keyframes pdTrustScan{
  0%   { transform:translateX(0); }
  100% { transform:translateX(340%); }
}
.pd-trust-item{
  position:relative;z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.pd-trust-icon{
  flex-shrink:0;
  width:34px;height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(230,0,18,0.08);
  border:1px solid rgba(230,0,18,0.3);
  color:#e60012;
  transition:transform .35s, box-shadow .35s, border-color .35s;
}
.pd-trust-icon svg{width:18px;height:18px;}
.pd-trust-item:hover .pd-trust-icon{
  transform:scale(1.1) rotate(-3deg);
  box-shadow:0 0 16px rgba(230,0,18,0.4);
  border-color:#e60012;
}
.pd-trust-text{min-width:0}
.pd-trust-title{
  font-family:'Tajawal', sans-serif;
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin-bottom:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-trust-sub{
  font-family:'Rajdhani', sans-serif;
  font-size:10px;
  color:#888;
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-trust-divider{
  position:relative;z-index:1;
  width:1px;
  height:30px;
  background:linear-gradient(180deg, transparent, rgba(230,0,18,0.3), transparent);
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .pd-stats{ grid-template-columns:repeat(2, 1fr); gap:8px; }
}
@media (max-width: 600px){
  .pd-stats{ grid-template-columns:repeat(2, 1fr); gap:7px; margin:18px 0 14px; }
  .pd-stat-card{ padding:13px 11px 11px; }
  .pd-stat-icon{ width:26px; height:26px; margin-bottom:8px; }
  .pd-stat-label{ font-size:9px; letter-spacing:1.8px; margin-bottom:4px; }
  .pd-stat-value{ font-size:14px; margin-bottom:9px; }
  .pd-stat-pulse{ top:11px; left:11px; width:5px; height:5px; }
  .pd-trust-strip{ flex-wrap:wrap; gap:14px; padding:14px 16px; }
  .pd-trust-divider{ display:none; }
  .pd-trust-item{ flex:1 1 100%; }
}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .product-detail{padding:0 20px 30px;}
  .pd-grid{grid-template-columns:1fr;gap:30px;}
}
@media(max-width:600px){
  .product-detail{padding:0 16px 30px;}
  /* ★ على mobile: نخلي الترتيب — كمية + سلة في سطر، wishlist في زاوية */
  .pd-actions{
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
  }
  .pd-actions .pd-qty-ctrl{
    flex:0 0 auto;
    min-width:110px;
    max-width:130px;
    min-height:50px;
  }
  .pd-actions .pd-btn-add,
  .pd-actions .btn-primary{
    flex:1 1 0;
    min-width:140px;
    font-size:13px;
  }
  .pd-actions .wish-fab{
    flex:0 0 auto;
    width:50px;
    min-height:50px;
  }
  /* لو ضيق جداً (شاشة صغيرة)، wishlist تحت */
}
@media(max-width:380px){
  .pd-actions{flex-direction:column;}
  .pd-actions .pd-qty-ctrl,
  .pd-actions .pd-btn-add,
  .pd-actions .btn-primary,
  .pd-actions .wish-fab{
    width:100%;
    max-width:none;
  }
}

/* ════════════════════════════════════════════════════════════════
   BLOG CARDS — Premium Gaming Cards
   ════════════════════════════════════════════════════════════════ */
.blog-card{
  position:relative;
  background:linear-gradient(180deg,
    rgba(22,22,32,.95) 0%,
    rgba(10,10,18,.98) 100%);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  cursor:pointer;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  isolation:isolate;
  display:flex;
  flex-direction:column;
}
/* Red top accent bar */
.blog-card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  opacity:0;
  transition:opacity .3s;
  z-index:3;
}
.blog-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,
    rgba(230,0,18,.06) 0%,
    transparent 40%,
    transparent 60%,
    rgba(230,0,18,.04) 100%);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s;
  z-index:0;
}
.blog-card:hover{
  transform:translateY(-6px);
  border-color:rgba(230,0,18,.5);
  box-shadow:
    0 24px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(230,0,18,.3),
    0 0 60px rgba(230,0,18,.12);
}
.blog-card:hover::before{ opacity:1; }
.blog-card:hover::after{ opacity:1; }
.blog-card:hover .blog-card-img img{ transform:scale(1.08); }
.blog-card:hover .blog-card-img-overlay{ opacity:1; }
.blog-card:hover .blog-card-corner{
  border-color:var(--red);
  width:18px;height:18px;
}
.blog-card:hover .blog-card-arrow{
  transform:translateX(-6px);
  color:var(--red);
}
.blog-card:hover .blog-card-arrow svg{ transform:scaleX(-1) translateX(-3px); }

/* Image with proper containment */
.blog-card-img{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg,#1a1a26,#0a0a14);
}
.blog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.blog-card-img-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(0,0,0,.5) 100%);
  pointer-events:none;
  opacity:.6;
  transition:opacity .35s;
  z-index:1;
}
.blog-card-img-fallback{
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  opacity:.25;
  background:linear-gradient(135deg,#1a1a26,#0a0a14);
}

/* Cyberpunk corners */
.blog-card-corner{
  position:absolute;
  width:14px;height:14px;
  border:2px solid rgba(230,0,18,.7);
  z-index:2;
  pointer-events:none;
  transition:all .35s cubic-bezier(.16,1,.3,1);
  filter:drop-shadow(0 0 4px rgba(230,0,18,.4));
}
.blog-card-corner.tl{top:10px;right:10px;border-bottom:none;border-left:none;}
.blog-card-corner.br{bottom:10px;left:10px;border-top:none;border-right:none;}

/* Category badge */
.blog-card-cat{
  position:absolute;
  top:14px;left:14px;
  z-index:3;
  padding:5px 14px;
  background:linear-gradient(135deg, var(--red) 0%, #b80012 100%);
  color:#fff;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  box-shadow:0 4px 12px rgba(230,0,18,.4);
  text-transform:uppercase;
}

/* Body */
.blog-card-body{
  position:relative;
  padding:22px 22px 18px;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
}
.blog-card-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#777;
  letter-spacing:.8px;
  margin-bottom:12px;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-weight:500;
}
.blog-card-meta svg{width:13px;height:13px;}
.blog-card-meta-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.blog-card-meta-sep{
  width:3px;height:3px;
  border-radius:50%;
  background:#444;
}
.blog-card-title{
  font-family:'Tajawal', 'Rajdhani', sans-serif;
  font-size:20px;
  font-weight:700;
  color:#fff;
  line-height:1.4;
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  letter-spacing:-.2px;
  transition:color .25s;
}
.blog-card:hover .blog-card-title{ color:#fff; }
.blog-card-excerpt{
  font-size:14px;
  color:#999;
  line-height:1.7;
  margin:0 0 18px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.blog-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.blog-card-author{
  font-size:12px;
  color:#888;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.blog-card-author::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 6px rgba(230,0,18,.6);
}
.blog-card-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#888;
  font-family:'Rajdhani', monospace;
  letter-spacing:2px;
  font-weight:700;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  text-transform:uppercase;
}
.blog-card-arrow svg{
  width:14px;height:14px;
  transform:scaleX(-1);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

/* ════════════════════════════════════════════════════════════════
   BLOG LIST PAGE — PREMIUM
   ════════════════════════════════════════════════════════════════ */
.blog-hero{
  position:relative;
  margin:0 0 40px;
  padding:80px 40px 60px;
  background:linear-gradient(180deg,
    rgba(13,13,20,1) 0%,
    rgba(28,8,12,.95) 50%,
    rgba(13,13,20,.98) 100%);
  border-bottom:1px solid rgba(230,0,18,.25);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.blog-hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,0,18,.05) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 60% 80% at 50% 50%, black 0%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 50%, black 0%, transparent 90%);
}
.blog-hero-scan{
  position:absolute;
  top:0;left:-30%;
  width:30%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,.2), transparent);
  pointer-events:none;
  animation:pdHeroScan 8s ease-in-out infinite;
}
/* Glowing orb in background */
.blog-hero::before{
  content:'';
  position:absolute;
  width:600px;height:600px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(230,0,18,.15) 0%, transparent 70%);
  pointer-events:none;
  filter:blur(40px);
  z-index:0;
}
.blog-hero-content{
  position:relative;
  max-width:800px;
  margin:0 auto;
  z-index:2;
}
.blog-hero-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Rajdhani', monospace;
  font-size:12px;
  letter-spacing:5px;
  color:var(--red);
  font-weight:700;
  padding:8px 20px;
  background:rgba(230,0,18,.1);
  border:1px solid rgba(230,0,18,.35);
  margin-bottom:24px;
}
.blog-hero-tag::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px var(--red);
  animation:pdStatusBlink 1.5s infinite;
}
.blog-hero-title{
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:72px;
  font-weight:700;
  letter-spacing:-2.5px;
  color:#fff;
  margin:0 0 16px;
  line-height:.95;
  text-shadow:0 0 40px rgba(230,0,18,.2);
}
.blog-hero-subtitle{
  font-size:18px;
  color:#999;
  margin:0;
  line-height:1.7;
  letter-spacing:.3px;
}

/* Filter bar — premium tactical style */
.blog-filters-bar{
  max-width:1400px;
  margin:0 auto 50px;
  padding:0 40px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.blog-search-wrap{
  position:relative;
  flex:1;
  min-width:280px;
}
.blog-search-icon{
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  width:18px;height:18px;
  color:#666;
  pointer-events:none;
  transition:color .25s;
}
.blog-search-input{
  width:100%;
  padding:15px 46px 15px 18px;
  background:rgba(20,20,28,.85);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-family:'Tajawal', sans-serif;
  font-size:14px;
  outline:none;
  transition:all .25s;
  letter-spacing:.3px;
}
.blog-search-input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(230,0,18,.15);
}
.blog-search-input:focus + .blog-search-icon,
.blog-search-wrap:focus-within .blog-search-icon{ color:var(--red); }
.blog-search-input::placeholder{color:#555;}

.blog-cat-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.blog-cat-chip{
  padding:9px 18px;
  background:rgba(20,20,28,.85);
  border:1px solid rgba(255,255,255,.08);
  color:#888;
  font-family:'Tajawal', sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
  letter-spacing:.3px;
}
.blog-cat-chip:hover{
  border-color:rgba(230,0,18,.5);
  color:#fff;
  transform:translateY(-1px);
}
.blog-cat-chip.active{
  background:linear-gradient(135deg, rgba(230,0,18,.18), rgba(230,0,18,.08));
  border-color:var(--red);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 16px rgba(230,0,18,.2);
}

.blog-list-wrap{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px 100px;
}
.blog-list-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.blog-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:80px;
  color:#888;
  font-size:14px;
  letter-spacing:1px;
}
.blog-loader{
  width:28px;height:28px;
  border:2px solid rgba(230,0,18,.2);
  border-top-color:var(--red);
  border-radius:50%;
  animation:blogSpin 1s linear infinite;
}
@keyframes blogSpin{to{transform:rotate(360deg);}}
.blog-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:100px 40px;
  color:#666;
  text-align:center;
  font-size:15px;
}

/* ════════════════════════════════════════════════════════════════
   BLOG DETAIL PAGE — Premium reading experience
   ════════════════════════════════════════════════════════════════ */
.blog-article{
  max-width:860px;
  margin:0 auto;
  padding:0 40px 100px;
}
.bd-header{
  margin-bottom:36px;
  text-align:center;
}
.bd-meta-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.bd-cat-badge{
  padding:7px 18px;
  background:linear-gradient(135deg, var(--red) 0%, #b80012 100%);
  color:#fff;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.5px;
  clip-path:polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  box-shadow:0 4px 14px rgba(230,0,18,.4);
  text-transform:uppercase;
}
.bd-meta-sep{
  width:4px;height:4px;
  border-radius:50%;
  background:#555;
}
.bd-meta-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#888;
  letter-spacing:.5px;
  font-family:'Tajawal', sans-serif;
}
.bd-meta-item svg{width:15px;height:15px;}
.bd-title{
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:52px;
  font-weight:700;
  letter-spacing:-1.5px;
  line-height:1.15;
  color:#fff;
  margin:0 0 20px;
  text-shadow:0 0 40px rgba(230,0,18,.1);
}
.bd-excerpt{
  font-size:20px;
  color:#aaa;
  line-height:1.7;
  margin:0 auto 30px;
  max-width:700px;
  font-weight:400;
  letter-spacing:.2px;
  font-family:'Tajawal', sans-serif;
}
/* Author row */
.bd-author-row{
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:18px 24px;
  background:linear-gradient(135deg, rgba(230,0,18,.06), rgba(230,0,18,.02));
  border:1px solid rgba(230,0,18,.2);
  border-right:3px solid var(--red);
}
.bd-author-avatar{
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(230,0,18,.3), rgba(230,0,18,.08));
  border:2px solid rgba(230,0,18,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red);
  flex-shrink:0;
}
.bd-author-avatar svg{width:26px;height:26px;}
.bd-author-info{ text-align:right; }
.bd-author-name{
  font-size:15px;
  font-weight:700;
  color:#fff;
  margin-bottom:3px;
}
.bd-author-date{
  font-size:12px;
  color:#888;
  letter-spacing:.5px;
  font-family:'Rajdhani', 'Tajawal', sans-serif;
}

/* COVER IMAGE — show full image with smart sizing */
.bd-cover{
  position:relative;
  margin:0 -20px 40px;
  overflow:hidden;
  background:#0a0a14;
  border:1px solid rgba(230,0,18,.15);
  isolation:isolate;
  /* Use min-height for short images, max-height to prevent gigantic ones */
  min-height:300px;
  max-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bd-cover::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,0,18,.04) 1px, transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
  z-index:0;
}
.bd-cover img{
  position:relative;
  z-index:1;
  width:100%;
  max-height:600px;
  /* Use 'contain' so the WHOLE image is visible — no cropping */
  object-fit:contain;
  /* Also limit width to keep aspect ratio intact for tall images */
}
/* Tactical corners on cover */
.bd-cover-corner{
  position:absolute;
  width:24px;height:24px;
  border:2px solid rgba(230,0,18,.6);
  z-index:3;
  pointer-events:none;
}
.bd-cover-corner.tl{top:14px;right:14px;border-bottom:none;border-left:none;}
.bd-cover-corner.tr{top:14px;left:14px;border-bottom:none;border-right:none;}
.bd-cover-corner.bl{bottom:14px;right:14px;border-top:none;border-left:none;}
.bd-cover-corner.br{bottom:14px;left:14px;border-top:none;border-right:none;}

.bd-cover-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 70%, rgba(0,0,0,.3) 100%);
  pointer-events:none;
  z-index:2;
}

/* Article body — LARGER fonts for easier reading */
.bd-body{
  font-family:'Tajawal', sans-serif;
  font-size:18px;            /* increased from 16px */
  color:#cdcdd5;             /* slightly brighter */
  line-height:2.0;           /* increased from 1.9 */
  margin:0 0 50px;
  letter-spacing:.2px;
}
.bd-body h2{
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:34px;            /* increased from 28px */
  font-weight:700;
  color:#fff;
  margin:44px 0 18px;
  line-height:1.3;
  padding-right:18px;
  border-right:4px solid var(--red);
  letter-spacing:-.5px;
}
.bd-body h3{
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:26px;            /* increased from 22px */
  font-weight:700;
  color:#fff;
  margin:32px 0 16px;
  line-height:1.3;
  letter-spacing:-.3px;
}
.bd-body h4{
  font-size:21px;            /* increased from 18px */
  font-weight:700;
  color:#eee;
  margin:28px 0 14px;
}
.bd-body p{
  margin:0 0 22px;           /* increased spacing */
  font-size:18px;
}
.bd-body strong, .bd-body b{
  color:#fff;
  font-weight:700;
}
.bd-body em, .bd-body i{
  color:#ffb;
  font-style:italic;
}
.bd-body a{
  color:var(--red);
  text-decoration:underline;
  text-decoration-color:rgba(230,0,18,.4);
  text-underline-offset:4px;
  transition:all .25s;
  font-weight:600;
}
.bd-body a:hover{
  text-decoration-color:var(--red);
  text-shadow:0 0 8px rgba(230,0,18,.3);
}
.bd-body ul, .bd-body ol{
  padding-right:28px;
  margin:0 0 24px;
}
.bd-body li{
  margin:8px 0;
  font-size:18px;
}
.bd-body ul li::marker{ color:var(--red); }
.bd-body blockquote{
  margin:32px 0;
  padding:24px 28px;
  background:linear-gradient(135deg, rgba(230,0,18,.08), rgba(230,0,18,.02));
  border-right:4px solid var(--red);
  font-style:italic;
  color:#ddd;
  font-size:20px;            /* increased */
  line-height:1.8;
  position:relative;
}
.bd-body blockquote::before{
  content:'❝';
  position:absolute;
  top:8px;
  right:16px;
  font-size:30px;
  color:var(--red);
  opacity:.4;
}
.bd-body blockquote p:last-child{margin-bottom:0;}
.bd-body img{
  max-width:100%;
  height:auto;
  margin:28px auto;
  display:block;
  border:1px solid rgba(255,255,255,.08);
}
.bd-body pre{
  background:#0a0a14;
  border:1px solid rgba(255,255,255,.08);
  border-right:3px solid var(--red);
  padding:20px;
  margin:24px 0;
  overflow-x:auto;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  color:#ddd;
  line-height:1.6;
}
.bd-body code{
  background:rgba(230,0,18,.1);
  color:#ffaaaa;
  padding:3px 8px;
  font-family:'JetBrains Mono', monospace;
  font-size:.92em;
  border-radius:3px;
  font-weight:600;
}
.bd-body pre code{
  background:none;
  color:#ddd;
  padding:0;
  font-weight:400;
}

/* Tags */
.bd-tags-row{
  margin:36px 0;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.bd-tags-label{
  font-family:'Rajdhani', monospace;
  font-size:11px;
  letter-spacing:4px;
  color:#666;
  margin-bottom:14px;
  font-weight:700;
}
.bd-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.bd-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#aaa;
  font-size:13px;
  letter-spacing:.5px;
  transition:all .25s;
  font-weight:600;
}
.bd-tag::before{
  content:'#';
  color:var(--red);
  margin-left:4px;
  font-weight:700;
}
.bd-tag:hover{
  border-color:rgba(230,0,18,.5);
  color:#fff;
  transform:translateY(-1px);
}

/* Share section */
.bd-share-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:50px;
  flex-wrap:wrap;
}
.bd-share-label{
  font-size:14px;
  color:#aaa;
  letter-spacing:1.5px;
  font-weight:700;
}
.bd-share-btns{
  display:flex;
  gap:10px;
}
.bd-share-btn{
  width:46px;height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#888;
  cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.bd-share-btn svg{width:20px;height:20px;}
.bd-share-btn:hover{
  background:linear-gradient(135deg, rgba(230,0,18,.15), rgba(230,0,18,.05));
  border-color:var(--red);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(230,0,18,.25);
}

/* Related */
.bd-related{
  margin:50px 0 0;
}
.bd-related-divider{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 32px;
}
.bd-related-divider .pd-divider-line{ flex:1; }
.bd-related-title{
  font-family:'Rajdhani', 'Tajawal', sans-serif;
  font-size:30px;
  font-weight:700;
  color:#fff;
  margin:0 0 24px;
  text-align:center;
  letter-spacing:-.5px;
}
.bd-related-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

/* ════════════════════════════════════════════════════════════════
   BLOG RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
   .blog-list-grid, .bd-related-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
  .blog-hero-title{ font-size:54px; }
  .blog-hero{ padding:60px 24px 50px; }
  .blog-list-wrap, .blog-filters-bar{ padding:0 24px; }
  .blog-list-wrap{ padding-bottom:80px; }
  .blog-article{ padding:0 24px 80px; }
  .bd-title{ font-size:38px; }
  .bd-body{ font-size:17px; }
  .bd-body p, .bd-body li{ font-size:17px; }
  .bd-body h2{ font-size:28px; }
  .bd-body h3{ font-size:23px; }
  .bd-excerpt{ font-size:18px; }
  .blog-card-title{ font-size:18px; }
}
@media (max-width: 600px){
   .blog-list-grid, .bd-related-grid{ grid-template-columns:1fr; }
  .blog-hero-title{ font-size:40px; letter-spacing:-1.5px; }
  .blog-hero-subtitle{ font-size:14px; }
  .bd-title{ font-size:30px; }
  .bd-excerpt{ font-size:16px; }
  .blog-filters-bar{ flex-direction:column; align-items:stretch; gap:14px; }
  .blog-cat-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; }
  .bd-share-row{ flex-direction:column; align-items:flex-start; }
  .bd-cover{ margin:0 0 30px; min-height:200px; max-height:400px; }
  .bd-body{ font-size:16px; line-height:1.85; }
  .bd-body p, .bd-body li{ font-size:16px; }
  .bd-body h2{ font-size:24px; }
  .bd-author-row{ flex-direction:row; padding:14px 18px; }
}

/* ════════════════════════════════════════════════════════════
   CHECKOUT PAGE — Premium cyberpunk redesign
   ════════════════════════════════════════════════════════════ */
.checkout-wrap{max-width:580px;margin:0 auto;padding:50px 20px 60px;position:relative;}
.checkout-wrap::before{
  content:'';position:absolute;inset:30px 0 0;
  background-image:linear-gradient(rgba(230,0,18,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(230,0,18,.025) 1px,transparent 1px);
  background-size:42px 42px;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 0%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 0%,transparent 80%);
  z-index:0;
}
.checkout-wrap > *{position:relative;z-index:1;}

.ck-title{font-family:'Rajdhani','Tajawal',sans-serif;font-size:36px;font-weight:700;color:#fff;letter-spacing:-.5px;margin-bottom:6px;}
.ck-title span{color:var(--red);}
.ck-subtitle{font-size:12px;color:rgba(230,0,18,.7);margin-bottom:32px;letter-spacing:2px;font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;text-transform:uppercase;}
.ck-step{display:none;animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;}
.ck-step.active{display:block;}

/* ── FORM FIELDS ────────────────────────────────────────────── */
.ck-field{margin-bottom:18px;}
.ck-label{display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px;font-family:'Rajdhani','Tajawal',sans-serif;font-weight:600;}
.ck-input{
  width:100%;padding:14px 18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;font-family:'Tajawal',sans-serif;font-size:15px;
  outline:none;transition:all .3s cubic-bezier(.16,1,.3,1);
  border-radius:6px;
  box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}
.ck-input::placeholder{color:rgba(255,255,255,.3);}
.ck-input:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.035);}
.ck-input:focus{
  border-color:rgba(230,0,18,.55);
  background:rgba(230,0,18,.04);
  box-shadow:0 0 0 4px rgba(230,0,18,.1),0 4px 16px rgba(230,0,18,.15);
}
/* Force dark theme on Chrome autofill (fixes white-input issue) */
.ck-input:-webkit-autofill,
.ck-input:-webkit-autofill:hover,
.ck-input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px rgba(20,20,24,1) inset !important;
  caret-color:var(--red) !important;
  border-color:rgba(255,255,255,.08);
  transition:background-color 5000s ease-in-out 0s;
}
/* Native select dropdown styling */
select.ck-input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='rgba(255,255,255,.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:left 16px center;
  background-size:14px;
  padding-left:40px;
  cursor:pointer;
}
select.ck-input option{background:#0a0a0a;color:#fff;}

/* ── STEP 1 · ENHANCED PERSONAL INFO ─────────────────────────── */
.ckf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
@media(max-width:560px){.ckf-grid{grid-template-columns:1fr;}}
/* ★ ملاحظة الزبون على الطلب — حقل اختياري في خطوة البيانات */
.ck-textarea{
  min-height:88px;resize:vertical;line-height:1.75;font-size:14px;
  padding-top:13px;padding-bottom:13px;
}
.ckf-wrap > .ck-textarea{padding-right:46px;}
.ckf-wrap > .ck-textarea ~ .ckf-ico{top:20px;transform:none;}
.ck-note-foot{
  display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;
  font-size:11.5px;color:rgba(255,255,255,.34);line-height:1.6;
}
.ck-note-count{
  margin-right:auto;                 /* بديل للمتصفحات قبل دعم الخصائص المنطقية (الصفحة rtl) */
  margin-inline-start:auto;font-family:'Share Tech Mono',monospace;font-size:11px;
  color:rgba(255,255,255,.28);unicode-bidi:isolate;white-space:nowrap;
}
.ck-note-count.is-near{color:#ffb300;}

/* ★ ملاحظة الزبون كما تظهر له داخل طلبه لاحقاً */
.sg-mynote{
  margin:0 0 14px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  background:linear-gradient(115deg,rgba(255,179,0,.075) 0%,rgba(255,179,0,.025) 45%,rgba(6,6,8,0) 100%),var(--black);
  border:1px solid rgba(255,179,0,.20);border-right:3px solid #ffb300;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px));
}
.sg-mynote-ico{
  flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:12px;background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.28);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.sg-mynote-body{flex:1;min-width:0;}
.sg-mynote-ttl{
  font-family:'Rajdhani',sans-serif;font-size:13.5px;font-weight:700;color:#ffc94d;letter-spacing:.3px;
}
.sg-mynote-txt{
  font-size:12.5px;color:#a8a294;line-height:1.85;margin-top:5px;
  white-space:pre-wrap;word-break:break-word;unicode-bidi:plaintext;
}
@media (max-width:600px){
  .sg-mynote{padding:10px 11px;gap:9px;}
  .sg-mynote-ico{flex-basis:23px;width:23px;height:23px;font-size:11px;}
  .sg-mynote-ttl{font-size:12.5px;}
  .sg-mynote-txt{font-size:11.5px;}
}

.ckf-wrap{position:relative;}
.ckf-wrap > .ck-input{padding-right:46px;}
.ckf-wrap > select.ck-input{padding-right:46px;padding-left:40px;}
.ckf-ico{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:rgba(255,255,255,.32);
  pointer-events:none;z-index:2;transition:color .3s,transform .3s;
}
.ckf-wrap:focus-within .ckf-ico{color:var(--red);transform:translateY(-50%) scale(1.08);}

/* Digital-only delivery banner */
.ck-digital-note{
  display:flex;gap:13px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.02));
  border:1px solid rgba(16,185,129,.35);border-radius:12px;
  padding:15px 17px;margin-bottom:22px;position:relative;overflow:hidden;
  animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.ck-digital-note::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:#10b981;box-shadow:0 0 14px rgba(16,185,129,.7);}
.ck-digital-note::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 60px at 100% 0,rgba(16,185,129,.18),transparent 70%);pointer-events:none;}
.ck-digital-note .cdn-ico{font-size:23px;flex-shrink:0;line-height:1.2;filter:drop-shadow(0 0 7px rgba(16,185,129,.55));position:relative;z-index:1;}
.ck-digital-note .cdn-title{font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;font-size:14.5px;color:#10e6a0;letter-spacing:.3px;margin-bottom:3px;position:relative;z-index:1;}
.ck-digital-note .cdn-desc{font-size:12px;color:rgba(255,255,255,.64);line-height:1.65;position:relative;z-index:1;}

/* Section divider label (delivery) */
.ck-sect-label{
  display:flex;align-items:center;gap:10px;margin:6px 0 16px;
  font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.ck-sect-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent);}
.ck-sect-label svg{width:15px;height:15px;color:var(--red);}

/* Enhanced shipping-fee display chip */
.ck-ship-chip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;margin:-8px 0 18px;
  background:linear-gradient(135deg,rgba(255,179,0,.09),rgba(255,179,0,.01));
  border:1px solid rgba(255,179,0,.28);border-radius:10px;
  animation:fadeUp .35s ease both;
}
.ck-ship-chip .csc-left{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.7);}
.ck-ship-chip .csc-left span{font-size:16px;}

/* Trust footer */
.ck-trust{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;font-size:11px;letter-spacing:.6px;
  color:rgba(255,255,255,.42);font-family:'Rajdhani','Tajawal',sans-serif;font-weight:600;
}
.ck-trust svg{width:14px;height:14px;color:#10b981;flex-shrink:0;}

/* ── PAYMENT OPTIONS ────────────────────────────────────────── */
@keyframes ckPayHeadPulse{0%,100%{box-shadow:0 0 0 3px rgba(230,0,18,.05)}50%{box-shadow:0 0 0 5px rgba(230,0,18,.11)}}

/* ★ أقسام خطوة الدفع مرقّمة — ترتيب واضح: اختيار ← خصومات ← مراجعة */
.ck-sect{display:flex;align-items:center;gap:11px;margin:26px 0 14px;}
.ck-sect-num{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700;color:var(--red);
  background:rgba(230,0,18,.12);border:1px solid rgba(230,0,18,.3);
}
.ck-sect-t{font-family:'Rajdhani','Tajawal',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:.3px;}
.ck-sect-o{font-size:11px;color:rgba(255,255,255,.34);}
.ck-sect-num.is-ico{font-size:15px;font-family:'Tajawal',sans-serif;line-height:1;}
.ck-sect-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.13),transparent);}
.ck-sect-req{
  font-size:10px;font-weight:700;color:var(--red);background:rgba(230,0,18,.14);
  border:1px solid rgba(230,0,18,.35);padding:2px 9px;border-radius:20px;white-space:nowrap;
}
/* القسم المطلوب: نبض أحمر ما دام الزبون لم يختر */
.ck-sect.is-req{
  margin-top:0;padding:12px 15px;border-radius:12px;
  background:linear-gradient(135deg,rgba(230,0,18,.12),rgba(230,0,18,.03));
  border:1px solid rgba(230,0,18,.32);
  animation:ckPayHeadPulse 2.6s ease-in-out infinite;
}
.ck-sect.is-req .ck-sect-num{background:rgba(230,0,18,.2);border-color:rgba(230,0,18,.5);color:#fff;}
.ck-sect.is-req .ck-sect-t{font-size:16px;}
/* وقد اختار: يهدأ ويتحوّل أخضر */
.ck-sect.is-ok{animation:none;background:rgba(0,230,118,.05);border-color:rgba(0,230,118,.25);}
.ck-sect.is-ok .ck-sect-num{background:rgba(0,230,118,.14);border-color:rgba(0,230,118,.35);color:#00e676;}
.ck-sect.is-ok .ck-sect-req{color:#00e676;background:rgba(0,230,118,.12);border-color:rgba(0,230,118,.3);}

/* ★ سطر حالة الاختيار تحت البطاقات */
.ck-pay-state{margin:-6px 0 18px;}
#ckPayPick{margin:0 0 20px;}
.ck-pay-ask{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  background:rgba(230,0,18,.07);border:1px dashed rgba(230,0,18,.4);
  font-size:12.5px;line-height:1.7;color:#ff9aa6;font-weight:700;
}
.ck-pay-ask .cps-dot{
  flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--red);
  animation:ckPayDot 1.4s ease-in-out infinite;
}
@keyframes ckPayDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(230,0,18,.5)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(230,0,18,0)}}
.ck-pay-done{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
  background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.28);
  font-size:12.5px;color:rgba(255,255,255,.82);
}
.ck-pay-done .cpd-ok{color:#00e676;font-weight:900;font-size:14px;}
.ck-pay-done strong{color:#fff;}
.ck-pay-done .cpd-chg{
  margin-right:auto;                 /* بديل للمتصفحات قبل دعم الخصائص المنطقية (الصفحة rtl) */
  margin-inline-start:auto;background:transparent;border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.6);border-radius:7px;padding:5px 12px;
  font-size:11.5px;font-family:inherit;cursor:pointer;transition:all .25s;white-space:nowrap;
}
@media (hover:hover){
  .ck-pay-done .cpd-chg:hover{border-color:var(--red);color:#fff;}
}

/* ★ بطاقة مراجعة بيانات الزبون قبل التأكيد */
.ck-recap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px;
  padding:13px 15px;margin-bottom:14px;border-radius:12px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.09);
}
.ck-recap-i{min-width:0;}
.ck-recap-k{
  font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.34);
}
.ck-recap-v{
  font-size:13px;color:#fff;font-weight:700;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;
}
.ck-recap-v.is-miss{color:#ff8d9b;font-weight:600;}
.ck-recap-edit{grid-column:1/-1;display:flex;}
.ck-recap-edit button{
  margin-right:auto;                 /* بديل للمتصفحات قبل دعم الخصائص المنطقية (الصفحة rtl) */
  margin-inline-start:auto;background:transparent;border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.6);border-radius:7px;padding:5px 12px;
  font-size:11.5px;font-family:inherit;cursor:pointer;transition:all .25s;
}
@media (hover:hover){
  .ck-recap-edit button:hover{border-color:var(--red);color:#fff;}
}

/* زر التأكيد مقفل حتى تُختار طريقة الدفع (يبقى قابلاً للنقر ليشرح السبب) */
.ck-btn-next.pay-locked{opacity:.45;cursor:not-allowed;}

/* شريط الخطوات: الرجوع لخطوة سابقة بالنقر */
.ck-step-item.is-nav{cursor:pointer;}
@media (hover:hover){
  .ck-step-item.is-nav:hover .ck-step-dot{border-color:var(--red);}
}

/* أجهزة اللمس: أزرار بمساحة يسهل إصابتها بالإصبع، وحقول لا تُقفز الشاشة عند التركيز */
@media (hover:none),(pointer:coarse){
  .ck-recap-edit button,
  .ck-pay-done .cpd-chg{
    min-height:44px;padding:10px 16px;font-size:12.5px;
  }
  .ck-pay-opt{min-height:96px;}
  .ck-step-item.is-nav{padding:2px 0;}
  /* أي حقل أصغر من 16px يجعل iOS يُكبِّر الصفحة عند التركيز — بما فيه اللوحيات */
  .ck-input,.ck-textarea,.form-input{font-size:16px;}
}

@media (max-width:600px){
  .ck-sect{margin:20px 0 12px;gap:9px;}
  .ck-sect-t{font-size:14px;}
  .ck-sect.is-req{padding:11px 12px;}
  .ck-sect.is-req .ck-sect-t{font-size:14.5px;}
  .ck-recap{padding:11px 12px;gap:10px;}
}

.ck-pay-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
/* دائرة اختيار فارغة على كلّ طريقة — تُظهر للزبون أنّ أمامه خيارات لم يُحسم أيّها */
.ck-pay-opt::before{
  content:'';position:absolute;top:8px;right:8px;z-index:2;box-sizing:border-box;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.02);border:2px solid rgba(255,255,255,.24);
  transition:border-color .25s,background .25s;
}
@media (hover:hover){
  .ck-pay-opt:hover::before{border-color:rgba(230,0,18,.6);background:rgba(230,0,18,.08);}
}
/* ما دام لم يختر: نبض خفيف على إطار البطاقات كلّها */
.ck-pay-opts.is-waiting .ck-pay-opt{animation:ckPayWait 2.4s ease-in-out infinite;}
.ck-pay-opts.is-waiting .ck-pay-opt:nth-child(2){animation-delay:.2s;}
.ck-pay-opts.is-waiting .ck-pay-opt:nth-child(3){animation-delay:.4s;}
.ck-pay-opts.is-waiting .ck-pay-opt:nth-child(4){animation-delay:.6s;}
@keyframes ckPayWait{0%,100%{border-color:rgba(255,255,255,.12)}50%{border-color:rgba(230,0,18,.5)}}
/* النبض لا يبتلع حالة :hover — البطاقة تحت المؤشّر تتوقّف وتُبرز نفسها */
@media (hover:hover){
  .ck-pay-opts.is-waiting .ck-pay-opt:hover{animation:none;border-color:rgba(230,0,18,.5);}
}
.ck-pay-opts.is-shake{animation:ckPayShake .5s cubic-bezier(.36,.07,.19,.97);}
@keyframes ckPayShake{10%,90%{transform:translateX(-4px)}30%,70%{transform:translateX(6px)}50%{transform:translateX(-6px)}}
.ck-pay-opt{
  padding:20px 14px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.12);
  cursor:pointer;text-align:center;transition:all .28s cubic-bezier(.16,1,.3,1);
  border-radius:12px;position:relative;overflow:hidden;
}
.ck-pay-opt::after{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 0 rgba(230,0,18,0);transition:box-shadow .28s;pointer-events:none;}
.ck-pay-opt:hover{border-color:rgba(230,0,18,.5);background:rgba(230,0,18,.05);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.35);}
.ck-pay-opt.selected{
  border-color:var(--red);background:linear-gradient(135deg,rgba(230,0,18,.16),rgba(230,0,18,.05));
  box-shadow:0 0 0 2px rgba(230,0,18,.55),0 10px 28px rgba(230,0,18,.3);
  transform:translateY(-2px);
}
/* شارة ✓ واضحة للطريقة المختارة */
.ck-pay-opt.selected::before{
  content:'✓';position:absolute;top:8px;right:8px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  background:var(--red);border:none;color:#fff;font-size:13px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(230,0,18,.2),0 0 12px rgba(230,0,18,.5);
  animation:ckPayCheckPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ckPayCheckPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.ck-pay-opt .po-icon{font-size:34px;display:block;margin-bottom:9px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.ck-pay-opt .po-name{font-size:14.5px;font-weight:800;color:#fff;letter-spacing:.3px;}
.ck-pay-opt.selected .po-name{color:#fff;}
.ck-pay-opt .po-desc{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:4px;letter-spacing:.3px;font-family:'Rajdhani','Tajawal',sans-serif;}
.ck-pay-details{display:flex;align-items:flex-start;gap:12px;background:rgba(100,149,255,.05);border:1px solid rgba(100,149,255,.25);border-radius:6px;padding:14px 16px;margin-bottom:24px;font-size:13px;line-height:1.85;color:rgba(255,255,255,.9);}
.ck-pay-details svg{width:18px;height:18px;color:#638fff;flex-shrink:0;margin-top:2px;}
.ck-pay-details strong{color:#fff;}

/* ── BUTTONS ────────────────────────────────────────────────── */
.ck-nav{display:flex;gap:12px;margin-top:8px;}
.ck-btn-next{
  flex:1;padding:16px 24px;
  background:linear-gradient(135deg,#ff1f3c 0%,#c00018 100%);
  color:#fff;border:none;
  font-family:'Rajdhani','Tajawal',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;
  cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  position:relative;overflow:hidden;
  box-shadow:0 4px 16px rgba(230,0,18,.35),inset 0 1px 0 rgba(255,255,255,.18);
}
.ck-btn-next::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(100%);transition:transform .55s ease;pointer-events:none;
}
.ck-btn-next:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(230,0,18,.55),inset 0 1px 0 rgba(255,255,255,.22);}
.ck-btn-next:hover::before{transform:translateX(-100%);}
.ck-btn-next:active{transform:translateY(0) scale(.99);}
.ck-btn-back{
  padding:16px 24px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.1);font-family:'Rajdhani','Tajawal',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.8px;cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.ck-btn-back:hover{border-color:rgba(230,0,18,.5);color:#fff;background:rgba(230,0,18,.08);}

/* ── DISCOUNT POINTS (kept legacy hooks) ────────────────────── */
#ckPointsBox input[type=number]:focus{border-color:rgba(255,179,0,.7);outline:none;}
#ckPointsBox input[type=number]::-webkit-inner-spin-button,
#ckPointsBox input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#ckPointsBox button:hover:first-of-type{background:rgba(255,179,0,.22);border-color:rgba(255,179,0,.5);}
#ckSaving-animate{animation:fadeUp .35s ease both;}

/* ── STEP INDICATOR — animated progress bar ─────────────────── */
.ck-steps-bar{
  display:flex;gap:0;margin-bottom:40px;position:relative;
  padding:0;
  --ck-progress:0%;
}
.ck-steps-bar::before{
  content:'';position:absolute;
  top:17px;right:16.66%;left:16.66%;
  height:2px;
  background:rgba(255,255,255,.10);
  z-index:0;border-radius:2px;
}
.ck-steps-bar::after{
  content:'';position:absolute;
  top:17px;right:16.66%;
  height:2px;
  background:linear-gradient(90deg,var(--red),#ff3a4d);
  width:calc(var(--ck-progress) * 0.6666);
  z-index:1;border-radius:2px;
  transition:width .55s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 10px rgba(230,0,18,.45);
}
.ck-step-item{display:flex;flex-direction:column;align-items:center;flex:1;gap:9px;position:relative;z-index:2;}
.ck-step-dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;
  background:#0d0d12;border:1.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.4);
  transition:all .35s cubic-bezier(.16,1,.3,1);flex-shrink:0;
  box-shadow:0 0 0 5px #0a0a0f;   /* حلقة معتمة تقطع الخطّ حول الدائرة بنظافة */
}
.ck-step-dot.done{
  background:linear-gradient(135deg,#ff3a4d,var(--red));
  border-color:var(--red);color:#fff;
  box-shadow:0 0 0 5px #0a0a0f,0 0 16px rgba(230,0,18,.5),inset 0 1px 0 rgba(255,255,255,.22);
}
.ck-step-dot.active{
  background:#160406;border-color:var(--red);color:#fff;
  box-shadow:0 0 0 5px #0a0a0f,0 0 0 7px rgba(230,0,18,.14),0 0 16px rgba(230,0,18,.5);
  animation:ckStepPulse 2s ease-in-out infinite;
}
@keyframes ckStepPulse{
  0%,100%{box-shadow:0 0 0 5px #0a0a0f,0 0 0 6px rgba(230,0,18,.12),0 0 14px rgba(230,0,18,.4);}
  50%    {box-shadow:0 0 0 5px #0a0a0f,0 0 0 8px rgba(230,0,18,.20),0 0 22px rgba(230,0,18,.6);}
}
.ck-step-label{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  font-family:'Rajdhani','Tajawal',sans-serif;font-weight:600;
  transition:color .3s;white-space:nowrap;
}
.ck-step-item:has(.ck-step-dot.active) .ck-step-label{color:var(--red);}
.ck-step-item:has(.ck-step-dot.done) .ck-step-label{color:rgba(255,255,255,.85);}
.ck-divider{display:none;}

/* ══ مسار الخطوات الديناميكي (3 أو 4 خطوات حسب السلة وطريقة الدفع) ══ */
.ck-steps-bar::before{right:var(--ck-edge,16.66%);left:var(--ck-edge,16.66%);}
.ck-steps-bar::after{right:var(--ck-edge,16.66%);width:var(--ck-fill,0%);}
.ck-step-item[tabindex]:focus-visible{outline:2px solid rgba(230,0,18,.7);outline-offset:4px;border-radius:8px;}
.ck-flow-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:16px;
  font-family:'Rajdhani','Tajawal',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.6px;
  color:rgba(255,255,255,.5);
}
.ck-flow-meta b{color:#fff;font-weight:700;}
.ck-flow-meta .cfm-pill{
  padding:4px 12px;border-radius:999px;font-size:11.5px;letter-spacing:.8px;
  color:#ff8d9b;background:rgba(230,0,18,.1);border:1px solid rgba(230,0,18,.3);
}
/* وسوم الحقول + التلميح + الخطأ */
.ck-opt{color:rgba(255,255,255,.32);font-weight:400;letter-spacing:.3px;text-transform:none;}
.ck-opt.is-req{color:#ff8d9b;}
.ck-hint{font-size:11.5px;color:rgba(255,255,255,.42);margin-top:7px;line-height:1.6;}
.ck-err{display:none;font-size:12.5px;color:#ff8d9b;margin-top:7px;line-height:1.5;font-weight:500;}
.ck-err::before{content:'⚠ ';}
.ck-field.is-err .ck-err{display:block;animation:fadeUp .25s ease both;}
.ck-field.is-err .ck-hint{display:none;}
.ck-field.is-err .ck-input{
  border-color:rgba(255,77,95,.75);background:rgba(255,77,95,.05);
  box-shadow:0 0 0 4px rgba(255,77,95,.1);
}
.ck-field.is-err .ckf-ico{color:#ff5a6e;}
/* لافتة «رقمي + عند الاستلام» */
.ck-cod-note{
  display:flex;gap:13px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(255,179,0,.11),rgba(255,179,0,.02));
  border:1px solid rgba(255,179,0,.34);border-radius:12px;
  padding:15px 17px;margin-bottom:22px;position:relative;overflow:hidden;
  animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.ck-cod-note::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:#ffb300;box-shadow:0 0 14px rgba(255,179,0,.6);}
.ck-cod-note .ccn-ico{font-size:22px;flex-shrink:0;line-height:1.2;}
.ck-cod-note .ccn-title{font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;font-size:14.5px;color:#ffc94d;margin-bottom:3px;}
.ck-cod-note .ccn-desc{font-size:12px;color:rgba(255,255,255,.66);line-height:1.7;}
.ck-cod-note .ccn-link{
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;
  color:#10e6a0;text-decoration:underline;text-underline-offset:3px;
}
.ck-digital-note .cdn-desc b{color:rgba(255,255,255,.9);font-weight:700;}
.ck-digital-note.is-cod{background:linear-gradient(135deg,rgba(255,179,0,.11),rgba(255,179,0,.02));border-color:rgba(255,179,0,.34);}
.ck-digital-note.is-cod::before{background:#ffb300;box-shadow:0 0 14px rgba(255,179,0,.6);}
.ck-digital-note.is-cod::after{background:radial-gradient(120px 60px at 100% 0,rgba(255,179,0,.16),transparent 70%);}
.ck-digital-note.is-cod .cdn-title{color:#ffc94d;}
.ck-digital-note.is-cod .cdn-ico{filter:none;}
/* وسم نوع التسليم على خيار الدفع (سلة رقمية) */
.ck-pay-opt .po-tag{
  display:inline-block;margin-top:9px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;line-height:1.5;
}
.ck-pay-opt .po-tag.is-ok{color:#10e6a0;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.32);}
.ck-pay-opt .po-tag.is-warn{color:#ffc94d;background:rgba(255,179,0,.09);border:1px solid rgba(255,179,0,.3);}
.ck-pay-details strong{color:#fff;}

/* صفحة الدفع بلا مشتّتات: لا إشعار «اشترى فلان» فوق ملخّص الطلب */
body.on-checkout #purchaseNotif{display:none!important;}
/* الجوال: شاشة واحدة مركّزة لكل خطوة، وأزرار التنقّل ثابتة أسفل الشاشة */
@media (max-width:640px){
  /* زرّ المساعد يرتفع فوق شريط التنقّل كي لا يغطّي زرّ «التالي» */
  body.on-checkout #sg-chat-btn{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  body.on-checkout #sg-chat-greet{display:none!important;}
  #page-checkout .ck-title{font-size:27px;}
  #page-checkout .ck-subtitle{margin-bottom:20px;font-size:11px;}
  #page-checkout .ck-flow-meta{margin-bottom:14px;}
  #page-checkout .ck-btn-next,#page-checkout .ck-btn-back{min-height:54px;}
  #page-checkout .ck-btn-back{padding:16px 18px;}
  #page-checkout .ck-pay-opt .po-tag{grid-column:1/-1;justify-self:start;margin-top:8px;}
  #page-checkout .ck-step[data-ck-step]:not([data-ck-step="review"]):not([data-ck-step="done"]) > .ck-nav{
    position:sticky;bottom:0;z-index:6;
    margin:14px -18px 0;padding:14px 18px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(10,10,15,0) 0,rgba(10,10,15,.96) 24%,#0a0a0f 100%);
  }
}

/* الجوال: دوائر وخطّ أصغر ومتناسق */
@media (max-width:520px){
  .ck-steps-bar{margin-bottom:30px;}
  .ck-step-dot{width:32px;height:32px;font-size:13px;box-shadow:0 0 0 4px #0a0a0f;}
  .ck-steps-bar::before,.ck-steps-bar::after{top:15px;}
  .ck-step-label{font-size:9.5px;letter-spacing:.5px;}
  .ck-step-item{gap:7px;}
}

/* ── SUCCESS PAGE ───────────────────────────────────────────── */
.ck-success{text-align:center;padding:40px 20px;}
.ck-success-icon{font-size:72px;display:block;margin-bottom:20px;animation:floatY 3s ease-in-out infinite;}
.ck-success-title{font-family:'Rajdhani',sans-serif;font-size:44px;font-weight:700;color:var(--red);letter-spacing:-.5px;}
.ck-success-sub{font-size:15px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.8;}
.ck-order-ref{font-family:'Rajdhani',sans-serif;font-size:20px;color:#fff;margin-top:20px;letter-spacing:2px;}

/* ── ORDER SUMMARY — Receipt-style ──────────────────────────── */
.ck-summary-box{
  background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,rgba(0,0,0,.3) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:22px 24px;margin-bottom:24px;
  position:relative;overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.ck-summary-box::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.6;
}
.ck-summary-box::after{
  content:'// ORDER SUMMARY';
  position:absolute;top:8px;right:14px;
  font-size:9px;letter-spacing:2px;
  color:rgba(230,0,18,.7);font-family:'Rajdhani',sans-serif;font-weight:700;
}
.ck-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.07);
  font-size:14px;color:rgba(255,255,255,.85);
}
.ck-summary-row:first-of-type{padding-top:18px;}
.ck-summary-row:last-child{
  border:none;padding-top:14px;margin-top:6px;border-top:1px solid rgba(230,0,18,.3);
  font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:#fff;letter-spacing:.5px;
}
.ck-summary-row:last-child span:last-child{
  color:var(--red);font-size:24px;
  text-shadow:0 0 12px rgba(230,0,18,.4);
}

@media (max-width:600px){
  .checkout-wrap{padding:30px 16px 40px;}
  .ck-title{font-size:28px;}
  .ck-pay-opts{grid-template-columns:1fr 1fr;}
  .ck-summary-row:last-child span:last-child{font-size:20px;}
}

/* ★ الهواتف الضيّقة: عمود واحد وبطاقة أفقية — الاسم يُقرأ بلا تقطيع
   والدائرة تنتقل لطرف البطاقة بدل زاويتها. بلا أي تغيير في HTML. */
@media (max-width:400px){
  .ck-pay-opts{grid-template-columns:1fr;gap:10px;}
  .ck-pay-opt{
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"ico name" "ico desc";
    align-items:center;column-gap:13px;
    text-align:right;padding:13px 14px 13px 46px;min-height:0;
  }
  .ck-pay-opt .po-icon{grid-area:ico;font-size:29px;margin:0;align-self:center;}
  .ck-pay-opt .po-name{grid-area:name;align-self:end;font-size:14.5px;}
  .ck-pay-opt .po-desc{grid-area:desc;align-self:start;margin-top:2px;}
  /* top:calc(50% - 11px) بدل translateY كي لا تتعارض مع حركة ظهور الـ ✓ */
  .ck-pay-opt::before,
  .ck-pay-opt.selected::before{top:calc(50% - 11px);right:auto;left:14px;}
  .ck-pay-cta{font-size:15px;}
  .ck-pay-final{padding:13px 12px 15px;}
}
/* ★ STYLE 2 — بطاقة الدفع البارزة */
.ck-pay-final{
  margin-top:18px;padding:16px 16px 18px;
  background:linear-gradient(180deg,rgba(230,0,18,.10),rgba(255,255,255,.02));
  border:1px solid rgba(230,0,18,.32);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.ck-pay-final .ck-summary-box{margin-top:0;}
.ck-pay-cta{
  width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:800;letter-spacing:.4px;
}
.ck-pay-cta #ckPayBtnAmount{
  background:rgba(0,0,0,.22);padding:2px 10px;font-family:'Share Tech Mono',monospace;
  font-size:16px;border-radius:3px;
}
.ck-acc-chev{display:inline-block;transition:transform .3s}
.ck-acc-chev.open{transform:rotate(180deg)}
/* ============================================================
   PRODUCT RECOMMENDATIONS + REVIEWS
   ============================================================ */
.pd-recs-section{padding:40px;border-top:1px solid var(--gray2);}
.pd-recs-title{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;margin-bottom:20px;}
.pd-recs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.pd-rec-card{background:var(--black3);border:1px solid var(--gray2);padding:0;cursor:pointer;transition:all .3s;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);overflow:hidden;}
.pd-rec-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 8px 24px rgba(230,0,18,.12);}
.pd-rec-img{
  height:140px;background:var(--black2);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;overflow:hidden;
  border-bottom:1px solid var(--gray2);
}
.pd-rec-img img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box;transition:transform .35s;}
.pd-rec-card:hover .pd-rec-img img{transform:scale(1.06);}
.pd-rec-info{padding:12px 14px;}
.pd-rec-name{font-size:12px;font-weight:600;color:#fff;margin-bottom:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pd-rec-price{font-family:'Rajdhani',sans-serif;font-size:16px;color:var(--red);font-weight:700;}
/* ══════════════════════════════════════════════════════════
   ⭐ PRODUCT REVIEWS — Premium gaming design (rv2-*)
   ══════════════════════════════════════════════════════════ */
.pd-reviews-section{
  padding: 60px 40px;
  border-top: 1px solid var(--gray2);
  position: relative;
  background:
    linear-gradient(180deg, rgba(230,0,18,.015) 0%, transparent 30%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(230,0,18,.03), transparent 70%);
}
.pd-reviews-section::before{
  content:'';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  filter: drop-shadow(0 0 8px rgba(230,0,18,.6));
}

/* Section title */
.rv2-section-title{
  font-family:'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 5px;
  color: rgba(230,0,18,.8);
  text-align: center;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.rv2-section-heading{
  font-family:'Rajdhani', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: -0.5px;
}
.rv2-section-heading span{
  color: var(--red);
  text-shadow: 0 0 30px rgba(230,0,18,.5);
}

/* Policy notice — informs all visitors about review eligibility */
.rv2-policy-notice{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 24px;
  background:
    linear-gradient(135deg,
      rgba(230,0,18,.08) 0%,
      rgba(20,20,28,.6) 60%,
      rgba(251,191,36,.06) 100%);
  border: 1px solid rgba(230,0,18,.25);
  border-right: 3px solid var(--red);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.rv2-policy-notice::before{
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.04) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: rv2PolicyShine 5s linear infinite;
  pointer-events: none;
}
@keyframes rv2PolicyShine{
  from{ background-position: 200% 0; }
  to  { background-position: -200% 0; }
}
.rv2-policy-icon{
  font-size: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(230,0,18,.5));
}
.rv2-policy-text{
  font-family:'Tajawal', sans-serif;
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  line-height: 1.65;
  flex: 1;
}
.rv2-policy-text strong{
  color: #fff;
  font-weight: 700;
}
.rv2-policy-reward{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  padding: 3px 10px;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 4px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  white-space: nowrap;
}
.rv2-policy-reward strong{
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251,191,36,.4));
}
/* Mobile: stack the reward badge below */
@media (max-width: 640px){
  .rv2-policy-notice{ flex-wrap: wrap; padding: 12px 14px; }
  .rv2-policy-text{ font-size: 12.5px; }
  .rv2-policy-reward{
    display: flex;
    margin: 8px 0 0 0;
    width: fit-content;
  }
}

/* ─── SUMMARY CARD ─── */
.rv2-summary-card{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(20,20,28,.85) 0%, rgba(10,10,16,.92) 100%);
  border: 1px solid rgba(230,0,18,.18);
  border-radius: 14px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.rv2-summary-card::before{
  content:'';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(230,0,18,.12), transparent 70%);
  pointer-events: none;
}

/* Score column */
.rv2-summary-score-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.06);
  padding-left: 24px;
}
.rv2-score{
  font-family:'Rajdhani', sans-serif;
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #ff3c4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(230,0,18,.4));
  margin-bottom: 8px;
}
.rv2-score-out-of{
  font-family:'Rajdhani', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.rv2-stars-display{
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
}
.rv2-star-fill{
  font-size: 22px;
  color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251,191,36,.5));
}
.rv2-star-empty{
  font-size: 22px;
  color: rgba(255,255,255,.15);
}
.rv2-total{
  font-family:'Tajawal', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.5px;
}

/* Breakdown column */
.rv2-breakdown{
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.rv2-bar-row{
  display: grid;
  grid-template-columns: 36px 1fr 48px;
  align-items: center;
  gap: 12px;
  font-family:'Rajdhani', sans-serif;
  font-size: 13px;
}
.rv2-bar-stars{
  color: #fbbf24;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}
.rv2-bar-track{
  height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.rv2-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--red), #ff3c4a);
  border-radius: 4px;
  transition: width 1s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 12px rgba(230,0,18,.4);
  position: relative;
}
.rv2-bar-fill::after{
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  background-size: 200% 100%;
  animation: rv2BarShine 3s linear infinite;
}
@keyframes rv2BarShine{
  from{background-position: 200% 0;}
  to  {background-position: -200% 0;}
}
.rv2-bar-pct{
  text-align: left;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 600;
}

/* ─── ACTION BAR (CTA / login prompt) ─── */
.rv2-action-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(230,0,18,.05), rgba(230,0,18,.02));
  border: 1px solid rgba(230,0,18,.2);
  border-radius: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.rv2-action-text{
  font-family:'Tajawal', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv2-action-text-icon{
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(230,0,18,.5));
}
.rv2-add-btn{
  padding: 12px 28px;
  background: linear-gradient(135deg, #e60012 0%, #c70010 100%);
  color: #fff;
  font-family:'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(230,0,18,.4);
  position: relative;
  overflow: hidden;
}
.rv2-add-btn::before{
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.rv2-add-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230,0,18,.55);
}
.rv2-add-btn:hover::before{ transform: translateX(100%); }

.rv2-add-btn-login{
  background: transparent;
  border: 1px solid rgba(230,0,18,.45);
  color: #fff;
}
.rv2-add-btn-login:hover{
  background: rgba(230,0,18,.1);
  border-color: var(--red);
}

/* ─── REVIEW FORM ─── */
.rv2-form{
  background: linear-gradient(135deg, rgba(20,20,28,.85), rgba(10,10,16,.92));
  border: 1px solid rgba(230,0,18,.25);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 28px;
  display: none;
}
.rv2-form.open{ display: block; animation: fadeUp .4s ease both; }

/* Points reward banner inside the form */
.rv2-points-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(251,191,36,.12), rgba(251,191,36,.04));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 8px;
  font-family:'Tajawal', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
}
.rv2-points-banner::before{
  content:'';
  position: absolute;
  top: -50%; right: -10%;
  width: 100px; height: 200%;
  background: linear-gradient(115deg, transparent 30%, rgba(251,191,36,.12) 50%, transparent 70%);
  animation: rv2PointsShine 3.5s linear infinite;
}
@keyframes rv2PointsShine{
  from{ transform: translateX(0); }
  to  { transform: translateX(-300px); }
}
.rv2-points-banner strong{
  color: #fbbf24;
  font-weight: 700;
  filter: drop-shadow(0 0 6px rgba(251,191,36,.4));
}
.rv2-points-icon{
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.5));
  flex-shrink: 0;
}

.rv2-form-header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rv2-form-avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e60012, #ff3c4a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(230,0,18,.35), inset 0 0 0 2px rgba(255,255,255,.1);
}
.rv2-form-user{
  flex: 1;
}
.rv2-form-user-name{
  font-family:'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rv2-form-user-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.4);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(110,255,150,.95);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.rv2-form-user-meta{
  font-family:'Tajawal', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

.rv2-form-label{
  font-family:'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rv2-stars-input{
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.rv2-star-btn{
  font-size: 32px;
  cursor: pointer;
  color: rgba(255,255,255,.15);
  transition: all .15s ease;
  user-select: none;
  filter: drop-shadow(0 0 0 transparent);
}
.rv2-star-btn:hover{ transform: scale(1.15); }
.rv2-star-btn.active{
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.6));
}

.rv2-textarea{
  width: 100%;
  padding: 14px 16px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-family:'Tajawal', sans-serif;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: all .25s ease;
  border-radius: 8px;
  box-sizing: border-box;
}
.rv2-textarea:focus{
  border-color: rgba(230,0,18,.5);
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px rgba(230,0,18,.08);
}

.rv2-form-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.rv2-submit-btn{
  padding: 11px 28px;
  background: linear-gradient(135deg, #e60012, #c70010);
  color: #fff;
  font-family:'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 3px 14px rgba(230,0,18,.4);
}
.rv2-submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,0,18,.55); }
.rv2-cancel-btn{
  padding: 11px 22px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-family:'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all .25s ease;
}
.rv2-cancel-btn:hover{ border-color: rgba(255,255,255,.3); color: #fff; }

/* ─── REVIEWS LIST ─── */
.rv2-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rv2-card{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(20,20,28,.65), rgba(10,10,16,.78));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.rv2-card::before{
  content:'';
  position: absolute;
  top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--red), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.rv2-card:hover{
  border-color: rgba(230,0,18,.25);
  background: linear-gradient(135deg, rgba(28,28,36,.7), rgba(14,14,20,.82));
  transform: translateX(-3px);
}
.rv2-card:hover::before{ opacity: 1; }

.rv2-avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
/* Avatar color variants — assigned via JS based on author hash */
.rv2-avatar.c0{ background: linear-gradient(135deg, #e60012, #ff3c4a); }
.rv2-avatar.c1{ background: linear-gradient(135deg, #06b6d4, #0891b2); }
.rv2-avatar.c2{ background: linear-gradient(135deg, #f59e0b, #d97706); }
.rv2-avatar.c3{ background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.rv2-avatar.c4{ background: linear-gradient(135deg, #10b981, #059669); }
.rv2-avatar.c5{ background: linear-gradient(135deg, #ec4899, #be185d); }

.rv2-body{ min-width: 0; }
.rv2-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rv2-author-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rv2-author{
  font-family:'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.rv2-verified-badge{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.4);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(110,255,150,.95);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rv2-card-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family:'Tajawal', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.4);
}
.rv2-stars-line{
  display: flex;
  gap: 1px;
  font-size: 13px;
  color: #fbbf24;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 4px rgba(251,191,36,.4));
}
.rv2-text{
  font-family:'Tajawal', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  word-break: break-word;
}

/* ─── EMPTY STATE ─── */
.rv2-empty{
  text-align: center;
  padding: 60px 24px;
  background: linear-gradient(135deg, rgba(20,20,28,.5), rgba(10,10,16,.6));
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 12px;
}
.rv2-empty-icon{
  font-size: 56px;
  margin-bottom: 12px;
  opacity: .5;
  filter: drop-shadow(0 0 16px rgba(230,0,18,.3));
}
.rv2-empty-title{
  font-family:'Rajdhani', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.rv2-empty-sub{
  font-family:'Tajawal', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

/* ─── LOADING STATE ─── */
.rv2-loading{
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,.5);
  font-family:'Tajawal', sans-serif;
  font-size: 13px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px){
  .pd-reviews-section{ padding: 40px 20px; }
  .rv2-summary-card{
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .rv2-summary-score-col{
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-left: 0;
    padding-bottom: 24px;
  }
  .rv2-score{ font-size: 64px; }
  .rv2-section-heading{ font-size: 24px; }
  .rv2-card{
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 16px 18px;
  }
  .rv2-avatar{ width: 40px; height: 40px; font-size: 17px; }
}
/* ============================================================
   CART PAGE
   ============================================================ */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:28px;padding:40px;align-items:start;}
.cart-items{display:flex;flex-direction:column;gap:14px;}
.cart-item{
  background:linear-gradient(180deg,var(--black3),var(--black2));
  display:flex;align-items:center;gap:20px;padding:18px 20px;
  border:1px solid var(--gray2);border-radius:14px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.cart-item::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--red);opacity:0;transition:opacity .3s;}
.cart-item:hover{border-color:rgba(230,0,18,.35);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.4);}
.cart-item:hover::before{opacity:1;}
.cart-item-img{width:74px;height:74px;background:#0d0d14;border:1px solid rgba(255,255,255,.06);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;overflow:hidden;padding:5px;box-sizing:border-box;}
.cart-item-img img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:7px;}
.cart-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ci-brand{font-size:10px;letter-spacing:2px;color:var(--red);text-transform:uppercase;margin-bottom:2px;font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;}
.ci-name{font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.35;}
.ci-price{font-family:'Rajdhani',sans-serif;font-size:26px;font-weight:700;color:#fff;line-height:1;white-space:nowrap;}
.ci-controls{display:flex;align-items:center;gap:14px;margin-top:2px;}
.ci-end{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;padding-inline-start:10px;}
.ci-unit{font-size:10px;color:var(--gray);letter-spacing:.5px;font-family:'Rajdhani','Tajawal',sans-serif;}
.qty-control{display:flex;align-items:center;gap:0;border:1px solid var(--gray2);border-radius:9px;overflow:hidden;background:#0d0d14;}
.qty-btn{width:34px;height:34px;background:transparent;border:none;color:var(--white);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s;}
.qty-btn:hover{background:var(--red);color:#fff;}
.qty-num{width:46px;text-align:center;font-size:15px;font-weight:700;background:transparent!important;border:none!important;border-left:1px solid var(--gray2)!important;border-right:1px solid var(--gray2)!important;color:#fff;padding:6px 4px;-moz-appearance:textfield;font-family:'Rajdhani',sans-serif;}
.ci-remove{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;color:var(--gray);font-size:13px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:6px;padding:8px 12px;font-family:'Tajawal',sans-serif;}
.ci-remove:hover{color:#fff;background:rgba(230,0,18,.12);border-color:rgba(230,0,18,.4);}
.cart-summary{background:linear-gradient(180deg,var(--black3),var(--black2));padding:26px;border:1px solid var(--gray2);border-radius:16px;position:sticky;top:90px;box-shadow:0 12px 40px rgba(0,0,0,.35);}
.cs-title{display:flex;align-items:center;gap:10px;font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--gray2);}
.cs-title svg{width:20px;height:20px;color:var(--red);}
.cs-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:22px;}
.cs-row{display:flex;justify-content:space-between;font-size:14px;align-items:center;}
.cs-row.total{padding-top:16px;border-top:1px solid var(--gray2);font-size:18px;font-weight:700;}
.cs-row.total .price{color:var(--red);font-family:'Rajdhani',sans-serif;font-size:28px;text-shadow:0 0 20px rgba(230,0,18,.35);}
.cs-row .label{color:var(--gray);}
.coupon-row{display:flex;gap:0;margin-bottom:20px;border-radius:10px;overflow:hidden;border:1px solid var(--gray2);}
.coupon-input{flex:1;padding:12px 14px;background:#0d0d14;border:none;color:var(--white);font-family:'Tajawal',sans-serif;font-size:13px;outline:none;}
.coupon-input:focus{background:rgba(230,0,18,.04);}
.coupon-btn{padding:12px 20px;background:#16161c;border:none;border-right:1px solid var(--gray2);color:#fff;font-family:'Tajawal',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all .25s;}
.coupon-btn:hover{color:#fff;background:var(--red);}
.checkout-btn{width:100%;padding:16px;background:linear-gradient(135deg,#ff1f3c 0%,#c00018 100%);color:#fff;border:none;font-family:'Rajdhani','Tajawal',sans-serif;font-size:17px;font-weight:700;letter-spacing:.5px;cursor:pointer;clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);transition:all .3s;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(230,0,18,.35),inset 0 1px 0 rgba(255,255,255,.18);}
.checkout-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(100%);transition:transform .55s ease;pointer-events:none;}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(230,0,18,.5),inset 0 1px 0 rgba(255,255,255,.22);}
.checkout-btn:hover::before{transform:translateX(-100%);}
.checkout-note{font-size:12px;color:var(--gray);text-align:center;line-height:1.6;}
/* empty cart state */
.cart-empty{text-align:center;padding:70px 30px;color:var(--gray);}
.cart-empty .ce-ico{font-size:60px;display:block;margin-bottom:16px;}
.cart-empty .ce-title{font-family:'Rajdhani','Tajawal',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:8px;}
.cart-empty .ce-sub{font-size:14px;margin-bottom:24px;}
.cart-empty .ce-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:linear-gradient(135deg,#ff1f3c,#c00018);color:#fff;border:none;border-radius:10px;font-family:'Rajdhani','Tajawal',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s;box-shadow:0 4px 18px rgba(230,0,18,.3);}
.cart-empty .ce-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(230,0,18,.5);}
@media(max-width:560px){
  .cart-item{gap:13px;padding:14px;border-radius:12px;}
  .cart-item-info{gap:1px;}
  .ci-name{font-size:14px;margin-bottom:8px;}
  .ci-price{font-size:21px;}
  .ci-controls{gap:9px;flex-wrap:wrap;}
  .ci-end{padding-inline-start:4px;}
  .qty-btn{width:30px;height:30px;font-size:16px;}
  .qty-num{width:38px;}
  .ci-remove{padding:7px 10px;font-size:12px;}
  .ci-unit{font-size:9px;}
}

/* ═══════ CAPTCHA "أنا لست روبوت" ═══════ */
.ck-captcha-wrap{user-select:none;}
.ck-captcha-box{background:linear-gradient(135deg,rgba(20,20,30,.7) 0%,rgba(15,15,25,.9) 100%);border:1px solid rgba(230,0,18,.25);border-radius:12px;padding:16px 18px;backdrop-filter:blur(10px);transition:all .3s;}
.ck-captcha-box:hover{border-color:rgba(230,0,18,.4);box-shadow:0 0 24px rgba(230,0,18,.08);}
.ck-captcha-box.verified{border-color:rgba(34,197,94,.45);background:linear-gradient(135deg,rgba(34,197,94,.05) 0%,rgba(15,15,25,.9) 100%);box-shadow:0 0 24px rgba(34,197,94,.12);}
.ck-captcha-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ck-captcha-icon{font-size:16px;}
.ck-captcha-title{font-size:12px;color:rgba(255,255,255,.6);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;font-family:'Rajdhani',sans-serif;}
.ck-captcha-checkbox-wrap{display:flex;align-items:center;gap:14px;cursor:pointer;padding:10px 12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.05);border-radius:8px;transition:all .2s;}
.ck-captcha-checkbox-wrap:hover{background:rgba(0,0,0,.35);border-color:rgba(230,0,18,.25);}
.ck-captcha-checkbox{width:26px;height:26px;background:#fff;border:2px solid #d0d0d8;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:all .25s;}
.ck-captcha-checkbox-wrap:hover .ck-captcha-checkbox{border-color:#e60012;}
.ck-captcha-checkbox.loading{border-color:#e60012;background:rgba(230,0,18,.05);}
.ck-captcha-checkbox.verified{background:#22c55e;border-color:#16a34a;animation:ckCaptchaPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes ckCaptchaPop{0%{transform:scale(.7)} 60%{transform:scale(1.15)} 100%{transform:scale(1)}}
.ck-captcha-spinner{display:none;width:16px;height:16px;border:2px solid rgba(230,0,18,.2);border-top-color:#e60012;border-radius:50%;animation:ckCaptchaSpin .7s linear infinite;}
@keyframes ckCaptchaSpin{to{transform:rotate(360deg)}}
.ck-captcha-checkbox.loading .ck-captcha-spinner{display:block;}
.ck-captcha-checkbox.loading .ck-captcha-check{display:none;}
.ck-captcha-check{display:none;color:#fff;font-size:18px;font-weight:900;line-height:1;}
.ck-captcha-checkbox.verified .ck-captcha-check{display:block;}
.ck-captcha-label{flex:1;font-size:14px;color:#fff;font-weight:600;font-family:'Tajawal',sans-serif;}
.ck-captcha-brand{font-size:9px;color:rgba(255,255,255,.35);font-weight:700;font-family:'Rajdhani',sans-serif;letter-spacing:.5px;}
.ck-captcha-brand sup{color:#e60012;font-size:8px;}
.ck-captcha-status{margin-top:10px;font-size:11px;color:rgba(255,255,255,.5);text-align:center;line-height:1.4;display:none;}
.ck-captcha-status.show{display:block;}
.ck-captcha-status.success{color:#22c55e;}
.ck-captcha-status.error{color:#ff5566;}
/* Disabled submit button when captcha not verified */
.ck-btn-next.captcha-locked{opacity:.5;cursor:not-allowed;}
/* أثناء الإرسال الفعلي فقط نُغلق التفاعل تماماً — منعاً لطلب مكرّر */
.ck-btn-next.is-sending{opacity:.7;cursor:progress;pointer-events:none;}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
/* ══════════════════════════════════════════════════════════════════
   صفحة الحساب — ACCOUNT v2
   لوحة جانبية بهوية المتجر (زوايا مشطوفة + خط أحمر) ومحتوى ببطاقات
   بدل السطح المسطّح الباهت.
   ══════════════════════════════════════════════════════════════════ */
.account-layout{display:grid;grid-template-columns:274px minmax(0,1fr);gap:16px;padding:30px 40px 60px;align-items:start;}

/* ── العمود الجانبي ─────────────────────────────────────────────── */
.account-sidebar{
  position:sticky;top:86px;padding:0 0 10px;overflow:hidden;
  background:linear-gradient(168deg,#13131c 0%,var(--black2) 46%,#0a0a0f 100%);
  border:1px solid var(--gray2);
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
}
.acc-id{position:relative;padding:26px 18px 18px;text-align:center;
  background:radial-gradient(125% 92% at 50% -8%,rgba(230,0,18,.17),transparent 64%);}
.acc-id::after{content:'';position:absolute;inset-inline:20%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,0,18,.55),transparent);}

.acc-avatar{position:relative;width:76px;height:76px;margin:0 auto 13px;display:grid;place-items:center;
  font-family:'Rajdhani',sans-serif;font-size:34px;font-weight:700;line-height:1;color:#fff;
  background:radial-gradient(circle at 32% 28%,#2a2a36,#141419 70%);
  border:2px solid rgba(230,0,18,.75);border-radius:50%;
  box-shadow:0 0 0 5px rgba(230,0,18,.07),0 10px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);}
.acc-avatar::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(230,0,18,.18);pointer-events:none;}
.acc-name{font-size:16.5px;font-weight:800;color:#fff;line-height:1.5;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acc-email{font-family:'Inter',sans-serif;font-size:11px;color:#6f6f7d;margin-bottom:12px;direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acc-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.acc-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:10.5px;font-weight:700;
  background:var(--black3);border:1px solid var(--gray2);color:#8d8d9c;line-height:1.5;border-radius:11px;}
.acc-tag svg{width:12px;height:12px;flex-shrink:0;opacity:.85;}
.acc-tag.pts{background:rgba(255,179,0,.09);border-color:rgba(255,179,0,.28);color:#e0ac3a;}
.acc-tag.vip{background:rgba(230,0,18,.11);border-color:rgba(230,0,18,.34);color:#ff5a68;}

.acc-menu{list-style:none;display:flex;flex-direction:column;gap:1px;padding:10px 9px 0;}
.acc-menu li a{position:relative;display:flex;align-items:center;gap:11px;padding:11px 13px;
  color:#8b8b99;font-size:13.5px;font-weight:700;cursor:pointer;overflow:hidden;
  transition:color .18s,background .18s,padding .18s;}
.acc-menu li a::before{content:'';position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:2px;
  background:var(--red);transform:scaleY(0);transform-origin:center;transition:transform .2s ease;}
.acc-menu li a:hover{color:#e8e8f0;background:rgba(255,255,255,.035);padding-inline-start:16px;}
.acc-menu li a.active{color:#fff;background:linear-gradient(90deg,rgba(230,0,18,.15),rgba(230,0,18,.02));}
.acc-menu li a.active::before,.acc-menu li a:hover::before{transform:scaleY(1);}
.acc-menu li a .ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:.85;
  transition:opacity .18s,transform .18s;}
.acc-menu li a .ico svg{width:18px;height:18px;display:block;}
.acc-menu li a:hover .ico{opacity:1;}
.acc-menu li a.active .ico{opacity:1;color:var(--red);filter:drop-shadow(0 0 7px rgba(230,0,18,.45));}
.acc-menu li a.danger:hover{color:#ff5a68;}
.acc-menu li a.danger:hover::before{background:#ff5a68;}

/* ── لوحة المحتوى ───────────────────────────────────────────────── */
.account-content{position:relative;background:linear-gradient(172deg,#101017,var(--black2) 58%,#0b0b10);
  border:1px solid var(--gray2);padding:26px 30px 34px;min-height:520px;
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));}
.account-content::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,0,18,.5) 22%,rgba(230,0,18,.5) 78%,transparent);}

.acc-section-title{position:relative;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-family:'Rajdhani',sans-serif;font-size:25px;font-weight:700;letter-spacing:.4px;color:#fff;
  margin-bottom:22px;padding-bottom:13px;border-bottom:1px solid var(--gray2);}
.acc-section-title::after{content:'';position:absolute;inset-inline-start:0;bottom:-1px;width:56px;height:2px;background:var(--red);
  box-shadow:0 0 12px rgba(230,0,18,.55);}
/* أيقونة العنوان — رسم متجهي بدل الرموز التعبيرية */
.acc-section-title>.sico{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;
  background:linear-gradient(150deg,rgba(230,0,18,.16),rgba(230,0,18,.04));border:1px solid rgba(230,0,18,.28);color:var(--red);}
.acc-section-title>.sico svg{width:15px;height:15px;display:block;}

/* حالة فارغة داخل الحساب — رسم متجهي بدل الرموز التعبيرية */
.acc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:46px 20px;}
.acc-empty-ico{width:72px;height:72px;margin-bottom:16px;display:grid;place-items:center;border-radius:20px;
  background:radial-gradient(circle at 34% 26%,rgba(230,0,18,.14),rgba(230,0,18,.03) 68%);
  border:1px solid rgba(230,0,18,.22);color:var(--red);opacity:.9;
  box-shadow:0 10px 30px -14px rgba(230,0,18,.55),inset 0 1px 0 rgba(255,255,255,.05);}
.acc-empty-ico svg{width:34px;height:34px;display:block;}
.acc-empty-t{font-family:'Rajdhani',sans-serif;font-size:19px;font-weight:700;color:#e8e8f0;letter-spacing:.3px;}
.acc-empty-s{margin-top:6px;font-size:13px;color:#7f7f8d;line-height:1.85;max-width:340px;}
.acc-empty .btn-primary{margin-top:18px;}
.account-content .form-group{gap:7px;}
.account-content .form-label{font-size:11px;letter-spacing:1.4px;color:#7a7a88;font-weight:700;}
.account-content .form-input{padding:12px 14px;font-size:13.5px;
  transition:border-color .2s,background .2s,box-shadow .2s;}
.account-content .form-input:hover{border-color:var(--gray3);}
.account-content .form-input:focus{border-color:rgba(230,0,18,.6);background:#16161d;box-shadow:0 0 0 3px rgba(230,0,18,.08);}
.account-content .form-actions{margin-top:6px;}
/* ▼▼ SG-TICKETS-CSS ▼▼ */
/* ══════════════════════════════════════════════════════════════════
   نظام تذاكر الدعم — واجهة الزبون  ·  SUPPORT INBOX v2
   لوحة محادثة بعمودين: قائمة التذاكر + المحادثة، بهوية المتجر.
   ══════════════════════════════════════════════════════════════════ */
.tk-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-inline-start:6px;
  background:var(--red);color:#fff;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:800;line-height:1;border-radius:10px;
  box-shadow:0 0 0 2px rgba(230,0,18,.22);}

/* ── شريط الإحصاءات ─────────────────────────────────────────────── */
.tk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.tk-stat{position:relative;background:linear-gradient(160deg,var(--black2),var(--black));border:1px solid var(--gray2);padding:13px 15px;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:border-color .2s,transform .2s;}
.tk-stat:hover{border-color:var(--gray3);transform:translateY(-2px);}
.tk-stat::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--sc,var(--gray3));opacity:.85;}
.tk-stat-n{font-family:'Inter',sans-serif;font-size:23px;font-weight:800;line-height:1;color:var(--sc,var(--white));}
.tk-stat-l{margin-top:6px;font-size:11.5px;color:var(--gray);letter-spacing:.2px;}


/* أثناء فتح محادثة تذكرة: نُخفي زر المحادثة العائم حتى لا يحجب أسفل المحادثة */
body.tk-thread-open #sg-chat-btn,body.tk-thread-open #sg-chat-greet{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease;}
/* ── الهيكل العام ───────────────────────────────────────────────── */
.tk-app{display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:12px;align-items:stretch;
  /* الارتفاع يُحسب ديناميكياً (tkFitHeight) ليملأ الشاشة المتاحة بلا اقتطاع */
  height:var(--tk-h,clamp(620px,calc(100vh - 190px),920px));}
.tk-side,.tk-chat{background:var(--black2);border:1px solid var(--gray2);display:flex;flex-direction:column;min-width:0;min-height:0;}

/* ── العمود الجانبي ─────────────────────────────────────────────── */
.tk-side-top{padding:13px;border-bottom:1px solid var(--gray2);display:flex;flex-direction:column;gap:10px;background:var(--black);}
.tk-newbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px 18px;border:none;cursor:pointer;
  background:var(--red);color:#fff;font-family:'Tajawal',sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.2px;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);transition:background .2s,box-shadow .2s,transform .15s;}
.tk-newbtn:hover{background:#ff1526;box-shadow:0 6px 20px rgba(230,0,18,.32);}
.tk-newbtn:active{transform:translateY(1px);}
.tk-newbtn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}
.tk-newbtn.sm{width:auto;padding:9px 16px;font-size:12.5px;}

.tk-search{position:relative;}
.tk-search input{width:100%;padding:9px 34px 9px 12px;background:var(--black3);border:1px solid var(--gray2);color:var(--white);
  font-family:'Tajawal',sans-serif;font-size:12.5px;outline:none;transition:border-color .2s;}
.tk-search input:focus{border-color:rgba(230,0,18,.5);}
.tk-search input::placeholder{color:#5a5a66;}
.tk-search::after{content:'⌕';position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-52%);color:#5a5a66;font-size:16px;pointer-events:none;}

.tk-filters{display:flex;gap:6px;flex-wrap:wrap;}
.tk-chip{padding:6px 11px;background:var(--black3);border:1px solid var(--gray2);color:var(--gray);cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:11.5px;font-weight:700;white-space:nowrap;transition:all .18s;}
.tk-chip:hover{color:var(--white);border-color:var(--gray3);}
.tk-chip.on{background:rgba(230,0,18,.13);border-color:rgba(230,0,18,.5);color:#ff5a68;}
.tk-chip b{font-family:'Inter',sans-serif;font-weight:700;opacity:.7;margin-inline-start:3px;}

.tk-list{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.tk-list::-webkit-scrollbar{width:5px;}
.tk-list::-webkit-scrollbar-thumb{background:var(--gray2);}
.tk-list::-webkit-scrollbar-thumb:hover{background:var(--gray3);}

.tk-card{position:relative;padding:13px 15px 13px 13px;border-bottom:1px solid var(--gray2);cursor:pointer;transition:background .16s;}
.tk-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:transparent;transition:background .16s;}
.tk-card:hover{background:var(--black3);}
.tk-card:hover::before{background:var(--gray3);}
.tk-card.on{background:var(--black3);}
.tk-card.on::before{background:var(--red);}
.tk-card.unread .tk-c-sub{color:#fff;}
.tk-c-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.tk-num{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;color:#5f5f6d;letter-spacing:.4px;}
.tk-c-time{margin-inline-start:auto;font-size:10.5px;color:#55555f;white-space:nowrap;}
.tk-c-sub{font-size:13px;font-weight:700;color:#cfcfd8;line-height:1.5;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tk-c-snip{font-size:11.5px;color:#6e6e7a;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tk-c-snip .who{color:#ff4455;font-weight:700;}
.tk-c-bot{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.tk-unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--red);
  color:#fff;font-family:'Inter',sans-serif;font-size:10px;font-weight:800;border-radius:9px;}

/* شارات الحالة */
.tk-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:10.5px;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid;}
.tk-st-open{background:rgba(68,138,255,.12);border-color:rgba(68,138,255,.38);color:#66a0ff;}
.tk-st-pending{background:rgba(255,179,0,.12);border-color:rgba(255,179,0,.38);color:#ffc333;}
.tk-st-answered{background:rgba(0,230,118,.12);border-color:rgba(0,230,118,.38);color:#33ea8d;}
.tk-st-resolved{background:rgba(130,130,150,.12);border-color:rgba(130,130,150,.35);color:#9a9aae;}
.tk-st-closed{background:rgba(90,90,105,.12);border-color:rgba(90,90,105,.35);color:#78788a;}
.tk-cat{background:var(--black4);border-color:var(--gray2);color:#8f8f9d;}

/* ── عمود المحادثة ──────────────────────────────────────────────── */
.tk-chat{position:relative;}
.tk-chead{padding:12px 16px;border-bottom:1px solid var(--gray2);background:var(--black);display:flex;flex-direction:column;gap:7px;flex-shrink:0;}
.tk-chead-r1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.tk-back{display:none;align-items:center;gap:5px;padding:6px 11px;background:var(--black3);border:1px solid var(--gray2);color:var(--white);
  cursor:pointer;font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;}
.tk-back:hover{border-color:var(--gray3);}
.tk-ctitle{font-size:14.5px;font-weight:800;color:#fff;line-height:1.5;flex:1;min-width:0;}
.tk-chead-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:#55555f;}

.tk-msgs{flex:1 1 auto;min-height:300px;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 14px;display:flex;flex-direction:column;gap:0;
  background:
    radial-gradient(circle at 18% 10%,rgba(230,0,18,.055),transparent 44%),
    radial-gradient(circle at 84% 90%,rgba(68,138,255,.035),transparent 46%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 1px,transparent 1px 9px),
    var(--black);
  scrollbar-width:thin;}
.tk-msgs::-webkit-scrollbar{width:5px;}
.tk-msgs::-webkit-scrollbar-thumb{background:var(--gray2);}
.tk-msgs::-webkit-scrollbar-thumb:hover{background:var(--gray3);}

/* ══════════════════════════════════════════════════════════════════
   المحادثة — CHAT v3  ·  نمط احترافي بمستوى تطبيقات المراسلة العالمية
   فقاعات دائرية بذيل، وقت وعلامات قراءة داخل الفقاعة، فاصل تاريخ لاصق،
   وشعار المتجر كصورة رمزية لفريق الدعم.
   الاتجاه RTL: الزبون (.me) يمين  ·  الدعم (.staff) يسار.
   ══════════════════════════════════════════════════════════════════ */

/* فاصل التاريخ — لاصق أعلى المحادثة أثناء التمرير */
.tk-day{align-self:center;position:sticky;top:0;z-index:4;margin:18px 0 12px;pointer-events:none;}
.tk-day:first-child{margin-top:2px;}
.tk-day span{display:inline-block;padding:5px 14px;background:rgba(13,13,18,.88);border:1px solid var(--gray2);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;color:#8d8d9c;letter-spacing:.4px;border-radius:13px;
  box-shadow:0 3px 12px rgba(0,0,0,.4);}

/* رسالة النظام */
.tk-sys{align-self:center;max-width:88%;margin:9px 0;padding:7px 15px;background:rgba(255,255,255,.035);border:1px solid var(--gray2);
  font-size:11.5px;color:#7f7f8d;text-align:center;line-height:1.75;border-radius:13px;}

/* ── صفّ الرسالة ────────────────────────────────────────────────── */
.tk-msg{display:flex;align-items:flex-end;gap:8px;max-width:76%;width:fit-content;align-self:flex-end;
  margin-top:11px;animation:tkIn .2s ease-out;}
.tk-msg.me{align-self:flex-start;}
/* الدعم على اليسار ⇒ الصورة الرمزية على الطرف الخارجي (أقصى اليسار) */
.tk-msg.staff{flex-direction:row-reverse;}
.tk-msg.grp{margin-top:2px;}
@keyframes tkIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

/* الصورة الرمزية — شعار المتجر لفريق الدعم فقط */
.tk-av{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#1d1d26,#0b0b10 76%);border:1px solid var(--gray2);
  font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;color:#ff5a68;letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);}
.tk-av img{width:100%;height:100%;object-fit:contain;padding:3px;display:block;}
/* الصورة تظهر مع آخر رسالة في المجموعة (بمحاذاة ذيل الفقاعة) وتحجز مكانها فيما عداها */
.tk-av{visibility:hidden;}
.tk-msg.tail .tk-av{visibility:visible;}

.tk-bwrap{min-width:0;display:flex;flex-direction:column;align-items:flex-start;}

/* اسم المرسل (الدعم فقط) */
.tk-bname{font-size:11px;font-weight:800;color:#ff4d5c;margin:0 4px 4px;letter-spacing:.2px;line-height:1.5;}
.tk-msg.grp .tk-bname{display:none;}

/* ── الفقاعة ────────────────────────────────────────────────────── */
.tk-msgs{--tkb-staff:#1c1c25;--tkb-me:#3c1119;}
.tk-bub{position:relative;min-width:96px;max-width:100%;padding:8px 13px 6px;border-radius:14px;
  background:var(--tkb-staff);color:#dfdfe8;font-size:14.5px;line-height:1.8;word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);}
.tk-msg.me .tk-bub{background:var(--tkb-me);color:#f6e9ea;
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);}

/* ذيل الفقاعة على آخر رسالة في المجموعة (RTL: الزبون يمين / الدعم يسار) */
.tk-msg.tail .tk-bub::after{content:'';position:absolute;bottom:0;width:9px;height:12px;}
.tk-msg.me.tail .tk-bub{border-bottom-right-radius:3px;}
.tk-msg.me.tail .tk-bub::after{right:-7px;background:var(--tkb-me);clip-path:polygon(0 0,100% 100%,0 100%);}
.tk-msg.staff.tail .tk-bub{border-bottom-left-radius:3px;}
.tk-msg.staff.tail .tk-bub::after{left:-7px;background:var(--tkb-staff);clip-path:polygon(100% 0,100% 100%,0 100%);}
/* ── مؤشّر «فريق الدعم يكتب الآن» (نمط واتساب) ── */
.tk-typing{animation:tkTypeIn .22s ease both;}
@keyframes tkTypeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.tk-typing .tk-bub{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;}
.tk-typing .tk-bub::after{bottom:0;}
.tk-typetxt{font-size:11.5px;font-weight:600;color:var(--gray);letter-spacing:.2px;white-space:nowrap;}
.tk-dots{display:inline-flex;align-items:flex-end;gap:4px;height:10px;}
.tk-dots i{width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.32;
  animation:tkDot 1.15s infinite ease-in-out;}
.tk-dots i:nth-child(2){animation-delay:.15s;}
.tk-dots i:nth-child(3){animation-delay:.3s;}
@keyframes tkDot{0%,62%,100%{opacity:.3;transform:translateY(0) scale(.88);}30%{opacity:1;transform:translateY(-4px) scale(1);}}
/* شارة «مباشر» في ترويسة المحادثة */
.tk-live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  color:#00e676;letter-spacing:.3px;padding:2px 8px 2px 6px;border-radius:20px;
  background:rgba(0,230,118,.09);border:1px solid rgba(0,230,118,.24);transition:.25s;}
.tk-live i{width:6px;height:6px;border-radius:50%;background:#00e676;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(0,230,118,.55);animation:tkLivePulse 2s infinite;}
.tk-live.off{color:var(--gray);background:rgba(136,136,136,.08);border-color:rgba(136,136,136,.2);}
.tk-live.off i{background:var(--gray);animation:none;box-shadow:none;}
@keyframes tkLivePulse{0%{box-shadow:0 0 0 0 rgba(0,230,118,.5);}70%{box-shadow:0 0 0 6px rgba(0,230,118,0);}100%{box-shadow:0 0 0 0 rgba(0,230,118,0);}}
@media (prefers-reduced-motion:reduce){.tk-dots i,.tk-live i{animation:none;opacity:.75;}}

.tk-btext{white-space:pre-wrap;}

/* سطر الوقت + علامات التسليم داخل الفقاعة */
.tk-bmeta{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:3px;line-height:1;
  font-family:'Inter',sans-serif;font-size:10px;}
.tk-btime{color:rgba(255,255,255,.38);letter-spacing:.2px;}
.tk-msg.me .tk-btime{color:rgba(255,255,255,.45);}
.tk-tick{font-size:10.5px;line-height:1;letter-spacing:-2px;color:rgba(255,255,255,.42);
  transition:color .22s ease;display:inline-block;}
.tk-tick.seen{color:#53bdeb;text-shadow:0 0 8px rgba(83,189,235,.35);}
/* ★ ومضة لطيفة لحظة تحوّل العلامة إلى «قرأها الدعم» */
@keyframes tkTickPop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
.tk-tick.pop{animation:tkTickPop .34s cubic-bezier(.34,1.56,.64,1);}
@media (prefers-reduced-motion:reduce){.tk-tick.pop{animation:none;}}

/* مرفقات (الدعم فقط — الزبون لا يرفع) */
.tk-atts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.tk-att{width:96px;height:96px;object-fit:cover;border:1px solid var(--gray2);cursor:zoom-in;transition:border-color .18s,transform .18s;}
.tk-att:hover{border-color:var(--red);transform:scale(1.03);}
.tk-lb{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.93);display:none;place-items:center;padding:28px;cursor:zoom-out;}
.tk-lb.on{display:grid;}
.tk-lb img{max-width:94vw;max-height:90vh;border:1px solid var(--gray2);}

/* ── صندوق الكتابة ─────────────────────────────────────────────── */
.tk-composer{flex-shrink:0;border-top:1px solid var(--gray2);background:var(--black2);padding:11px 13px;}
.tk-cbox{display:flex;align-items:flex-end;gap:9px;background:var(--black3);border:1px solid var(--gray2);padding:7px 9px;transition:border-color .2s;}
.tk-cbox:focus-within{border-color:rgba(230,0,18,.45);}
.tk-ta{flex:1;min-width:0;background:transparent;border:none;outline:none;resize:none;color:var(--white);
  font-family:'Tajawal',sans-serif;font-size:13.5px;line-height:1.8;max-height:132px;min-height:40px;padding:6px 4px;}
.tk-ta::placeholder{color:#55555f;}
.tk-send{flex-shrink:0;width:40px;height:40px;display:grid;place-items:center;border:none;cursor:pointer;background:var(--red);color:#fff;
  font-size:16px;transition:background .18s,transform .15s,opacity .18s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.tk-send:hover{background:#ff1526;}
.tk-send:active{transform:scale(.94);}
.tk-send:disabled{opacity:.4;cursor:not-allowed;}
.tk-cbar{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.tk-hintline{font-size:10.5px;color:#4e4e5a;}
.tk-count{margin-inline-start:auto;font-family:'Inter',sans-serif;font-size:10.5px;color:#4e4e5a;}
.tk-count.warn{color:#ffb300;}

.tk-ibtn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--black3);border:1px solid var(--gray2);color:#b8b8c4;
  cursor:pointer;font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;transition:all .18s;}
.tk-ibtn:hover{color:#fff;border-color:var(--gray3);background:var(--black4);}
.tk-ibtn.ok:hover{border-color:rgba(0,230,118,.5);color:#33ea8d;}
.tk-ibtn.danger:hover{border-color:rgba(230,0,18,.5);color:#ff5a68;}
.tk-ibtn:disabled{opacity:.5;cursor:not-allowed;}

/* ── الحالة المغلقة + التقييم — شريط مضغوط لا يبتلع مساحة المحادثة ── */
.tk-locked{flex-shrink:0;border-top:1px solid var(--gray2);background:var(--black2);padding:11px 14px;
  font-size:12.5px;color:#8a8a97;line-height:1.7;max-height:38%;overflow-y:auto;}
.tk-lockrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.tk-lockico{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.045);border:1px solid var(--gray2);color:#9a9aa5;}
.tk-lockico svg{width:14px;height:14px;display:block;}
.tk-locktxt{flex:1;min-width:170px;font-size:12px;line-height:1.7;color:#83838f;text-align:start;}
.tk-lockact{display:flex;gap:7px;flex-wrap:wrap;}
.tk-rate{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray2);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tk-rate-q{font-size:12px;color:#9a9aa5;}
.tk-stars{display:flex;gap:5px;}
.tk-star{font-size:24px;color:#33333d;cursor:pointer;transition:color .15s,transform .15s;line-height:1;}
.tk-star:hover{transform:scale(1.14);}
.tk-star.on{color:#ffb300;}
.tk-rate-more{display:none;width:100%;margin-top:9px;}
.tk-rate.on .tk-rate-more{display:block;}
.tk-rate-more .tk-ta{width:100%;min-height:52px;background:var(--black3);border:1px solid var(--gray2);padding:9px 11px;}
.tk-rated{color:#ffb300;font-size:14px;letter-spacing:2px;}

/* ── الحالات الفارغة ───────────────────────────────────────────── */
.tk-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 26px;color:#6e6e7a;
  font-size:12.5px;line-height:1.9;}
.tk-empty-ico{font-size:42px;margin-bottom:12px;opacity:.34;}
.tk-empty-t{font-family:'Rajdhani',sans-serif;font-size:20px;font-weight:700;color:#b0b0bc;margin-bottom:7px;letter-spacing:.3px;}
.tk-empty p{max-width:340px;}
.tk-loading{flex:1;display:grid;place-items:center;color:var(--gray);font-size:12.5px;padding:40px;}

/* ── نافذة تذكرة جديدة ─────────────────────────────────────────── */
.tk-modal{position:fixed;inset:0;z-index:11500;background:rgba(0,0,0,.86);backdrop-filter:blur(4px);display:none;
  align-items:center;justify-content:center;padding:22px;overflow-y:auto;}
.tk-modal.on{display:flex;}
.tk-mbox{width:100%;max-width:640px;background:var(--black2);border:1px solid var(--gray2);max-height:92vh;display:flex;flex-direction:column;
  animation:tkPop .22s ease-out;}
@keyframes tkPop{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.tk-mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--gray2);background:var(--black);}
.tk-mtitle{font-family:'Rajdhani',sans-serif;font-size:21px;font-weight:700;color:#fff;letter-spacing:.4px;}
.tk-msub{font-family:'Inter',sans-serif;font-size:9.5px;color:#4e4e5a;letter-spacing:2px;margin-top:2px;}
.tk-mx{width:32px;height:32px;display:grid;place-items:center;background:var(--black3);border:1px solid var(--gray2);color:var(--gray);
  cursor:pointer;font-size:14px;transition:all .18s;flex-shrink:0;}
.tk-mx:hover{color:#fff;border-color:var(--red);background:rgba(230,0,18,.12);}
.tk-mbody{padding:20px;overflow-y:auto;flex:1;}
.tk-mfoot{padding:14px 20px;border-top:1px solid var(--gray2);background:var(--black);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;}
.tk-fg{margin-bottom:15px;}
.tk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.tk-lbl{display:block;font-size:12px;font-weight:700;color:#a8a8b6;margin-bottom:7px;}
.tk-in,.tk-sel{width:100%;padding:11px 13px;background:var(--black3);border:1px solid var(--gray2);color:var(--white);
  font-family:'Tajawal',sans-serif;font-size:13.5px;outline:none;transition:border-color .2s;}
.tk-in:focus,.tk-sel:focus{border-color:rgba(230,0,18,.5);}
.tk-in::placeholder{color:#55555f;}
.tk-mbody .tk-ta{width:100%;min-height:130px;background:var(--black3);border:1px solid var(--gray2);padding:11px 13px;}
.tk-mbody .tk-ta:focus{border-color:rgba(230,0,18,.5);}
.tk-hint{margin-top:7px;font-size:11px;color:#5f5f6b;line-height:1.7;}
.tk-note{margin-top:9px;padding:9px 12px;background:rgba(255,179,0,.07);border:1px solid rgba(255,179,0,.22);
  border-inline-start:3px solid #ffb300;font-size:11px;color:#c9a95f;line-height:1.75;}
.tk-req{color:var(--red);}

.tk-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;
  animation:tkSpin .7s linear infinite;vertical-align:-2px;}
@keyframes tkSpin{to{transform:rotate(360deg);}}

/* ── استجابة ───────────────────────────────────────────────────── */
@media (max-width:1180px){
  .tk-app{grid-template-columns:minmax(250px,280px) minmax(0,1fr);}
  .tk-msg{max-width:82%;}
}
@media (max-width:1100px){
  .tk-app{grid-template-columns:1fr;height:auto;}
  .tk-app.viewing{height:var(--tk-h,clamp(560px,80vh,860px));}
  .tk-side{height:auto;max-height:none;}
  .tk-list{max-height:none;overflow:visible;}
  .tk-chat{display:none;height:100%;min-height:0;}
  .tk-app.viewing .tk-side{display:none;}
  .tk-app.viewing .tk-chat{display:flex;}
  .tk-back{display:inline-flex;}
  .tk-msg{max-width:86%;}
}
@media (max-width:768px){
  .tk-stats{grid-template-columns:1fr 1fr;}
  .tk-grid2{grid-template-columns:1fr;}
  .tk-msgs{padding:13px 11px 11px;min-height:260px;}
  .tk-bub{font-size:14px;line-height:1.75;padding:8px 12px 6px;min-width:88px;}
  /* توسيع لوحة المحادثة على الجوال للاستفادة من عرض الشاشة */
  #acc-tab-support .tk-app{margin-inline:-24px;width:calc(100% + 48px);}
  .tk-locked{max-height:34%;padding:9px 11px;}
  .tk-lockrow{gap:9px;}
  .tk-lockico{width:26px;height:26px;border-radius:8px;}
  .tk-locktxt{min-width:0;font-size:11.5px;line-height:1.6;}
  .tk-lockact{width:100%;order:3;gap:6px;}
  .tk-lockact .tk-ibtn,.tk-lockact .tk-newbtn.sm{flex:1 1 auto;justify-content:center;padding:8px 10px;font-size:12px;}
  .tk-rate{margin-top:8px;padding-top:8px;gap:9px;}
  .tk-rate-q{font-size:11.5px;}
  .tk-star{font-size:21px;}
  .tk-mbox{max-height:96vh;}
  .tk-modal{padding:0;align-items:flex-end;}
  .tk-mbox{max-width:none;}
}
@media (max-width:480px){
  .tk-stat-n{font-size:20px;}
  .tk-msg{max-width:90%;gap:6px;}
  .tk-av{width:28px;height:28px;font-size:11px;}
  .tk-bub{font-size:13.5px;min-width:82px;}
  .tk-bname{font-size:10.5px;}
  .tk-day span{font-size:10px;padding:4px 12px;}
  .tk-att{width:78px;height:78px;}
  .tk-star{font-size:26px;}
}

/* ── أهداف لمس مريحة (WCAG 2.5.8 / 44pt) ──────────────────────── */
@media (hover:none) and (pointer:coarse),(max-width:768px){
  #acc-tab-support .tk-chip{min-height:36px;padding:8px 13px;}
  #acc-tab-support .tk-ibtn{min-height:42px;padding:10px 15px;}
  #acc-tab-support .tk-newbtn{min-height:46px;}
  #acc-tab-support .tk-send{width:46px;height:46px;font-size:18px;}
  #acc-tab-support .tk-card{padding:15px;}
  #acc-tab-support .tk-back{min-height:40px;padding:9px 14px;}
  #acc-tab-support .tk-star{font-size:32px;padding:2px;}
  .tk-in,.tk-sel,.tk-ta,.tk-search input{font-size:16px;}   /* يمنع تكبير iOS التلقائي */
  .tk-mx{width:40px;height:40px;}
}
@keyframes sgModSheen{to{transform:translateX(360%);}}

/* ★ بطاقة ربط الطلبات السابقة بالحساب */
.sg-claim-box{
  position:relative;overflow:hidden;margin:0 0 16px;display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;
  background:linear-gradient(115deg,rgba(0,230,118,.10) 0%,rgba(0,230,118,.035) 45%,rgba(6,6,8,0) 100%),var(--black);
  border:1px solid rgba(0,230,118,.24);
  border-right:3px solid #00e676;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
.sg-claim-box::after{
  content:'';position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(150,255,200,.10),transparent);
  transform:translateX(-140%);animation:sgModSheen 2.4s ease-out .35s 1;
}
.sg-claim-ico{
  flex:0 0 30px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:14px;background:rgba(0,230,118,.13);border:1px solid rgba(0,230,118,.32);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.sg-claim-body{flex:1;min-width:0;}
.sg-claim-ttl{
  font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:700;color:#6ff0ae;
  letter-spacing:.3px;line-height:1.35;
}
.sg-claim-txt{font-size:12.5px;color:#9a9aa6;line-height:1.75;margin-top:5px;}
.sg-claim-btn{
  margin-top:11px;display:inline-block;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;letter-spacing:.3px;color:#04150c;
  padding:9px 18px;border:0;background:linear-gradient(135deg,#00e676,#0fbf63);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  transition:filter .15s,transform .15s;
}
.sg-claim-btn:hover{filter:brightness(1.08);}
.sg-claim-btn:active{transform:translateY(1px);}
.sg-claim-btn:disabled{opacity:.6;cursor:default;filter:none;transform:none;}
.sg-claim-btn:focus-visible{outline:2px solid #00e676;outline-offset:3px;}
.sg-claim-box.is-wait{
  background:linear-gradient(115deg,rgba(245,158,11,.10) 0%,rgba(245,158,11,.035) 45%,rgba(6,6,8,0) 100%),var(--black);
  border-color:rgba(245,158,11,.24);border-right-color:#f59e0b;
}
.sg-claim-box.is-wait .sg-claim-ico{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.32);}
.sg-claim-box.is-wait .sg-claim-ttl{color:#fbbf5c;}
@media (max-width:600px){
  .sg-claim-box{padding:12px 13px;gap:10px;}
  .sg-claim-ico{flex-basis:26px;width:26px;height:26px;font-size:12px;}
  .sg-claim-ttl{font-size:14px;}
  .sg-claim-txt{font-size:11.5px;}
  .sg-claim-btn{width:100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce){ .sg-claim-box::after{animation:none;display:none;} }

/* ★ ملاحظة من الإدارة داخل الطلب — خفيفة وواضحة، بلا أي هوية موظّف */
.sg-onote{
  margin:0 0 14px;display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;
  background:linear-gradient(115deg,rgba(0,230,118,.09) 0%,rgba(0,230,118,.03) 45%,rgba(6,6,8,0) 100%),var(--black);
  border:1px solid rgba(0,230,118,.22);
  border-right:3px solid #00e676;
  clip-path:polygon(0 0,100% 0,100% 100%,9px 100%,0 calc(100% - 9px));
}
.sg-onote + .sg-onote{margin-top:-6px;}
.sg-onote-ico{
  flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:12px;background:rgba(0,230,118,.13);border:1px solid rgba(0,230,118,.30);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.sg-onote-body{flex:1;min-width:0;}
.sg-onote-ttl{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:'Rajdhani',sans-serif;font-size:13.5px;font-weight:700;color:#6ff0ae;letter-spacing:.3px;
}
.sg-onote-time{
  font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:500;color:var(--gray);
  letter-spacing:.3px;padding:1px 7px;background:rgba(255,255,255,.035);
  border:1px solid var(--gray2);white-space:nowrap;unicode-bidi:isolate;
}
.sg-onote-txt{
  font-size:12.5px;color:#a9b4ac;line-height:1.85;margin-top:5px;
  white-space:pre-wrap;word-break:break-word;unicode-bidi:plaintext;
}
@media (max-width:600px){
  .sg-onote{padding:10px 11px;gap:9px;}
  .sg-onote-ico{flex-basis:23px;width:23px;height:23px;font-size:11px;}
  .sg-onote-ttl{font-size:12.5px;}
  .sg-onote-txt{font-size:11.5px;}
}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group.full{grid-column:1/-1;}
.form-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);}
.form-input{padding:12px 16px;background:var(--black3);border:1px solid var(--gray2);color:var(--white);font-family:'Tajawal',sans-serif;font-size:14px;outline:none;transition:border-color .3s;}
/* ★ جوال: حجم ≥16px يمنع iOS من تكبير الصفحة تلقائياً عند التركيز على الحقل */
@media (max-width:768px){ .form-input, .ck-input{ font-size:16px; } }
.form-input:focus{border-color:var(--red);}
.form-actions{grid-column:1/-1;display:flex;gap:12px;margin-top:8px;}

/* WISHLIST */
.wishlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 72px);padding:40px;position:relative;}
.auth-glow{position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 50% 50%,rgba(230,0,18,.07),transparent 70%);pointer-events:none;}
.auth-card{background:var(--black2);border:1px solid var(--gray2);padding:48px;width:100%;max-width:440px;position:relative;z-index:2;}
.auth-card::before{content:'';position:absolute;top:0;right:0;width:60px;height:3px;background:var(--red);}
.auth-logo{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;letter-spacing:3px;text-align:center;margin-bottom:8px;}
.auth-logo span{color:var(--red);}
.auth-sub{text-align:center;font-size:14px;color:var(--gray);margin-bottom:36px;}
.auth-form{display:flex;flex-direction:column;gap:16px;}
.auth-divider{text-align:center;position:relative;margin:8px 0;}
.auth-divider::before{content:'';position:absolute;top:50%;right:0;width:calc(50% - 20px);height:1px;background:var(--gray2);}
.auth-divider::after{content:'';position:absolute;top:50%;left:0;width:calc(50% - 20px);height:1px;background:var(--gray2);}
.auth-divider span{font-size:12px;color:var(--gray);}
.auth-toggle{text-align:center;font-size:14px;color:var(--gray);margin-top:8px;}
.auth-toggle a{color:var(--red);cursor:pointer;font-weight:600;}
.auth-toggle a:hover{text-decoration:underline;}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:60px 40px;}
.contact-info{background:var(--black2);padding:48px;}
.contact-form-area{background:var(--black2);padding:48px;}
.contact-detail{display:flex;gap:16px;margin-bottom:28px;}
.cd-icon{width:48px;height:48px;background:rgba(230,0,18,.1);border:1px solid rgba(230,0,18,.2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.cd-text h4{font-size:14px;font-weight:700;margin-bottom:4px;}
.cd-text p{font-size:14px;color:var(--gray);}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.contact-form textarea{resize:vertical;min-height:120px;}

/* ── AI CHAT ── */
/* ══════════════════════════════════════════
   DYNAMIC SEARCH BOX
══════════════════════════════════════════ */
/* ══════════════════════════════════════
   SEARCH — FULL ANIMATION SYSTEM
══════════════════════════════════════ */
@keyframes srOverlayIn  { from{opacity:0} to{opacity:1} }
@keyframes srOverlayOut { from{opacity:1} to{opacity:0} }

@keyframes srBoxIn {
  0%   { opacity:0; transform:translateY(-22px) scaleY(0.85) scaleX(0.97); clip-path:polygon(0 0,100% 0,100% 0%,0 0%); }
  40%  { opacity:1; clip-path:polygon(0 0,100% 0,100% 60%,0 60%); }
  100% { opacity:1; transform:translateY(0)    scaleY(1)    scaleX(1);    clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
}
@keyframes srBoxOut {
  0%   { opacity:1; transform:translateY(0)    scaleY(1);    clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
  60%  { opacity:1; clip-path:polygon(0 0,100% 0,100% 20%, 0 20%); }
  100% { opacity:0; transform:translateY(-16px) scaleY(0.8); clip-path:polygon(0 0,100% 0,100% 0%,0 0%); }
}

@keyframes srScanLine {
  0%   { top:0; opacity:0.9; }
  100% { top:100%; opacity:0; }
}

@keyframes srResultIn {
  from { opacity:0; transform:translateX(12px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes srInputCursor {
  0%,100% { border-color:var(--red); }
  50%     { border-color:transparent; }
}

#searchContainer {
  position:fixed; inset:0;
  z-index:9500;
  pointer-events:none;
  visibility:hidden;        /* hidden but exists in DOM so transitions work */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:72px;
}

/* ── Overlay backdrop ── */
#searchOverlay {
  position:absolute; inset:0;
  background:rgba(5,5,8,0.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
}

/* ── Search box wrapper ── */
#searchBox {
  position:relative;
  width:min(600px,92vw);
  z-index:2;
  opacity:0;
  margin-top:8px;
  /* clip-path controls the "wipe open" reveal */
  clip-path:polygon(0 0,100% 0,100% 0%,0 0%);
}

/* ── Scan line that sweeps across on open ── */
#searchScanLine {
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  z-index:10;
  pointer-events:none;
  opacity:0;
}

/* ── Input wrapper ── */
#searchInputWrap {
  display:flex; align-items:center;
  background:linear-gradient(180deg,#13131a 0%,#0d0d12 100%);
  border:1px solid rgba(230,0,18,0.08);
  border-bottom:2px solid rgba(230,0,18,0.35);
  position:relative; overflow:hidden;
}
/* Red glow line at bottom on focus */
#searchInputWrap::after {
  content:'';
  position:absolute; bottom:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--red) 30%,#ff4422 70%,transparent);
  transform:scaleX(0);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  transform-origin:center;
}
#searchContainer.active #searchInputWrap::after {
  transform:scaleX(1);
}

#searchIcon {
  width:54px; height:56px;
  display:flex; align-items:center; justify-content:center;
  color:var(--red); flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.05);
}
#searchIcon svg { display:block; transition:transform .3s; }
#searchContainer.active #searchIcon svg { transform:scale(1.1); }

#searchInput {
  flex:1; height:56px;
  background:transparent; border:none; outline:none;
  font-family:'Tajawal',sans-serif; font-size:17px; color:#fff;
  direction:rtl;
  padding:0 14px 0 0;
  caret-color:var(--red);
}
#searchInput::placeholder { color:#2a2a35; transition:color .3s; }
#searchContainer.active #searchInput::placeholder { color:#3a3a48; }

#searchClose {
  width:54px; height:56px;
  display:flex; align-items:center; justify-content:center;
  color:#333; cursor:pointer; flex-shrink:0;
  border-left:1px solid rgba(255,255,255,0.05);
  font-size:20px; font-weight:300;
  transition:color .2s, background .2s;
}
#searchClose:hover { color:var(--red); background:rgba(230,0,18,0.07); }

#searchHint {
  position:absolute; left:0; right:0; bottom:-24px;
  text-align:center;
  font-family:'Courier New',monospace; font-size:10px; color:#222;
  letter-spacing:2px;
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s .2s, transform .3s .2s;
}
#searchContainer.active #searchHint {
  opacity:1; transform:translateY(0);
}

/* ── Results panel ── */
#searchResults {
  margin-top:4px;
  background:linear-gradient(180deg,#0f0f15 0%,#0c0c10 100%);
  border:1px solid rgba(255,255,255,0.05);
  border-top:1px solid rgba(230,0,18,0.15);
  overflow:hidden; max-height:0;
  transition:max-height .4s cubic-bezier(.16,1,.3,1);
}
#searchResults.has-results {
  max-height:400px;
  overflow-y:auto;
}
#searchResults::-webkit-scrollbar { width:2px; }
#searchResults::-webkit-scrollbar-thumb { background:var(--red); }

.sr-header {
  padding:10px 18px 7px;
  font-family:'Courier New',monospace; font-size:10px;
  color:#2a2a38; letter-spacing:3px; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:space-between;
}
.sr-header-count { color:#333; font-size:10px; }

.sr-item {
  display:flex; align-items:center; gap:14px;
  padding:11px 18px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.03);
  opacity:0;                          /* animated in via JS */
  transition:background .15s, opacity .2s, transform .2s;
}
.sr-item.visible { opacity:1; }
.sr-item:hover, .sr-item.active {
  background:rgba(230,0,18,0.07);
}
.sr-item:hover .sr-item-name { color:#fff; }

.sr-item-img {
  width:44px; height:44px; flex-shrink:0;
  background:#141418;
  border:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.sr-item-img img { width:100%; height:100%; object-fit:contain; padding:4px; }
.sr-icon-large  { font-size:20px; }

.sr-item-info  { flex:1; min-width:0; }
.sr-item-name  {
  font-size:13px; font-weight:600; color:#c0c0c8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px; transition:color .15s;
}
.sr-cat {
  display:inline-block;
  font-size:9px; font-family:'Courier New',monospace;
  background:rgba(230,0,18,0.12); color:var(--red);
  padding:1px 6px; margin-left:6px;
  vertical-align:middle;
}
.sr-item-brand { font-size:11px; color:#333; }

.sr-item-price {
  font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700;
  color:var(--red); flex-shrink:0; text-align:left;
}
.sr-item-price .sr-old {
  display:block; font-size:11px; font-weight:400;
  color:#2a2a35; text-decoration:line-through; text-align:left;
}

.sr-empty {
  padding:36px 18px; text-align:center;
  font-size:13px; color:#2a2a38; line-height:2;
}
.sr-empty strong { color:#333; display:block; font-size:15px; margin-bottom:6px; }

/* ── OPEN STATE (added via JS after display switch) ── */
#searchContainer.active {
  visibility:visible;
  pointer-events:all;
}
#searchContainer.active #searchOverlay {
  animation:srOverlayIn .25s ease forwards;
}
#searchContainer.active #searchBox {
  animation:srBoxIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
#searchContainer.active #searchScanLine {
  animation:srScanLine .6s .1s ease-out forwards;
}
/* ── CLOSING STATE ── */
#searchContainer.closing #searchOverlay {
  animation:srOverlayOut .22s ease forwards;
}
#searchContainer.closing #searchBox {
  animation:srBoxOut .28s ease forwards;
}




/* ── PURCHASE NOTIFICATION — Premium Bottom-Center HUD ── */
#purchaseNotif{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(calc(100% + 24px));
  /* ★ فوق فقاعة ترحيب المساعد (8999) — لو تصادفا يفوز الإشعار لا العكس */
  z-index:9010;
  pointer-events:none;
  width:min(340px,calc(100vw - 32px));
  background:linear-gradient(135deg,
    rgba(10,10,18,.96) 0%,
    rgba(13,13,24,.98) 50%,
    rgba(10,10,18,.96) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(230,0,18,.4);
  border-radius:8px;
  box-shadow:
    0 22px 56px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 40px rgba(230,0,18,.15);
  opacity:0;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s ease;
  overflow:hidden;
  font-family:'Tajawal',sans-serif;
}

/* كنسة ضوء تمرّ مرّة واحدة عند ظهور الإشعار (تُعاد مع كل ظهور بفضل reflow في الـJS) */
#purchaseNotif::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:55%;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent,
    rgba(255,120,130,.18) 45%,
    rgba(255,255,255,.12) 50%,
    transparent 70%);
  transform:translateX(-180%);
  opacity:0;
}
#purchaseNotif.show::before{
  animation:pnSweepIn 1.4s ease-out;
}
@keyframes pnSweepIn{
  0%{transform:translateX(-180%);opacity:1;}
  100%{transform:translateX(320%);opacity:1;}
}

/* Top accent shine */
#purchaseNotif::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(230,0,18,.3) 15%,
    var(--red) 50%,
    rgba(230,0,18,.3) 85%,
    transparent 100%);
  box-shadow:0 0 14px rgba(230,0,18,.7);
  z-index:3;
}

#purchaseNotif.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

/* Background grid texture */
/* === إشعار الطلبات — تصميم جديد (Neon HUD، متوسّط، أيقونة زبون يحمل فلوس) === */
.pn-header{display:flex;align-items:center;justify-content:space-between;padding:11px 15px 0;position:relative;z-index:2;}
.pn-conf{display:inline-flex;align-items:center;gap:6px;}
.pn-ck{width:15px;height:15px;border-radius:50%;background:linear-gradient(135deg,#2ee06b,#13a04d);display:flex;align-items:center;justify-content:center;box-shadow:0 0 7px rgba(34,224,107,.45);flex-shrink:0;}
.pn-ck svg{width:9px;height:9px;}
.pn-conf>span{font-size:11.5px;font-weight:700;color:#48e88a;}
.pn-live{display:inline-flex;align-items:center;gap:5px;font-family:'Rajdhani',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:#fff;background:#e60012;padding:2px 7px;border-radius:3px;}
.pn-live-d{width:5px;height:5px;border-radius:50%;background:#fff;animation:pnPulse 1.3s infinite;}
.pn-content{display:flex;align-items:center;gap:12px;padding:10px 15px 13px;position:relative;z-index:2;}
.pn-ic{width:48px;height:48px;flex-shrink:0;padding:3px;display:flex;align-items:center;justify-content:center;}
.pn-ic svg{width:100%;height:100%;display:block;}
.pn-body{flex:1;text-align:center;min-width:0;padding-left:54px;}
.pn-name{font-size:16px;font-weight:800;color:#fff;line-height:1.15;text-shadow:0 0 14px rgba(230,0,18,.6);}
.pn-product{font-size:12px;color:#bbb;margin-top:3px;line-height:1.45;}
.pn-product b{color:#ff6b76;font-weight:700;}
.pn-time{font-size:10px;color:#7a5560;margin-top:3px;font-family:'Rajdhani',sans-serif;letter-spacing:1px;}
/* sg-pn: حركات SVG الداخلية تعمل على الخيط الرئيسي (كانت تعمل دائماً حتى والإشعار مخفي) — الآن الأيقونة كلها تتمايل كطبقة مُركَّبة وفقط أثناء الظهور */
.pn-ic{transform-origin:50% 92%;}
#purchaseNotif.show .pn-ic{animation:pnSway 2.6s ease-in-out infinite;}
@keyframes pnSway{0%,100%{transform:rotate(-6deg) translateX(-1px);}50%{transform:rotate(6deg) translateX(1px);}}




@keyframes pnPulse{0%,100%{opacity:.4;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
.pn-progress{position:absolute;bottom:0;left:0;height:2.5px;width:100%;background:linear-gradient(90deg,var(--red),#ff5c68,var(--red));transform-origin:left;box-shadow:0 0 10px rgba(230,0,18,.7);z-index:3;}
#purchaseNotif.show .pn-progress{animation:pnBar 4.5s linear forwards;}
@keyframes pnBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* احترام تقليل الحركة (توافق ووصولية) */
@media (prefers-reduced-motion: reduce){
  #purchaseNotif::before,#purchaseNotif.show::before,
  .pn-ic,
  .pn-live-d,#purchaseNotif.show .pn-progress{animation:none!important;}
  .pn-ic .mg-coin{opacity:1!important;}
}

/* Mobile — adjust width and bottom position */
@media (max-width:768px){
  #purchaseNotif{
    bottom:18px;
    width:calc(100vw - 24px);
  }
  .pn-header{padding:9px 12px 0;}
  .pn-content{padding:9px 12px 11px;gap:10px;}
  .pn-ic{width:44px;height:44px;}
  .pn-body{padding-left:40px;}
  .pn-name{font-size:14.5px;}
  .pn-product{font-size:11.5px;}
  .pn-time{font-size:9.5px;}
}

/* ── Legacy .toast class — empty stub so old refs don't break ── */
.toast{ display:none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .shop-layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .pd-grid{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .account-layout{grid-template-columns:1fr;gap:14px;}
  .account-sidebar{position:static;display:block;}
  /* بطاقة الهوية تصير صفّاً أفقياً بدل عمود يأكل الشاشة */
  .acc-id{display:flex;align-items:center;gap:14px;text-align:start;padding:16px 18px;}
  .acc-avatar{width:54px;height:54px;font-size:23px;margin:0;flex-shrink:0;}
  .acc-id > div:not(.acc-avatar){min-width:0;}
  .acc-name{margin-bottom:2px;}
  .acc-email{margin-bottom:0;}
  .acc-idtxt{min-width:0;flex:1;}
  .acc-tags{justify-content:flex-start;margin-top:7px;}
  .acc-menu{flex-direction:row;flex-wrap:wrap;margin-top:0;padding:10px;gap:6px;}
  .acc-menu li a{padding:9px 13px;border:1px solid var(--gray2);background:var(--black3);}
  .acc-menu li a::before{display:none;}
  .acc-menu li a.active{border-color:rgba(230,0,18,.5);}
  .contact-layout{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .prods-section,.contact-layout{padding:60px 20px;}
  .page-hero,.product-detail,.cart-layout,.account-layout{padding:24px 20px;}
  .prods-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .prods-grid{grid-template-columns:1fr;}
}
#addUsedBtn{
  padding:10px 22px;background:var(--red);color:#fff;border:none;
  font-family:'Rajdhani',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  transition:all .3s;
}
#addUsedBtn:hover{
  background:#ff1a2e;
  box-shadow:0 6px 20px rgba(230,0,18,0.4);
  transform:translateY(-2px);
}
#addUsedBtn{
  padding:8px 20px;background:var(--red);color:#fff;border:none;
  font-family:'Tajawal',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  transition:background .2s;
}
#addUsedBtn:hover{background:var(--red-dark);}

/* Add used product form */
#usedFormOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9600;
  display:none;align-items:center;justify-content:center;
}
#usedFormOverlay.open{display:flex;}
#usedForm{
  background:#111217;border:1px solid rgba(230,0,18,0.2);
  width:min(520px,94vw);max-height:90vh;overflow-y:auto;padding:28px;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.uf-title{font-family:'Rajdhani',sans-serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:20px;}
.uf-title span{color:var(--red);}
.uf-field{margin-bottom:14px;}
.uf-label{font-size:11px;color:#555;letter-spacing:1px;font-family:'Courier New',monospace;margin-bottom:6px;display:block;}
.uf-input,.uf-select,.uf-textarea{
  width:100%;background:#0d0d10;border:1px solid rgba(255,255,255,0.07);
  padding:10px 14px;font-family:'Tajawal',sans-serif;font-size:14px;
  color:#e0e0e0;direction:rtl;box-sizing:border-box;
}
.uf-input:focus,.uf-select:focus,.uf-textarea:focus{
  outline:none;border-color:rgba(230,0,18,0.4);
}
.uf-select{appearance:none;}
.uf-textarea{min-height:80px;resize:vertical;}
.uf-row{display:flex;gap:12px;}
.uf-row .uf-field{flex:1;}
.uf-img-preview{
  width:100%;height:140px;background:#0d0d10;border:1px dashed rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden;
}
.uf-img-preview img{width:100%;height:100%;object-fit:contain;padding:8px;}
.uf-img-placeholder{text-align:center;color:#333;}
.uf-actions{display:flex;gap:12px;margin-top:20px;}


/* ══════════════════════════════════════
   GOOGLE SIGN-IN BUTTON
══════════════════════════════════════ */
.google-signin-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:12px 20px;
  background:#fff;color:#3c4043;
  border:1px solid #dadce0;
  font-family:'Tajawal',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
  margin-bottom:8px;
}
.google-signin-btn:hover{background:#f8f8f8;box-shadow:0 2px 12px rgba(0,0,0,0.15);}
.google-signin-btn svg{width:20px;height:20px;flex-shrink:0;}
.google-signin-btn .gsi-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transform:translateX(-100%);
  animation:gsiShimmer 2.5s ease-in-out infinite;
}
@keyframes gsiShimmer{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* Guest mode badge */
.guest-note{
  font-size:11px;color:#444;text-align:center;margin-top:12px;
  padding:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
}
.guest-note a{color:var(--red);cursor:pointer;}

/* Logged-in indicator */
#googleUserBadge{
  display:none;align-items:center;gap:8px;
  padding:6px 12px;background:rgba(66,133,244,0.1);
  border:1px solid rgba(66,133,244,0.2);margin-bottom:14px;
}
#googleUserBadge.visible{display:flex;}
#googleUserAvatar{
  width:28px;height:28px;border-radius:50%;background:#4285f4;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
}
#googleUserName{font-size:13px;color:#e0e0e0;}
.gsignout-btn{
  margin-right:auto;font-size:11px;color:#555;cursor:pointer;
  background:none;border:none;font-family:'Tajawal',sans-serif;
}
.gsignout-btn:hover{color:var(--red);}
/* The canvas inside each slide: internal 380×420, displayed 280×310 */
 canvas.mc-slide{
  width: 280px !important;
  height: 310px !important;
  display: block;
  image-rendering: auto;
}

/* Glow line at base of active scene */
.mc-active-glow{
  position:absolute;
  left:10%;right:10%;
  bottom:2px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(230,0,18,0.7),transparent);
  filter:blur(4px);
  pointer-events:none;
  z-index:10;
}


  @keyframes slideInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:none; } }












 50%{box-shadow:0 0 0 6px rgba(0,229,255,0)} }


/* ═══════════════════════════════════════════════════
   E-SPORT PAGE  v3
═══════════════════════════════════════════════════ */
#page-esport{background:#05050a}



/* ═══════════════════════════════════════════════════════════
   ⚡ DEALS PAGE — PREMIUM GAMING HERO
   ═══════════════════════════════════════════════════════════ */
.deals-hero{
  position:relative;
  min-height:420px;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(230,0,18,0.18) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 30%,rgba(230,0,18,0.08) 0%,transparent 45%),
    linear-gradient(180deg,#050507 0%,#0a0a0f 50%,#0d0508 100%);
  border-bottom:1px solid rgba(230,0,18,0.35);
  overflow:hidden;
  padding:70px 50px 60px;
  display:flex;flex-direction:column;justify-content:center;
}

/* Grid background */
.deals-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(230,0,18,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(230,0,18,0.04) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);
  animation:dealsGridShift 30s linear infinite;
  pointer-events:none;
}
@keyframes dealsGridShift{
  0%{background-position:0 0,0 0;}
  100%{background-position:40px 40px,40px 40px;}
}

/* Scanning horizontal lines */
.deals-scan-line{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(230,0,18,0.8) 50%,transparent 100%);
  pointer-events:none;opacity:0.5;
}
.deals-scan-1{top:0;animation:dealsScanDown 4s ease-in-out infinite;}
.deals-scan-2{bottom:0;animation:dealsScanUp 5s ease-in-out infinite 1s;}
@keyframes dealsScanDown{
  0%,100%{transform:translateY(0);opacity:0;}
  50%{transform:translateY(40px);opacity:0.6;}
}
@keyframes dealsScanUp{
  0%,100%{transform:translateY(0);opacity:0;}
  50%{transform:translateY(-40px);opacity:0.6;}
}

/* Glowing particles */
.deals-particle{
  position:absolute;width:2px;height:2px;background:var(--red);
  border-radius:50%;box-shadow:0 0 8px var(--red),0 0 16px rgba(230,0,18,0.5);
  pointer-events:none;
}
.deals-p1{top:25%;left:15%;animation:dealsPulse 3s ease-in-out infinite;}
.deals-p2{top:70%;left:80%;animation:dealsPulse 2.5s ease-in-out infinite 0.5s;}
.deals-p3{top:40%;left:90%;animation:dealsPulse 3.5s ease-in-out infinite 1s;}
.deals-p4{top:85%;left:25%;animation:dealsPulse 2.8s ease-in-out infinite 1.5s;}
@keyframes dealsPulse{
  0%,100%{opacity:0;transform:scale(0.5);}
  50%{opacity:1;transform:scale(1.5);}
}

/* Corner brackets */
.deals-bracket{position:absolute;width:30px;height:30px;pointer-events:none;}
.deals-br-tl{top:24px;right:24px;border-top:2px solid var(--red);border-right:2px solid var(--red);}
.deals-br-tr{top:24px;left:24px;border-top:2px solid var(--red);border-left:2px solid var(--red);}
.deals-br-bl{bottom:24px;right:24px;border-bottom:2px solid var(--red);border-right:2px solid var(--red);}
.deals-br-br{bottom:24px;left:24px;border-bottom:2px solid var(--red);border-left:2px solid var(--red);}

/* Content */
.deals-hero-content{
  position:relative;z-index:2;
  max-width:900px;margin:0 auto;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}

.deals-breadcrumb{
  font-size:12px;letter-spacing:2px;color:var(--gray);
  font-family:'JetBrains Mono','Courier New',monospace;
  display:flex;align-items:center;gap:8px;
}
.deals-breadcrumb a{color:var(--gray);cursor:pointer;text-decoration:none;transition:color .2s;}
.deals-breadcrumb a:hover{color:var(--red);}
.deals-crumb-arrow{color:var(--red);font-size:14px;}
.deals-crumb-current{color:var(--red);}

.deals-badge-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;}
.deals-live-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:rgba(230,0,18,0.12);
  border:1px solid rgba(230,0,18,0.4);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:2px;color:var(--red);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.deals-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red);
  animation:dealsLivePulse 1.5s ease-in-out infinite;
}
@keyframes dealsLivePulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.8);}
}
.deals-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.35);
}

/* TITLE with glitch effect */
.deals-title{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(48px,8vw,96px);
  font-weight:700;
  line-height:0.95;
  letter-spacing:-2px;
  margin:0;
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:baseline;
}
.deals-title-glitch{
  color:#fff;
  position:relative;
  display:inline-block;
  text-shadow:0 0 30px rgba(255,255,255,0.2);
}
.deals-title-glitch::before,
.deals-title-glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;width:100%;height:100%;
}
.deals-title-glitch::before{
  color:var(--red);
  animation:dealsGlitch1 4s infinite;
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  opacity:0.8;
}
.deals-title-glitch::after{
  color:#00e5ff;
  animation:dealsGlitch2 4s infinite;
  clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
  opacity:0.6;
}
@keyframes dealsGlitch1{
  0%,90%,100%{transform:translate(0);opacity:0;}
  92%{transform:translate(-2px,1px);opacity:0.8;}
  94%{transform:translate(2px,-1px);opacity:0.8;}
  96%{transform:translate(-1px,2px);opacity:0.8;}
}
@keyframes dealsGlitch2{
  0%,90%,100%{transform:translate(0);opacity:0;}
  93%{transform:translate(2px,-1px);opacity:0.6;}
  95%{transform:translate(-2px,1px);opacity:0.6;}
  97%{transform:translate(1px,-2px);opacity:0.6;}
}
.deals-title-accent{
  color:var(--red);
  position:relative;
  text-shadow:0 0 40px rgba(230,0,18,0.6),0 0 80px rgba(230,0,18,0.3);
  animation:dealsAccentGlow 2.5s ease-in-out infinite alternate;
}
@keyframes dealsAccentGlow{
  from{text-shadow:0 0 40px rgba(230,0,18,0.6),0 0 80px rgba(230,0,18,0.3);}
  to{text-shadow:0 0 60px rgba(230,0,18,0.9),0 0 120px rgba(230,0,18,0.5);}
}

/* Subtitle */
.deals-subtitle-wrap{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap;justify-content:center;}
.deals-line-accent{
  width:50px;height:2px;
  background:linear-gradient(90deg,transparent,var(--red));
}
.deals-subtitle{
  font-size:15px;color:#b0b0c0;margin:0;letter-spacing:0.5px;line-height:1.6;
}

/* Stats row */
.deals-stats-row{
  display:flex;align-items:center;gap:30px;
  margin-top:20px;padding:20px 36px;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:1px solid rgba(230,0,18,0.2);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  flex-wrap:wrap;justify-content:center;
}
.deals-stat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px;}
.deals-stat-value{
  font-family:'Rajdhani',sans-serif;
  font-size:32px;font-weight:700;color:#fff;
  line-height:1;
  text-shadow:0 2px 10px rgba(230,0,18,0.4);
}
.deals-stat-flame{font-family:inherit !important;font-size:30px !important;}
.deals-stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:2px;color:rgba(255,255,255,0.4);
}
.deals-stat-divider{
  width:1px;height:36px;
  background:linear-gradient(180deg,transparent,rgba(230,0,18,0.4),transparent);
}

/* Bottom accent bar */
.deals-hero-bottom-bar{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--red) 20%,var(--red) 80%,transparent 100%);
  box-shadow:0 0 20px rgba(230,0,18,0.6);
}

/* Products section */
.deals-products-wrap{
  padding:50px 40px 60px;
  background:
    radial-gradient(ellipse at top,rgba(230,0,18,0.04) 0%,transparent 50%),
    var(--black);
}
.deals-section-header{
  display:flex;align-items:center;gap:16px;margin-bottom:30px;
}
.deals-section-title{display:flex;align-items:center;gap:12px;}
.deals-section-num{
  font-family:'Rajdhani',sans-serif;
  font-size:42px;font-weight:700;color:var(--red);
  line-height:1;opacity:0.8;
  text-shadow:0 0 20px rgba(230,0,18,0.5);
}
.deals-section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:3px;color:#fff;font-weight:500;
}
.deals-section-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(230,0,18,0.4),transparent);
}

/* Responsive */
@media(max-width:900px){
  .deals-hero{padding:50px 24px 40px;min-height:340px;}
  .deals-bracket{width:20px;height:20px;}
  .deals-br-tl,.deals-br-tr{top:14px;}
  .deals-br-bl,.deals-br-br{bottom:14px;}
  .deals-br-tl,.deals-br-bl{right:14px;}
  .deals-br-tr,.deals-br-br{left:14px;}
  .deals-stats-row{gap:16px;padding:16px 20px;}
  .deals-stat-value{font-size:24px;}
  .deals-products-wrap{padding:30px 20px 40px;}
  .deals-section-num{font-size:32px;}
}
@media(max-width:600px){
  .deals-title{gap:10px;}
  .deals-stat-divider{display:none;}
  .deals-stats-row{flex-direction:row;}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / TABLET — Global UX improvements
   ═══════════════════════════════════════════════════════════════ */

/* Universal — kill blue tap highlight, prevent text selection during taps */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* Fix iOS Safari issues with viewport / 100vh */
html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Make all interactive elements have proper touch behavior */
button, a, [role="button"], [onclick] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* removes 300ms double-tap delay */
}

/* Allow text selection in inputs/textarea */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Tablet (601px-960px) — adjustments ── */
@media (min-width: 601px) and (max-width: 960px){
  /* Header padding tightening */
  .nav-bar { padding: 0 18px; }
  /* Larger tap zones in carousel nav */
  .prod-row-btn { width: 44px; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Comprehensive size adjustments
   Lower font-sizes & padding ONLY where desktop sizing is too big.
   We do NOT scale globally (would break tap targets and SVG icons).
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet portrait (601-768px) ── */
@media (max-width: 768px){

  /* Section paddings — tighter on small screens */
   .prods-section, .contact-layout{ padding: 50px 18px !important; }

  /* Page hero (sub-page banner) */
  .page-hero h1 { font-size: 32px !important; letter-spacing: 0; }

  /* Product detail — was way too big on phone */
  .pd-name { font-size: 26px !important; letter-spacing: -.5px; }
  .pd-price { font-size: 30px !important; }

  /* Featured icons — reduce decorative sizes */
  .feats-bar-title { font-size: 28px !important; letter-spacing: 3px; }
  .acc-avatar { width: 64px !important; height: 64px !important; font-size: 26px !important; }

  /* Cart item icons */
  .cart-item-img { width: 66px !important; height: 66px !important; font-size: 24px !important; }

  /* Reviews/testimonials */
  .rv-big-score { font-size: 38px !important; }

  /* Checkout */
  .ck-title { font-size: 26px !important; }
  .ck-success-title { font-size: 28px !important; }
}

/* ── Mobile portrait (≤600px) — keep going ── */
@media (max-width: 600px){

  /* Section titles — the "// أبرز المنتجات" + main heading */
  .sec-title { font-size: 22px !important; line-height: 1.3; letter-spacing: 1px; }

  /* Sub-page banners */
  .page-hero h1 { font-size: 26px !important; }

  /* Product detail */
  .pd-name { font-size: 22px !important; }
  .pd-price { font-size: 26px !important; }

  /* Section paddings — very tight */
   .prods-section, .contact-layout{ padding: 40px 14px !important; }

  /* Featured bar text */
  .feats-bar-title { font-size: 22px !important; letter-spacing: 2px; }

  /* Checkout */
  .ck-title { font-size: 22px !important; }
  .ck-success-title { font-size: 22px !important; }

  /* Reviews */
  .rv-big-score { font-size: 32px !important; }

  /* About / team avatars */
  .acc-avatar { width: 56px !important; height: 56px !important; font-size: 22px !important; }

  /* Page top padding (after navbar) */
  .page-hero, .product-detail,
  .cart-layout, .account-layout,
  .checkout-wrap { padding: 18px 14px !important; }

  /* Better announcement popup on mobile */
  .ann-popup {
    bottom: 16px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── Very small mobile (≤380px) — last polish for tiny phones ── */
@media (max-width: 380px){
  .sec-title { font-size: 19px !important; }
  .page-hero h1 { font-size: 22px !important; }
  .pd-name { font-size: 19px !important; }
  .pd-price { font-size: 22px !important; }
  .feats-bar-title { font-size: 18px !important; letter-spacing: 1px; }
  .cart-item-img { width: 60px !important; height: 60px !important; font-size: 22px !important; }
}

/* ── Disable hover animations on the prod-row track during drag — prevents stuck states ── */
/* ★ السابق: .prod-row-viewport.dragging .p-card { pointer-events: none }
   تم إزالته لأنه يسبب stuck state — لو الـ dragging class بقيت مفعلة (mouseup
   خارج النافذة، أو app switch على الجوال)، الأزرار تتعطل دائمياً.
   الحماية من click عرضي أثناء drag تتم في الـ JS suppressClick بدلاً منه. */

/* Prevent the carousel cards from being taller than parent on mobile */
/* (Note: existing rules at 960px and 560px already handle card sizing) */

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
  /* Prevent input/select zoom on iOS — must be at least 16px */
  @media (max-width: 768px){
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

/* Smooth momentum scrolling on iOS */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* Click-feedback for all primary action buttons */
.btn-primary:active,
.btn-outline:active {
  transform: scale(.97);
}

/* ════════════════════════════════════════════════════════════════
   ████  COMPREHENSIVE MOBILE OPTIMIZATIONS  ████
   كل ما يخص تحسين تجربة الجوال — ما يؤثر على الديسكتوب أبداً
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   1) PRODUCTS — منتجين بالصف فعلياً (carousel + grid + wishlist)
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* (A) صفحة المنتجات الكاملة */
  .prods-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* (B) قائمة المفضلة */
  .wishlist-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* (C) الصفحة الرئيسية — carousel: المنتج يأخذ نص الشاشة */
  .prod-row-track {
    gap: 8px !important;
  }
  .prod-row-track .p-card {
    flex: 0 0 calc(50% - 4px) !important;   /* منتجين بالصف */
    min-width: 0 !important;                 /* إلغاء الـ 200px */
    max-width: calc(50% - 4px) !important;
  }
}

/* شاشات أصغر (≤380px) */
@media (max-width: 380px) {
  .prods-grid, .wishlist-grid { gap: 6px !important; }
  .prod-row-track { gap: 6px !important; }
  .prod-row-track .p-card { flex: 0 0 calc(50% - 3px) !important; max-width: calc(50% - 3px) !important; }
}

/* ────────────────────────────────────────────────────────
   2) PURCHASE NOTIFICATION — أصغر بكتير على الجوال
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #purchaseNotif {
    bottom: 14px !important;
    width: 280px !important;        /* عرض ثابت محكم */
    max-width: calc(100vw - 24px) !important;
  }
  .pn-header {
    padding: 6px 11px !important;
    gap: 7px !important;
  }
  .pn-content {
    padding: 9px 11px !important;
    gap: 9px !important;
  }
  .pn-ic { width: 40px !important; height: 40px !important; }
  .pn-body { padding-left: 34px !important; }
  .pn-name {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
  .pn-product {
    font-size: 11px !important;
    margin-top: 2px !important;
    white-space: normal !important;
  }
  .pn-time {
    font-size: 8.5px !important;
    margin-top: 4px !important;
    padding: 1px 5px !important;
    letter-spacing: 1px !important;
  }
}

/* ────────────────────────────────────────────────────────
   3) ANNOUNCEMENT POPUP — انتقل للأعلى تحت الـ navbar مباشرة
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #announcementBar.ann-popup {
    /* انتقل للأعلى — تحت الـ navbar */
    top: 76px !important;          /* navbar 64px + 12px gap */
    bottom: auto !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none !important;
    /* عكس animation — يدخل من فوق بدل من تحت */
    animation: annSlideDownIn .5s cubic-bezier(.16,1,.3,1) forwards !important;
  }

  /* عكس animation الإغلاق إذا فيه */
  #announcementBar.ann-popup.ann-popup-hide {
    animation: annSlideUpOut .35s cubic-bezier(.16,1,.3,1) forwards !important;
  }
}
@keyframes annSlideDownIn {
  0% { transform: translateY(-120%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes annSlideUpOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120%); opacity: 0; }
}

/* ────────────────────────────────────────────────────────
   7) NAVBAR — ضغط العناصر على الجوال
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-points { display: none !important; }
}

/* ────────────────────────────────────────────────────────
   8) ARABIC TEXT FIXES — معالجة النصوص المتقطعة
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* للنصوص العربية الطويلة — لا تقطع كلمات */
  .pd-name,
  .sec-title,
  .sec-tag,
  .ck-title,
  .acc-section-title,
  .ann-popup-title,
  .ann-popup-text {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* الخطوط الإنجليزية المختلطة بالعربي */
  .pd-name, .sec-title {
    line-height: 1.3 !important;
  }
}

/* ────────────────────────────────────────────────────────
   11) PRODUCT DETAIL PAGE — على الجوال
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .product-detail { grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px 14px !important; }
  .pd-name { font-size: 20px !important; line-height: 1.3 !important; }
  .pd-pricing .pd-price { font-size: 26px !important; }
  .pd-actions { gap: 8px !important; flex-wrap: wrap !important; }
  .pd-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pd-stat-bg { padding: 10px !important; }
  .pd-stat-value { font-size: 14px !important; word-break: normal !important; }
  .pd-stat-label { font-size: 9px !important; word-break: normal !important; }
}

/* ────────────────────────────────────────────────────────
   12) NEWSLETTER + REVIEWS + CHECKOUT — على الجوال
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .checkout-wrap { padding: 18px 14px !important; }
  .ck-step { padding: 18px !important; }
  .ck-steps-bar { gap: 0 !important; padding: 0 !important; margin-bottom: 30px !important; }
  .ck-step-dot { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .ck-step-label { font-size: 9.5px !important; letter-spacing: .5px !important; word-break: normal !important; white-space: nowrap !important; }
}

/* ────────────────────────────────────────────────────────
   18) ★★★ ARABIC TEXT — حل شامل للحروف المتقطعة ★★★
   السبب: letter-spacing على نص عربي يكسر اتصال الحروف (ligatures)
   و text-transform:uppercase + Rajdhani font لا تدعم العربي بشكل صحيح
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── إلغاء letter-spacing على كل العناوين والنصوص العربية ── */
  .sec-title,
  .sec-title span,
  .prod-row-title,
  .ck-title,
  .ck-success-title,
  .pd-name,
  .acc-section-title,
  .acc-name,
  .acc-email,
  .ck-label,
  .ck-step-label,
  .pd-trust-title,
  .pd-trust-sub,
  .pd-stat-label,
  .pd-stat-value,
  .pd-recs-title,
  .pd-recs-title span,
  .rv2-policy-notice,
  .rv2-summary-title,
  .deals-title,
  .pn-name,
  .pn-product,
  .ann-popup-title,
  .ann-popup-text,
  .ck-subtitle,
  .feats-bar-title{
    letter-spacing: 0 !important;
    text-transform: none !important;        /* uppercase يتأثر سلباً مع العربي */
    font-family: 'Tajawal', 'Rajdhani', sans-serif !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ── الوسوم الصغيرة (// FEATURED, // ABOUT US ...) — تبقى لاتينية صغيرة ── */
  .sec-tag,
  .ck-subtitle,
  .deals-section-title{
    letter-spacing: 1.2px !important;       /* قيمة آمنة — ما تكسر العربي ولا تشوّه الإنجليزي */
    font-family: 'Rajdhani', 'Tajawal', sans-serif !important;
  }

  /* ── إصلاح gradient text على .sec-title span — على الجوال أحياناً تطلع شفافة ── */
  .sec-title span,
  .pd-recs-title span {
    /* gradient أحياناً ما يطلع على بعض الموبايلات — fallback color أحمر صريح */
    background: linear-gradient(135deg, #ff8a8a 0%, #ff3a4d 35%, #e60012 70%, #ff5e6e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--red) !important;            /* fallback if clip fails */
    /* drop-shadow أخف على الجوال */
    filter: drop-shadow(0 0 12px rgba(230,0,18,.4)) !important;
  }

  /* ── العناوين الكبيرة في الصفحة الرئيسية — line-height مناسب للعربي ── */
  .sec-title { line-height: 1.25 !important; }
  .pd-name { line-height: 1.4 !important; }

  /* ── fix: العربي يحتاج font-feature-settings للتركيب الصحيح ── */
  body, .pd-name, .sec-title{
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    -webkit-font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  }
}

/* ────────────────────────────────────────────────────────
   19) HEADERS / TAGS — تصغير المسافات بين الكلمات على الموبايل
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sec-title { font-size: clamp(22px, 7vw, 32px) !important; }
  .deals-title{ font-size: clamp(28px, 9vw, 42px) !important; }

  .sec-tag{
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 12px !important;
  }

  /* "أبرز المنتجات" / "العروض" — في صفوف المنتجات */
  .prod-row-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}

/* ────────────────────────────────────────────────────────
   20) "عرض الكل" — إصلاح كلمة عرض الكل المتقطعة
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .view-all-link,
  .blog-card-arrow {
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-family: 'Tajawal', 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    word-break: normal !important;
  }
  .view-all-link {
    padding: 7px 14px !important;
    gap: 6px !important;
  }
}

/* ────────────────────────────────────────────────────────
   23) ★★★ TOUCH ACTION — منع تداخل swipe مع زر المفضلة ★★★
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* الأزرار التفاعلية: tap/click فقط، لا swipe gestures
     يخبر الـ browser إن الزر ما يدخل في الـ swipe behavior للـ track */
    .prod-row-track button,
  .prod-row-track a {
    touch-action: manipulation !important;
  }

  /* الـ track نفسه — pan-y فقط:
     - السماح للمتصفح بـ vertical scroll (الصفحة تمشي عمودياً)
     - لكن horizontal swipes تذهب لـ JS handler (الـ drag الـ manual)
     ⚠️ كان "pan-y pan-x" — pan-x كان يخبر المتصفح يأخذ الـ horizontal events
        ويمنع الـ JS من handle الـ drag manual ★ */
  .prod-row-track,
  .prod-row-viewport {
    touch-action: pan-y !important;
  }
}

/* ────────────────────────────────────────────────────────
   22) FEATURES BAR (المميزات) — 2×2 grid على الجوال
   ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* صفحة المميزات: العنوان "SUPER GAMES" أصغر */
  .feats-bar-title {
    font-size: 26px !important;
    letter-spacing: 3px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   🕋 EID AL-ADHA DECORATIONS — زينة عيد الأضحى (مؤقتة، تُفعّل من لوحة التحكم)
   تنسجم مع الـ gaming dark theme — ذهبي + أخضر إسلامي على الأسود
   ════════════════════════════════════════════════════════════════ */
:root {
  --eid-gold:   #d4af37;
  --eid-gold-2: #f4d77a;
  --eid-green:  #0f7a4d;
  --eid-green-2:#15a368;
}

/* ── شريط التهنئة العلوي ── */
#eidBar {
  position: relative;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 20px;
  background: linear-gradient(100deg, #0a0a0e 0%, #14110a 25%, #1a1508 50%, #14110a 75%, #0a0a0e 100%);
  border-bottom: 1px solid rgba(212,175,55,.35);
  overflow: hidden;
  font-family: 'Tajawal', sans-serif;
}
body.eid-mode #eidBar { display: flex; }
/* خط ذهبي متوهج أسفل الشريط */
#eidBar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--eid-gold), var(--eid-gold-2), var(--eid-gold), transparent);
  opacity: .8;
}
/* وميض ذهبي يمر عبر الشريط — transform بدل left (لا reflow) */
#eidBar .eid-shimmer {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(244,215,122,.13), transparent);
  animation: eidShimmer 5.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes eidShimmer {
  0%        { transform: translateX(-120vw); }
  55%, 100% { transform: translateX(120vw); }
}
#eidBar .eid-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  background: linear-gradient(90deg, var(--eid-gold), var(--eid-gold-2), var(--eid-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
#eidBar .eid-icon {
  font-size: 17px;
  text-shadow: 0 0 6px rgba(212,175,55,.55);
  animation: eidFloat 3.5s ease-in-out infinite;
}
#eidBar .eid-icon:nth-child(1) { animation-delay: 0s; }
#eidBar .eid-icon:last-child   { animation-delay: 1.2s; }
@keyframes eidFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-4deg); }
}
@media (max-width: 600px) {
  #eidBar { padding: 7px 12px; gap: 8px; }
  #eidBar .eid-text { font-size: 12px; white-space: normal; text-align: center; }
  #eidBar .eid-icon { font-size: 14px; }
}

/* ── بانر العيد الكبير (hero) ── */
#eidHero {
  display: none;
  position: relative;
  margin: 0 auto 28px;
  max-width: 1280px;
  width: calc(100% - 48px);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 18% 50%, rgba(15,122,77,.28), transparent 70%),
    radial-gradient(ellipse 55% 90% at 85% 40%, rgba(212,175,55,.22), transparent 70%),
    linear-gradient(135deg, #0c0c12 0%, #12110d 50%, #0c0c12 100%);
  border: 1px solid rgba(212,175,55,.3);
  box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(244,215,122,.12);
}
body.eid-mode #eidHero { display: block; }
/* زخرفة هندسية إسلامية في الخلفية */
#eidHero .eid-pattern {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(212,175,55,.5) 18px 19px),
    repeating-linear-gradient(-45deg, transparent 0 18px, rgba(212,175,55,.5) 18px 19px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
#eidHero .eid-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 32px 44px;
}
#eidHero .eid-hero-left { flex: 1; min-width: 0; }
#eidHero .eid-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(15,122,77,.18);
  border: 1px solid rgba(21,163,104,.5);
  color: var(--eid-green-2);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Tajawal', sans-serif;
  margin-bottom: 14px;
}
#eidHero .eid-hero-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
  font-family: 'Tajawal', sans-serif;
  background: linear-gradient(95deg, #fff 0%, var(--eid-gold-2) 55%, var(--eid-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#eidHero .eid-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  margin: 0 0 20px;
  font-family: 'Tajawal', sans-serif;
  max-width: 480px;
}
#eidHero .eid-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--eid-gold) 0%, var(--eid-gold-2) 50%, var(--eid-gold) 100%);
  color: #1a1408;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Tajawal', sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(212,175,55,.32);
}
#eidHero .eid-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212,175,55,.5);
}
/* الجانب الأيمن — أيقونة كبيرة */
#eidHero .eid-hero-art {
  flex-shrink: 0;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#eidHero .eid-hero-art .eid-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.35), transparent 65%);
  animation: eidPulse 4s ease-in-out infinite;
}
@keyframes eidPulse {
  0%, 100% { transform: scale(.9); opacity: .55; }
  50%      { transform: scale(1.12); opacity: .9; }
}
#eidHero .eid-hero-art .eid-emoji {
  font-size: 96px;
  position: relative;
  z-index: 2;
  text-shadow: 0 6px 14px rgba(0,0,0,.55);
  animation: eidFloat 4.5s ease-in-out infinite;
}
@media (max-width: 760px) {
  #eidHero { width: calc(100% - 28px); border-radius: 14px; }
  #eidHero .eid-hero-inner { flex-direction: column; text-align: center; padding: 26px 22px; gap: 18px; }
  #eidHero .eid-hero-title { font-size: 25px; }
  #eidHero .eid-hero-sub { font-size: 13px; }
  #eidHero .eid-hero-art { width: 120px; height: 120px; }
  #eidHero .eid-hero-art .eid-emoji { font-size: 68px; }
}

/* ── لمسة ذهبية على الـ navbar عند تفعيل وضع العيد ── */
body.eid-mode .navbar,
body.eid-mode nav.navbar {
  border-bottom: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 1px 0 rgba(212,175,55,.12);
}

/* ── هلال مزخرف صغير يطفو في زاوية البانر ── */
#eidHero .eid-crescent {
  position: absolute;
  top: 16px;
  left: 22px;
  font-size: 26px;
  opacity: .55;
  text-shadow: 0 0 8px rgba(212,175,55,.6);
  animation: eidFloat 5s ease-in-out infinite;
  z-index: 3;
}
#eidHero .eid-stars {
  position: absolute;
  top: 18px;
  right: 30px;
  font-size: 13px;
  letter-spacing: 8px;
  color: var(--eid-gold);
  opacity: .4;
  z-index: 3;
}
/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  #eidBar .eid-shimmer,
  #eidBar .eid-icon,
  #eidHero .eid-glow,
  #eidHero .eid-emoji,
  #eidHero .eid-crescent { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   🕋 EID — زينة شاملة تحيط الموقع كامل (إطارات جانبية + معلّقات)
   ════════════════════════════════════════════════════════════════ */

/* ── إطار ذهبي مضيء يحيط نافذة المتصفح كاملة ── */
#eidFrame {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}
body.eid-mode #eidFrame { display: block; }
#eidFrame .eid-edge {
  position: absolute;
  background: linear-gradient(var(--ang, 90deg),
    transparent, rgba(212,175,55,.15) 15%, rgba(244,215,122,.55) 50%,
    rgba(212,175,55,.15) 85%, transparent);
}
#eidFrame .eid-edge.top    { top: 0;    left: 0; right: 0;  height: 3px; --ang: 90deg; }
#eidFrame .eid-edge.bottom { bottom: 0; left: 0; right: 0;  height: 3px; --ang: 90deg; }
#eidFrame .eid-edge.left   { top: 0; bottom: 0; left: 0;    width: 3px;  --ang: 180deg; }
#eidFrame .eid-edge.right  { top: 0; bottom: 0; right: 0;   width: 3px;  --ang: 180deg; }
/* توهج زاوية */
#eidFrame .eid-corner {
  position: absolute;
  width: 90px; height: 90px;
  background: radial-gradient(circle at var(--cx) var(--cy), rgba(212,175,55,.4), transparent 70%);
}
#eidFrame .eid-corner.tl { top: 0; left: 0;     --cx: 0; --cy: 0; }
#eidFrame .eid-corner.tr { top: 0; right: 0;    --cx: 100%; --cy: 0; }
#eidFrame .eid-corner.bl { bottom: 0; left: 0;  --cx: 0; --cy: 100%; }
#eidFrame .eid-corner.br { bottom: 0; right: 0; --cx: 100%; --cy: 100%; }

/* ── معلّقات تتدلّى من أعلى الموقع (فوانيس، أهلّة، نجوم) ── */
#eidHangings {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  z-index: 9001;
  pointer-events: none;
}
body.eid-mode #eidHangings { display: block; }
.eid-hang {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: eidSway 4s ease-in-out infinite;
  will-change: transform;
}
/* الخيط */
.eid-hang .eid-string {
  width: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,.7), rgba(212,175,55,.15));
}
/* الزينة المعلّقة نفسها */
.eid-hang .eid-charm {
  font-size: 26px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  margin-top: -2px;
}
/* مواضع وأطوال متفاوتة لكل معلّقة (طبيعية) */
.eid-hang:nth-child(1)  { left: 6%;   animation-delay: -0.3s; animation-duration: 4.2s; }
.eid-hang:nth-child(1)  .eid-string { height: 46px; }
.eid-hang:nth-child(2)  { left: 17%;  animation-delay: -1.6s; animation-duration: 5.1s; }
.eid-hang:nth-child(2)  .eid-string { height: 78px; }
.eid-hang:nth-child(3)  { left: 28%;  animation-delay: -0.9s; animation-duration: 3.8s; }
.eid-hang:nth-child(3)  .eid-string { height: 34px; }
.eid-hang:nth-child(4)  { left: 39%;  animation-delay: -2.4s; animation-duration: 4.6s; }
.eid-hang:nth-child(4)  .eid-string { height: 62px; }
.eid-hang:nth-child(5)  { left: 50%;  animation-delay: -0.6s; animation-duration: 5.4s; }
.eid-hang:nth-child(5)  .eid-string { height: 50px; }
.eid-hang:nth-child(6)  { left: 61%;  animation-delay: -1.9s; animation-duration: 4.0s; }
.eid-hang:nth-child(6)  .eid-string { height: 72px; }
.eid-hang:nth-child(7)  { left: 72%;  animation-delay: -1.1s; animation-duration: 4.8s; }
.eid-hang:nth-child(7)  .eid-string { height: 40px; }
.eid-hang:nth-child(8)  { left: 83%;  animation-delay: -2.7s; animation-duration: 5.2s; }
.eid-hang:nth-child(8)  .eid-string { height: 66px; }
.eid-hang:nth-child(9)  { left: 94%;  animation-delay: -0.4s; animation-duration: 4.4s; }
.eid-hang:nth-child(9)  .eid-string { height: 52px; }
@keyframes eidSway {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(4.5deg); }
}

/* ── زينة جانبية أنيقة: سلسلة فوانيس معلّقة على كل جانب ── */
.eidSideStrip {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 8999;
  pointer-events: none;
}
body.eid-mode .eidSideStrip { display: block; }
.eidSideStrip.left  { left: 0; }
.eidSideStrip.right { right: 0; }
/* خيط ذهبي رفيع ينساب عمودياً */
.eidSideStrip .eid-vine {
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent,
    rgba(212,175,55,.15) 4%,
    rgba(212,175,55,.55) 50%,
    rgba(212,175,55,.15) 96%,
    transparent);
}
.eidSideStrip.left  .eid-vine { left: 20px; }
.eidSideStrip.right .eid-vine { right: 20px; }
/* الفوانيس المعلّقة على الخيط */
.eidSideStrip .eid-lantern {
  position: absolute;
  font-size: 24px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 12px rgba(244,215,122,.4);
  transform-origin: top center;
  animation: eidLanternSway 5s ease-in-out infinite;
  will-change: transform;
}
.eidSideStrip.left  .eid-lantern { left: 9px; }
.eidSideStrip.right .eid-lantern { right: 9px; }
/* توزيع الفوانيس عمودياً بمسافات متساوية + إيقاعات مختلفة */
.eidSideStrip .eid-lantern:nth-child(2) { top: 14%; animation-delay: -0.5s; animation-duration: 5.4s; }
.eidSideStrip .eid-lantern:nth-child(3) { top: 34%; animation-delay: -2.1s; animation-duration: 4.7s; }
.eidSideStrip .eid-lantern:nth-child(4) { top: 54%; animation-delay: -1.3s; animation-duration: 5.8s; }
.eidSideStrip .eid-lantern:nth-child(5) { top: 74%; animation-delay: -3.0s; animation-duration: 5.1s; }
.eidSideStrip .eid-lantern:nth-child(6) { top: 90%; animation-delay: -0.9s; animation-duration: 4.9s; }
@keyframes eidLanternSway {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* ── نجوم/فوانيس تطفو بهدوء في خلفية الموقع ── */
#eidFloaters {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
body.eid-mode #eidFloaters { display: block; }
.eid-floater {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  text-shadow: 0 0 5px rgba(212,175,55,.4);
  animation: eidRise linear infinite;
  will-change: transform;
}
@keyframes eidRise {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(.7); opacity: 0; }
  10%  { opacity: .5; }
  90%  { opacity: .5; }
  100% { transform: translate3d(0,-105vh,0) rotate(140deg) scale(1); opacity: 0; }
}
.eid-floater:nth-child(1)  { left: 8%;  bottom: -30px; animation-duration: 19s; animation-delay: 0s;   }
.eid-floater:nth-child(2)  { left: 22%; bottom: -30px; animation-duration: 24s; animation-delay: -6s;  }
.eid-floater:nth-child(3)  { left: 37%; bottom: -30px; animation-duration: 21s; animation-delay: -12s; }
.eid-floater:nth-child(4)  { left: 52%; bottom: -30px; animation-duration: 27s; animation-delay: -3s;  }
.eid-floater:nth-child(5)  { left: 66%; bottom: -30px; animation-duration: 22s; animation-delay: -15s; }
.eid-floater:nth-child(6)  { left: 79%; bottom: -30px; animation-duration: 25s; animation-delay: -9s;  }
.eid-floater:nth-child(7)  { left: 91%; bottom: -30px; animation-duration: 20s; animation-delay: -18s; }

/* ── على الموبايل: نخفّف الزينة الثقيلة بشكل كبير ── */
@media (max-width: 760px) {
  .eidSideStrip { display: none !important; }                  /* الفوانيس الجانبية تختفي */
  #eidHangings .eid-hang:nth-child(even) { display: none; }     /* نصف المعلّقات */
  .eid-hang .eid-charm { font-size: 20px; }
  #eidFloaters { display: none !important; }                    /* العناصر الطافية تختفي تماماً */
  #eidBar .eid-shimmer { display: none; }                       /* وميض الشريط يختفي */
}
/* ── شاشات متوسطة: نخفّف العناصر الطافية ── */
@media (max-width: 1100px) {
  #eidFloaters .eid-floater:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #eidBar .eid-shimmer,
  #eidBar .eid-icon,
  #eidHero .eid-glow,
  #eidHero .eid-emoji,
  #eidHero .eid-crescent,
  .eid-hang,
  .eidSideStrip .eid-lantern { animation: none !important; will-change: auto; }
  #eidFloaters { display: none !important; }
}
/* ★ أداء: إيقاف حركة الزينة عند إخفاء التبويب (يتحكم به JS عبر visibilitychange) */
body.eid-mode #eidBar .eid-shimmer,
body.eid-mode #eidBar .eid-icon,
body.eid-mode #eidHero .eid-glow,
body.eid-mode #eidHero .eid-emoji,
body.eid-mode #eidHero .eid-crescent,
body.eid-mode .eid-hang,
body.eid-mode .eidSideStrip .eid-lantern,
body.eid-mode .eid-floater {
  animation-play-state: var(--eid-anim-play, running);
}
@media(max-width:480px){
  .sec-orn i{ width:38px !important; }
}
.hbf-fade{ transition:opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1); }

/* ═══ شاين متحرّك + كيكر متمركز + زخرفة (كما في المعاينة) ═══ */
@keyframes tShine{ 0%{ background-position:200% center; } 100%{ background-position:-200% center; } }

/* الزخرفة المشتركة (◆ بين خطّين متلاشيين) */
.sec-orn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:13px; }
.sec-orn i{ width:56px; height:1px; background:linear-gradient(90deg,transparent,rgba(230,0,18,.7),transparent); display:block; }
.sec-orn s{ width:7px; height:7px; background:var(--red); transform:rotate(45deg); box-shadow:0 0 12px rgba(230,0,18,.9); text-decoration:none; display:block; }

/* ════════════════════════════════════════════════════════════════
   ★ تحسين أداء ومظهر الجوال (احترافي — يخفّف الثقل ويحسّن اللمس)
   ════════════════════════════════════════════════════════════════ */

/* تحسين عام للأداء (كل الأجهزة) */
* { -webkit-tap-highlight-color: transparent; }      /* لا وميض أزرق عند اللمس */

/* ★ عزل GPU: العناصر المتحرّكة تُرفع لطبقة رسوميات مستقلّة فلا تُعيد رسم الصفحة كلها
   (transform/opacity على الـGPU = سلاسة 120fps بلا استهلاك معالج) */
 [class*="fadeUp"], [class*="fade-up"], .drawer, .modal, .toast, .pd-gallery {
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* ★ تمرير سلس على مستوى المتصفّح (momentum scrolling على iOS) */
html { -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  /* نمنع تظليل النص العرضي أثناء اللمس السريع (يقلّل عمل المتصفّح ويحسّن الإحساس) */
    .deals-hero { -webkit-user-select: none; user-select: none; }
}

@media (max-width: 900px) {
  /* 1) backdrop-filter أثقل ما يُبطئ الجوال — نلغيه ونعوّض بخلفية معتمة */
  .navbar, .drawer, .modal, .modal-overlay, .glass,
  [class*="drawer"], [class*="modal"], [class*="overlay"], [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 2) نوقف تحديداً الأنيميشنات "المكلفة" (تُحرّك box-shadow/filter/top/left → إعادة رسم وتخطيط كل إطار)
        هذه وحدها سبب تقطيع الإطارات. نُبقي الـ150 أنيميشن الرخيص (transform/opacity) فتبقى الانتقالات جميلة. */
   .hpc-badge, .pd-scan-line, .pd-hero-bar-scan,
  .pd-discount, .pd-trust-scan, .ck-step-dot.active,
  .wish-fab[data-active="true"], #searchContainer.active #searchScanLine {
    animation: none !important;
    box-shadow: none !important;   /* نُلغي التوهّج الثابت المتبقّي أيضاً لتخفيف الرسم */
  }

  /* 3) نبسّط الظلال المتوهّجة الثقيلة (335 ظلّ → أخفّ بكثير على الجوال) */
  * { will-change: auto !important; }                 /* نحرّر ذاكرة الـGPU */

  /* 4) لمسات احترافية للمس على الجوال */
  button, .btn, a[onclick], [role="button"] {
    -webkit-user-select: none; user-select: none;
    touch-action: manipulation;                       /* استجابة لمس أسرع، لا تأخير 300ms */
  }

  /* 5) نضمن ألا يتجاوز أي عنصر عرض الشاشة (clip يمنع التمرير الأفقي دون كسر sticky) */
  body { overflow-x: clip; max-width: 100vw; }
  img, video, iframe { max-width: 100%; }

  /* 6) ★ تخفيف الصفحة الرئيسية: إخفاء الزخارف البحتة تماماً (لا رسم لها أصلاً)
        هذه عناصر تجميلية فقط (جزيئات، خطوط مسح، أقواس زوايا، توهّج) — إخفاؤها يوفّر
        رسم عشرات العناصر المتحرّكة دون أي خسارة وظيفية. */
  .deals-particle, .deals-scan-line,
  .deals-bracket, .bd-cover-corner,
  .blog-card-corner, .ann-popup-corner,
  .pd-scan-line, .pd-hero-bar-scan, .pd-trust-scan, .dg-cat-scan{
    display: none !important;
  }

  /* 9) ★ تخطّي رسم الأقسام خارج الشاشة (أقوى تحسين لسلاسة التمرير على الصفحات الطويلة)
        المتصفّح لا يرسم/يحسب القسم حتى يقترب من الشاشة. contain-intrinsic-size يمنع قفز التمرير. */
  .prods-section{
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;   /* ارتفاع تقديري يمنع القفز */
  }

  /* 10) الفلاتر (drop-shadow/brightness) من أغلى ما يُرسم — نُلغيها على الزخارف في الجوال
        (نُبقي الصور كما هي؛ نُلغي فقط الفلاتر التجميلية على العناصر الزخرفية) */
    .deals-hero,
  [class*="glow"], [class*="Glow"], [class*="shine"] {
    filter: none !important;
  }
}

/* تحسينات دقيقة للجوال الصغير (الهواتف) */
@media (max-width: 520px) {
  /* تقليل شعاع الـblur الثقيل → أخفّ على GPU الهاتف */
  [style*="blur("] { filter: blur(6px) !important; }

  /* أهداف لمس أكبر وأسهل (≥44px حسب معايير Apple/Google) */
   .drawer button, .btn, button.icon-btn { min-height: 42px; }
}

/* احترام تفضيل تقليل الحركة (أجهزة ضعيفة / حساسية حركة) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* #sg-perf-anim */

/* ★ أداء: لا حركات لانهائية داخل عناصر غير ظاهرة (كانت تُبقي الخيط الرئيسي يرسم 60 إطاراً/ث بلا أي أثر مرئي) */
#purchaseNotif:not(.show) *,#purchaseNotif:not(.show)::before,
#sgProductLabel:not(.show) *{animation:none!important}

/* #sg-pv2 */

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT PAGE v2  (pv-*)
   لغة التصميم: «دقّة تكتيكية» — أسود عميق، أحمر العلامة كإشارة فقط،
   زوايا مقطوعة كتوقيع، وأرقام Rajdhani. لا زخارف تتحرّك بلا سبب.
   ═══════════════════════════════════════════════════════════════════ */
#page-product-detail{
  --pv-line:rgba(255,255,255,.085);
  --pv-line-2:rgba(255,255,255,.16);
  --pv-mute:#9c9cab;
  --pv-text:#ececf2;
  --pv-surface:#0c0c11;
  --pv-surface-2:#12121a;
  --pv-red:#e60012;
  --pv-red-hi:#ff3b47;
  --pv-ok:#35d07f;
  --pv-warn:#ffb020;
  --pv-num:'Rajdhani','Tajawal',sans-serif;
}
.pv{max-width:1400px;margin:0 auto;padding:0 40px 72px;}
.pv *{box-sizing:border-box;}

/* ── Breadcrumb ── */
.pv-bc{display:flex;align-items:center;gap:10px;padding:22px 0 24px;font-size:13px;color:var(--pv-mute);min-width:0;}
.pv-bc a{color:var(--pv-mute);text-decoration:none;white-space:nowrap;transition:color .2s;}
.pv-bc a:hover{color:#fff;}
.pv-bc a:focus-visible{outline:2px solid var(--pv-red-hi);outline-offset:3px;}
.pv-bc i{font-style:normal;opacity:.4;}
#page-product-detail .pv-bc .pd-bc-current{
  all:unset;color:var(--pv-text);font-weight:500;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Layout ── */
.pv-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:start;}
.pv-gallery{position:sticky;top:92px;display:flex;flex-direction:row-reverse;gap:14px;align-items:flex-start;min-width:0;}
.pv-info{min-width:0;}

/* ── Gallery stage ── */
.pv-stage-wrap{position:relative;flex:1 1 0;min-width:0;}
.pv-stage-wrap::before,.pv-stage-wrap::after{
  content:'';position:absolute;width:22px;height:22px;z-index:4;pointer-events:none;
  border:2px solid var(--pv-red);
}
.pv-stage-wrap::before{top:-1px;inset-inline-start:-1px;border-bottom:0;border-inline-end:0;}
.pv-stage-wrap::after{bottom:-1px;inset-inline-end:-1px;border-top:0;border-inline-start:0;}
.pv-stage{
  position:relative;width:100%;aspect-ratio:1/1;max-height:calc(100vh - 140px);min-height:280px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 105%, rgba(230,0,18,.13), transparent 62%),
    linear-gradient(180deg,#101016,#0a0a0e);
  border:1px solid var(--pv-line);
  transition:opacity .2s ease;
  touch-action:pan-y;
}
.pv-stage.has-img{cursor:zoom-in;}
#page-product-detail .pv-stage > img{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none;max-height:none;object-fit:contain;display:block;}
.pv-stage.is-out > img{filter:grayscale(.55) brightness(.7);}
.pv-stage:empty{background-size:auto,auto;animation:pvShimmer 1.4s ease-in-out infinite alternate;}
@keyframes pvShimmer{from{opacity:.65}to{opacity:1}}

.pv-stage-off{
  position:absolute;top:14px;inset-inline-start:14px;z-index:5;pointer-events:none;
  background:var(--pv-red);color:#fff;font-family:var(--pv-num);font-weight:700;font-size:15px;letter-spacing:.5px;
  padding:4px 12px;direction:ltr;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.pv-stage-count{
  position:absolute;bottom:14px;inset-inline-start:14px;z-index:5;pointer-events:none;
  font-family:var(--pv-num);font-size:13px;font-weight:600;letter-spacing:1px;color:#fff;direction:ltr;
  background:rgba(6,6,8,.72);border:1px solid var(--pv-line-2);padding:3px 10px;
}
.pv-stage-off[hidden],.pv-stage-count[hidden],.pv-nav[hidden]{display:none;}
.pv-nav{
  position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(6,6,8,.72);border:1px solid var(--pv-line-2);color:#fff;
  opacity:0;transition:opacity .2s,background .2s,border-color .2s;
}
.pv-nav svg{width:20px;height:20px;}
.pv-nav--prev{inset-inline-start:12px;}
.pv-nav--next{inset-inline-end:12px;}
.pv-stage-wrap:hover .pv-nav,.pv-nav:focus-visible{opacity:1;}
.pv-nav:hover{background:var(--pv-red);border-color:var(--pv-red);}
.pv-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ── Thumbnails (vertical rail on desktop) ── */
#page-product-detail .pd-thumbs{
  flex:0 0 78px;flex-direction:column;gap:10px;padding:0;margin:0;
  max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:none;scroll-snap-type:none;
}
#page-product-detail .pd-thumbs::-webkit-scrollbar{display:none;}
#page-product-detail .pd-thumb{
  position:relative;flex:0 0 auto;width:78px;height:78px;margin:0;padding:0;overflow:hidden;cursor:pointer;
  background:var(--pv-surface);border:1px solid var(--pv-line);box-shadow:none;transform:none;
  opacity:.55;transition:opacity .2s,border-color .2s;clip-path:none;
}
#page-product-detail .pd-thumb img{
  position:absolute;inset:0;top:0;left:0;transform:none;width:100% !important;height:100% !important;max-width:none;max-height:none;object-fit:cover;
}
#page-product-detail .pd-thumb:hover{opacity:1;border-color:var(--pv-line-2);transform:none;}
#page-product-detail .pd-thumb.active{opacity:1;border-color:var(--pv-red);box-shadow:inset 0 0 0 1px var(--pv-red);}
#page-product-detail .pd-thumb.active::after{display:none;}

/* ── Meta / title ── */
.pv-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;min-height:26px;}
.pv-brand{font-family:var(--pv-num);font-size:14px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--pv-red-hi);}
.pv-brand:empty{display:none;}
.pv-chip{
  font-size:12px;line-height:1;color:#c9c9d6;border:1px solid var(--pv-line-2);padding:6px 10px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.pv-chip:hover{border-color:var(--pv-red);color:#fff;background:rgba(230,0,18,.08);}
#page-product-detail h1.pd-name{
  font-family:var(--pv-num);font-size:clamp(28px,2.6vw,40px) !important;font-weight:700;line-height:1.15;
  letter-spacing:-.2px !important;color:#fff;margin:0 0 14px;padding:0;text-wrap:balance;overflow-wrap:anywhere;
}
#page-product-detail h1.pd-name::after{display:none;}

.pv-sub{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:22px;margin-bottom:20px;}
#page-product-detail .pv-rating{margin:0;}
.pv-stock-slot:empty{display:none;}
.pv-stock{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;}
.pv-stock i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,255,255,.06);flex:0 0 8px;}
.pv-stock.is-in{color:var(--pv-ok);}
.pv-stock.is-low{color:var(--pv-warn);}
.pv-stock.is-out{color:var(--pv-red-hi);}

/* ── Price ── */
.pv-price{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 0 22px;margin:0 0 22px;
  border-top:1px solid var(--pv-line);border-bottom:1px solid var(--pv-line);
}
.pv-price:empty{display:none;}
.pv-now{
  font-family:var(--pv-num);font-size:56px;font-weight:700;line-height:.9;color:#fff;
  direction:ltr;display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums;
}
.pv-now small{font-size:.5em;font-weight:600;color:var(--pv-red-hi);}
.pv-was{font-family:var(--pv-num);font-size:21px;font-weight:500;color:#8b8b9a;text-decoration:line-through;direction:ltr;}
.pv-off{
  font-family:var(--pv-num);font-size:14px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--pv-red);
  padding:3px 11px;direction:ltr;align-self:center;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.pv-save{align-self:center;font-size:13.5px;font-weight:700;color:var(--pv-ok);}
.pv-save bdi{font-family:var(--pv-num);font-size:16px;}

/* ── Colours ── */
.pv-colors{
  margin:0 -14px 18px;padding:10px 12px 12px;border:2px solid transparent;
  transition:border-color .3s,box-shadow .3s;
}
.pv-colors-head{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--pv-mute);margin-bottom:12px;}
.pv-colors-head b{color:#fff;font-weight:700;}
.pv-colors-req{color:#fff;background:var(--pv-red);font-size:11.5px;font-weight:700;padding:2px 8px;}
.pv-swatches{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
#page-product-detail .pd-color-swatch{
  width:42px;height:42px;border:3px solid var(--black,#060608);
  box-shadow:0 0 0 1px rgba(255,255,255,.28);transition:box-shadow .2s,transform .15s;
}
#page-product-detail .pd-color-swatch:hover{transform:none;border-color:var(--black,#060608);box-shadow:0 0 0 2px rgba(255,255,255,.6);}
#page-product-detail .pd-color-swatch.active{border-color:var(--black,#060608);box-shadow:0 0 0 2px var(--pv-red);}
#page-product-detail .pd-color-swatch:focus-visible{box-shadow:0 0 0 2px #fff;}

/* ── Buy row ── */
.pv-buy{display:flex;gap:10px;align-items:stretch;margin:0 0 26px;}
.pv-qty{display:flex;align-items:stretch;height:56px;flex:0 0 auto;border:1px solid var(--pv-line-2);background:var(--pv-surface);}
.pv-qty button{
  width:44px;background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.pv-qty button:hover{background:rgba(255,255,255,.07);}
.pv-qty button:focus-visible{outline:2px solid #fff;outline-offset:-2px;}
.pv-qty input{
  width:46px;text-align:center;background:none;border:0;border-inline:1px solid var(--pv-line);color:#fff;outline:none;
  font-family:var(--pv-num);font-size:19px;font-weight:700;-moz-appearance:textfield;appearance:textfield;padding:0;border-radius:0;
}
.pv-qty input::-webkit-outer-spin-button,.pv-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pv-add,.pv-notify{
  flex:1 1 0;min-width:0;height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Tajawal',sans-serif;font-size:16.5px;font-weight:800;cursor:pointer;user-select:none;border:0;padding:0 18px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:filter .2s,transform .12s,background .2s;
}
.pv-add{background:linear-gradient(180deg,#f2141f 0%,#c4000e 100%);color:#fff;}
.pv-add:hover{filter:brightness(1.14);}
.pv-add:active,.pv-notify:active{transform:scale(.985);}
.pv-add:focus-visible,.pv-notify:focus-visible{outline:2px solid #fff;outline-offset:3px;clip-path:none;}
.pv-add.added{background:linear-gradient(180deg,#27b468,#1a8f50);}
.pv-add svg,.pv-notify svg{width:20px;height:20px;flex:0 0 20px;}
.pv-notify{background:rgba(230,0,18,.12);color:#fff;box-shadow:inset 0 0 0 1.5px var(--pv-red);}
.pv-notify:hover{background:rgba(230,0,18,.22);}
#page-product-detail .pv-buy .wish-fab{width:56px;height:56px;flex:0 0 56px;margin:0;}

/* ── Perks ── */
.pv-perks{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--pv-line);border:1px solid var(--pv-line);
}
.pv-perk{display:flex;align-items:center;gap:12px;padding:15px 14px;background:var(--pv-surface);min-width:0;}
.pv-perk svg{width:22px;height:22px;flex:0 0 22px;color:var(--pv-red-hi);}
.pv-perk-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pv-perk--stat .pv-perk-t{flex-direction:column-reverse;}
.pv-perk b{font-size:13.5px;font-weight:700;color:var(--pv-text);line-height:1.35;}
.pv-perk span{font-size:12px;color:var(--pv-mute);line-height:1.35;}

/* ── Details (description + specs) ── */
.pv-details{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;
  margin-top:64px;padding-top:44px;border-top:1px solid var(--pv-line);
}
.pv-details.only-one{grid-template-columns:minmax(0,1fr);}
.pv-details.is-empty{display:none;}
.pv-panel[hidden]{display:none;}
.pv-h{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-family:'Tajawal',sans-serif;font-size:21px;font-weight:800;color:#fff;line-height:1.3;
}
.pv-h::before{content:'';width:4px;height:20px;background:var(--pv-red);transform:skewX(-12deg);flex:0 0 4px;}
#page-product-detail .pv-desc{font-size:15.5px;line-height:1.95;color:#c6c6d2;max-width:70ch;margin:0;overflow-wrap:anywhere;}
#page-product-detail .pv-desc li{font-size:15.5px;color:#c6c6d2;margin:6px 0;}
#page-product-detail .pv-desc p{margin:0 0 10px;}
#page-product-detail .pv-desc h2{font-size:18px;margin:18px 0 8px;}
#page-product-detail .pv-desc h3{font-size:16px;margin:14px 0 6px;}
.pv-specs{display:grid;grid-template-columns:minmax(0,1fr);}
.pv-details.only-one .pv-specs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;}
.pv-spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:13px 2px;border-bottom:1px solid var(--pv-line);font-size:14.5px;line-height:1.5;
}
.pv-spec-k{color:var(--pv-mute);flex:0 0 auto;max-width:45%;}
.pv-spec-v{color:var(--pv-text);font-weight:600;text-align:end;unicode-bidi:plaintext;overflow-wrap:anywhere;min-width:0;}
.pv-specs:not(.expanded) .pv-spec:nth-child(n+11){display:none;}
.pv-more{
  display:none;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;cursor:pointer;
  background:none;border:1px solid var(--pv-line-2);color:#fff;font-family:'Tajawal',sans-serif;font-size:13.5px;font-weight:700;
  transition:border-color .2s,background .2s;
}
.pv-more.visible{display:inline-flex;}
.pv-more:hover{border-color:var(--pv-red);background:rgba(230,0,18,.08);}
.pv-more svg{width:16px;height:16px;transition:transform .2s;}
.pv-more.is-open svg{transform:rotate(180deg);}

/* ── Recommendations ── */
.pv-recs{margin-top:64px;padding-top:44px;border-top:1px solid var(--pv-line);}
.pv-recs[hidden]{display:none;}
.pv-recs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.pv-rec{
  display:flex;flex-direction:column;text-align:start;padding:0;margin:0;cursor:pointer;min-width:0;
  background:var(--pv-surface);border:1px solid var(--pv-line);color:inherit;font-family:inherit;
  transition:border-color .2s,transform .2s;
}
.pv-rec:hover{border-color:var(--pv-red);transform:translateY(-3px);}
.pv-rec:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.pv-rec-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#09090d;overflow:hidden;font-size:12px;color:transparent;}
.pv-rec-img > span{font-size:44px;color:#fff;}
#page-product-detail .pv-rec-img img{width:100% !important;height:100% !important;object-fit:contain;transition:transform .35s ease;}
.pv-rec:hover .pv-rec-img img{transform:scale(1.05);}
.pv-rec-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 14px 16px;border-top:1px solid var(--pv-line);}
.pv-rec-name{
  font-size:14px;font-weight:600;line-height:1.5;color:var(--pv-text);min-height:3em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pv-rec-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;font-family:var(--pv-num);direction:ltr;justify-content:flex-end;}
.pv-rec-price b{font-size:20px;font-weight:700;color:#fff;}
.pv-rec-price s{font-size:14px;color:#8b8b9a;}

/* reviews: align with the page container */
#page-product-detail .pd-reviews-section{padding-inline:max(40px, calc((100% - 1400px) / 2 + 40px));}

/* ── Lightbox ── */
.pv-lb{
  position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;
  background:rgba(4,4,6,.96);opacity:0;transition:opacity .2s ease;cursor:zoom-out;
}
.pv-lb.on{opacity:1;}
.pv-lb img{max-width:92vw;max-height:88vh;object-fit:contain;cursor:default;}
.pv-lb button{
  position:absolute;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(20,20,26,.8);border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .2s,border-color .2s;
}
.pv-lb button:hover{background:#e60012;border-color:#e60012;}
.pv-lb button svg{width:22px;height:22px;}
.pv-lb-x{top:18px;inset-inline-end:18px;}
.pv-lb-nav{top:50%;margin-top:-24px;}
.pv-lb-prev{inset-inline-start:18px;}
.pv-lb-next{inset-inline-end:18px;}
.pv-lb.single .pv-lb-nav{display:none;}
html.pv-lb-open{overflow:hidden;}


/* ═══════════ v4 — تطوير تصميم v2 (نفس الروح: مفتوح، خطوط رفيعة، بلا صناديق ثقيلة) ═══════════ */
#page-product-detail{position:relative;}
#page-product-detail::before{
  content:'';position:absolute;top:0;left:0;right:0;height:660px;pointer-events:none;z-index:0;
  background:radial-gradient(860px 400px at 74% 20px, rgba(230,0,18,.09), transparent 70%);
}
.pv{position:relative;z-index:1;padding-bottom:80px;}
#page-product-detail .pd-reviews-section{position:relative;z-index:1;scroll-margin-top:80px;}
.pv-bc i{color:var(--pv-red);opacity:.75;}

/* stage: الصورة تندمج مع الإطار (لون الخلفية من حوافّ الصورة) + تكبير بالمرور */
.pv-stage-wrap::before,.pv-stage-wrap::after{width:24px;height:24px;}
.pv-stage-wrap::before{top:-5px;inset-inline-start:-5px;}
.pv-stage-wrap::after{bottom:-5px;inset-inline-end:-5px;}
.pv-stage{max-height:calc(100vh - 132px);box-shadow:0 36px 72px -46px rgba(230,0,18,.42);}
.pv-stage.has-tone::before{content:'';position:absolute;inset:0;background:var(--pv-tone);}
.pv-stage.is-out::before{filter:grayscale(.55) brightness(.7);}
.pv-stage .sg-out-chip{display:none;}
#page-product-detail .pv-stage > img{transition:transform .18s ease-out;animation:pvImgIn .35s ease;}
@keyframes pvImgIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
#page-product-detail .pv-stage.is-zoom > img{transform:scale(2);transition:transform .12s ease-out;}
.pv-stage-off{top:16px;inset-inline-start:16px;font-size:16px;padding:6px 14px 5px;line-height:1;filter:drop-shadow(0 6px 14px rgba(230,0,18,.4));}
.pv-stage-tools{
  position:absolute;bottom:14px;inset-inline:14px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;
}
.pv-stage-count{position:static;font-size:13.5px;font-weight:700;letter-spacing:1.5px;padding:5px 12px 4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.pv-zoom{
  pointer-events:auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;cursor:pointer;margin-inline-start:auto;
  background:rgba(6,6,8,.72);border:1px solid var(--pv-line-2);color:#fff;font-family:'Tajawal',sans-serif;font-size:12.5px;font-weight:700;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,border-color .2s;
}
.pv-zoom svg{width:15px;height:15px;}
.pv-zoom:hover{background:var(--pv-red);border-color:var(--pv-red);}
.pv-zoom:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.pv-zoom[hidden]{display:none;}
.pv-nav{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}

/* thumbs */
#page-product-detail .pd-thumbs{flex-basis:82px;max-height:calc(100vh - 132px);}
#page-product-detail .pd-thumb{width:82px;height:82px;}

/* meta + title */
.pv-meta{margin-bottom:14px;min-height:34px;}
.pv-brand{display:inline-flex;align-items:center;gap:9px;letter-spacing:3px;font-size:14.5px;}
.pv-brand::before{content:'';width:22px;height:2px;background:var(--pv-red);}
.pv-chip{padding:7px 11px;font-size:12.5px;}
.pv-share{
  margin-inline-start:auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:1px solid var(--pv-line-2);color:#d6d6e0;transition:border-color .2s,color .2s,background .2s;
}
.pv-share svg{width:17px;height:17px;}
.pv-share:hover{border-color:var(--pv-red);color:#fff;background:rgba(230,0,18,.1);}
.pv-share:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#page-product-detail h1.pd-name{font-size:clamp(29px,2.75vw,43px) !important;line-height:1.12;margin-bottom:14px;}
.pv-sub{margin-bottom:22px;}
.pv-stock i{box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 0 10px currentColor;}

/* price */
.pv-price{padding:22px 0 22px;margin-bottom:6px;border-bottom:0;}
.pv-now{font-size:60px;text-shadow:0 0 34px rgba(230,0,18,.35);}
.pv-was{font-size:22px;}
.pv-save{padding:7px 12px 6px;line-height:1;border:1px solid rgba(53,208,127,.3);background:rgba(53,208,127,.07);}

/* أبرز المواصفات: قائمة هادئة من عمودين */
.pv-hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0 0 20px;border-top:1px solid var(--pv-line);}
.pv-hl[hidden]{display:none;}
.pv-hl[hidden] + .pv-colors,.pv-hl[hidden] + .pv-colors + .pv-buy{border-top:0;}
.pv-hl-i{display:flex;align-items:baseline;gap:9px;padding:11px 0 10px;border-bottom:1px solid var(--pv-line);min-width:0;font-size:13.5px;line-height:1.4;}
.pv-hl-i::before{content:'';width:5px;height:5px;flex:0 0 5px;background:var(--pv-red);transform:translateY(-2px) rotate(45deg);}
.pv-hl-k{color:var(--pv-mute);flex:0 0 auto;white-space:nowrap;}
.pv-hl-v{color:#fff;font-weight:700;min-width:0;margin-inline-start:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;}
.pv-price + .pv-hl[hidden]{margin:0;}
.pv-info > .pv-hl[hidden] ~ .pv-buy{margin-top:0;}
/* عند غياب القائمة يبقى فاصل تحت السعر */
.pv-price:has(+ .pv-hl[hidden]){border-bottom:1px solid var(--pv-line);margin-bottom:22px;}

/* colours + buy */
#page-product-detail .pd-color-swatch.active{box-shadow:0 0 0 2px var(--pv-red), 0 0 16px rgba(230,0,18,.5);}
.pv-qty,.pv-add,.pv-notify{height:58px;}
.pv-qty input{font-size:20px;}
.pv-add,.pv-notify{position:relative;overflow:hidden;font-size:17px;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);}
.pv-add{background:linear-gradient(180deg,#ff1a26 0%,#d1000f 55%,#b0000c 100%);}
.pv-add span,.pv-notify span{white-space:nowrap;}
.pv-add svg,.pv-notify svg{width:21px;height:21px;flex-basis:21px;}
/* لمعة واحدة تعبر الزر عند المرور */
.pv-add::after{
  content:'';position:absolute;top:0;bottom:0;width:38%;inset-inline-start:-45%;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);transform:skewX(-18deg);
}
.pv-add:hover::after{animation:pvSheen .7s ease-out 1;}
@keyframes pvSheen{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(421.06%) skewX(-18deg)}}
[dir="rtl"] .pv-add:hover::after,[dir="rtl"] .pv.pv-anim .pv-add::after{animation-name:pvSheenR;}
@keyframes pvSheenR{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(-421.06%) skewX(-18deg)}}
#page-product-detail .pv-buy .wish-fab{width:58px;height:58px;flex-basis:58px;}

/* perks: التوصيل والدعم في صفّ، وثلاث ضمانات تحتهما */
.pv-perks{grid-template-columns:repeat(6,minmax(0,1fr));}
.pv-perk{grid-column:span 2;padding:16px 16px;}
.pv-perk--stat{grid-column:span 3;}
.pv-perk--stat svg{width:26px;height:26px;flex-basis:26px;}
.pv-perk--stat b{font-size:15.5px;font-weight:800;color:#fff;}
.pv-perk--stat span{font-size:12.5px;}

/* details */
.pv-details{margin-top:72px;padding-top:0;border-top:0;gap:56px;}
.pv-panel{scroll-margin-top:96px;min-width:0;}
.pv-h{font-size:22px;gap:14px;margin-bottom:22px;}
.pv-h::before{height:22px;}
.pv-h::after{content:'';flex:1;height:1px;background:var(--pv-line);}
#page-product-detail .pv-desc li::marker{color:var(--pv-red-hi);}
.pv-spec{padding:13px 14px;}
.pv-spec:nth-child(odd){background:rgba(255,255,255,.022);}
.pv-details.only-one .pv-specs{column-gap:40px;}
.pv-details.only-one .pv-spec:nth-child(odd){background:none;}
.pv-details.only-one .pv-spec:nth-child(4n+1),.pv-details.only-one .pv-spec:nth-child(4n+2){background:rgba(255,255,255,.022);}
.pv-spec-v{font-weight:700;}

/* recommendations */
.pv-recs{margin-top:72px;padding-top:0;border-top:0;scroll-margin-top:96px;}
.pv-rec{position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;}
.pv-rec::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--pv-red);transform:scaleX(0);transition:transform .25s ease;}
.pv-rec:hover{border-color:rgba(230,0,18,.55);transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(230,0,18,.55);}
.pv-rec:hover::after{transform:scaleX(1);}
.pv-rec-img{position:relative;background:radial-gradient(80% 60% at 50% 100%, rgba(230,0,18,.10), transparent 65%), #09090d;}
.pv-rec-img > span:not(.pv-rec-off){font-size:46px;color:#fff;}
.pv-rec-img > span.pv-rec-off{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;background:var(--pv-red);color:#fff;font-family:var(--pv-num);
  font-size:13px;font-weight:700;padding:3px 10px 2px;line-height:1.2;direction:ltr;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.pv-rec-body{gap:7px;padding:14px 16px 16px;}
.pv-rec-brand{font-family:var(--pv-num);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pv-red-hi);min-height:15px;}
.pv-rec-name{font-size:14.5px;}
.pv-rec-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px;}
.pv-rec-price{margin-top:0;justify-content:flex-start;}
.pv-rec-price b{font-size:22px;line-height:1;}
.pv-rec-go{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;border:1px solid var(--pv-line-2);color:#fff;transition:background .2s,border-color .2s;}
.pv-rec-go svg{width:16px;height:16px;}
.pv-rec:hover .pv-rec-go{background:var(--pv-red);border-color:var(--pv-red);}

/* entrance (once per open; transform/opacity only) */
.pv.pv-anim .pv-gallery{animation:pvFade .45s ease both;}
.pv.pv-anim .pv-info > *{animation:pvUp .45s cubic-bezier(.2,.7,.2,1) both;}
.pv.pv-anim .pv-info > *:nth-child(2){animation-delay:.04s;}
.pv.pv-anim .pv-info > *:nth-child(3){animation-delay:.07s;}
.pv.pv-anim .pv-info > *:nth-child(4){animation-delay:.10s;}
.pv.pv-anim .pv-info > *:nth-child(5){animation-delay:.13s;}
.pv.pv-anim .pv-info > *:nth-child(6){animation-delay:.16s;}
.pv.pv-anim .pv-info > *:nth-child(7){animation-delay:.19s;}
.pv.pv-anim .pv-info > *:nth-child(8){animation-delay:.22s;}
@keyframes pvUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pvFade{from{opacity:0}to{opacity:1}}

/* ═══════════ v5 — حركة هادئة (transform/opacity فقط؛ تُلغى تلقائياً مع prefers-reduced-motion) ═══════════ */
/* perks: 4 خانات */
.pv-perks{grid-template-columns:repeat(2,minmax(0,1fr));}
.pv-perk,.pv-perk--stat{grid-column:auto;}
.pv-perk{transition:background .25s ease;}
.pv-perk svg{transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.pv-perk:hover{background:#101017;}
.pv-perk:hover svg{transform:translateY(-3px) scale(1.08);}

/* دخول الصفحة */
.pv.pv-anim .pv-bc{animation:pvFade .5s ease both;}
.pv.pv-anim .pv-stage{animation:pvStageIn .6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes pvStageIn{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
.pv.pv-anim .pv-stage-wrap::before{animation:pvBrkA .55s .25s cubic-bezier(.2,.8,.2,1) both;}
.pv.pv-anim .pv-stage-wrap::after{animation:pvBrkB .55s .25s cubic-bezier(.2,.8,.2,1) both;}
@keyframes pvBrkA{from{opacity:0;transform:translate(14px,14px)}to{opacity:1;transform:none}}
@keyframes pvBrkB{from{opacity:0;transform:translate(-14px,-14px)}to{opacity:1;transform:none}}
[dir="rtl"] .pv.pv-anim .pv-stage-wrap::before{animation-name:pvBrkC;}
[dir="rtl"] .pv.pv-anim .pv-stage-wrap::after{animation-name:pvBrkD;}
@keyframes pvBrkC{from{opacity:0;transform:translate(-14px,14px)}to{opacity:1;transform:none}}
@keyframes pvBrkD{from{opacity:0;transform:translate(14px,-14px)}to{opacity:1;transform:none}}
.pv.pv-anim .pv-stage-off{animation:pvPop .5s .4s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes pvPop{from{opacity:0;transform:scale(.55) rotate(-6deg)}to{opacity:1;transform:none}}
.pv.pv-anim .pv-stage-tools{animation:pvFade .5s .45s ease both;}
.pv.pv-anim #pd-thumbs .pd-thumb{animation:pvRise .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes pvRise{from{transform:translateY(14px)}to{transform:none}}
.pv.pv-anim #pd-thumbs .pd-thumb:nth-child(2){animation-delay:.06s;}
.pv.pv-anim #pd-thumbs .pd-thumb:nth-child(3){animation-delay:.12s;}
.pv.pv-anim #pd-thumbs .pd-thumb:nth-child(4){animation-delay:.18s;}
.pv.pv-anim #pd-thumbs .pd-thumb:nth-child(n+5){animation-delay:.24s;}
.pv.pv-anim .pv-brand::before{animation:pvLine .5s .2s ease both;transform-origin:right center;}
@keyframes pvLine{from{transform:scaleX(0)}to{transform:none}}
/* لمعة واحدة على زر الشراء بعد اكتمال الدخول — تلفت النظر مرّة ثم تسكن */
.pv.pv-anim .pv-add::after{animation:pvSheen .85s .75s ease-out 1;}

/* مؤشّر التوفّر: نبضة هادئة */
.pv-stock i{position:relative;}
.pv-stock.is-in i::after,.pv-stock.is-low i::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:currentColor;
  animation:pvPing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pvPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}

/* تفاعلات صغيرة */
#page-product-detail .pd-color-swatch.active{animation:pvRing .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes pvRing{from{transform:scale(.82)}to{transform:none}}
#pd-qty.pv-bump{animation:pvBump .22s ease;}
@keyframes pvBump{50%{transform:scale(1.28);color:var(--pv-red-hi)}}
.pv-add.added{animation:pvAdded .4s cubic-bezier(.2,1.4,.4,1);}
@keyframes pvAdded{from{transform:scale(.96)}to{transform:none}}
.pv-add svg{transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.pv-add:hover svg{transform:translateY(-2px) rotate(-6deg);}
#page-product-detail .pd-thumb img{transition:transform .3s ease;}
#page-product-detail .pd-thumb:hover img{transform:scale(1.07);}
.pv-chip,.pv-share{transition:border-color .2s,color .2s,background .2s,transform .2s;}
.pv-chip:hover,.pv-share:hover{transform:translateY(-2px);}
.pv-rec-go svg{transition:transform .25s ease;}
.pv-rec:hover .pv-rec-go svg{transform:translateX(-3px);}
.pv-zoom svg{transition:transform .25s ease;}
.pv-zoom:hover svg{transform:scale(1.18);}
.pv-save{animation:none;}
.pv.pv-anim .pv-off{animation:pvPop .45s .3s cubic-bezier(.2,1.5,.4,1) both;}
.pv.pv-anim .pv-save{animation:pvUp .45s .42s cubic-bezier(.2,.7,.2,1) both;}

/* ظهور الأقسام عند التمرير — يعمل فقط حين يفعّله الـJS (.pv-js)، فلا يختفي محتوى أبداً بدونه */
.pv.pv-js .pv-rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.pv.pv-js .pv-rv.pv-seen{opacity:1;transform:none;}
.pv.pv-js .pv-rv .pv-h::before{transform:skewX(-12deg) scaleY(0);transition:transform .45s .15s cubic-bezier(.2,.8,.2,1);}
.pv.pv-js .pv-rv.pv-seen .pv-h::before{transform:skewX(-12deg);}
.pv.pv-js .pv-rv .pv-h::after{transform:scaleX(0);transform-origin:right center;transition:transform .8s .2s cubic-bezier(.2,.7,.2,1);}
[dir="ltr"] .pv.pv-js .pv-rv .pv-h::after{transform-origin:left center;}
.pv.pv-js .pv-rv.pv-seen .pv-h::after{transform:none;}
.pv.pv-js .pv-rv .pv-spec,.pv.pv-js .pv-rv .pv-rec{opacity:0;transform:translateY(12px);transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s;}
.pv.pv-js .pv-rv.pv-seen .pv-spec,.pv.pv-js .pv-rv.pv-seen .pv-rec{opacity:1;transform:none;}
.pv.pv-js .pv-rv.pv-seen .pv-rec:hover{transform:translateY(-4px);}
.pv.pv-js .pv-rv .pv-spec:nth-child(1),.pv.pv-js .pv-rv .pv-rec:nth-child(1){transition-delay:.10s,.10s,0s,0s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(2),.pv.pv-js .pv-rv .pv-rec:nth-child(2){transition-delay:.15s,.15s,0s,0s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(3),.pv.pv-js .pv-rv .pv-rec:nth-child(3){transition-delay:.20s,.20s,0s,0s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(4),.pv.pv-js .pv-rv .pv-rec:nth-child(4){transition-delay:.25s,.25s,0s,0s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(5){transition-delay:.30s,.30s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(6){transition-delay:.34s,.34s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(7){transition-delay:.38s,.38s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(8){transition-delay:.42s,.42s;}
.pv.pv-js .pv-rv .pv-spec:nth-child(n+9){transition-delay:.46s,.46s;}
/* بعد اكتمال الظهور تُزال التأخيرات كي لا تُبطئ التفاعل (hover) */
.pv.pv-js .pv-rv.pv-done .pv-spec,.pv.pv-js .pv-rv.pv-done .pv-rec{transition-delay:0s;}

/* ── Sticky buy bar (phones) ── */
.pv-bar{display:none;}

/* ═══════════ ≤ 1100px ═══════════ */
@media (max-width:1100px){
  .pv{padding-inline:28px;}
  .pv-grid{gap:36px;}
  .pv-perks{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pv-details{gap:40px;}
  .pv-recs-grid{gap:14px;}
}

/* ═══════════ ≤ 900px (phones / small tablets) ═══════════ */
@media (max-width:900px){
  .pv{padding:0 16px 40px;}
  .pv-bc{padding:14px 0 12px;font-size:12.5px;gap:8px;}
  .pv-grid{grid-template-columns:minmax(0,1fr);gap:22px;}
  .pv-gallery{position:static;flex-direction:column;gap:10px;}
  .pv-stage-wrap{width:calc(100% + 32px);margin-inline:-16px;flex:none;}
  .pv-stage-wrap::before,.pv-stage-wrap::after{display:none;}
  .pv-stage{border-inline:0;max-height:62vh;min-height:0;}
  .pv-nav{display:none;}
  #page-product-detail .pd-thumbs{flex:none;flex-direction:row;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;gap:8px;min-height:0 !important;}
  #page-product-detail .pd-thumb{width:64px;height:64px;}
  #page-product-detail h1.pd-name{font-size:24px !important;margin-bottom:12px;}
  .pv-sub{margin-bottom:16px;}
  .pv-price{padding:16px 0 18px;margin-bottom:18px;gap:12px;}
  .pv-now{font-size:44px;}
  .pv-was{font-size:18px;}
  .pv-buy{margin-bottom:22px;gap:8px;}
  .pv-qty,.pv-add,.pv-notify{height:54px;}
  .pv-qty button{width:42px;}
  .pv-qty input{width:40px;}
  #page-product-detail .pv-buy .wish-fab{width:54px;height:54px;flex-basis:54px;}
  .pv-perks{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pv-perk{padding:13px 12px;gap:10px;}
  .pv-details,.pv-details.only-one{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:40px;padding-top:30px;}
  .pv-details.only-one .pv-specs{grid-template-columns:minmax(0,1fr);}
  .pv-h{font-size:19px;margin-bottom:16px;}
  .pv-recs{margin-top:40px;padding-top:30px;}
  .pv-recs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .pv-rec-body{padding:12px 12px 14px;}
  .pv-rec-name{font-size:13.5px;}
  #page-product-detail .pd-reviews-section{padding-inline:16px;}
  .pv-lb button{width:44px;height:44px;}
  .pv-lb-nav{top:auto;bottom:22px;margin:0;}

  .pv-bar{
    position:fixed;inset-inline:0;bottom:0;z-index:8990;display:flex;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(9,9,12,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid rgba(230,0,18,.4);
    transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;
  }
  body.pv-bar-on .pv-bar{transform:none;visibility:visible;transition:transform .25s ease;}
  .pv-bar-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px;}
  .pv-bar-name{font-size:12.5px;color:#a9a9b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pv-bar-price{font-family:'Rajdhani','Tajawal',sans-serif;font-size:22px;font-weight:700;color:#fff;line-height:1.1;direction:ltr;text-align:end;}
  .pv-bar-btn{
    flex:0 0 auto;height:48px;padding:0 22px;border:0;cursor:pointer;color:#fff;
    font-family:'Tajawal',sans-serif;font-size:15.5px;font-weight:800;
    background:linear-gradient(180deg,#f2141f,#c4000e);
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  }
  body.pv-bar-on #sg-chat-btn{bottom:calc(84px + env(safe-area-inset-bottom));}
  body.pv-bar-on #sg-chat-greet{bottom:calc(96px + env(safe-area-inset-bottom));}
}
@media (max-width:380px){
  .pv-now{font-size:40px;}
  .pv-perk b{font-size:13px;}
  .pv-qty button{width:38px;}
}

/* ═══════════ v4 responsive ═══════════ */
@media (max-width:1100px){
  .pv-now{font-size:52px;}
}
@media (max-width:900px){
  #page-product-detail::before{height:480px;}
  .pv{padding-bottom:44px;}
  .pv-stage{box-shadow:none;}
  .pv-zoom span{display:none;}
  .pv-zoom{padding:0 10px;}
  #page-product-detail .pv-stage.is-zoom > img{transform:none;}
  #page-product-detail .pd-thumbs{flex-basis:auto;}
  #page-product-detail .pd-thumb{width:66px;height:66px;}
  #page-product-detail h1.pd-name{font-size:26px !important;}
  .pv-sub{margin-bottom:16px;}
  .pv-price{padding:16px 0 18px;margin-bottom:4px;}
  .pv-price:has(+ .pv-hl[hidden]){margin-bottom:18px;}
  .pv-now{font-size:48px;}
  .pv-was{font-size:19px;}
  .pv-hl{grid-template-columns:minmax(0,1fr);margin-bottom:16px;}
  .pv-qty,.pv-add,.pv-notify{height:56px;}
  .pv-add,.pv-notify{font-size:16px;padding:0 10px;gap:8px;}
  #page-product-detail .pv-buy .wish-fab{width:56px;height:56px;flex-basis:56px;}
  .pv-perk{padding:13px 12px;}
  .pv-details,.pv-details.only-one{margin-top:44px;gap:40px;padding-top:0;}
  .pv-details.only-one .pv-spec:nth-child(n){background:none;}
  .pv-details.only-one .pv-spec:nth-child(odd){background:rgba(255,255,255,.022);}
  .pv-spec{padding:12px 10px;}
  .pv-h{font-size:19px;gap:11px;margin-bottom:16px;}
  .pv-recs{margin-top:44px;padding-top:0;}
  .pv-rec-body{padding:12px 12px 14px;}
  .pv-rec-name{font-size:13.5px;}
  .pv-rec-price b{font-size:19px;}
  .pv-rec-go{display:none;}
  .pv-bar{box-shadow:0 -18px 40px -22px rgba(230,0,18,.5);}
}
@media (max-width:380px){
  .pv-now{font-size:42px;}
}


/* #sg-cx */

/* ═══════════════════════════════════════════════════════════════════
   CATEGORIES «البلاطات» (cx-*) — قسم «استكشف الأقسام» في الرئيسية
   الخطوط: العناوين وأسماء الأقسام Noto Kufi Arabic · الأرقام واللاتيني Rajdhani · باقي النص Tajawal
   ═══════════════════════════════════════════════════════════════════ */
.cx{
  --cx-line:rgba(255,255,255,.09);--cx-line2:rgba(255,255,255,.17);--cx-mute:#9d9dad;--cx-text:#ededf3;
  --cx-red:#e60012;--cx-red2:#ff3b47;--cx-s1:#0c0c12;
  --cx-num:'Rajdhani','Tajawal',sans-serif;--cx-disp:'Noto Kufi Arabic','Tajawal',sans-serif;
  --cx-row:118px;--cx-gap:14px;
  position:relative;padding:54px 0 58px;background:#060608;color:var(--cx-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.cx *{box-sizing:border-box;}
.cx button{font-family:inherit;color:inherit;}
.cx::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 280px at 80% 0%,rgba(230,0,18,.075),transparent 70%);}
.cx-wrap{position:relative;max-width:1400px;margin:0 auto;padding:0 40px;}

/* ── الرأس ── */
.cx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;}
.cx-eye{display:inline-flex;align-items:center;gap:10px;font-family:var(--cx-num);font-weight:600;font-size:12px;letter-spacing:.28em;color:var(--cx-red2);text-transform:uppercase;line-height:1;}
.cx-eye::before{content:'';width:26px;height:2px;background:var(--cx-red);}
.cx-title{font-family:var(--cx-disp);font-size:30px;font-weight:700;line-height:1.35;margin:8px 0 0;color:#fff;letter-spacing:0;text-wrap:balance;}
.cx-title b{color:var(--cx-red);font-weight:700;}
.cx-path{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:22px;font-family:'Tajawal',sans-serif;font-size:13.5px;font-weight:500;color:var(--cx-mute);line-height:1.4;}
.cx-path button{background:none;border:0;padding:0;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--cx-mute);transition:color .2s;}
.cx-path button:hover{color:#fff;}
.cx-path i{font-style:normal;font-family:var(--cx-num);font-weight:700;color:var(--cx-red);}
.cx-path b{color:#fff;font-weight:700;}
.cx-path em{font-style:normal;font-family:var(--cx-num);font-weight:600;font-size:15px;color:#d9d9e3;font-variant-numeric:tabular-nums;}
.cx-all{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;border:1px solid var(--cx-line2);background:none;cursor:pointer;white-space:nowrap;
  font-family:'Tajawal',sans-serif;font-weight:700;font-size:14px;transition:border-color .2s,background .2s;}
.cx-all svg{width:16px;height:16px;transition:transform .25s;}
.cx-all:hover{border-color:var(--cx-red);background:rgba(230,0,18,.1);}
.cx-all:hover svg{transform:translateX(-4px);}

.cx-stage{position:relative;min-height:calc(var(--cx-row) * 3 + var(--cx-gap) * 2);}
.cx-view{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--cx-row);gap:var(--cx-gap);}

/* ── البلاطة ── */
.cx-t{
  --x:50%;--y:120%;
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:start;padding:15px 18px;margin:0;cursor:pointer;min-width:0;
  grid-column:span 3;border:1px solid var(--cx-line);background:linear-gradient(160deg,#14141d,#0b0b10);
  transition:border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .25s;
}
.cx-t.a{grid-column:span 6;grid-row:span 2;padding:20px 24px;}
.cx-t.b{grid-column:span 3;grid-row:span 2;padding:18px 20px;}
.cx-t::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;transition:opacity .3s;
  background:radial-gradient(260px 200px at var(--x) var(--y),rgba(230,0,18,.3),transparent 70%);}
.cx-t::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--cx-red);transform:scaleX(.14);transform-origin:right center;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
[dir="ltr"] .cx-t::after{transform-origin:left center;}
.cx-t:hover{border-color:rgba(230,0,18,.6);transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(230,0,18,.65);}
.cx-t:hover::before{opacity:1;}
.cx-t:hover::after{transform:scaleX(1);}
.cx-t:focus-visible,.cx-back:focus-visible,.cx-shop:focus-visible,.cx-all:focus-visible,.cx-path button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.cx-cor{position:absolute;top:-1px;left:-1px;width:16px;height:16px;border-top:2px solid var(--cx-red);border-left:2px solid var(--cx-red);opacity:0;transform:translate(6px,6px);transition:opacity .25s,transform .25s;}
.cx-t:hover .cx-cor{opacity:1;transform:none;}
.cx-bgn{position:absolute;left:10px;top:-8px;font-family:var(--cx-num);font-weight:700;font-size:64px;line-height:1;color:rgba(255,255,255,.035);direction:ltr;pointer-events:none;font-variant-numeric:tabular-nums;}
.cx-t.a .cx-bgn{font-size:120px;top:-18px;left:16px;}
.cx-tx{position:relative;z-index:2;display:block;max-width:100%;}
.cx-tx b{display:block;font-family:var(--cx-disp);font-size:16px;font-weight:600;line-height:1.5;color:#fff;letter-spacing:0;overflow-wrap:anywhere;}
.cx-t.a .cx-tx b{font-size:26px;font-weight:700;line-height:1.4;}
.cx-t.b .cx-tx b{font-size:19.5px;font-weight:700;}
.cx-tx small{display:flex;align-items:baseline;gap:5px;margin-top:2px;font-family:'Tajawal',sans-serif;font-size:12px;font-weight:500;color:var(--cx-mute);line-height:1.3;}
.cx-tx small i{font-style:normal;font-family:var(--cx-num);font-weight:700;font-size:15px;color:#d9d9e3;font-variant-numeric:tabular-nums;}
.cx-t.a .cx-tx small{font-size:13px;}.cx-t.a .cx-tx small i{font-size:18px;}
.cx-ft{position:absolute;z-index:2;right:18px;bottom:12px;display:inline-flex;align-items:center;gap:7px;font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;color:#8a8a9a;line-height:1;transition:color .25s;}
.cx-t.a .cx-ft{right:24px;bottom:18px;}
.cx-t.b .cx-ft{right:20px;bottom:16px;}
.cx-ft svg{width:14px;height:14px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.cx-t:hover .cx-ft{color:#fff;}
.cx-t.has-sub:hover .cx-ft svg{transform:rotate(90deg);}
.cx-t:not(.has-sub):hover .cx-ft svg{transform:translateX(-4px);}
.cx-ft em{font-style:normal;font-family:var(--cx-num);font-weight:700;font-size:15px;color:var(--cx-red2);font-variant-numeric:tabular-nums;}

/* ── صورة القسم ── */
.cx-art{position:absolute;z-index:1;left:10px;bottom:8px;height:calc(100% - 16px);aspect-ratio:1/1;max-width:44%;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.cx-t.a .cx-art{aspect-ratio:4/3;max-width:56%;height:calc(100% - 30px);bottom:14px;left:14px;}
.cx-t.b .cx-art{height:auto;width:74%;max-width:none;max-height:calc(100% - 112px);left:13%;bottom:34px;}
.cx-t:hover .cx-art{transform:scale(1.08) rotate(-2deg);}
.cx-art img{width:100% !important;height:100% !important;object-fit:contain;display:block;opacity:0;transition:opacity .35s ease;}
.cx-art.is-dark img,.cx-art.is-plate img{opacity:1;}
/* خلفية داكنة موحّدة: تذوب في البلاطة */
.cx-art.is-dark{mix-blend-mode:lighten;}
.cx-art.is-dark img{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);}
/* خلفية فاتحة/غير موحّدة: لوحة صغيرة بزاوية مقطوعة */
.cx-art.is-plate{background:var(--cx-tone,#0d0d12);overflow:hidden;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  height:min(calc(100% - 26px),132px);width:auto;aspect-ratio:1/1;bottom:13px;left:13px;max-width:38%;}
.cx-art.is-plate img{object-fit:cover;}
.cx-t.a .cx-art.is-plate{aspect-ratio:1/1;height:calc(100% - 40px);width:auto;bottom:20px;left:20px;max-width:40%;}
.cx-t.b .cx-art.is-plate{width:56%;height:auto;max-height:calc(100% - 118px);left:22%;bottom:40px;max-width:none;}
.cx-art.gly{display:flex;align-items:center;justify-content:center;color:var(--cx-red2);}
.cx-art.gly svg{width:44%;height:44%;opacity:.9;}
.cx-art.gly img{width:56% !important;height:56% !important;opacity:1;}

/* ── عرض الفروع ── */
.cx-view.is-sub{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-auto-rows:auto;height:calc(var(--cx-row) * 3 + var(--cx-gap) * 2);}
.cx-par{
  position:relative;overflow:hidden;padding:20px 24px 22px;display:flex;flex-direction:column;min-width:0;
  border:1px solid rgba(230,0,18,.55);background:linear-gradient(170deg,#17141b,#0b0b10);box-shadow:0 30px 60px -36px rgba(230,0,18,.7);
}
.cx-par::before{content:'';position:absolute;left:0;right:0;bottom:0;height:75%;pointer-events:none;background:radial-gradient(80% 70% at 50% 100%,rgba(230,0,18,.34),transparent 70%);}
.cx-par::after{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--cx-red);}
.cx-back{position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;background:rgba(6,6,8,.6);border:1px solid var(--cx-line2);cursor:pointer;
  font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;transition:border-color .2s,background .2s;}
.cx-back svg{width:15px;height:15px;transition:transform .25s;}
.cx-back:hover{border-color:var(--cx-red);background:rgba(230,0,18,.14);}
.cx-back:hover svg{transform:translateX(4px);}
.cx-par h3{position:relative;z-index:2;font-family:var(--cx-disp);font-size:26px;font-weight:700;line-height:1.4;margin:14px 0 0;color:#fff;letter-spacing:0;overflow-wrap:anywhere;}
.cx-par p{position:relative;z-index:2;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin:2px 0 0;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:500;color:var(--cx-mute);}
.cx-par p i{font-style:normal;font-family:var(--cx-num);font-weight:700;font-size:16px;color:#d9d9e3;font-variant-numeric:tabular-nums;}
.cx-par p s{text-decoration:none;color:#55556a;}
.cx-par .cx-art{left:50%;bottom:74px;width:72%;height:auto;max-width:none;aspect-ratio:4/3;transform:translateX(-50%);}
.cx-par .cx-art.is-plate{width:40%;aspect-ratio:1/1;bottom:86px;left:24px;transform:none;}
.cx-view.is-sub .cx-par .cx-art.is-plate{animation-name:cxIn;}
.cx-ghost{position:absolute;left:14px;bottom:60px;font-family:var(--cx-num);font-weight:700;font-size:86px;line-height:1;color:rgba(255,255,255,.04);direction:ltr;white-space:nowrap;pointer-events:none;}
.cx-shop{position:relative;z-index:2;margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:6px 20px;border:0;cursor:pointer;color:#fff;
  font-family:'Tajawal',sans-serif;font-weight:800;font-size:15px;line-height:1.3;text-align:center;
  background:linear-gradient(180deg,#ff1a26,#c4000e);clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);transition:filter .2s;}
.cx-shop:hover{filter:brightness(1.12);}
.cx-shop svg{width:17px;height:17px;flex:0 0 17px;transition:transform .25s;}
.cx-shop:hover svg{transform:translateX(-4px);}
.cx-shop em{font-style:normal;font-family:var(--cx-num);font-weight:700;font-size:16px;opacity:.9;}
.cx-subs{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:var(--cx-gap);min-height:0;min-width:0;}
.cx-subs .cx-t{grid-column:auto;}
.cx-subs.odd .cx-t:last-child{grid-column:1 / -1;}
.cx-subs .cx-tx b{font-size:17.5px;font-weight:600;}
.cx-subs .cx-art{max-width:40%;}
.cx-subs .cx-art.is-plate{height:min(calc(100% - 26px),150px);width:auto;max-width:38%;}

/* ── الحركة (transform/opacity فقط) ── */
.cx-view .cx-t,.cx-view .cx-par{animation:cxIn .5s cubic-bezier(.2,.7,.2,1) both;}
.cx-view .cx-t:nth-child(2){animation-delay:.04s;}
.cx-view .cx-t:nth-child(3){animation-delay:.08s;}
.cx-view .cx-t:nth-child(4){animation-delay:.12s;}
.cx-view .cx-t:nth-child(5){animation-delay:.16s;}
.cx-view .cx-t:nth-child(6){animation-delay:.20s;}
.cx-view .cx-t:nth-child(7){animation-delay:.24s;}
.cx-view .cx-t:nth-child(n+8){animation-delay:.28s;}
@keyframes cxIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cx-view.is-sub .cx-par{animation:cxPar .55s cubic-bezier(.16,.8,.2,1) both;transform-origin:var(--ox,50%) var(--oy,50%);}
@keyframes cxPar{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.cx-view.is-sub .cx-par .cx-art{animation:cxArt .7s .1s cubic-bezier(.16,.8,.2,1) both;}
@keyframes cxArt{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.85)}to{opacity:1;transform:translateX(-50%)}}
.cx-view.is-sub .cx-t{animation-name:cxSub;}
@keyframes cxSub{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.cx-view.is-out > *,.cx-view.is-out .cx-subs > *{animation:cxOut .2s ease-in both !important;}
@keyframes cxOut{to{opacity:0;transform:scale(.97)}}
.cx-view.is-out > .is-pick{animation:cxPick .24s ease-in both !important;}
@keyframes cxPick{to{opacity:0;transform:scale(1.04)}}
.cx-view.done .cx-t,.cx-view.done .cx-par,.cx-view.done .cx-par .cx-art{animation:none;}
/* قبل أن يظهر القسم على الشاشة: البلاطات تنتظر */
.cx.cx-wait .cx-view .cx-t{animation-play-state:paused;}

/* ═════════ ≤ 1100px ═════════ */
@media (max-width:1100px){
  .cx{--cx-row:112px;--cx-gap:12px;}
  .cx-wrap{padding:0 28px;}
  .cx-view.is-sub{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
}
/* ═════════ ≤ 900px (جوال) ═════════ */
@media (max-width:900px){
  .cx{--cx-row:112px;--cx-gap:10px;padding:36px 0 40px;}
  .cx-wrap{padding:0 16px;}
  .cx-head{margin-bottom:16px;}
  .cx-title{font-size:23px;}
  .cx-eye{font-size:11px;letter-spacing:.24em;}
  .cx-all{height:40px;padding:0 13px;}
  .cx-all span{display:none;}
  .cx-stage{min-height:0;}
  .cx-view{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cx-t,.cx-t.b{grid-column:span 1;grid-row:span 1;padding:12px 14px;}
  .cx-t.a{grid-column:span 2;grid-row:span 1;padding:14px 16px;}
  .cx-view:not(.is-sub) > .cx-t:last-child:nth-child(2n){grid-column:span 2;}
  .cx-tx b,.cx-t.b .cx-tx b{font-size:15px;font-weight:600;}
  .cx-t.a .cx-tx b{font-size:20px;}
  .cx-tx small,.cx-t.a .cx-tx small{font-size:12px;}
  .cx-tx small i,.cx-t.a .cx-tx small i{font-size:14.5px;}
  .cx-ft,.cx-t.a .cx-ft,.cx-t.b .cx-ft{right:14px;bottom:10px;font-size:11.5px;}
  .cx-bgn{font-size:50px;}
  .cx-t.a .cx-bgn{font-size:80px;top:-10px;}
  .cx-art,.cx-t.b .cx-art{height:66%;width:auto;max-width:46%;left:6px;bottom:6px;aspect-ratio:1/1;}
  .cx-t.a .cx-art{height:calc(100% - 16px);max-width:48%;bottom:8px;left:8px;}
  .cx-art.is-plate,.cx-t.b .cx-art.is-plate,.cx-subs .cx-art.is-plate{height:58%;width:auto;max-width:40%;left:10px;bottom:10px;}
  .cx-t.a .cx-art.is-plate{height:calc(100% - 24px);max-width:38%;bottom:12px;left:12px;}
  .cx-cor{display:none;}
  .cx-t:hover{transform:none;}
  .cx-view.is-sub{display:block;height:auto;}
  .cx-par{margin-bottom:var(--cx-gap);padding:14px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"back art" "h art" "p art" "shop shop";column-gap:12px;align-items:start;}
  .cx-back{grid-area:back;justify-self:start;}
  .cx-par h3{grid-area:h;font-size:21px;margin-top:12px;}
  .cx-par p{grid-area:p;}
  .cx-par .cx-art,.cx-par .cx-art.is-plate{grid-area:art;position:relative;left:auto;bottom:auto;transform:none;width:112px;height:auto;max-width:none;aspect-ratio:1/1;align-self:center;}
  .cx-view.is-sub .cx-par .cx-art{animation-name:cxIn;}
  .cx-shop{grid-area:shop;margin-top:14px;min-height:46px;}
  .cx-ghost{display:none;}
  .cx-subs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--cx-row);}
  .cx-subs .cx-tx b{font-size:15px;}
}
@media (max-width:359px){
  .cx-t.a .cx-tx b{font-size:18px;}
  .cx-tx b,.cx-t.b .cx-tx b,.cx-subs .cx-tx b{font-size:14px;}
}
/* فروع كثيرة / ملء الصف الأخير */
.cx-subs.r1 .cx-t:last-child{grid-column:1 / -1;}
.cx-subs.r2 .cx-t:last-child{grid-column:span 2;}
.cx-view.is-sub.many{height:auto;}
.cx-view.is-sub.many .cx-subs{grid-auto-rows:var(--cx-row);}
a.cx-all{color:var(--cx-text);text-decoration:none;}
@media (min-width:901px){
  .cx-view > .cx-t.w4{grid-column:span 4;}
  .cx-view > .cx-t.w6{grid-column:span 6;}
  .cx-view > .cx-t.w12{grid-column:1 / -1;}
}
@media (max-width:900px){
  .cx-subs.odd .cx-t:last-child,.cx-subs.r1 .cx-t:last-child,.cx-subs.r2 .cx-t:last-child{grid-column:auto;}
  .cx-subs.modd .cx-t:last-child{grid-column:1 / -1;}
}


/* #sg-xa */

/* ═══════════════════════════════════════════════════════════════
   الشريط الإعلاني — «الشريطان المتقاطعان» (xa)
   كل الحركة transform/opacity (على المُركِّب)؛ تتوقف تماماً خارج الشاشة.
   المسافات بهوامش صريحة (لا flex-gap ولا خصائص منطقية) لتعمل على المتصفحات الأقدم.
   ═══════════════════════════════════════════════════════════════ */
.xa{--rot:2.6deg;--h1:58px;--h2:46px;--xa-bg:#07070a;--xa-red:#e60012;--xa-red2:#ff2a3a;
  --xa-disp:'Noto Kufi Arabic','Tajawal',sans-serif;--xa-num:'Rajdhani',sans-serif;
  position:relative;height:190px;overflow:hidden;background:var(--xa-bg);isolation:isolate;contain:layout paint;}
.xa[hidden]{display:none;}
.xa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;list-style:none;}
/* المسرح: شبكة خافتة تتلاشى نحو الأطراف + توهّج عند نقطة التقاطع + خطّان رفيعان */
.xa-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.035) 79px 80px),repeating-linear-gradient(0deg,transparent 0 37px,rgba(255,255,255,.022) 37px 38px);
  -webkit-mask-image:radial-gradient(58% 110% at 50% 50%,#000 20%,transparent 82%);mask-image:radial-gradient(58% 110% at 50% 50%,#000 20%,transparent 82%);}
.xa-aura{position:absolute;left:50%;top:50%;z-index:0;width:96%;max-width:980px;height:170px;margin:-85px 0 0 0;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(230,0,18,.36),rgba(230,0,18,.1) 55%,transparent);opacity:0;transition:opacity 1.1s ease .5s;}
.xa.is-in .xa-aura{opacity:1;}
.xa::before,.xa::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(230,0,18,.7) 22%,rgba(230,0,18,.7) 78%,transparent);}
.xa::before{top:0;}.xa::after{bottom:0;opacity:.45;}
/* تفاصيل صغيرة في الزوايا */
.xa-hud{position:absolute;z-index:3;display:flex;align-items:center;font-family:var(--xa-num);font-weight:600;font-size:11px;line-height:1;letter-spacing:.3em;color:#5d5d70;direction:ltr;pointer-events:none;white-space:nowrap;}
.xa-hud::before,.xa-hud::after{width:9px;height:9px;border:solid var(--xa-red);}
.xa-hud.a{top:14px;right:40px;right:max(40px,calc((100% - 1400px) / 2 + 40px));}
.xa-hud.a::after{content:'';margin-left:9px;border-width:2px 2px 0 0;}
.xa-hud.b{bottom:14px;left:40px;left:max(40px,calc((100% - 1400px) / 2 + 40px));}
.xa-hud.b::before{content:'';margin-right:9px;border-width:0 0 2px 2px;}
.xa-hud i{font-style:normal;color:var(--xa-red2);}

/* الشريطان */
.xa-tape{position:absolute;left:-6%;width:112%;top:50%;display:flex;align-items:center;overflow:hidden;direction:ltr;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.xa-tape.t2{z-index:1;height:var(--h2);margin-top:calc(var(--h2) / -2);transform:rotate(var(--rot));color:#cfcfda;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 14px) top/100% 4px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 14px) bottom/100% 4px no-repeat,
    linear-gradient(180deg,#16161f,#0b0b10);
  box-shadow:0 0 0 1px rgba(230,0,18,.55),0 14px 30px -10px rgba(0,0,0,.9);
  animation:xaIn2 1s cubic-bezier(.16,.84,.24,1) both;}
.xa-tape.t1{z-index:2;height:var(--h1);margin-top:calc(var(--h1) / -2);transform:rotate(calc(var(--rot) * -1));color:#09090c;
  background:
    repeating-linear-gradient(-45deg,#09090c 0 7px,transparent 7px 14px) top/100% 6px no-repeat,
    repeating-linear-gradient(-45deg,#09090c 0 7px,transparent 7px 14px) bottom/100% 6px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 42%,rgba(0,0,0,.2)),
    var(--xa-red);
  box-shadow:0 10px 16px -6px rgba(0,0,0,.75),0 34px 60px -20px rgba(230,0,18,.85);
  animation:xaIn1 1s cubic-bezier(.16,.84,.24,1) .12s both;}
@keyframes xaIn1{from{transform:rotate(calc(var(--rot) * -1)) translateX(104%)}to{transform:rotate(calc(var(--rot) * -1))}}
@keyframes xaIn2{from{transform:rotate(var(--rot)) translateX(-104%)}to{transform:rotate(var(--rot))}}
.xa.xa-wait .xa-tape{animation-play-state:paused;}
/* لمعة تمرّ على الشريط الأحمر كل بضع ثوانٍ */
.xa-sheen{position:absolute;top:0;bottom:0;left:0;width:20%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34) 50%,transparent);animation:xaSheen 7s ease-in-out 2s infinite;}
@keyframes xaSheen{0%,62%{opacity:0;transform:translateX(-110%)}64%{opacity:1}98%{opacity:1}100%{opacity:0;transform:translateX(610%)}}

/* المسار المتحرّك */
.xa-mq{display:flex;align-items:center;width:-webkit-max-content;width:max-content;direction:ltr;will-change:transform;animation:xaR var(--d,50s) linear infinite;}
.xa-mq.rev{animation-name:xaL;}
@keyframes xaR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes xaL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.xa.is-off .xa-mq,.xa.is-off .xa-sheen,.xa.xa-wait .xa-sheen{animation-play-state:paused;}
/* المؤشّر فوق الشريط: يتوقف ليُقرأ (فأرة فقط — اللمس لا «يعلَق» على hover) */
@media (hover:hover) and (pointer:fine){.xa:hover .xa-mq,.xa:hover .xa-sheen{animation-play-state:paused;}}

/* العناصر */
.xa-it{display:inline-flex;align-items:center;padding-right:22px;white-space:nowrap;direction:rtl;font-family:var(--xa-disp);font-weight:700;font-size:18px;line-height:2;letter-spacing:0;}
.xa-it svg{width:16px;height:16px;flex:0 0 16px;margin-right:22px;}
.xa-k{font-family:var(--xa-num);font-weight:700;font-style:normal;font-size:22px;letter-spacing:.02em;}
.xa-tape.t2 .xa-it{font-weight:600;font-size:15px;padding-right:18px;}
.xa-tape.t2 .xa-it:nth-child(2n){color:var(--xa-red2);}
.xa-tape.t2 .xa-it svg{width:8px;height:8px;flex-basis:8px;margin-right:18px;color:var(--xa-red);}
.xa-tape.t2 .xa-k{font-size:17.5px;}
/* ختم العلامة — مرّة في كل دورة، كالأشرطة المطبوعة */
.xa-stamp{display:inline-flex;align-items:center;padding-right:22px;direction:rtl;white-space:nowrap;}
.xa-stamp b{display:inline-flex;align-items:center;direction:ltr;font-family:var(--xa-num);font-weight:700;font-size:13.5px;letter-spacing:.24em;line-height:1;height:32px;padding:0 12px 0 11px;color:#fff;
  background:linear-gradient(180deg,#15151c,#060608);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
/* اللوجو كخلفية واحدة مشتركة (يُفكّ ترميزه مرّة واحدة مهما تكرّر الختم) */
.xa-logo{display:block;flex:0 0 auto;width:33.25px;height:19px;margin-right:10px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAABICAYAAAAwAEE4AAAkwElEQVR42u1dd2AUZfp+v5nNJptGQkIo0qt0pKNIQBBQkL6hqVjxQBDFgtg2FE8RweMsHCAienC63CEgIOUk4g8IYOiBJKRsSbLZ3tvslPf3R3biEJLNomI7vr822d2Z+b7nfd7nLd/Mwu7du6dUVla2BgBARIKINPzMoVKpKBUABbfGzx6ISFCtphFV1M84BoWIBACguLi41ZEjRzJh7969/fLz8zfb7fZFkg/SKtVPPhGpeUEIIACtBqBR8v9bowGgVCoqR6WSoVp9DQk3bNgQc8NGgygT/zabzU+YzebFZ86caQEAAPPnz0/Mz8//0ufznWFZdoTkizLRUqI6URjc7S8t7/52v2E9fzQFIr5Po0ol+xlG9WcdRK1W05iTI0O8liClaG9kO7xveuHhb1/esenTXmEwG8QkJyenBvDS0tKBHo8n1+l0vlpDTESsAeHs2bMv+/1+DAaD/6yqqmor9QDRAo+IZN/7GzvvWvriayeGDt/9Q2LCO18BPJA5sXeKaADhz1LVE0UK/ge9wY8u/Pq1PZeb29a688s5/s927HVs/Gdx2fvvf5i3bl0H8XsNHJcWP7Nz5840hmHWh0Ihs9FonCnxAj96ZdEA9uzZc5/NZvPxPB+02+2vHjx4MEGiE9EzlRA4uVZ1j3bSpJPYqz/6mrewu/p1Uxvfeu2JPMTWUiMAAMCcHFl4If60RlCfCwdEqmjHrkH2neqlgc2bjvJrP0R87+9oW/LKf4+MntSvLhmtR8dFfCi73T4vFAo5fD6fnmGYXgAAeXl5MXUeCBFlhBBu6dKl3RYsWPBFixYterIse8Xv9y9LSUlRS9gvEEIwkjUDIUAAEGLjQLPm7480Lte8llxS0gGKCoFp1szJ3z/+lDB+5EF/p+5HmgJcBMnxMCdHBsOHY0Pn+SO4cFSpCABQkJ3NS+eyq6Ag6Q6zYYii0vZAYpAZLrcZe9C+AIBAwOMPnrnkDb501z/WHKleTzUNoKxzLcJEoQkhHACAzWa7LzEx8Q25XD44FAodOXHixMQRI0Z4RWwb1IahQ4emXr169T8YHn6//7DVah1Ul0uJZOHiB3ohJhQf/Xapc8NWM86ejti4EWL3HsjOXSAEP9lywXvh3LtGT2CUCjHxOkv+URL+OC5cpZLVfu/iv/e2t/5n16Pef+/4F/PBPyrw3bWI2W8gPvkk4sIF6H3udW3Jiyv/Akqgq9cPKYwQD0ll4uzZs928Xu+XErzW3qhUg1qtpkm1K6YuXLjwVigUQkRElmU5p9O5oaKiotUNHJRIXdtnhSfbFZcXfeLds5fH8ZORA2CRIohDByDOn4/Mx5/p/KX6LW7EyecRM2qnC4goU//OJEEFQKFSTV/nwjfMjbnwzZ6+5i2bXw1s3nw09O5aPy5/E/GFJYhzH0OcOpnF2Y9g4LnnA/ply9Z+pHo+Q5ynWqmkI+EjEkGtVjfyeDzZoVDIFcacMxgMT4mkueFAWqVS1eR+R44cedztdvtEa2JZ1mqz2Z7PycmJi1b/EYFII80dx8+MNOjKjuGB3YhDhmIIwO0FcLExCsT+QxHfehtDp36wMW7nHicXmq8Jurted8xqT/CrGwECkHCKKqudpu63WpM1276637Tx43Xet1cVcK+rEJcsRZz/NOLsBxGVk1mcNJ7BmdMRFz2H5uyVu08uX9675ti1jef69KzmfYvFMjsUCpWIuDAMY3C5XOMkhCQ/XaPCJ9q+ffs9JpNJHz6HgIgYCoUuGo3GSTfi/sMGJV48fUJf/IRdW6bHjZ8ituki+AE8VgCzHcDKNGkn4IIFiIf2IXvhDBcwlp92OGwrSkymu5SI8l9TEhCAoFJJI8B1wHzWule7yiXLZ3nf/+ALZvXqSnzhVcS5CxHnzEacOh5x2hQWs6az/MTJLE56APHJJ9Dx3OJLF19cPEkKeH21DkS8hjRarfbOYDB4BCUjEAjku1yuTmKs9kvplgwAYPny5Z30ev2J8LmCkpPuMplMvW9EU9RqNU2FI/ulf3uzaZGzco37Ql4In3sd+djkkBvA6QXwGAGq7PI4i3DnMMTXVyIe2o949hQyZZoiv8fxoQXZCSW1JEEsXCAi9TMKR0QFQGFmpgxrVyFVW+KOt+5zZ2mr5sutHbsc8zwwwYdzn0BUKhFHjUQcM4LHSeNZnDKVx6lZAk6YxOG4UYhTp2Fg3gumsiVvLGqS2S1RjIOi1fEzZ8608Xg8mzmOQykGoVBo9/79+5NvBHRyA+DThBAeABJKSko2dOjQYTYAcIIgEIqiaJ7nWY/H85Hdbn+rQ4cOplrfieRRKPEz28/k9L+rZefs1gUl42D1OuD37WT8ACGHjDiBQ4ynZHGJbdsmxPXskQA9egB07Q7QoT1wTdJsXErqcb+c3l+B7He9GzUpqi0JUWYJRA1AKQEIBcBJP7h6yL0ZgzzmOzs5jffHsjHDkgXsQqenAqSnhs0CeSEhEShFEsFYmiLAgGDxChTLUcCHwI0Kt7Vps63nW6S+M/X99ysIAAhKJU127ODrS8/C1U9hzZo1iscee2xhfHz8Erlc3hgAxO/QLpdrVUpKyssimbKysvibEbFSFEWJUaSKYRhEROR5PiSaYCgUqrLb7fNV4ag27P6pKEqLNZZ9pOzydKtRX4jbvkTs1htZgKCFAnO+gsovASg2yWQmX9tWXhw4hMUHJiMuWIC4YSPit0cwdP5cyFupO+G0W98otVoHKmt5nxpJCLOsJgqvHUxRFBweObSztluPhZbbuuz0pTSzhhSJiAnxiC1bIN7RXcAhQ1gcNpLDByYLwowZiDNmIU7KQrxnLGKfvhx26YLuNh2woGXrXe81a9a1lo5H5dY1Gs3kQCBwSVxfnueZcJwVcrvdf6ldi7/huvqNpCvVhkiEffv2TR86dOjG5OTkZEEQuLBRyAAAGIbJs9vtb7Ro0eIbiQviG8j/a6y8X79+jbYc3r2ordH9fNKOHcmw+m/Aeh2MM4Zy+QUqiDyHMfIYWXyLDEWjRumpVKMEAEWiAC1b09CtG0CvngCpqRBMTS3gGqfnCCnJ+3XgOtGLpDhqsAUAQXoB6/bH5m1/c0A7q3E07WMeiPX7u8axwVh3wI9xMTRPNU4VSPpthE5OoiE+joLkVMAECggTAvCyAG4XcHYjw9ssFB2EGCsqzuQmy/86pVK3EwAAlWoa1Mp6vY7UQ2o0mj7p6ekrExMTx4Xf5sOXG8MwjAkRZykUiiPh/JyvDkNuIvC1L3Lr1q1DxowZ82nTpk07AwAvCAJFUZQA4SDI5/N94ff7VRkZGVejdP/XfObzY8e63H17x2UtijXTY9b9A4QvtnIhAM5P0z6HIDgIIk1kcsxokt4krkXTRDohkQDE8CCXIaQ1pqFzVwK9egC0aQ1sSoqJT0rI9cpiDhgF4b89mzYt3ZKTkzKwUpOZ8MWuSam5F4fSvKc9BJwUMjzHAniJXM4rmjRVxKSnx1GJ8RTEJwMmxAHE0kBYDsAdAMHjFAKGSh9YLETOQaJXnlJZntF4de93dqyHrB4hBCDZAGRZLTuTzpeiKB4R4fjx4xk9e/Z8VaFQzJPJZDES2+QBIIbn+Yv5+fmT+vTpo0HEGEII+7M6aT9l5OTkyEaMGME9/fTTLZYsWfJ5q1at7glfICWxQEoQBJ/f739fo9G806tXLwcikh07dlAN6NE1+v+NtmjcHUnJ2U1PnOwPy1cB98NJxg3gp2UyYhPAzggc04imG6WkN0mNz2iugOR4AIIgCCBQsZQAqWkUtO1EQc/uAJ06AcsLIbas7DKtNzSP9buawZWzAKdOQ8gdCvrkCndMvEKhSFDE0wlJNCQkASTHAzROQiAyAv4ggN0GrKmCY6scjMftcMsAkoWENKhsmvHJ0fb93332v5/rCQB8CUBn/ajJdXk4Ep4jbTKZnkpJSXldLpc3k4AtOiY6GAyqT548+dSIESOc4tr/5HTt5+q+JKCQFxQUvH/77bfPlVgpFb54GgCA4zi92+1emZaW9nH1vJHOzs7GZcuWCZHSv+zsbCCECAAgP2fUPN3WH1ySsvdAU3hzLTCm8oCXAr+f0P4Qz7MAAHIZkTVunJ4Wn9EigSQlAlAEgA0C8CEBYuQCJKUCJDeSAeEAbDYAj0cQAixSdCwBSk4BRQHIeAAFBdAoGVERTwjIAFwBAGslhIxmzmuzu32BgEcOkBiXmJoSSM44fCa9efb4i9+dAgDIAZCNqJ57g2XWysrKMenp6SvkcvmA8Ee4sGQKYYyIw+F4t3Hjxi+KBhNeD/jNgBfBWbFihSAIApw4ceK5Pn36rFEoFEQCOoZfi/p/3Gw2v9q6deuj0eq/Wq2mp0+fziMivPvVv1pNGJr5Rkud7nHFp9sIfLRZYIRAyEHTrgDQAR5ZngiIFAEqMSkpMTElJVmekhJbLQMAEAqCIPAIQCMgEEoOBCgKgI8BlNNAFDRCQiOAhAQALkTA4gbWVMUFTFU+p9PjYnjWnwKQnhwXn25NT7+sz2ix/M7zp9QgIITzfIHUpP/1y1hJSUmnZs2aLUtISJhZi+E1axcKhThBEOYrFIpN0fRJflXgawd9Bw8efGDgwIFbUlJS0iTWC4IgoKj/giBAKBT655UrV5b169ev5KekfweLzgzrmdZsWfNzhcPhrb8Cd+RbxgPgD8joABGAeCh0x3KCggaQsRRh0hIS0xTp6XExaWlyiIkBQAJIKIAYGiBeDpCQACRGDiAgQCAEYDODz1Dp95hsLn/Ax9AAEAcQGxcb1xQbNbZVNG+2esGkDuuPLtvhDdcLCKlHx9VqNa1UVgd2OTk5KQMHDnxJLpcvkMlkSbU8ZA3jeZ63lpeXZ7Vr1y6nwSbLTWszEQLR1H3FAsKWLVv6GAwGMQ1hBUFASUrCi9U/lmVdLpcrOycnJ1E0IHWEsmUd1T+Sq81/0llRqcVNmxHbtccggN8BxKmhY7U6otBqKVp7RQYFpQBlOgC9KS7WFOjSyY8jRiBOnIiYNQ1x2lTE8eMRM0cg27M350nL8FQSuqIUSKkZwGQEMFhp2u1JTecNXXp8vPGJ2S1rQIX66+q1rhWqqqoeYRimTFJ04/DawSIiBoPBvIKCgi7RFmVuSsUS4cccEaMAX8xDJ02alKbVavdJJijUmiQnqf9ftdvts6QusSFDkzZrFr/7bnqZ177WV3SFwaUvIcbKWT+At4KmKkpoWUkFUBU6QnRlhGjKAMq0ABpLrNzszGjidDVv5nI3SXfZEuKtBooyVACU6wB0BRRVUEKTQichHnejVDS3bZ/7zT1j7hb9ZE61JyMRahPSMus9Pp/v/2oBLF0PQQTd7XbvRsTk2jtp6j1PeJ1UdXQEf06tnqx+fnXC9nfXPT3/jsEda8qMDciEhLX0pUuX/i6ZHF8L/JoJh8u/3+v1+mFSDxLNrhPx9Td5eX2Nbss3eOIk4pQsRADeDxAw03KTjiJaHYBWQ0CrrTYATSlAWQlAaQlAqRZAqwNKW0YoTTGBIiuAORSfgLbW3YsuDh89G8Kswgb2EEqv5/Tp0+3dbvfWaidXY+y114AX/+f3+9fVsYZ1r7Hyx/eLvj858+jXBwaKXuYXCdwIAFTmXeh7bMU7X2/u1m9azQQjtA5rd/hyc3Pne71eNuzqa7s3cfIcIiLHcejz+bYWFRW1j7b+X7v6931V1QyH3XgZ//NvxF69MQgQsAJYtHKZTkcorQGIUUfk+kIZKdTRoNUTortCxxZqKLrUAmByx8gFe4vmnrMDB69Y+Pm6ZFGAI7l1aQVNrVYnOp3ON0KhkENi4HXNmwuviWAwGOZFW4kT+/1r1GqF+cjRTwq+ObQovAa/nMsXXYlFd6Zf0dw52vz2XTdtff+vaRLwSTQdvu++++4+u91ukmpZPQshdv8cVqtVtWTJkkbR6r900TIzMxM1jC3bV1rgwr++idg4XfABeHUySlcaQ5VUElJpB9quB3n5VSquyApgNMrAbmvSOmi+/U71JxPv6xmNkdfWcaPROMvv9xdH0PFr9DwQCNj1ev2YaNqp4XNRAAAF6z7qF/h0a7n9i21ra3uAXw788IKfV28bap8wNmBs1rKgaNzDkyUbJKhogr4NGzbcbjabz9cV9NWn/16vt9hisTxYq/1LRRNnAADsPPV9Z23A/QWXdwZxzizkAEJOALtORutKZLLSAkJdcgC4+OQ0tHTv/X+npk4dCT/mYxHbpVIdLysrG+bxeL6LoOPXge7z+a5cuXKlRzRBnLRXX7V6zQJh/UZ0vP3e+ppG1M3atCq6l7OH9mcy4x7gMb0FWhc8szozfMHYQCAigjFr1qxUnU73lQgwz/P1Lc41+u/z+f5rNpszb0D/r3H/Zz3WUSafMw8PHkIcPAR5gJALwMUpEtDTvlP51dHj5oE4F4CIN4VIj3vy5Ml2LpfrY5ZlI+n4dXPy+/2HNm3a1DiKII6Ia79f9XZL++rVX+Cav6Hx+Rc/qiHCzd6pLIJ77lze6OBjswOYcRt6nn/xWH4w2K1mQ0EEMKSuuri4eFWtFK++UaP/giCgx+P5pLi4uGO0+i91jwAgK3CaFvoMuir8x4cYHDI8YBowYO26N9c1iWbbk3S3kUqlijcaja8Eg0F7AzouzrEmuDWbzevF+kak65fuWyx9e9k4b/brGlysQtO8udvF9f7V7loSwS/QFU8ILlsZwIzmyGS/4jQzgcejAUMKRF5e3hNer5eJEPTVp/8uu93+xuHDh6PWf7VaTYuL+OnXX9+ms5qWHj58/I5odLx28Gg2m6cHAoH8KHT8GsNmWRYdDscL4jEjReA1GzZzUGZeuWYV++wLiM8sRGbRS/sgUyWLJrv6xUde+Hae8z7fFP/nn7N8ShqHi19Gm9vxz23oTA2DGhONG96zZ89It9td2UDQd50+ht1liclkeugG8v/r7g9sID27Rsc1Gs1gj8dzoC5jjAA6Fy7KuMStapFkCqtdOwUAULp1Y2fPK8v+D+fPQ3z4cWTmL/02rzIvXpq//+pDZP4PJt3DwYPfCZiUzKBSiUGbvViLOFLCFKqhoG/t2rXtLRZLbhRBX5367/V6c0pLS4dGW8mq2Z7VgJFIZKmVw+H4B8MwQhQ6Xlclruz48WrvEimIk3odzcvZjzLzX3TgwzMQZ2Sh9+lFx/Ly9sRHW0i7ueCHJ3FBX/o0njuLbGqGF+8YgMLVi+hDXCEuXsTJhhmYmZmZaDAYtku8oxDFwvKSXBjdbvdmjUbTVtI/+Mm9h7B8KGw220sMw1ij0fG6DNPpdH6n0WiaNbgOmZnV5W6VKsW08MVt+NTTiMrxAj70ELrmv3hlw+LF6b8L0GuDX2h2LMaiQsQmjRmmSTqDP5zDAMd9pym8eLsYudbnhsPNFzEtUomMbyDoq1P/GYZxmkymPtHofqSKpVKplHu93qNS9kbhicQgjgvn6J/269cvJlLcowKo2XBZvEJ1p+fJeYX44BzEGVkMzpiMwWeerdr78lvtoYHA8zcFv8Re9jpeuYRsy/YBRib347+/RC7gdZv15scaCvykspCfnz/b7/f7ogz6pCMYXvDt0UT8keai0+myxC3rUXqfawzV6XQuaUjuaoCkKKh69KmXmNkPMThtPPJZExicMQm5J58xaVau7FOzdev3OMQFKy4vX4WXziI2ywj5Adyht99h0eNBn8Pxef6BA42jcP0yAIBDhw4N9ng8mhsI+jDMSJ5lWX9BQUHbn9K5EnfGeL3e3Btw7dJrdFdVVc2QFJtIXQFcuMkDn77y1G0V94/9N46diDjhPuRnZLGonI6h2TMsFapX+tQu3vweR03EXKa5+gGePo9cejPGDGAMPPKIF69eRcYfKKrSVt1TrVX134Ejgq9Wq1sbjcajUVTC6iqFroq2rVnbG125ciVTNKIbAd3v95f6fL4Bkc4rlbtDjz9yf3mfASWYeTfipPEczpzO4ZRpfGD2g8ylR56885q07vc8pPlumduzBXN/QExMZl0ATv/o8S48cAhZm5l3c6E3agK/eqpWEjcdW1FRsSlCh6+ugE9gGMZw7NixpGgfJiA9p8vl2hmlp5G2Uw/k5uY2jQS6GLXvR4y99MC92YYOHe3YfwjixKkcTp3B48QxvDBrJubNUE7+w4Beh1aTKrt5Bx7KQUxI5OwADveAIU784ENESxUGueDBcwXn2kbKa6V7+S9evLjY5/Px0RRMxPcdDsejN7KZARHJqVOnOodCIaZaOQSMphLn9XrXR4phEICIt1/tX7Gww5VB/b8KpqYj9u+LOH2qgFnTBHxgNCdMnomORYsf+cOBXkdLVmZw2L7G/QcR4xJ5G4DD26GTB+cv5PB0HgYDPmOV06yM1IOWepGjR49O9Hq9NgmzIwZZfr//nFKpjOrGSvEcNpvt71GwvcYiDAbDc7XLuXUGcARg95j7pxTddluhUx7H4uAhrDBTiTgpS8DRozgcNxqtf3l+TnVq9wcEXQo+RVHQESC23Ok6jP/agUjLeTOA2dq2tQ1nz+Fw23ZEswFdfteHn332WUJENxn+/1dffdXT5XJdbgh88T2TyTSWEBJNGZnk5+c3YxjGFQY2UvOIZxjGbjQaJ0b0WGGWj/18XfLJ/oPX6FOaONyxcR4cmsnjjOmI05QC3juGw7Hj0Th91lwAAJw7Nwb+6EOlUlEUoWBi7zYpVSZDLn7yKXIkJmQGMNkz0h04dgxi9koO9Vr0+7wXysrKBkVij1gG3rlzZ4dgMBgQ9TySu/f5fAfq8ya1jcpoNL4WBdt5nucFrVZ7T/i7MdfPGyjxZstdD83of6VLn2Pl8linN17hwqEjeWGOEjFrgoB3j2Bx1HC8Om7Ukj+se28gPYKlb77ZpMpiPIvvvYcsAGMAqLIlpdj50aMFXPgciwe+xZDLyTj83hfr6qtLjhcDAGAwGDZEAimszwLHcbzRaOxZXz4tBn8bNmyIDwQC+gYCSA4R0ePx7K0P9Jqyq4yGc5n3PFvYsp1GA6QyEKvw8KNGCTh9JgrTpiA/dBCLw0ahfty4NdLK3Z9qiGx7SfV2S7PLUYwrliELwOhIbLk5KdmEd92F/KwHefxkM6LViB6768C5H0uv12i0GITt3Lmzg9/v94eDrIgbHsTgqy4ZEf+n1+sfjRQ4SmoEvE6n619HZZCow6796NqVzQt7D9qmb5TssgCYXLEKG44ajfjQbMTxY5EffCeLd49C5+SJm0Vj+dM+C1CtrtbYjTtPdba4vXp87VXkAFgLIRZTotzIjxou4LSZAi55hcXLlzEY9JsrqiqyIgViZWVl6xtwzQIiCqFQyFlaWtq0rlZouDxLe73eC4goRCgTs4iILpfrP7Wjd4Qfn+N1cu680bpOHS9ZaVmoDKBIHxujxcx7UJjzEOLo+xAH3snikCFoHz9hO9D0nxv02q574/Yd3V12qwGfewZZAKaSyCpsySlWvHe0gNOzkJ/7FIc7diA6bejxeD78eNeuJOl+OvH1tm3b2gcCAU8YsIisdzqdL9dmffgmDigsLLwvmmCR4ziuqKiotzTTCKdqZOzChbH7Ro96XtOipckEtL2IIpcrCFXODRrC4YyZAo4cjfyAfiwOGoSG+8bsAWU3OQJQ/zNP/RTB37NnT1+P2WjFx59AFoCtJLTBlNbYhNOmCkJWFvIPPyLge2tYtNrRbbfvr11+FRdeo9Gsa4D1PCIKwWCwRKPRxIl3/UiP53K5volmY6TX663dAyAIQG1AjMkfM/7zUoXCoQPQFNGxhaUAZcFedzA4fSbymXcL2KsPiwMGYtW9o3O7TLgziYJfaCv0HyrgC4P/9Xf/vdthMXpwWhayAKFKoCttt7Wx44MPoTBtBuLshwR86+0QWixo8QSGSxddTME2bNjQ2u/3N5SCceHUbppofGJH8Ny5c31YluUiFGyEcCTPaLXabtIgMScckGkWLZjCtW6H5QClV2m6qAigyN6imR0njEe8e4iAvboL2KkXmjNHn3j/6Ulp5PfUXv2tmjp7z10c5zG5eBw3ETkAtoJAhaVrFzM+9DCicqrAz5nN4fc5gs/hPnCdtoZfFxQUrIli2zb6fL6jEqmgAQAsFsvmBr4rbqb4tA5tp0AuB++IUaeCAKEySl6iA0pvAmLCvn0R7+iN2Lol50xLZQoG9N2lDm+uxP/15/mK4J8sNUwLGI0c3jtKCAEwFQDlnq63e/CR2cjPmi7gqlU8q9PyxdrivtJoWmT9hx9+2Mrn8zkb0HpeEAQ0GAwDAKrvB8zJyWkZDAa9EbyFwPO8wHFcQKvVtpOyXUzbdC88OxHbtMcqgMpiii4pI6DREFpbFSM3WAkxl1PE9H3nrrsXfbUl5XfZU/+twb+Qf2FWUK8XMHO4EAJgDUAZvN17eHFmFvKPzmHx1Gn0WGzqCKx/Oxqd9ng8W8XvlpeXL4+G7V6v94PrAkMVUCCTgTNz2DEnRQXKiUxXDqAvoUhJIUUVllFUSSFFSg6273TgrSlT2t8CvS7w86oLIWevFj7OFxci9h4suAAcWgI6pm/fICqnIq56l+cMJlZjMHSti/Vr165t7vF4bBFYL4QLOj6NRtNMqVTKPR6PIULBRkBEgWVZz4ULF1pKU0GR7cVLl40Ite3ElwGUVZEYY5EMCosocrUSoKKCiqnKva3N8ZeGDetaIwu3Rv3Mzz1/fjFbeBWx4+2CG8BtkMVWsYMHsTjnQQ5Pn8agz7elPtZfvHjxzWhY73Q65129enValJ9953ptV1FAU2Afc983giwWy2nQlVJUWSlFSsoJaHWEqjjTonXuZ1kP9r7F9BsA/7QmfyleLkBs3YXzAnjN8QozjhyOuGa1wBqNgYIqR1up3oqsf/bZZ5vb7XZzfawXq3zBYLDE7/dfqo/t4udCoZDj/PnzGdKevlhwObfo6eGB9u35SoCKSopUlBIoqSCkXB9Dl59v0urC9ice7n4L9OgHwXAj5kqVfTVeuIDYoinvBnBb09OsOG06jxeuoNvrfK+uYgwAwOnTp1VR9uwb7Oe7XK5l17FdqaSBosA+dswXvEyGVymqsJSSlZqBmLQENLkZGefX3ZU5GABA9Wesv99U8MMLXV5lXY9nTyGmNuGtABZ7p45WfG+dwJgqHLnGi9eUYEXWL126tInD4TA0UH5tqO0qsCxrLSwsTJeeQx1m+/HVq3sE298etABYyihKUwmUvoyQkh+SUi6/3qH7GAAAdR3Pvb01GnL5EvCLzMZP8NgRxIQ0zgJgZUbf68Oiy+jwVS2TFoOkzPzhhx9e+xms58KbOF6vk+2EgOPeez5jYmKFMiIr1hHQ6gF0l+NSyze1aT/lFug/X+9rtnBdLK/8Ag8cRExK4gIyeYB/6y2es5SbnehMvUZ/w68XL16c7nA4qqLco1eXJzAhYqNrjh2+V+3ApjUd/Z06BSoIlOsomUZLQFMc28i0r3Ov6WGjvQX6zx2SLVyxJXrtLtz7NfJyGRNo09aLRUXo8NsW16f1Z86cefUnsJ4NP5Vj6fV5e/h+tjEjNwbjElFHSFkVQMVFRYLmXy07zroF+k0An6q+WVih0+kO444dGATw8o89xjNOs1atVitqNV4IIpKXX345zW63V94A6/mwthvtdnudbN+7+oM23vZdvVYASzkB3UVFkm5zk1bzboF+U8GnYMmoUY0sBstJ3LQeGQAvHjiCRmSeqI/1p06dWnIDrBe1/aXrjhdOyaoyx74bjG8kFNBwoZROsGxrnLFIAvqtH1W8GaP6t3IAPnp+dYYp6D6LLyzBUMs2TKBCn69GlCMiVfPjhmG2zps3L9Vms5VHwXo+nLeXFxQUXLMXX+y3q9Xrmnjad7C5AOwl8kbmfcntlkoqcrdAv8kBHwUA8NzK9bdVGcuv8GPuF3yPz+U9iA/WV83Ly8t7IQrWc4iIVqt1UW22i63X0hGTs9n4FKygKef+lJZvVP++2i2m/6rMBwBY8Nnf25lzvtfiHX3R9/aKM1jNelIrKyBKpbKR1WqNtIlS3KihP3jwYMK1bEeiAqDWbDrR2NWua7mTEFSnJq2E8AaMW6D/+synAQAO7dvV37vqTVuoSw+h9Jlnqlkv2QApyesXR2A9h4hosVjm1afthSPHPofJabgvMXYt9OsXI7r/W0j8BkPcwnX5zIVhOGk6q4+jcoCirumCieydMGFCktVqLaujmieyvXTLli1x1+zrC4P74MGDCd6OrZ1lMbH7QVn9a1G3QP+tmR8G37j9vQkldw21fgEwIKy91+3NO378+KI6WM+Fn0L1mNSYAH68janqsXlLTJ37FM4GSBZd/62V/z2AH7775PSq5Y/tnjz5HUC45sFAEq1PtNlspRLWi3fVFu3fvz9W+svWIqvztu1JL3p1qfqTPoM6ASGgvJWr/84CvrAWr9+0aeDChQtj64sJTpw4sUDCdDGSn1NHHYAAAKx7fmk31SJVW4DqR5bcWunfI/MbfqYumTBhQpLZbC6R3GhRoFar5Q09OPgW6L//aL/Bx4mfOHHiL6LAezye2bXZXtuY/sy/af8/YxSISO69994Em81WhYhlOX+gnyi/NX6B/P/8+fMLxSdi/5QnY90af8xB6nn9PzP+HzNgfS/FRfXXAAAAAElFTkSuQmCC) center / contain no-repeat;-webkit-filter:drop-shadow(0 0 5px rgba(230,0,18,.55));filter:drop-shadow(0 0 5px rgba(230,0,18,.55));}
.xa-stamp b > span{display:block;padding:1px 0 0 10px;border-left:1px solid rgba(255,255,255,.2);line-height:17px;}
.xa-stamp b i{font-style:normal;color:var(--xa-red2);}
.xa-stamp svg{width:16px;height:16px;flex:0 0 16px;margin-right:22px;}
.xa-tape.t2 .xa-stamp{padding-right:18px;}
.xa-tape.t2 .xa-stamp b{display:block;height:auto;background:none;color:var(--xa-red2);box-shadow:inset 0 0 0 1px rgba(230,0,18,.7);-webkit-clip-path:none;clip-path:none;font-size:11px;letter-spacing:.26em;padding:6px 9px 5px 11px;}
.xa-tape.t2 .xa-stamp svg{width:8px;height:8px;flex-basis:8px;margin-right:18px;color:var(--xa-red);}

@media (min-width:1800px){.xa{--rot:1.9deg;}}
@media (min-width:3000px){.xa{--rot:1.4deg;}}
@media (min-width:4400px){.xa{--rot:1deg;}}
@media (max-width:1100px){
  .xa-hud.a{right:28px;}.xa-hud.b{left:28px;}
}
@media (max-width:900px){
  .xa{--rot:4.4deg;--h1:46px;--h2:38px;height:138px;}
  .xa-tape{left:-10%;width:120%;}
  .xa-it{font-size:15px;padding-right:15px;}.xa-k{font-size:18px;}.xa-it svg{width:13px;height:13px;flex-basis:13px;margin-right:15px;}
  .xa-tape.t2 .xa-it{font-size:13px;padding-right:13px;}.xa-tape.t2 .xa-it svg{margin-right:13px;}.xa-tape.t2 .xa-k{font-size:15px;}
  .xa-stamp{padding-right:15px;}
  .xa-stamp b{font-size:11.5px;height:27px;padding:0 10px 0 9px;}.xa-logo{width:28px;height:16px;margin-right:8px;}.xa-stamp b > span{padding-left:8px;}
  .xa-stamp svg{width:13px;height:13px;flex-basis:13px;margin-right:15px;}
  .xa-tape.t2 .xa-stamp{padding-right:13px;}.xa-tape.t2 .xa-stamp svg{margin-right:13px;}.xa-tape.t2 .xa-stamp b{font-size:10px;height:auto;padding:6px 8px 5px 10px;}
  .xa-hud{display:none;}
  .xa-sheen{width:34%;}
}
@media (max-width:480px){.xa{--rot:5.5deg;}}
@media (prefers-reduced-motion:reduce){
  .xa-tape,.xa-mq,.xa-sheen{animation:none !important;}
  .xa-aura{transition:none;}
}

/* #sg-perf2 */

/* ═══════════════════════════════════════════════════════════════════════
   sg-perf2 — سلاسة التمرير والحركة على الجوال دون أي تغيير مرئي.
   كل قاعدة هنا تغيّر «طريقة» الرسم فقط (compositor بدل الخيط الرئيسي)،
   ولا تغيّر ما يُعرض ولا توقيته. التفاصيل والقياسات في findings.md.
   (تنبيه: لا تكتب وسوم HTML حرفية داخل هذا الملف.)
   ═══════════════════════════════════════════════════════════════════════ */

/* F1 — بديل body.is-scrolling: نفس التصريح (animation-play-state:paused !important) وبنفس
   الخصوصية (0,2,1)، لكن على class يوضع على العناصر المطابِقة نفسها بدل class على body
   (تبديل class على body كان يعيد حساب أنماط 500–2000 عنصر عند كل بدء/نهاية تمرير). */
body .sg-scr.sg-scr{animation-play-state:paused !important}
@keyframes sgLogoBeatT{
  0%,100%{transform:scale(1) rotate(3deg)}
  25%{transform:scale(1.15) rotate(-3deg)}
  50%{transform:scale(1.04) rotate(-4deg)}
  75%{transform:scale(1.12) rotate(2deg)}
}

/* F3 — ومضة شريط «نفدت الكمية»: كانت تحرّك left (تخطيط + رسم كل إطار). نفس المسار بـ transform:
   عرض الومضة 34% من الشريط وتنتقل من left:-40% إلى 112% = 152% من عرض الشريط = 152/34 = 447.058824% من عرضها. */
@media (prefers-reduced-motion:no-preference){ html body .sg-out-band{overflow:clip} }
@keyframes sgOutSweep{
  0%{transform:translateX(0)}
  55%,100%{transform:translateX(447.058824%)}
}

/* F5 — شبكة خلفية الهيرو المتحرّكة (كل الصفحات + العروض): كانت تحرّك background-position على مساحة الهيرو
   كلها (إعادة رسم ≈390×420 كل إطار). نفس الشبكة ونفس البلاطة (40px) على ‎::before أكبر بـ40px من الأعلى واليسار
   وتتحرّك بـ transform مسافة بلاطة واحدة بالضبط؛ القناع (mask) يبقى ثابتاً على العنصر نفسه كما كان. */
html body .sg-hero-grid-bg,html body .deals-grid-bg{background-image:none;animation:none;overflow:clip}
html body .sg-hero-grid-bg::before,html body .deals-grid-bg::before{
  content:'';position:absolute;top:-40px;left:-40px;right:0;bottom:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(230,0,18,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(230,0,18,0.04) 1px,transparent 1px);
  background-size:40px 40px;
  animation:sgGridShiftT 30s linear infinite;
}
@keyframes sgGridShiftT{0%{transform:translate(0,0)}100%{transform:translate(40px,40px)}}
@keyframes badgeSweepT{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}

/* F8 — خط المسح في لوحة الإعلان وفي الإشعار (toast): background-size:100% 200% والموضع من ‎-100% إلى 200%
   = إزاحة عمودية من ‎+H إلى ‎-2H. العنصر نفسه يصير حاوية قصّ (نفس صندوقه inset:0) وبداخله ‎::before
   ارتفاعه 6H (3 بلاطات) يبدأ عند ‎-2H ويتحرّك بـ transform من ‎+H إلى ‎-2H. */
html body .ann-popup-scan{background:none;animation:none;overflow:hidden;overflow:clip}
html body .ann-popup-scan::before{
  content:'';position:absolute;left:0;right:0;top:-200%;height:600%;pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(var(--ann-rgb),.06) 50%, transparent 100%);
  background-size:100% 33.333333%;
  animation:sgScanT 3.5s linear infinite;
}
@keyframes sgScanT{from{transform:translateY(16.666667%)}to{transform:translateY(-33.333333%)}}

/* #sg-perf3 */


/* P5 — لمعة أشرطة التقييم ولمعة ملاحظة السياسة (صفحة المنتج): كانت تحرّك background-position
   (إعادة رسم كل إطار). background-size:200% والموضع من 200% إلى ‎-200% = إزاحة من ‎-2W إلى ‎+2W (بلاطتان).
   نفس التدرّج والبلاطة (2W) على شريط عرضه 5W يتحرّك بـ transform ∓40% من عرضه؛ نفس المدة والمنحنى. */
html body .rv2-bar-fill{overflow:hidden;overflow:clip}
html body .rv2-bar-fill::after,
html body .rv2-policy-notice::before{top:0;bottom:0;left:-200%;right:auto;width:500%;background-size:40% 100%;animation-name:sgShineT}
@keyframes sgShineT{from{transform:translateX(-40%)}to{transform:translateX(40%)}}

/* P7 — توهّج الكلمة الحمراء في عناوين الصفحات (المنتجات/العروض/المستعمل/الرقمي/من نحن/تواصل): كان يحرّك text-shadow
   (إعادة رسم ظلّ بضبابية 120px كل إطار). الآن طبقتان ثابتتان بالظلّين (البداية والنهاية) تتبادلان الشفافية بنفس المدة والمنحنى.
   الصنف sg-gx يضيفه sg-perf3-js فقط حين تكون الكلمة في سطر واحد؛ غير ذلك تبقى الحركة الأصلية. */
html body .sg-gx{animation:none;text-shadow:none;isolation:isolate}
.sg-gx::before,.sg-gx::after{
  content:attr(data-g);position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap;
  animation:sgXfOut 2.5s ease-in-out infinite alternate;
}
.sg-gx::before{text-shadow:0 0 40px rgba(230,0,18,0.6),0 0 80px rgba(230,0,18,0.3)}
.sg-gx::after{text-shadow:0 0 60px rgba(230,0,18,0.9),0 0 120px rgba(230,0,18,0.5);opacity:0;animation-name:sgXfIn}
@keyframes sgXfOut{from{opacity:1}to{opacity:0}}
@keyframes sgXfIn{from{opacity:0}to{opacity:1}}

/* P8 — وميض عناوين الأقسام (sg-shine): كان يحرّك mask-position (إعادة رسم كل إطار، لكل عنوان).
   نفس القناع ونفس مساره: نافذة القناع (2.5W) تتحرّك بـ transform من ‎-2.55W إلى ‎+2.55W، والنص الأبيض داخلها يتحرّك عكسها
   بالمقدار نفسه فيبقى ثابتاً في مكانه. العناصر يضيفها sg-perf3-js (الصنف sg-shx)؛ بدونه يبقى ‎::after الأصلي. */
.sec-title span.sg-shine.sg-shx::after{content:none;animation:none}
.sg-shn,.sg-shn i{font:inherit;font-style:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;white-space:nowrap;-webkit-text-fill-color:#fff;color:#fff}
.sg-shn{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}
.sg-shn > i{
  position:absolute;top:0;bottom:0;left:0;width:250%;
  -webkit-mask-image:linear-gradient(105deg,transparent 38%,rgba(0,0,0,.9) 48%,#000 50%,rgba(0,0,0,.9) 52%,transparent 62%);
  mask-image:linear-gradient(105deg,transparent 38%,rgba(0,0,0,.9) 48%,#000 50%,rgba(0,0,0,.9) 52%,transparent 62%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:sgShnA 3.2s linear infinite;
}
.sg-shn > i > i{position:absolute;top:0;bottom:0;left:0;width:40%;animation:sgShnB 3.2s linear infinite}
.sg-shn > i > i::before{content:attr(data-t)}
@keyframes sgShnA{from{transform:translateX(-102%)}to{transform:translateX(102%)}}
@keyframes sgShnB{from{transform:translateX(255%)}to{transform:translateX(-255%)}}

/* P9 — نبض توهّج «SUPER GAMES» (شعار الشريط العلوي على الكمبيوتر + عنوان شريط المزايا): كان يحرّك filter
   (brightness + drop-shadow) فيُعاد رسم العنصر كل إطار. الآن: النص نفسه ثابت، وفوقه نسختان ثابتتان (الحالة العادية
   والحالة المتوهّجة) تتبادلان الشفافية بنفس المدة (3ث) والمنحنى. النسختان يضيفهما sg-perf3-js (الصنف sg-gcx). */
.sg-gcA,.sg-gcB{display:none}
.feats-bar-title.sg-gcx{isolation:isolate}
.feats-bar-title.sg-gcx > .sg-gcA,.feats-bar-title.sg-gcx > .sg-gcB{display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;white-space:nowrap}
.sg-gcA{animation:sgXf3Out 3s ease-in-out infinite}
.sg-gcB{opacity:0;filter:brightness(1.25) drop-shadow(0 0 20px rgba(230,0,18,.5));animation:sgXf3In 3s ease-in-out infinite}
.sg-gcA > span::before,.sg-gcB > span::before{content:attr(data-t)}
@keyframes sgXf3Out{0%,100%{opacity:1}50%{opacity:0}}
@keyframes sgXf3In{0%,100%{opacity:0}50%{opacity:1}}
html body .feats-bar-title.sg-gcx{animation:none;filter:none}
html body .feats-bar-title.sg-gcx > .sg-super,html body .feats-bar-title.sg-gcx > .sg-games{text-shadow:none}
/* مزج جمعيّ (plus-lighter): العادية×(1−p) + المتوهّجة×p بالضبط، بلا ازدواج حوافّ الحروف؛ النص الأصلي يبقى في الصفحة لكنه لا يُرسم */
@supports (mix-blend-mode:plus-lighter){
  html body .feats-bar-title.sg-gcx > .sg-super,html body .feats-bar-title.sg-gcx > .sg-games{color:transparent;-webkit-text-fill-color:transparent}
  .feats-bar-title.sg-gcx > .sg-gcB{mix-blend-mode:plus-lighter}
}
/* الخطّان تحت العنوان كانا داخل الـfilter: ينتقلان إلى النسختين (نفس الحركة والتأخير) */
html body .feats-bar-title.sg-gcx::before,html body .feats-bar-title.sg-gcx::after{content:none;animation:none}
.feats-bar-title.sg-gcx > .sg-gcA::before,.feats-bar-title.sg-gcx > .sg-gcA::after,
.feats-bar-title.sg-gcx > .sg-gcB::before,.feats-bar-title.sg-gcx > .sg-gcB::after{content:'';position:absolute;bottom:-8px;height:2px;width:50%;transform:scaleX(0);animation:sg-line-grow 3s ease-in-out .1s infinite}
.feats-bar-title.sg-gcx > .sg-gcA::before,.feats-bar-title.sg-gcx > .sg-gcB::before{left:50%;transform-origin:left center;background:linear-gradient(90deg,transparent,rgba(230,0,18,.8))}
.feats-bar-title.sg-gcx > .sg-gcA::after,.feats-bar-title.sg-gcx > .sg-gcB::after{right:50%;transform-origin:right center;background:linear-gradient(270deg,transparent,rgba(230,0,18,.8))}


/* #sg-resp-fix */


/* ── C4 · نافذة «أخبرني عند التوفر»: أطول من الشاشة القصيرة دون تمرير
   (العنوان وزر الإرسال خارج الشاشة)، وتظهر تحت شريط الشراء اللاصق
   (z-index 8990) وزر المحادثة (9000).
   !important على z-index فقط لأن القيمة الحالية style مضمّن في العنصر. ── */
#notifyMeModal{ z-index:9100 !important; overflow-y:auto; overscroll-behavior:contain; }
#notifyMeModal > div{ margin:auto; max-width:calc(100vw - 24px); flex-shrink:0; }

/* ── S2 · صفحة تسجيل الدخول: خطّا الفاصل كانا بعرض ثابت (50% − 20px)
   فيمرّان فوق نص «أو بالبريد الإلكتروني». الآن يتمدّدان حول النص. ── */
.auth-card .auth-divider{ display:flex; align-items:center; gap:12px; }
.auth-card .auth-divider::before,
.auth-card .auth-divider::after{ position:static; flex:1 1 0; width:auto; }

/* ── S3 · صفحة المفضلة الفارغة: الرسالة كانت محشورة في أول خانة من الشبكة ── */
#wishlist-items > div:only-child:not(.p-card){ grid-column:1 / -1; }

/* «عرض الكل» كان ينكسر لسطرين داخل صندوق ضيّق عند ≤359px */
@media (max-width:359px){
  html .prod-row-right{ flex-wrap:wrap; row-gap:10px; }
  html .prod-row-right .view-all-link{ white-space:nowrap; }
}

/* ── S6 · صفوف المنتجات في الرئيسية ≤480px: سهما التنقل كانا فوق اسم
   المنتج/الماركة. يُرفعان إلى منتصف الصورة (ارتفاع الصورة ≈ 50vw − 35px). ── */
@media (max-width:480px){
  html .prod-row-viewport .prod-row-arrow{ top:calc(25vw + 16px); }
}

/* ── S7 · نتائج البحث ودرج السلة على الجوال: الأسماء اللاتينية داخل سطر
   RTL واحد كانت تُقصّ من بدايتها («…s Rapid Trigger Keyboard») فتتشابه
   المنتجات. سطران بدل سطر واحد. ── */
@media (max-width:600px){
  html .sr-item .sr-item-name{
    white-space:normal;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
}

/* ── S8 · iOS: حقول أصغر من 16px تُكبّر الصفحة عند التركيز.
   (أ) صفحة الحساب: قاعدة #page-account … 13.5px !important تلغي الحارس العام.
   (ب) الجوال الأفقي 821–960px خارج نطاق الحارس الحالي (≤820px).
   !important لازم في الحالتين لوجود !important سابق. ── */
@media (hover:none) and (pointer:coarse), (max-width:820px){
  html #page-account .form-input,
  html #page-account .acc2-wrap input,
  html #page-account .acc2-wrap select,
  html #page-account textarea{ font-size:16px !important; }
}
@media (hover:none) and (pointer:coarse) and (min-width:821px) and (max-width:960px){
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea{ font-size:16px !important; }
}

/* ── S9 · أهداف اللمس (< 40px) على أجهزة اللمس فقط — المظهر لا يتغيّر:
   مساحة اللمس تُوسَّع بعنصر زائف شفاف. ── */
@media (hover:none) and (pointer:coarse){
  .ann-popup-close, .pv-zoom, .pv-share, .cw-send, .ci-remove, .pv-bc a{ position:relative; }
  .pv-bc a::after{ content:''; position:absolute; inset:-11px -2px; }
  .ann-popup-close::after, .pv-zoom::after, .pv-share::after,
  .cw-send::after, .ci-remove::after,
  #sgColorModal .sgcm-x::after,
  #notifyMeModal button[onclick*="closeNotifyMe"]::after{
    content:''; position:absolute; inset:-6px;
  }
  .ann-popup-close::after{ inset:-9px; }
  .ci-remove::after{ inset:-5px 0; }
  #notifyMeModal button[onclick*="closeNotifyMe"]::after{ inset:-12px -14px; }
  html .view-toggle .view-btn{ width:40px; height:40px; }
}
/* الجوال الأفقي/التابلت اللمسي > 820px: نفس مقاسات القاعدة الحالية (≤820px) */
@media (hover:none) and (pointer:coarse) and (min-width:821px){
   .qty-btn{ min-width:40px !important; min-height:40px !important; }
  .qty-btn{ width:40px !important; height:40px !important; }
    .btn-primary{ min-height:40px; }
}

/* ── S10 · صفحة المنتج ≤900px: آخر تقييم كان يبقى تحت شريط الشراء اللاصق
   عند نهاية الصفحة (لا يوجد تذييل بعده). الحشوة ثابتة (غير مرتبطة بظهور
   الشريط) كي لا يتغيّر ارتفاع الصفحة أثناء التمرير. ── */
@media (max-width:900px){
  html #page-product-detail{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── S11 · صفحة المنتج ≤380px: نص الزر الرئيسي كان يُقصّ («أعلمني عند التـ…»
   للمنتج غير المتوفّر، و8px من «أضف للسلة» عند 320px) لأن span داخله nowrap
   والزر overflow:hidden. ── */
@media (max-width:380px){
  #page-product-detail .pv-buy .pv-notify{ font-size:14px; gap:6px; padding:0 6px; }
  #page-product-detail .pv-buy .pv-notify span{ white-space:normal; line-height:1.2; }
  #page-product-detail .pv-buy .pv-add{ gap:6px; padding:0 6px; }
}
@media (max-width:340px){
  #page-product-detail .pv-buy .pv-notify svg,
  #page-product-detail .pv-buy .pv-add svg{ display:none; }
}

/* ── S12 · صفحة المنتج ≤400px: تنبيه «التقييمات مخصّصة…» كان يُقصّ من اليسار
   لأن شارة المكافأة nowrap أعرض من البطاقة. ── */
@media (max-width:400px){
  #page-product-detail .rv2-policy-notice .rv2-policy-text{ min-width:0; }
  #page-product-detail .rv2-policy-notice .rv2-policy-reward{ white-space:normal; flex-wrap:wrap; width:auto; max-width:100%; }
}

/* ── L1 · الشاشات العريضة ≥1600px: صفحة السلة كانت بعرض الشاشة كاملاً
   (حتى 2480px) بينما ترويستها 1200px. تُحاذى مع الترويسة. ── */
@media (min-width:1600px){
  html #page-cart .cart-layout{ max-width:1280px; margin-inline:auto; }
}


/* #sg-nav */

/* ═══════════════════════════════════════════════════════════════════════
   sg-nav — الشريط العلوي «الشقّ» + القائمة الكاملة والشريط السفلي (جوال)
   كل الحركات transform/opacity على المُركِّب. لا وسوم HTML حرفية داخل هذا الملف.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--nvr:#e60012;--nvr2:#ff2a3a;--nvl:rgba(255,255,255,.08);--nvl2:rgba(255,255,255,.16);--nvm:#9a9aa8;
  --nvf:'Noto Kufi Arabic','Tajawal',sans-serif;--nvn:'Rajdhani',sans-serif;--nve:cubic-bezier(.2,.8,.2,1);--nvs:cubic-bezier(.34,1.45,.64,1);
  --sg-nav:74px;--sg-navpad:74px;--sg-dock:0px}
html.sg-menu-lock{overflow:hidden}
.nv,.mo,.dk,.dk-sheet,.dk-cart{box-sizing:border-box}
.nv *,.mo *,.dk *,.dk-sheet *,.dk-cart *{box-sizing:border-box}
.nv button,.mo button,.dk-cart{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nv a,.mo a,.dk a,.dk-sheet a{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nv ul,.mo ol,.mo ul{list-style:none;margin:0;padding:0}
.nv svg,.mo svg,.dk svg,.dk-sheet svg,.dk-cart svg{display:block}
.nvi{width:20px;height:20px;flex:0 0 20px}
.nvwm{font-family:var(--nvn);font-weight:700;letter-spacing:.36em;padding-left:.36em;line-height:1;white-space:nowrap;direction:ltr}
.nvwm i{font-style:normal;color:var(--nvr2)}
.nvc{font-family:var(--nvn);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
/* إزاحة الصفحات عن الشريط الثابت */
html body .page{padding-top:var(--sg-navpad)}
.nvi{width:20px;height:20px;flex:0 0 20px}
.nvwm{font-family:var(--nvn);font-weight:700;letter-spacing:.36em;padding-left:.36em;line-height:1;white-space:nowrap;direction:ltr}
.nvwm i{font-style:normal;color:var(--nvr2)}
.nvc{font-family:var(--nvn);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}

/* ═════════════════════════════════════════════════════════════════════
   الشريط العلوي — «الشقّ» (nv)
   ═════════════════════════════════════════════════════════════════════ */
.nv{--nv-h:74px;--nv-n:106px;--nv-w:240px;position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nv-h);transition:height .4s var(--nve)}
.nv.is-s{--nv-h:60px;--nv-n:88px}
/* سطح الشريط: لوح غرافيتي معدني مميَّز عن خلفية الموقع — شريط علامة أحمر في القمّة، وهج أحمر ينبعث من الشقّ،
   نقش قطري خافت، حافّة سفلية مضيئة، وظلّ دائم يفصله عن الصفحة. كلها خلفيات ثابتة (لا فلاتر ولا حركة). */
.nv-bg{position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(90deg,transparent 0,var(--nvr) 14%,var(--nvr2) 38%,transparent 50%,var(--nvr2) 62%,var(--nvr) 86%,transparent 100%) top/100% 2px no-repeat,
    radial-gradient(46% 190% at 50% 0,rgba(230,0,18,.26),rgba(230,0,18,.07) 45%,transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.32),transparent 16%,transparent 84%,rgba(0,0,0,.32)),
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#22222d 0,#17171f 48%,#0f0f15 100%);
  border-bottom:1px solid rgba(255,255,255,.2);box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),inset 0 12px 18px -14px rgba(255,255,255,.1);transition:transform .6s var(--nve)}
.nv-bg::before{content:'';position:absolute;left:0;right:0;top:100%;height:34px;margin-top:1px;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.28) 45%,transparent);opacity:.75;transition:opacity .35s;pointer-events:none}
.nv.is-s .nv-bg::before{opacity:1}
/* ضوء يمسح الحافة السفلية */
.nv-bg::after{content:'';position:absolute;bottom:-1px;left:0;width:22%;height:1px;background:linear-gradient(90deg,transparent,var(--nvr2),transparent);animation:nvScan 6s linear infinite}
@keyframes nvScan{from{transform:translateX(-100%)}to{transform:translateX(560%)}}
/* مؤشّر تقدّم القراءة: خطّ يسير على حافّة الشريط ويلتفّ حول شقّ الشعار ثم يكمل.
   سبع قطع مستقيمة تُكشف بـ transform:scaleX فقط (لا رسم ولا تخطيط في أثناء التمرير) */
.nv-pp{position:absolute;top:0;left:0;z-index:3;pointer-events:none;contain:layout paint;overflow:visible}
.nv-pp i{position:absolute;height:2.5px;border-radius:2px;background:var(--nvr2);box-shadow:0 0 5px rgba(230,0,18,.95);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.nv-pp b{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #ff2a3a,0 0 12px rgba(230,0,18,.9);opacity:0;transition:opacity .3s;will-change:transform}
.nv-pp.on b{opacity:1}
/* المتصفحات الحديثة: الكشف مربوط بالتمرير مباشرة على المُركِّب (scroll-driven) — صفر عمل على الخيط الرئيسي */
@supports (animation-timeline:scroll()){
  /* الدوران بخاصية rotate (تُطبَّق بعد scale) كي يكون الكشف على طول القطعة نفسها لا على المحور الأفقي */
  .nv-pp.sd i{animation:nvSeg linear both;animation-timeline:scroll(root);transform:none;rotate:var(--a,0deg);scale:0 1}
  .nv-pp.sd b{animation:nvDot linear both;animation-timeline:scroll(root);opacity:1;transition:none}
}
/* لا متغيّرات داخل الإطارات المفتاحية (كانت تمنع تشغيلها على المُركِّب): الدوران ثابت على العنصر والكشف بخاصية scale وحدها */
@keyframes nvSeg{from{scale:0 1}to{scale:1 1}}
/* الشقّ الحامل للشعار (overflow:clip لا hidden: حاوية التمرير كانت تجرّ عملاً على الخيط الرئيسي كل إطار) */
.nv-notch{position:absolute;left:50%;top:0;width:var(--nv-w);height:var(--nv-n);margin-left:calc(var(--nv-w) / -2);overflow:hidden;overflow:clip;
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px));clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px));
  background:linear-gradient(180deg,rgba(255,255,255,.13) 55%,rgba(230,0,18,.85));transition:height .4s var(--nve)}
/* ضوء يدور على حافّة الشقّ */
.nv-notch i{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;
  background:conic-gradient(from 0deg,transparent 0 66%,#ff2a3a 80%,#fff 86%,#ff2a3a 92%,transparent 100%);animation:nvSpin 5.5s linear infinite}
@keyframes nvSpin{to{transform:rotate(360deg)}}
.nv-notch::after{content:'';position:absolute;top:0;right:1.5px;bottom:1.5px;left:1.5px;background:radial-gradient(90% 70% at 50% 100%,rgba(230,0,18,.22),transparent 70%),repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7px),linear-gradient(180deg,#22222d 0,#15151c 55%,#120c10 100%);
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 37.4px) 100%,37.4px 100%,0 calc(100% - 30px));clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 37.4px) 100%,37.4px 100%,0 calc(100% - 30px))}
.nv-logo{position:absolute;left:50%;top:0;z-index:2;width:var(--nv-w);height:var(--nv-n);margin-left:calc(var(--nv-w) / -2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:height .4s var(--nve);
  overflow:hidden;overflow:clip;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px));clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px))}
/* توهّج يتنفّس خلف الشعار */
.nv-logo::before{content:'';position:absolute;left:50%;top:44%;width:170px;height:100px;margin:-50px 0 0 -85px;background:radial-gradient(closest-side,rgba(230,0,18,.5),transparent);animation:nvBreath 3.6s ease-in-out infinite;pointer-events:none}
@keyframes nvBreath{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
/* لمعة تمرّ عند الإشارة إلى الشعار */
.nv-logo::after{content:'';position:absolute;top:0;bottom:0;left:0;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-130%);pointer-events:none}
/* الشعار: ارتفاع ثابت مهما كان مقاس الصورة الأصلي (الصنف nv-lg يتقدّم على قاعدة img:not([class]){height:auto} العامّة) */
.nv-logo .nv-lg{position:relative;display:block;height:78px;width:auto;max-width:210px;object-fit:contain;transition:transform .5s var(--nvs),height .4s var(--nve)}
.nv.is-s .nv-logo .nv-lg{height:62px}

.nv-in{position:relative;height:100%;display:flex;align-items:center;padding:0 28px}
.nv-side{display:flex;align-items:center;justify-content:space-between;flex:1 1 0;min-width:0;height:100%}
.nv-side.r{padding-inline-end:136px}
.nv-side.l{padding-inline-start:136px}
.nv-links{display:flex;align-items:center;height:100%}
.nv-links > li{position:relative;display:flex;height:100%}
.nv-links > li > a{position:relative;display:flex;align-items:center;gap:6px;padding:0 14px;font-family:var(--nvf);font-weight:700;font-size:16px;color:#b9b9c6;white-space:nowrap;transition:color .2s}
/* قوسا التصويب */
.nv-links > li > a::before,.nv-links > li > a::after{content:'';position:absolute;width:9px;height:9px;border:solid var(--nvr);opacity:0;transition:transform .32s var(--nvs),opacity .18s}
.nv-links > li > a::before{top:calc(50% - 22px);right:3px;border-width:2px 2px 0 0;transform:translate(8px,-8px)}
.nv-links > li > a::after{bottom:calc(50% - 22px);left:3px;border-width:0 0 2px 2px;transform:translate(-8px,8px)}
.nv-links > li > a.active::before,.nv-links > li > a.active::after{filter:drop-shadow(0 0 5px rgba(230,0,18,.9))}
/* وهج خافت تحت الرابط الحالي */
.nv-links > li.has-active::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:60%;background:radial-gradient(60% 100% at 50% 100%,rgba(230,0,18,.2),transparent 70%);pointer-events:none}
.nv-links .nvi{width:13px;height:13px;flex-basis:13px;opacity:.7;transition:transform .3s var(--nve)}
.nv-links li.open > a .nvi{transform:rotate(180deg)}
.nv-new{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:13px;margin-inline-start:-8px;font-size:11.5px;font-weight:800;line-height:1;color:var(--nvr2);transition:transform .4s var(--nve)}
.nv.is-s .nv-new{transform:translateY(-7px)}
.nv-new::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--nvr2);animation:nvPing 1.8s ease-in-out infinite}
@keyframes nvPing{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
/* القائمة المنسدلة — ستارة */
.nv-dd{position:absolute;top:100%;right:0;min-width:264px;padding:8px 0 10px;background:#0b0b10;border:1px solid var(--nvl2);border-top:0;opacity:0;visibility:hidden;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);
  transition:clip-path .42s var(--nve),opacity .2s,visibility .42s}
.nv-dd::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(270deg,var(--nvr),transparent)}
.nv-links li.open > .nv-dd,.nv-links li:focus-within > .nv-dd{opacity:1;visibility:visible;-webkit-clip-path:inset(0);clip-path:inset(0)}
.nv-dd a{position:relative;display:flex;align-items:baseline;gap:14px;padding:12px 22px;font-family:var(--nvf);font-weight:700;font-size:16px;color:#c9c9d6;opacity:0;transform:translateY(-8px);
  transition:color .2s,padding .3s var(--nve),opacity .3s,transform .4s var(--nve)}
.nv-links li.open > .nv-dd a,.nv-links li:focus-within > .nv-dd a{opacity:1;transform:none;transition-delay:0s,0s,calc(.08s + var(--i) * .06s),calc(.08s + var(--i) * .06s)}
.nv-dd a::before{content:'';position:absolute;top:8px;bottom:8px;right:0;width:3px;background:var(--nvr);transform:scaleY(0);transition:transform .25s var(--nve)}
.nv-dd a i{font-style:normal;font-family:var(--nvn);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--nvr2)}
.nv-dd a small{margin-inline-start:auto;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:500;color:#6b6b7c}
/* وسائل التواصل + الأزرار */
.nv-soc,.nv-act{display:flex;align-items:center;gap:2px}
.nv-soc{gap:8px}
.nvsoc{position:relative;display:grid;place-items:center;width:38px;height:38px;color:#fff;transition:transform .35s var(--nvs)}
.nvsoc::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,var(--c1),var(--c2));-webkit-clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);transition:filter .25s}
.nvsoc::after{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;background:radial-gradient(closest-side,var(--c1),transparent);opacity:0;transition:opacity .3s;z-index:-1;filter:blur(4px)}
.nvsoc .nvi{position:relative;width:20px;height:20px;transition:transform .4s var(--nvs);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.nvsoc.dc{--c1:#6d78ff;--c2:#4752c4}
.nvsoc.wa{--c1:#3fe07a;--c2:#12a650}
.nv-act{gap:10px}
/* سكّة الأزرار: البحث + المفضلة + السلة كأزرار متساوية داخل إطار واحد هادئ */
.nv-rail{display:flex;align-items:stretch;height:44px;border:1px solid var(--nvl2);background:rgba(255,255,255,.025);
  -webkit-clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.nv-ib{position:relative;display:grid;place-items:center;width:46px;height:100%;color:#d5d5df;transition:color .2s,background .25s}
.nv-ib + .nv-ib{border-inline-start:1px solid var(--nvl)}
.nv-ib .nvi{width:21px;height:21px;flex-basis:21px;transition:transform .35s var(--nvs)}
.nv-ib::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--nvr);transform:scaleX(0);transition:transform .3s var(--nve)}
/* العدّاد: شارة صغيرة على الزاوية */
.nv-ib .nvc{position:absolute;top:3px;left:3px;min-width:15px;height:15px;padding:0 4px;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--nvr);border-radius:8px;box-shadow:0 0 0 2px #0d0d13;transition:transform .35s var(--nvs)}
.nvc.is-zero{display:none !important}
.nvc.bump,.nvc.cart-pop{animation:nvBump .5s var(--nvs)}
@keyframes nvBump{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
/* البحث: العدسة تميل، وعند الفتح تتحوّل إلى × */
.nv-search i{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:0;transform:rotate(-90deg) scale(.4);transition:transform .45s var(--nvs),opacity .25s}
.nv-search i svg{width:20px;height:20px}
html.sg-sx .nv-search{color:var(--nvr2)}
html.sg-sx .nv-search > .nvi{opacity:0;transform:rotate(90deg) scale(.4)}
html.sg-sx .nv-search i{opacity:1;transform:none}
/* المفضلة: القلب يمتلئ ويقفز */
.nv-wish .nvi path{transition:fill .25s,stroke .25s}
.nv-wish.liked .nvi{animation:nvPop .5s var(--nvs)}
.nv-wish.liked .nvi path{fill:var(--nvr2);stroke:var(--nvr2)}
.nv-wish::before{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid var(--nvr2);border-radius:50%;opacity:0;pointer-events:none}
.nv-wish.liked::before{animation:nvRing .6s ease-out}
@keyframes nvPop{0%{transform:scale(.6)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes nvRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
/* السلة: الحقيبة تتأرجح عند الإضافة ويطير «+1» */
.nv-cart .nvi{transform-origin:50% 20%}
.nv-cart.add .nvi,.nv-cart.cart-bounce .nvi{animation:nvSwing .7s var(--nve)}
@keyframes nvSwing{0%{transform:rotate(0)}20%{transform:rotate(-16deg) translateY(2px)}45%{transform:rotate(12deg)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
.nv-plus{position:absolute;left:50%;top:4px;margin-left:-10px;font-family:var(--nvn);font-weight:700;font-size:14px;color:var(--nvr2);opacity:0;pointer-events:none;direction:ltr}
.nv-cart.add .nv-plus,.nv-cart.cart-bounce .nv-plus{animation:nvPlus .8s ease-out}
@keyframes nvPlus{0%{opacity:0;transform:translateY(6px)}25%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
/* تسجيل الدخول: زرّ أحمر واحد نظيف، عند الإشارة تمرّ لمعة ويتوهّج */
.nv-login{position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 16px;font-family:var(--nvf);font-weight:700;font-size:15px;color:#fff;overflow:hidden;overflow:clip;
  background:linear-gradient(180deg,#ff1f2c,#c4000e);-webkit-clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:filter .25s,transform .2s var(--nvs)}
.nv-login::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-140%);pointer-events:none}
.nv-login:active{transform:scale(.96)}
.nv-login .nvi{width:19px;height:19px;flex-basis:19px;transition:transform .4s var(--nvs)}


.nv-burger,.nv-mact{display:none}

/* ═════════════ القائمة الكاملة (جوال) + الشريط السفلي ═════════════ */
.mo,.dk,.dk-cart,.dk-sheet,.dk-scrim{display:none}

@media (max-width:1560px){
  .nv-in{padding:0 20px}
  .nv-side.r{padding-inline-end:132px}.nv-side.l{padding-inline-start:132px}
  .nv-links > li > a{padding:0 10px;font-size:15.5px}
}
@media (max-width:1480px){
  .nv-links > li > a{padding:0 8px;font-size:15px}
  .nv-soc{gap:6px}.nvsoc{width:34px;height:34px}.nvsoc .nvi{width:18px;height:18px}
  .nv-act{gap:8px}
}
@media (max-width:1400px){
  .nv-soc{display:none}.nv-side.r{justify-content:flex-end}
  .nv-links > li > a{padding:0 7px;font-size:14.5px}
  .nv-ib{width:40px}.nv-login{padding:0 12px 0 10px}.nv-login span{display:none}
}
@media (max-width:1300px){
  .nv-links > li > a{padding:0 6px;font-size:14px}
  .nv-in{padding:0 12px}.nv-side.r{padding-inline-end:124px}.nv-side.l{padding-inline-start:124px}
  .nv-ib{width:38px}
}
@media (max-width:1180px){
  .pg{padding-top:58px}.wrap{padding:0 18px}.grid{grid-template-columns:1fr 1fr}.grid span{height:170px}.sec{padding:44px 0}
  .nv{--nv-h:58px;--nv-n:82px;--nv-w:172px}
  .nv.is-s{--nv-h:52px;--nv-n:74px}
  .nv-side{display:none}
  .nv-in{padding:0 6px;justify-content:space-between}
  .nv-logo .nv-lg{height:58px}.nv.is-s .nv-logo .nv-lg{height:50px}
  .nv-notch{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 24px));clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 24px))}
  .nv-notch::after{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 29.4px) 100%,29.4px 100%,0 calc(100% - 24px));clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 29.4px) 100%,29.4px 100%,0 calc(100% - 24px))}
  .nv-logo{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 24px));clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 30px) 100%,30px 100%,0 calc(100% - 24px))}
  .nv-notch i,.nv-notch b{width:260px;height:260px;margin:-130px 0 0 -130px}
  .nv-ring{width:76px;height:76px;margin:-38px 0 0 -38px}
  .nv-burger{display:grid;place-items:center;width:48px;height:48px;color:#fff}
  .nv-burger span{display:block;width:22px;height:14px;position:relative}
  .nv-burger span::before,.nv-burger span::after,.nv-burger span i{content:'';position:absolute;right:0;height:2px;background:currentColor;transition:transform .3s var(--nve),width .3s var(--nve)}
  .nv-burger span::before{top:0;width:22px}.nv-burger span i{top:6px;width:14px}.nv-burger span::after{top:12px;width:22px}
  .nv-burger:active span i{width:22px}
  .nv-mact{display:flex;align-items:center;gap:2px}
  .nv-mact .nv-ib{width:44px;height:48px;background:none}
  .nv-mact .nv-ib::after{display:none}.nv-mact .nv-ib + .nv-ib{border:0}
  .nv-mact .nv-ib .nvi{width:23px;height:23px}
  .nv-mact .nv-ib .nvc{top:6px;left:2px;box-shadow:0 0 0 2px #0e0e14}
  .mo-ft .nvsoc{flex:1;width:auto;height:48px}

  /* القائمة الكاملة */
  .mo{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9020;padding:14px 22px 18px;padding-bottom:calc(18px + env(safe-area-inset-bottom));background:#08080b;
    background-image:radial-gradient(70% 40% at 100% 0,rgba(230,0,18,.22),transparent 70%),repeating-linear-gradient(90deg,transparent 0 59px,rgba(255,255,255,.02) 59px 60px);
    -webkit-clip-path:circle(0 at calc(100% - 30px) 29px);clip-path:circle(0 at calc(100% - 30px) 29px);visibility:hidden;transition:clip-path .6s var(--nve),visibility .6s}
  .mo.on{-webkit-clip-path:circle(150% at calc(100% - 30px) 29px);clip-path:circle(150% at calc(100% - 30px) 29px);visibility:visible}
  .mo-hd{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:6px}
  .mo-hd .nv-lg{height:26px;width:auto;max-width:120px;object-fit:contain}
  .mo-x{display:grid;place-items:center;width:44px;height:44px;margin-inline-end:-10px;border:1px solid var(--nvl2);transition:transform .4s var(--nvs),border-color .2s}
  .mo.on .mo-x{transform:rotate(90deg)}
  .mo ol{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:auto}
  .mo ol a{position:relative;display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--nvl);font-family:var(--nvf);font-weight:700;font-size:clamp(19px,5.6vw,24px);line-height:1.5;color:#e9e9f0;
    opacity:0;transform:translateX(26px);transition:opacity .4s,transform .55s var(--nve),color .2s,padding .3s var(--nve)}
  .mo.on ol a{opacity:1;transform:none;transition-delay:calc(.14s + var(--i) * .045s),calc(.14s + var(--i) * .045s),0s,0s}
  .mo ol a i{font-style:normal;font-family:var(--nvn);font-weight:700;font-size:13px;letter-spacing:.1em;color:#55556a;min-width:22px;transition:color .2s}
  .mo ol a em{font-style:normal;font-family:'Tajawal',sans-serif;font-size:11px;font-weight:800;color:var(--nvr2);margin-inline-start:-6px}
  .mo ol a.on{color:#fff;padding-inline-start:10px}
  .mo ol a.on i,.mo ol a:active i{color:var(--nvr2)}
  .mo ol a:active{color:#fff;padding-inline-start:10px}
  .mo-ft{display:flex;gap:8px;margin-top:14px;opacity:0;transform:translateY(14px);transition:opacity .4s .5s,transform .5s var(--nve) .5s}
  .mo.on .mo-ft{opacity:1;transform:none}
  .mo-ft a.p{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;font-weight:800;font-size:15px}
  .mo-ft a.p{flex:2.4;background:linear-gradient(180deg,#ff1f2c,#c4000e);border:0;-webkit-clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
  .mo-ft .p .nvi{width:18px;height:18px}
  .mo-ft .nvsoc .nvi{width:22px;height:22px}

  /* الشريط السفلي */
  .dk{--nv-dkb:10px;--nv-dkb:calc(10px + env(safe-area-inset-bottom));display:block;position:fixed;left:10px;right:10px;bottom:var(--nv-dkb);z-index:950;height:64px;transition:transform .5s var(--nvs),opacity .4s}
  .dk.boot{transform:translateY(120%);opacity:0}
  .dk-shape,.dk-shape::after{-webkit-clip-path:polygon(14px 0,calc(50% - 52px) 0,calc(50% - 36px) 15px,calc(50% + 36px) 15px,calc(50% + 52px) 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);clip-path:polygon(14px 0,calc(50% - 52px) 0,calc(50% - 36px) 15px,calc(50% + 36px) 15px,calc(50% + 52px) 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
  .dk-shape{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(230,0,18,.75),rgba(255,255,255,.14) 28%,rgba(255,255,255,.14) 72%,rgba(230,0,18,.75));filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
  .dk-shape::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;background:linear-gradient(180deg,#15151d,#0a0a0e)}
  .dk-tabs{position:relative;display:flex;height:100%}
  .dk-tabs a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:700;color:#7f7f90;transition:color .25s}
  .dk-tabs a .nvi{width:22px;height:22px;transition:transform .35s var(--nvs)}
  .dk-tabs a:active .nvi{transform:scale(.82)}
  .dk-tabs a.on{color:#fff}
  .dk-tabs a.on .nvi{transform:translateY(-2px);color:var(--nvr2)}
  .dk-tabs a.mid{flex:0 0 84px;pointer-events:none}
  /* المؤشّر المنزلق */
  .dk-ind{position:absolute;top:0;left:0;width:40px;height:100%;pointer-events:none;transition:transform .45s var(--nvs)}
  .dk-ind::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--nvr);-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,4px 100%);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,4px 100%);box-shadow:0 0 12px var(--nvr)}
  .dk-ind::after{content:'';position:absolute;top:0;left:-14px;right:-14px;height:70%;background:radial-gradient(60% 100% at 50% 0,rgba(230,0,18,.28),transparent 70%)}
  /* زر السلة السداسي */
  .dk-cart{display:grid;place-items:center;position:fixed;left:50%;bottom:calc(var(--nv-dkb, 10px) + 22px);z-index:960;width:66px;height:66px;margin-left:-33px;color:#fff;transition:transform .5s var(--nvs),opacity .4s}
  .dk-cart.boot{transform:translateY(160%) rotate(-40deg);opacity:0}
  .dk-cart::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#ff2c38,#b0000c);-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .25s var(--nvs)}
  .dk-cart:active::before{transform:scale(.9)}
  .dk-cart::after{content:'';position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;background:rgba(230,0,18,.5);-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:-1;opacity:0}
  .dk-cart.ring::after{animation:dkRing .7s ease-out}
  @keyframes dkRing{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
  .dk-cart .nvi{position:relative;width:25px;height:25px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
  .dk-cart .nvc{position:absolute;top:1px;left:38px;min-width:21px;height:21px;padding:0 5px;display:grid;place-items:center;font-size:13px;color:var(--nvr);background:#fff;
    -webkit-clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
  /* لوحة الأقسام */
  .dk-scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:930;background:rgba(0,0,0,.66);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .dk-scrim.on{opacity:1;visibility:visible}
  .dk-sheet{display:block;position:fixed;left:10px;right:10px;bottom:calc(var(--nv-dkb, 10px) + 76px);z-index:940;padding:16px 14px 14px;background:#0c0c12;border:1px solid var(--nvl2);border-top:2px solid var(--nvr);
    -webkit-clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transform:translateY(24px) scale(.97);transform-origin:50% 100%;opacity:0;visibility:hidden;
    transition:transform .4s var(--nvs),opacity .25s,visibility .4s}
  .dk-sheet.on{transform:none;opacity:1;visibility:visible}
  .dk-sheet{max-height:calc(100vh - var(--nv-dkb) - 92px);overflow:auto;-webkit-overflow-scrolling:touch}
  .mo ol{-webkit-overflow-scrolling:touch}
  .dk-sheet h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-family:var(--nvf);font-size:16px;font-weight:700}
  .dk-sheet h4 span{font-family:var(--nvn);font-size:11.5px;letter-spacing:.26em;color:var(--nvr2)}
  .dk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dk-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:88px;padding:10px 12px;overflow:hidden;border:1px solid var(--nvl);background:linear-gradient(160deg,#15151e,#0b0b10);
    opacity:0;transform:translateY(14px);transition:opacity .3s,transform .45s var(--nve),border-color .2s}
  .dk-sheet.on .dk-tile{opacity:1;transform:none;transition-delay:calc(.06s + var(--i) * .045s),calc(.06s + var(--i) * .045s),0s}
  .dk-tile:active{border-color:var(--nvr)}
  .dk-tile::after{content:'';position:absolute;top:auto;right:0;bottom:0;left:0;height:2px;background:var(--nvr);transform:scaleX(.14);transform-origin:right}
  .dk-tile > .nvi{position:absolute;top:10px;left:10px;width:28px;height:28px;color:rgba(230,0,18,.8)}
  .dk-tile i{position:absolute;top:2px;right:10px;font-style:normal;font-family:var(--nvn);font-weight:700;font-size:40px;line-height:1;color:rgba(255,255,255,.04)}
  .dk-tile b{font-family:var(--nvf);font-size:14px;font-weight:700;line-height:1.5}
  .dk-tile b em{font-style:normal;font-family:'Tajawal',sans-serif;font-size:10.5px;font-weight:800;color:var(--nvr2);margin-inline-start:6px}
  .dk-tile small{font-size:12px;color:var(--nvm);line-height:1.4}
}
@media (max-width:360px){
  .nv{--nv-w:150px}
  .nv-in{padding:0 2px}
  .nv-mact .nv-ib{width:40px}.nv-burger{width:44px}
}
@media (prefers-reduced-motion:reduce){
  .nv-bg::after,.nv-notch i,.nv-notch b,.nv-logo::before,.nv-new::before,.nv-topl,.nv-ign,.nv-ring,.nv-lgw,.nv-login::after,.nv-links > li.has-active::after{animation:none !important}

  .nv *,.mo,.mo *,.dk,.dk *,.dk-cart,.dk-sheet,.dk-sheet *{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* حالات الإشارة بالمؤشر: فقط على الأجهزة ذات فأرة (كي لا تعلق بعد اللمس) */
@media (hover:hover) and (pointer:fine){
.tip:hover{border-color:var(--nvr);background:rgba(230,0,18,.16)}
.nv-logo:hover::after{transition:transform .7s var(--nve);transform:translateX(330%)}
.nv-logo:hover img{transform:translateY(-2px) scale(1.07)}
.nv-links > li > a:hover,.nv-links > li.open > a,.nv-links > li > a.active{color:#fff}
.nv-links > li > a:hover::before,.nv-links > li > a:hover::after,.nv-links > li > a.active::before,.nv-links > li > a.active::after,.nv-links > li.open > a::before,.nv-links > li.open > a::after{opacity:1;transform:none}
.nv-dd a:hover{color:#fff;padding-inline-start:30px}
.nv-dd a:hover::before{transform:scaleY(1)}
.nvsoc:hover{transform:translateY(-3px)}
.nvsoc:hover::before{filter:brightness(1.12)}
.nvsoc:hover::after{opacity:.75}
.nvsoc:hover .nvi{transform:scale(1.14) rotate(-6deg)}
.nv-ib:hover{color:#fff;background:rgba(230,0,18,.14)}
.nv-ib:hover .nvi{transform:translateY(-2px)}
.nv-ib:hover::after{transform:scaleX(1)}
.nv-search:hover .nvi{transform:rotate(-14deg) scale(1.12)}
.nv-login:hover{filter:brightness(1.1) drop-shadow(0 6px 16px rgba(230,0,18,.45))}
.nv-login:hover .nvi{transform:translateY(-1px) scale(1.1)}
}
/* قياس صامت للحالتين */
.nv.nolay,.nv.nolay *{transition:none !important;animation:none !important}
/* لوحة المفاتيح */
.nv a:focus-visible,.nv button:focus-visible,.mo a:focus-visible,.mo button:focus-visible,.dk a:focus-visible,.dk-cart:focus-visible,.dk-tile:focus-visible{outline:2px solid var(--nvr2);outline-offset:2px}
/* روابط الشريط: التركيز بلوحة المفاتيح = أقواس التصويب الحمراء نفسها (بدل مربّع أبيض يكسر الشكل) */
.nv-links > li > a:focus-visible{outline:0;color:#fff}
.nv-links > li > a:focus-visible::before,.nv-links > li > a:focus-visible::after{opacity:1;transform:none}
/* الطبقات المتحرّكة على المُركِّب فقط */
.nv-notch i,.nv-notch b,.nv-logo::before,.nv-bg::after,.nv-topl,.nv-ring,.mo,.dk,.dk-cart,.dk-sheet{will-change:transform}
/* الجوال بالوضع الأفقي: لوحة الأقسام بثلاثة أعمدة أقصر، والقائمة الكاملة بأسطر أقرب */
@media (max-width:1180px) and (orientation:landscape) and (max-height:500px){
  .dk-grid{grid-template-columns:repeat(3,1fr)}
  .dk-tile{height:70px}
  .mo ol a{padding:5px 0;font-size:18px}
  .mo-hd{height:38px;margin-bottom:0}
  .mo-ft{margin-top:8px}.mo-ft a.p,.mo-ft .nvsoc{height:42px}
  .mo{padding-top:8px}
}

/* ═════════ الجوال: مساحة للشريط السفلي ورفع العناصر العائمة فوقه ═════════ */
@media (max-width:1180px){
  :root{--sg-nav:58px;--sg-navpad:58px;--sg-dock:84px;--sg-dock:calc(84px + env(safe-area-inset-bottom))}
  html body{padding-bottom:var(--sg-dock)}
  html body:not(.pv-bar-on):not(.on-checkout) #sg-chat-btn{bottom:calc(var(--sg-dock) + 10px)}
  html body:not(.pv-bar-on):not(.on-checkout) #sg-chat-greet{bottom:calc(var(--sg-dock) + 26px)}
  html body:not(.pv-bar-on):not(.on-checkout) #sg-chat-window{bottom:calc(var(--sg-dock) + 80px)}
  html body:not(.pv-bar-on):not(.on-checkout) #purchaseNotif{bottom:calc(var(--sg-dock) + 6px)}
  /* صفحة المنتج (شريط الشراء الملتصق) والدفع: الشريط السفلي يختفي */
  html body.pv-bar-on .dk,html body.on-checkout .dk,html body.pv-bar-on .dk-cart,html body.on-checkout .dk-cart{transform:translateY(140%);opacity:0;pointer-events:none}
  html body.pv-bar-on,html body.on-checkout{padding-bottom:0}
}
/* ═════════ البحث: اللوحة تخرج من شقّ الشعار (المنطق الأصلي للبحث كما هو) ═════════ */
#searchContainer{padding-top:var(--sg-nav);align-items:flex-start}
html.sg-sx #navbar{z-index:9600}
#searchBox{width:min(780px,calc(100% - 28px));margin-top:0;-webkit-clip-path:none;clip-path:none;transform-origin:50% 0}
#searchContainer.active #searchBox{animation:sgSxIn .55s var(--nvs) forwards}
#searchContainer.closing #searchBox{animation:sgSxOut .25s ease forwards}
@keyframes sgSxIn{from{opacity:0;transform:scaleX(.3) translateY(-100%)}to{opacity:1;transform:none}}
@keyframes sgSxOut{to{opacity:0;transform:translateY(-12px)}}
#searchBox::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;padding:1.5px;background:linear-gradient(180deg,rgba(255,255,255,.16),var(--nvr));
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px));clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 38px) 100%,38px 100%,0 calc(100% - 30px))}
#searchBox::after{content:'';position:absolute;top:1.5px;right:1.5px;bottom:1.5px;left:1.5px;z-index:-1;background:linear-gradient(180deg,#0f0f15,#0a0a0e 70%,#150a0d);
  -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 37.4px) 100%,37.4px 100%,0 calc(100% - 30px));clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 37.4px) 100%,37.4px 100%,0 calc(100% - 30px))}
#searchBox{padding:calc(var(--sg-notch,106px) - var(--sg-nav) + 20px) 28px 52px}
#searchScanLine{top:auto;bottom:40px;left:28px;right:28px}
#searchInputWrap{border:1px solid var(--nvl2);background:rgba(255,255,255,.03);-webkit-clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
#searchInputWrap:focus-within{border-color:var(--nvr)}
#searchInput{font-family:var(--nvf);font-weight:600;font-size:17px}
#searchInput::placeholder,#searchContainer.active #searchInput::placeholder{color:#6b6b7c}
#searchIcon{color:var(--nvr2)}
#searchClose{color:#8a8a9a}
#searchHint{bottom:auto;position:relative;margin-top:10px;color:#55556a;font-family:var(--nvn);font-size:11px;letter-spacing:.2em}
/* أداء الفتح: لا ضبابية خلفية على الجوال (كانت تُرسم على كامل الشاشة أثناء حركة الفتح)، ولا حركة max-height (تخطيط كل إطار) —
   قائمة النتائج تظهر بـ opacity/transform فقط */
@media (max-width:1180px),(hover:none){#searchOverlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,4,7,.93)}}
#searchResults{margin-top:12px;border:1px solid var(--nvl);border-top:1px solid rgba(230,0,18,.3);transition:none;max-height:none;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .25s,transform .35s var(--nve),visibility .3s}
#searchResults.has-results{max-height:min(420px,calc(100vh - var(--sg-notch,106px) - 220px));opacity:1;transform:none;visibility:visible}
#searchBox{will-change:transform}
@media (max-width:1180px){
  #searchBox{width:calc(100% - 16px);padding:calc(var(--sg-notch,82px) - var(--sg-nav) + 14px) 14px 40px}
  #searchBox::before,#searchBox::after{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 22px));clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 22px))}
  #searchScanLine{bottom:30px;left:14px;right:14px}
  #searchIcon,#searchClose{width:46px}
  #searchResults.has-results{max-height:calc(100vh - var(--sg-notch,82px) - 190px)}
}
/* القائمة الكاملة أو لوحة الأقسام مفتوحة: العناصر العائمة تختفي */
html.sg-menu-lock #sg-chat-btn,html.sg-menu-lock #sg-chat-greet,html.sg-menu-lock #purchaseNotif,
html.sg-sheet #sg-chat-btn,html.sg-sheet #sg-chat-greet,html.sg-sheet #purchaseNotif{opacity:0 !important;pointer-events:none !important;transition:opacity .2s}

/* ═════════════════════════════════════════════════════════════════════
   حزمة الحركة — كلها transform/opacity على المُركِّب (لا تخطيط ولا رسم)
   ═════════════════════════════════════════════════════════════════════ */
/* ── 1) الدخول (مرة واحدة بعد شاشة البداية): اللوح ينزل، الشقّ يهبط بارتداد، الشعار ينبثق،
      الروابط تتتابع، وشعاع إشعال يعبر الشريط من اليمين إلى اليسار ── */
/* الشريط كاملاً (اللوح، الشقّ، الشعار، الروابط، الأزرار) ظاهر من أول إطار — لا شيء يُخفى بانتظار الحركة.
   الدخول = شعاع الإشعال فقط فوق شريط جاهز. */
/* الطفو على غلاف الشعار بخاصية transform (خاصية translate المنفردة كانت تُحرَّك على الخيط الرئيسي فتُجبر الصفحة كلها على إطار كل 16ms) */
.nv-lgw{display:block;position:relative;animation:nvFloat 4.6s ease-in-out infinite;will-change:transform}
@keyframes nvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.nv-ign{position:absolute;top:0;bottom:0;right:0;width:180px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,42,58,.45) 42%,rgba(255,255,255,.9) 50%,rgba(255,42,58,.45) 58%,transparent)}
.nv:not(.boot) .nv-ign{animation:nvIgn 1.15s cubic-bezier(.45,0,.2,1) .1s both}
@keyframes nvIgn{0%{transform:translateX(180px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(-100vw);opacity:0}}
/* ── 2) حياة دائمة خفيفة ── */
/* ضوء يسير على الشريط الأحمر العلوي عكس اتجاه ضوء الحافة السفلية (دارة كهربائية) */
.nv-topl{position:absolute;top:0;left:0;width:18%;height:2px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:nvTop 7s linear 1.2s infinite}
@keyframes nvTop{from{transform:translateX(560%)}to{transform:translateX(-100%)}}
/* ضوء ثانٍ أخفت يدور عكسياً على حافّة الشقّ */
.nv-notch b{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;
  background:conic-gradient(from 180deg,transparent 0 80%,rgba(255,42,58,.6) 91%,transparent 100%);animation:nvSpinR 9s linear infinite}
@keyframes nvSpinR{to{transform:rotate(-360deg)}}
/* حلقة نبض تنطلق من الشعار كل بضع ثوانٍ وتُقصّ على شكل الشقّ */
.nv-ring{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border:1.5px solid rgba(255,42,58,.95);border-radius:50%;opacity:0;pointer-events:none;animation:nvRingOut 5.4s ease-out 1.2s infinite}
@keyframes nvRingOut{0%{transform:scale(.5);opacity:0}7%{opacity:.8}42%{transform:scale(2.3);opacity:0}100%{transform:scale(2.3);opacity:0}}
/* وهج الرابط الحالي يتنفّس */
.nv-links > li.has-active::after{animation:nvGlowB 3.4s ease-in-out infinite}
@keyframes nvGlowB{0%,100%{opacity:.5}50%{opacity:1}}
/* لمعة دورية على زرّ الدخول */
.nv-login::after{animation:nvShim 6.5s ease-in-out 3s infinite}
@keyframes nvShim{0%{transform:translateX(-140%)}16%{transform:translateX(330%)}100%{transform:translateX(330%)}}
/* ── 3) التفاعل ── */
.nv-links > li > a{transition:color .2s,transform .3s var(--nvs),text-shadow .3s}
.nv-links > li > a.active{text-shadow:0 0 14px rgba(255,42,58,.4)}
.nv-ib:active .nvi{transform:scale(.8)}
.nvsoc:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .nv-links > li > a:hover{transform:translateY(-1px);text-shadow:0 0 14px rgba(255,42,58,.35)}
  .nv-logo:hover .nv-ring{animation-play-state:paused}
}

/* #sg-drawer */

/* ══════════════════════════════════════════════════════════════
   sg-drawer · درج السلة والمفضلة — «القمرة» (HUD)
   يحلّ محلّ الدرج القديم بالكامل. حركة على transform/opacity فقط.
   ══════════════════════════════════════════════════════════════ */
.drawer-overlay{position:fixed;inset:0;z-index:1000;overscroll-behavior:contain;background:rgba(3,3,6,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}
.drawer-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.side-drawer{--hdr-ease:cubic-bezier(.2,.8,.2,1);--hdr-spring:cubic-bezier(.34,1.45,.64,1);--hdr-red:#e60012;--hdr-red2:#ff2a3a;--hdr-ok:#8fe3a9;
  --hdr-line:rgba(255,255,255,.08);--hdr-line2:rgba(255,255,255,.16);--hdr-mute:#9a9aa8;--hdr-disp:'Noto Kufi Arabic','Tajawal',sans-serif;--hdr-num:'Rajdhani',sans-serif;
  position:fixed;top:0;bottom:0;left:0;height:100vh;height:100dvh;width:min(520px,100vw);z-index:1010;display:flex;flex-direction:row;direction:rtl;
  color:#f2f2f6;font-family:'Tajawal',sans-serif;line-height:1.6;background:#0a0a0f;box-shadow:40px 0 80px rgba(0,0,0,.65);
  transform:translateX(-104%);visibility:hidden;overflow:hidden;overflow:clip;transition:transform .6s var(--hdr-ease),visibility .6s}
.side-drawer.open{transform:none;visibility:visible}
html.sg-drswap .side-drawer{transition:none}
.side-drawer *,.side-drawer *::before,.side-drawer *::after{box-sizing:border-box}
:where(.side-drawer) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:0}
.side-drawer svg{display:block;flex:0 0 auto}
.side-drawer .num{font-family:var(--hdr-num);font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}
.side-drawer hr{width:26px;border:0;border-top:1px solid var(--hdr-line2);margin:4px 0}

/* ── المسطرة الجانبية ── */
.hdr-rail{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 14px;background:#060609;border-inline-start:1px solid var(--hdr-line2)}
.hdr-x{display:grid;place-items:center;width:40px;height:40px;color:#c9c9d6;transition:color .2s,transform .4s var(--hdr-spring)}
.hdr-x svg{width:20px;height:20px}
.hdr-rb{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#7f7f90;transition:color .25s,background .25s}
.hdr-rb svg{width:21px;height:21px}
.hdr-rb .c{position:absolute;top:-4px;left:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;font-family:var(--hdr-num);font-weight:700;font-size:10.5px;line-height:1;color:#fff;background:#2a2a34;box-shadow:0 0 0 2px #060609;transition:background .25s}
.hdr-rb::before{content:'';position:absolute;top:8px;bottom:8px;right:-1px;width:2px;background:var(--hdr-red);transform:scaleY(0);transition:transform .3s var(--hdr-ease);box-shadow:0 0 10px var(--hdr-red)}
.hdr-rb.on{color:#fff;background:rgba(230,0,18,.12)}
.hdr-rb.on::before{transform:none}
.hdr-rb.on .c{background:var(--hdr-red)}
.hdr-rail .sp{flex:1}
.hdr-rail .lg{font-family:var(--hdr-num);font-weight:700;font-size:10px;letter-spacing:.2em;color:#3c3c4a;writing-mode:vertical-rl;transform:rotate(180deg)}

/* ── الجسم الرئيسي ── */
.hdr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;position:relative;
  background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.025) 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,255,255,.025) 35px 36px),#0a0a0f}
.hdr-beam{position:absolute;top:0;bottom:0;left:0;width:3px;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,var(--hdr-red2) 30%,var(--hdr-red2) 70%,transparent);box-shadow:0 0 18px var(--hdr-red)}
.hdr-hd{position:relative;padding:22px 22px 14px;border-bottom:1px solid var(--hdr-line2);flex:0 0 auto}
.hdr-hd::after{content:'';position:absolute;bottom:-1px;right:22px;width:36px;height:2px;background:var(--hdr-red);box-shadow:0 0 10px var(--hdr-red)}
.hdr-eye{font-family:var(--hdr-num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:var(--hdr-red2);direction:ltr;text-align:right}
.hdr-hd h3{margin:2px 0 0;font-family:var(--hdr-disp);font-size:24px;font-weight:700;line-height:1.3;color:#fff}
.hdr-st{position:absolute;left:22px;bottom:14px;font-family:var(--hdr-num);font-size:12px;letter-spacing:.14em;color:#55556a;display:flex;align-items:center;gap:8px;direction:ltr}
.hdr-st i{width:7px;height:7px;background:var(--hdr-ok);box-shadow:0 0 8px var(--hdr-ok)}
.side-drawer.open .hdr-st i{animation:hdrBlink 2.4s infinite}
@keyframes hdrBlink{0%,100%{opacity:1}50%{opacity:.25}}
.hdr-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 22px 6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.hdr-body::-webkit-scrollbar{width:4px}
.hdr-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}

/* ── العناصر ── */
.hdr-item{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px;margin-bottom:10px;background:rgba(255,255,255,.028);border:1px solid var(--hdr-line);max-height:600px;
  transition:transform .35s var(--hdr-ease),opacity .3s,max-height .4s var(--hdr-ease),margin .4s var(--hdr-ease),padding .4s var(--hdr-ease),border-color .25s}
.hdr-item::before,.hdr-item::after{content:'';position:absolute;width:12px;height:12px;border:2px solid var(--hdr-red);transition:width .3s,height .3s}
.hdr-item::before{top:-1px;right:-1px;border-left:0;border-bottom:0}
.hdr-item::after{bottom:-1px;left:-1px;border-right:0;border-top:0}
.hdr-item.bdl{border-color:rgba(168,85,247,.3)}.hdr-item.bdl::before,.hdr-item.bdl::after{border-color:#a855f7}
.hdr-item.dgt{border-color:rgba(100,149,255,.25)}.hdr-item.dgt::before,.hdr-item.dgt::after{border-color:#6495ff}
.hdr-item.usd{border-color:rgba(34,197,94,.25)}.hdr-item.usd::before,.hdr-item.usd::after{border-color:#22c55e}
.hdr-item.gone{transform:translateX(-40px) scale(.96);opacity:0;max-height:0 !important;margin:0 !important;padding-block:0 !important;overflow:hidden;border-width:0 !important;pointer-events:none}
.side-drawer.open .hdr-item.in{animation:hdrIn .55s var(--hdr-ease) both;animation-delay:calc(.14s + var(--i,0) * .07s)}
@keyframes hdrIn{from{opacity:0;transform:translateX(-28px)}}
.hdr-im{position:relative;width:88px;height:88px;background:#0d0d13;overflow:hidden;display:grid;place-items:center;font-size:30px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.hdr-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--hdr-ease)}
.hdr-im .tg{position:absolute;top:4px;left:4px;font-family:var(--hdr-num);font-weight:700;font-size:9px;letter-spacing:.12em;padding:1px 5px;color:#fff;background:rgba(168,85,247,.9);line-height:1.4}
.hdr-info{min-width:0;display:flex;flex-direction:column}
.hdr-brand{font-family:var(--hdr-num);font-size:11.5px;letter-spacing:.22em;color:var(--hdr-red2);direction:ltr;text-align:right}
.hdr-brand.ar{font-family:'Tajawal',sans-serif;letter-spacing:0;font-weight:700;font-size:12px;direction:rtl}
.hdr-brand.bdl{color:#c4b5fd}.hdr-brand.dgt{color:#8fb3ff}.hdr-brand.usd{color:#4ade80}
.hdr-name{font-family:var(--hdr-disp);font-size:14px;font-weight:700;line-height:1.5;margin-top:2px;padding-inline-end:26px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hdr-lines{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.7;margin-top:2px}
.hdr-lines span{display:inline-block;padding:0 5px;margin-inline-start:4px;font-size:10px;color:#c4b5fd;background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.45);line-height:1.6}
.hdr-color{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:4px;padding:1px 8px;font-size:11px;color:#b4b4c2;background:rgba(255,255,255,.05);border:1px solid var(--hdr-line2)}
.hdr-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.hdr-pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hdr-pr .num{font-size:19px;color:#fff}
.hdr-old{font-family:var(--hdr-num);font-weight:600;font-size:12.5px;color:#6b6b7c;text-decoration:line-through;direction:ltr;display:inline-block}
.hdr-pct{font-family:var(--hdr-num);font-weight:700;font-size:11.5px;color:#fff;background:var(--hdr-red);padding:2px 6px 1px;line-height:1.2;direction:ltr;display:inline-block}
.hdr-save{font-size:11px;color:#4ade80;font-weight:700}
.hdr-one{font-size:11.5px;color:#4ade80;font-weight:700;white-space:nowrap}
.hdr-oos{font-size:11.5px;color:#ff6b76;font-weight:700;white-space:nowrap}
.hdr-sub{font-family:var(--hdr-num);font-size:12px;letter-spacing:.08em;color:#6b6b7c;margin-top:6px;direction:ltr;text-align:right}
.hdr-sub b{color:#d9d9e3;font-size:13.5px}
.hdr-qty{display:inline-flex;align-items:center;height:32px;border:1px solid var(--hdr-line2);background:#0a0a0f}
.hdr-qty button{width:32px;height:100%;display:grid;place-items:center;color:#d9d9e3;transition:background .2s,color .2s}
.hdr-qty button:active{background:rgba(230,0,18,.4)}
.hdr-qty b{min-width:30px;text-align:center;font-family:var(--hdr-num);font-weight:700;font-size:15.5px;border-inline:1px solid var(--hdr-line2);line-height:30px;color:#fff}
.hdr-qty svg{width:13px;height:13px}
.hdr-rm{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:30px;height:30px;color:#7f7f90;transition:color .2s,background .2s}
.hdr-rm svg{width:15px;height:15px}
.hdr-mini{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;font-weight:800;font-size:13px;color:#fff;background:var(--hdr-red);white-space:nowrap;transition:filter .2s,opacity .2s}
.hdr-mini svg{width:15px;height:15px}
.hdr-mini[disabled]{opacity:.4;cursor:not-allowed}

/* ── الحالة الفارغة ── */
.hdr-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:320px;text-align:center;padding:30px}
.hdr-empty svg{width:56px;height:56px;color:rgba(230,0,18,.6)}
.hdr-empty b{font-family:var(--hdr-disp);font-size:19px;font-weight:700;color:#fff}
.hdr-empty p{margin:0;color:var(--hdr-mute);font-size:14px}
.hdr-empty .hdr-cta{width:auto;padding:0 28px;margin-top:8px}

/* ── التذييل ── */
.hdr-ft{position:relative;flex:0 0 auto;padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));background:#08080c;border-top:1px solid var(--hdr-line2)}
.hdr-ft::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--hdr-red) 40%,var(--hdr-red) 60%,transparent)}
.hdr-rows{font-size:13.5px;color:var(--hdr-mute)}
.hdr-rows>div{display:flex;justify-content:space-between;padding:2px 0}
.hdr-rows>div[hidden]{display:none}
.hdr-rows .num{font-size:14.5px;color:#d9d9e3}
.hdr-rows .ok{color:var(--hdr-ok)}
.hdr-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:10px;border-top:1px dashed var(--hdr-line2);font-family:var(--hdr-disp);font-weight:700;font-size:15px;color:#fff}
.hdr-tot .num{font-size:32px;line-height:1;color:#fff}
.hdr-tot .num i{font-style:normal;font-size:17px;color:var(--hdr-red2);margin-right:3px}
.hdr-tools{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px}
.hdr-cpb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;font-weight:700;font-size:13px;color:#d9d9e3;border:1px dashed var(--hdr-line2);transition:border-color .2s,color .2s}
.hdr-cpb svg{width:15px;height:15px}
.hdr-cpb.on{border-color:var(--hdr-red);color:#fff}
.hdr-cpb.ok{border-style:solid;border-color:rgba(143,227,169,.5);color:var(--hdr-ok)}
.hdr-lnk{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:#b4b4c2;transition:color .2s}
.hdr-cpn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--hdr-ease)}
.hdr-cpn.open{grid-template-rows:1fr}
.hdr-cpn>div{min-height:0;overflow:hidden}
.hdr-cpn-box{display:flex;height:44px;margin-top:10px;border:1px solid var(--hdr-line2);background:rgba(255,255,255,.04);transition:border-color .2s}
.hdr-cpn-box:focus-within{border-color:var(--hdr-red)}
.hdr-cpn-box input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:#fff;padding:0 14px;font:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;border-radius:0;box-shadow:none}
.hdr-cpn-box input::placeholder{color:#6b6b7c;letter-spacing:0;text-transform:none}
.hdr-cpn-box button{padding:0 16px;font-weight:800;font-size:13px;color:#fff;background:var(--hdr-red);white-space:nowrap}
.hdr-cpn-msg{font-size:12.5px;margin-top:6px;min-height:1px;line-height:1.5}
.hdr-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;width:100%;margin-top:12px;font-family:var(--hdr-disp);font-weight:700;font-size:16px;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#ff1f2c,#c4000e);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:filter .25s,transform .2s var(--hdr-spring)}
.hdr-cta svg{width:20px;height:20px;transition:transform .3s var(--hdr-ease)}
.hdr-cta::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-140%)}
.hdr-cta:active{transform:scale(.98)}
.hdr-ft .hdr-lnk.c{display:flex;justify-content:center;width:100%;margin-top:10px}

/* ── التحويم (مؤشر فقط) ── */
@media (hover:hover) and (pointer:fine){
  .hdr-x:hover{color:#fff;transform:rotate(90deg)}
  .hdr-rb:hover{color:#fff}
  .hdr-item:hover{border-color:rgba(230,0,18,.45)}
  .hdr-item:hover::before,.hdr-item:hover::after{width:22px;height:22px}
  .hdr-item:hover .hdr-im img{transform:scale(1.07)}
  .hdr-qty button:hover{background:rgba(230,0,18,.2);color:#fff}
  .hdr-rm:hover{color:#fff;background:var(--hdr-red)}
  .hdr-mini:hover{filter:brightness(1.12)}
  .hdr-cpb:hover{border-color:var(--hdr-red);color:#fff}
  .hdr-lnk:hover{color:#fff}
  .hdr-cta:hover{filter:brightness(1.1)}
  .hdr-cta:hover::after{transition:transform .65s var(--hdr-ease);transform:translateX(330%)}
  .hdr-cta:hover svg{transform:translateX(-5px)}
}
.side-drawer button:focus-visible,.hdr-cpn-box input:focus-visible{outline:2px solid var(--hdr-red2);outline-offset:2px}

/* ── أثناء فتح الدرج: إخفاء العناصر العائمة والدوك ── */
#sg-chat-btn.sg-drhide,#sg-chat-greet.sg-drhide,#purchaseNotif.sg-drhide{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:opacity .2s,visibility .2s}
.dk.sg-drhide{transform:translateY(130%);opacity:0;pointer-events:none}
.dk-cart.sg-drhide{transform:translateY(160%) rotate(-40deg);opacity:0;pointer-events:none}
/* قفل التمرير بلا أي إعادة تخطيط: لا نلمس overflow على body */
.drawer-overlay{touch-action:none}
.side-drawer{touch-action:none}
.hdr-body{touch-action:pan-y}
@media (max-height:520px){.hdr-main{touch-action:pan-y}}

/* ── الجوال ── */
@media (max-width:900px){
  .side-drawer{width:100vw}
  .hdr-rail{flex-basis:54px}
  .hdr-hd{padding:18px 16px 12px}.hdr-hd::after{right:16px}.hdr-st{left:16px}.hdr-hd h3{font-size:22px}
  .hdr-body{padding:12px 16px 4px}
  .hdr-item{padding:12px;grid-template-columns:80px minmax(0,1fr);gap:12px}.hdr-im{width:80px;height:80px}
  .hdr-ft{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .hdr-qty button{width:36px}.hdr-qty{height:36px}.hdr-qty b{line-height:34px}
  .hdr-rm{width:34px;height:34px;top:7px;left:7px}
}
/* شاشة قصيرة (جوال أفقي): الدرج كله يُمرَّر */
@media (max-height:520px){
  .side-drawer{height:100vh;height:100dvh}
  .hdr-main{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .hdr-hd{padding-top:12px;padding-bottom:10px}
  .hdr-body{flex:0 0 auto;overflow:visible}
  .hdr-empty{min-height:0;padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .side-drawer,.drawer-overlay,.hdr-item,.hdr-cpn{transition-duration:.01ms !important}
  .side-drawer.open .hdr-item.in,.hdr-st i{animation:none !important}
}

/* #sg-hero */

/* ═══════════════════════════════════════════════════════════════════
   sg-hero — الهيرو «اللوحة التقنية» (h3). كل الحركات transform/opacity عدا لمعة كلمة SETUP.
   ═══════════════════════════════════════════════════════════════════ */
.h3{--h3r:#e60012;--h3r2:#ff2a3a;--h3l:rgba(255,255,255,.08);--h3l2:rgba(255,255,255,.16);--h3m:#9a9aa8;
  --h3disp:'Noto Kufi Arabic','Tajawal',sans-serif;--h3num:'Rajdhani',sans-serif;--h3px:'Minecraft','Pixelify Sans','Rajdhani',sans-serif;--h3e:cubic-bezier(.2,.8,.2,1);--h3s:cubic-bezier(.34,1.45,.64,1);
  position:relative;min-height:calc(100vh - var(--sg-navpad,74px));min-height:calc(100dvh - var(--sg-navpad,74px));overflow:hidden;overflow:clip;color:#f2f2f6;font-family:'Tajawal',sans-serif;
  background:radial-gradient(45% 60% at 22% 50%,rgba(230,0,18,.16),transparent 70%),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/80px 80px}
.h3 *,.h3 *::before,.h3 *::after{box-sizing:border-box}
.h3 svg{display:block;flex:0 0 auto}
.h3::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px);pointer-events:none;z-index:1}
.h3::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent 60%,rgba(0,0,0,.55));pointer-events:none}
/* زخارف HUD */
.h3-fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.h3-cross{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,42,58,.25),transparent)}
.h3-cor{position:absolute;width:22px;height:22px;border:2px solid rgba(255,42,58,.6)}
.h3-cor.a{top:14px;left:32px;border-right:0;border-bottom:0}.h3-cor.b{top:14px;right:32px;border-left:0;border-bottom:0}.h3-cor.c{bottom:14px;left:32px;border-right:0;border-top:0}.h3-cor.d{bottom:14px;right:32px;border-left:0;border-top:0}
.h3-hud{position:absolute;display:flex;gap:10px;font-family:var(--h3num);font-weight:700;font-size:11px;letter-spacing:.26em;color:#55556a;direction:ltr;white-space:nowrap}
.h3-hud.tl{top:22px;left:40px}.h3-hud.tr{top:22px;right:40px}.h3-hud.bl{bottom:22px;left:40px}.h3-hud.br{bottom:22px;right:40px}
.h3-hud i{width:7px;height:7px;margin-top:4px;background:#3fe07a;box-shadow:0 0 8px #3fe07a;animation:h3Blink 2s infinite}
@keyframes h3Blink{0%,100%{opacity:1}50%{opacity:.25}}
.h3-ruler{position:absolute;right:16px;top:50%;width:14px;height:360px;transform:translateY(-50%);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 12px) right/6px 100% no-repeat,repeating-linear-gradient(0deg,rgba(255,42,58,.7) 0 1px,transparent 1px 60px) right/14px 100% no-repeat}
.h3-ruler i{position:absolute;right:18px;top:0;width:2px;height:40px;background:var(--h3r2);box-shadow:0 0 10px var(--h3r2);animation:h3RulerY 6s ease-in-out infinite}
@keyframes h3RulerY{0%,100%{transform:translateY(0)}50%{transform:translateY(320px)}}
/* التخطيط */
.h3-in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;max-width:1400px;min-height:inherit;margin:0 auto;padding:40px 40px 56px}
.h3-txt{display:flex;flex-direction:column;align-items:flex-start}
/* الشارة: ضوء يدور على الإطار، التاج يتوهّج ويميل، ولمعة تمرّ */
.h3-badge{position:relative;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;overflow:hidden;overflow:clip;isolation:isolate;font-weight:800;font-size:13.5px;color:#fff;
  -webkit-clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.h3-badge::before{content:'';position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,rgba(230,0,18,.35) 0 60%,#ff2a3a 72%,#fff 78%,#ff2a3a 84%,rgba(230,0,18,.35) 100%);animation:h3Spin 5s linear infinite}
.h3-badge::after{content:'';position:absolute;inset:1.5px;z-index:-1;background:linear-gradient(180deg,#1a0b0e,#0c0709);-webkit-clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
@keyframes h3Spin{to{transform:rotate(360deg)}}
.h3-badge .sh{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:h3Sweep 6s ease-in-out 2s infinite;pointer-events:none}
@keyframes h3Sweep{0%{transform:translateX(-140%)}18%{transform:translateX(340%)}100%{transform:translateX(340%)}}
.h3-badge .cw{position:relative;display:grid;place-items:center;width:24px;height:24px;font-size:18px;line-height:1}
.h3-badge .cw::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,201,60,.55),transparent);animation:h3CrownGlow 2.6s ease-in-out infinite}
.h3-badge .cw > span{position:relative;display:inline-block;animation:h3CrownTilt 5s ease-in-out infinite;transform-origin:50% 80%}
@keyframes h3CrownGlow{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes h3CrownTilt{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-12deg)}84%{transform:rotate(9deg)}92%{transform:rotate(-4deg)}}
.h3-badge .t{letter-spacing:.01em}
.h3-badge b{color:var(--h3r2);font-size:13.5px;font-weight:800;text-shadow:0 0 12px rgba(255,42,58,.6)}
/* السطر التعريفي */
.h3-eye{display:flex;align-items:center;justify-content:flex-end;gap:12px;align-self:stretch;margin:16px 0 6px;font-family:var(--h3num);font-weight:700;font-size:12.5px;letter-spacing:.32em;color:#8a8a9a;direction:ltr}
.h3-eye i{flex:0 0 40px;height:1px;background:linear-gradient(90deg,transparent,var(--h3r2))}
/* العنوان الكبير */
.h3-big{margin:2px 0 0;align-self:stretch;font-family:var(--h3px);font-weight:700;font-size:clamp(54px,7.2vw,108px);line-height:.9;letter-spacing:.02em;color:#fff;direction:ltr;text-align:right}
.h3-big .w{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h3-big .w > span{display:inline-block;position:relative}
#page-home.visible .h3-big .w > span{animation:h3WordUp .9s var(--h3e) both}
#page-home.visible .h3-big .w:nth-child(2) > span{animation-delay:.12s}#page-home.visible .h3-big .w:nth-child(3) > span{animation-delay:.24s}
@keyframes h3WordUp{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.h3-big .lvl::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;background:linear-gradient(90deg,transparent,var(--h3r2) 30%,var(--h3r2));transform:scaleX(0);transform-origin:right}
#page-home.visible .h3-big .lvl::after{animation:h3LineIn .8s var(--h3e) .9s both}
@keyframes h3LineIn{to{transform:none}}
.h3-big .o{color:rgba(255,255,255,.04);-webkit-text-stroke:2px rgba(255,255,255,.55)}
.h3-big .r{color:transparent;background:linear-gradient(100deg,#ff2a3a 0%,#ff2a3a 38%,#ffd5d8 50%,#ff2a3a 62%,#ff2a3a 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;animation:h3SetupShine 7s linear 1.2s infinite;filter:drop-shadow(0 0 28px rgba(230,0,18,.45))}
@keyframes h3SetupShine{0%{background-position:100% 0}22%{background-position:0 0}100%{background-position:0 0}}
/* العنوان العربي والوصف والأزرار */
.h3-ar{align-self:stretch;margin-top:18px;font-family:var(--h3disp);font-size:27px;font-weight:700;line-height:1.5;color:#e9e9f0}
.h3-ar em{font-style:normal;color:var(--h3r2)}
.h3-sub{align-self:stretch;margin:6px 0 20px;max-width:520px;font-size:16px;line-height:1.9;color:#b4b4c2}
.h3-ctas{display:flex;gap:12px;flex-wrap:wrap}
.h3-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;overflow:hidden;cursor:pointer;font-family:var(--h3disp);font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(180deg,#ff1f2c,#c4000e);-webkit-clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:filter .25s,transform .2s var(--h3s)}
.h3-cta svg{width:20px;height:20px;transition:transform .3s var(--h3e)}
.h3-cta::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-140%)}
.h3-cta:active{transform:scale(.97)}
.h3-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 26px;cursor:pointer;font-family:var(--h3disp);font-weight:700;font-size:15px;color:#e9e9f0;border:1px solid var(--h3l2);transition:border-color .2s,background .2s,color .2s}
.h3-ghost svg{width:18px;height:18px}
.h3-stats{display:flex;align-items:center;align-self:stretch;margin-top:24px;padding-top:14px;border-top:1px solid var(--h3l)}
.h3-stats > div{display:flex;align-items:baseline;gap:8px;padding-inline-end:26px;margin-inline-end:26px;border-inline-end:1px solid var(--h3l)}
.h3-stats > div:last-child{border:0;margin:0;padding:0}
.h3-stats .stat-n{font-family:var(--h3num);font-weight:700;font-size:26px;line-height:1;color:#fff;direction:ltr;display:inline-block;font-variant-numeric:tabular-nums}
.h3-stats .stat-l{font-size:13px;color:var(--h3m)}
/* كونسول المنتج */
.h3-con{position:relative;height:min(640px,calc(100vh - var(--sg-navpad,74px) - 110px))}
.h3-frame{position:absolute;inset:0;padding:1.5px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(230,0,18,.9));-webkit-clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px)}
.h3-frame::after{content:'';position:absolute;inset:1.5px;background:linear-gradient(180deg,#0e0e14,#08080c);-webkit-clip-path:polygon(27px 0,100% 0,100% calc(100% - 27px),calc(100% - 27px) 100%,0 100%,0 27px);clip-path:polygon(27px 0,100% 0,100% calc(100% - 27px),calc(100% - 27px) 100%,0 100%,0 27px)}
.h3-con-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:26px 28px}
.h3-con-hd{display:flex;justify-content:space-between;align-items:center;font-family:var(--h3num);font-weight:700;font-size:12px;letter-spacing:.26em;color:#7f7f90;direction:ltr}
.h3-con-hd b{color:var(--h3r2)}
.h3-con-hd .dots{display:flex;gap:6px}.h3-con-hd .dots i{width:8px;height:8px;background:#2a2a34}.h3-con-hd .dots i.on{background:var(--h3r2);box-shadow:0 0 8px var(--h3r2)}
.h3-view{position:relative;flex:1 1 auto;min-height:0;margin:10px -10px;display:grid;place-items:center}
/* صورة المنتج كبطاقة مقطوعة الزوايا (تناسب الصور ذات الخلفية البيضاء والداكنة معاً) تطفو داخل الحلقة */
.h3-pimg{position:absolute;inset:0;margin:auto;width:auto;height:78%;max-width:86%;object-fit:contain;background:#0d0d13;animation:h3Float 6s ease-in-out infinite;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));
  -webkit-clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.h3-pimg.nomask{height:56%;background:transparent;-webkit-clip-path:none;clip-path:none}
@keyframes h3Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.h3-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.h3-specs:empty{display:none}
.h3-spec{padding:10px 12px;border:1px solid var(--h3l);background:rgba(255,255,255,.025)}
.h3-spec small{display:block;font-family:var(--h3num);font-size:10.5px;letter-spacing:.24em;color:#55556a;direction:ltr;text-align:right}
.h3-spec b{display:block;margin-top:2px;font-family:var(--h3num);font-weight:700;font-size:19px;color:#fff;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-spec b i{font-style:normal;font-size:12px;color:var(--h3r2);margin-left:3px}
.h3-stk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--h3m)}
.h3-stk[hidden]{display:none}
.h3-stk .segs{display:flex;gap:3px;flex:1;height:5px}.h3-stk .segs i{flex:1;background:rgba(255,255,255,.08)}.h3-stk .segs i.f{background:var(--h3r)}
.h3-con-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--h3l2)}
.h3-con-ft .pn{min-width:0}
.h3-con-ft .pn span{display:block;font-family:var(--h3num);font-size:11.5px;letter-spacing:.26em;color:var(--h3r2)}
.h3-con-ft .pn b{display:block;font-family:var(--h3disp);font-size:18px;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-con-ft .pn small{display:block;font-size:12px;color:var(--h3m);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-con-ft .pn small:empty{display:none}
.h3-con-ft .pr{flex:0 0 auto;font-family:var(--h3num);font-weight:700;font-size:34px;line-height:1;color:#fff;direction:ltr}
.h3-con-ft .pr i{font-style:normal;font-size:18px;color:var(--h3r2);margin-right:2px}
.h3-mini{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;font-weight:800;font-size:14px;color:#fff;text-decoration:none;background:var(--h3r);-webkit-clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:filter .2s}
.h3-mini svg{width:16px;height:16px}
/* التحويم (مؤشر فقط) */
@media (hover:hover) and (pointer:fine){
  .h3-cta:hover{filter:brightness(1.1)}.h3-cta:hover::after{transition:transform .65s var(--h3e);transform:translateX(330%)}.h3-cta:hover svg{transform:translateX(-5px)}
  .h3-ghost:hover{border-color:var(--h3r);background:rgba(230,0,18,.1);color:#fff}
  .h3-mini:hover{filter:brightness(1.12)}
}
.h3-cta:focus-visible,.h3-ghost:focus-visible,.h3-mini:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ── شاشات أضيق ── */
@media (max-width:1400px){.h3-in{padding:36px 32px 52px}.h3-big{font-size:clamp(54px,6.6vw,96px)}}
@media (max-width:1024px){
  .h3-in{grid-template-columns:1fr;gap:18px;align-items:start;padding:40px 18px 24px;min-height:0}
  .h3{min-height:0}
  .h3-fx .h3-hud,.h3-cor,.h3-cross,.h3-ruler{display:none}
  .h3-big{font-size:clamp(50px,13vw,72px)}.h3-ar{font-size:22px;margin-top:14px}.h3-sub{font-size:14.5px;margin:6px 0 18px}
  .h3-eye{font-size:11px;letter-spacing:.2em;gap:8px}.h3-eye i{flex-basis:24px}
  .h3-cta,.h3-ghost{height:50px;padding:0 20px;font-size:15px}
  .h3-stats{margin-top:20px;flex-wrap:wrap;gap:10px 0}.h3-stats > div{padding-inline-end:14px;margin-inline-end:14px}.h3-stats .stat-n{font-size:20px}.h3-stats .stat-l{font-size:12px}
  .h3-con{height:470px;max-height:none}.h3-con-in{padding:16px}
  .h3-specs{gap:6px}.h3-spec{padding:7px 8px}.h3-spec b{font-size:15px}
  .h3-con-ft .pr{font-size:26px}.h3-con-ft .pn b{font-size:15px}.h3-mini{height:38px;padding:0 12px;font-size:13px}
}
@media (max-width:380px){.h3-badge{height:36px;font-size:12px;gap:7px;padding:0 12px 0 10px}.h3-con-ft{flex-wrap:wrap}.h3-mini{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){
  .h3 *,.h3 *::before,.h3 *::after{animation:none !important;transition:none !important}
  .h3-big .w > span,.h3-big .lvl::after{opacity:1;transform:none}
}

/* #sg-chat */

/* ══════════════════════════════════════════════════════════════
   sg-chat · المساعد الذكي — «وصلة الاتصال» (HUD)
   زرّ عائم + فقاعة ترحيب + نافذة محادثة. حركة على transform/opacity فقط.
   ══════════════════════════════════════════════════════════════ */
#sg-chat-btn,#sg-chat-greet,#sg-chat-window{--cw-red:#e60012;--cw-red2:#ff2a3a;--cw-ok:#8fe3a9;--cw-line:rgba(255,255,255,.08);--cw-line2:rgba(255,255,255,.16);--cw-mute:#9a9aa8;
  --cw-disp:'Noto Kufi Arabic','Tajawal',sans-serif;--cw-num:'Rajdhani',sans-serif;--cw-ease:cubic-bezier(.2,.8,.2,1);--cw-spring:cubic-bezier(.34,1.45,.64,1);
  --cw-cut:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);--cw-cut7:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
#sg-chat-btn *,#sg-chat-btn *::before,#sg-chat-greet *,#sg-chat-window *,#sg-chat-window *::before,#sg-chat-window *::after{box-sizing:border-box}

/* ── الزرّ العائم: روبوت سوبر جيمز داخل لوح HUD ──
   الوجه مبنيّ من عناصر HTML (لا SVG متحرّك): رمش العينين، نبض الهوائي، مسح ضوئي داخل اللوح، أقواس تصويب تتنفّس، طفو خفيف — كلّها transform/opacity. */
#sg-chat-btn{position:fixed;bottom:28px;left:28px;z-index:9000;width:64px;height:64px;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:'Tajawal',sans-serif;outline:0}
#sg-chat-btn:focus-visible{outline:2px solid var(--cw-red2);outline-offset:8px}
#sg-chat-btn .cb-sh,#sg-chat-btn .cb-pl,#sg-chat-btn .cb-brk,#sg-chat-btn .cb-core,#sg-chat-btn .cb-body,#sg-chat-btn .cb-sw,#sg-chat-btn .cb-bot,#sg-chat-btn .cb-bot i,#sg-chat-btn .cb-dot{display:block;position:absolute}
.cb-sh{inset:8px;border-radius:50%;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 28px rgba(230,0,18,.22)}
.cb-pl{inset:0;pointer-events:none;clip-path:var(--cw-cut);background:var(--cw-red);opacity:0;transform:scale(.92)}
#sg-chat-btn:not(.open) .cb-pl{animation:cbPl 3.2s var(--cw-ease) infinite}
@keyframes cbPl{0%,8%{transform:scale(.92);opacity:0}12%{opacity:.34}60%,100%{transform:scale(1.55);opacity:0}}
.cb-brk{inset:-7px;pointer-events:none;--c:var(--cw-red2);opacity:.9;
  background:linear-gradient(var(--c),var(--c)) top left/13px 2px no-repeat,linear-gradient(var(--c),var(--c)) top left/2px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/13px 2px no-repeat,linear-gradient(var(--c),var(--c)) top right/2px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/13px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/2px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/13px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/2px 13px no-repeat;
  transition:transform .45s var(--cw-spring),opacity .3s}
#sg-chat-btn:not(.open) .cb-brk{animation:cbBrk 3.2s var(--cw-ease) infinite}
@keyframes cbBrk{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.1);opacity:1}}
#sg-chat-btn:hover .cb-brk{transform:scale(1.18);opacity:1;animation:none}
#sg-chat-btn.open .cb-brk{transform:scale(.8) rotate(45deg);opacity:0}
.cb-core{inset:0;pointer-events:none}
#sg-chat-btn:not(.open) .cb-core{animation:cbFloat 3.2s ease-in-out infinite}
@keyframes cbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cb-body{inset:0;color:#fff;clip-path:var(--cw-cut);background:linear-gradient(160deg,var(--cw-red2),#8d000e 70%);transition:transform .4s var(--cw-spring)}
.cb-body::before{content:'';position:absolute;inset:1.5px;clip-path:var(--cw-cut);background:linear-gradient(160deg,#1c1c25,#0b0b10 60%,#17080c);transition:opacity .3s}
#sg-chat-btn:hover .cb-body{transform:translateY(-2px)}
#sg-chat-btn:hover .cb-body::before,#sg-chat-btn.open .cb-body::before{opacity:0}
#sg-chat-btn.open .cb-body{transform:none}
.cb-sw{left:4px;right:4px;top:0;height:14px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,42,58,.55) 60%,var(--cw-red2));opacity:0;transform:translateY(-14px)}
#sg-chat-btn:not(.open) .cb-sw{animation:cbSw 3.2s linear infinite}
@keyframes cbSw{0%{transform:translateY(-14px);opacity:0}10%{opacity:.9}55%{transform:translateY(64px);opacity:.9}60%,100%{transform:translateY(64px);opacity:0}}
/* الوجه */
.cb-bot{left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;transition:transform .4s var(--cw-spring),opacity .25s}
#sg-chat-btn:hover .cb-bot{transform:translateY(-2px) rotate(-7deg)}
#sg-chat-btn.open .cb-bot{opacity:0;transform:rotate(90deg) scale(.5)}
.cb-bot .an{left:50%;top:1px;width:2px;height:6px;margin-left:-1px;background:#fff;opacity:.9}
.cb-bot .tp{left:50%;top:-1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--cw-red2);box-shadow:0 0 6px var(--cw-red2)}
#sg-chat-btn:not(.open) .cb-bot .tp{animation:cbTip 1.6s ease-in-out infinite}
@keyframes cbTip{0%,100%{opacity:1}50%{opacity:.25}}
.cb-bot .hd{left:2px;right:2px;top:7px;height:23px;border:2px solid #fff;border-radius:5px}
.cb-bot .er{top:13px;width:2px;height:7px;background:#fff;border-radius:1px}
.cb-bot .er.l{left:-1px}.cb-bot .er.r{right:-1px}
.cb-bot .ey{top:13px;width:6px;height:5px;background:#fff;border-radius:1.5px;transform-origin:50% 50%;transition:transform .3s var(--cw-ease)}
.cb-bot .ey.l{left:8px}.cb-bot .ey.r{right:8px}
#sg-chat-btn:not(.open) .cb-bot .ey{animation:cbBlink 4.6s ease-in-out infinite}
#sg-chat-btn:not(.open) .cb-bot .ey.r{animation-delay:.04s}
@keyframes cbBlink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}80%{transform:scaleY(1)}83%{transform:scaleY(.12)}86%{transform:scaleY(1)}}
#sg-chat-btn:hover .cb-bot .ey{transform:translateX(-2px) scaleY(1);animation:none}
.cb-bot .mo{left:50%;top:22px;width:10px;height:2px;margin-left:-5px;background:#fff;border-radius:1px;transition:transform .3s var(--cw-ease)}
#sg-chat-btn:hover .cb-bot .mo{transform:scaleX(1.3)}
.cb-ic-x{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transform:rotate(-90deg) scale(.5);transition:transform .4s var(--cw-spring),opacity .25s}
.cb-ic-x svg{width:22px;height:22px;display:block}
#sg-chat-btn.open .cb-ic-x{opacity:1;transform:none}
.cb-dot{top:-1px;right:-1px;width:11px;height:11px;pointer-events:none;background:var(--cw-ok);box-shadow:0 0 0 2px #07070a,0 0 10px var(--cw-ok);animation:cbDot 2.4s infinite;transition:opacity .25s}
@keyframes cbDot{0%,100%{opacity:1}50%{opacity:.3}}
#sg-chat-btn.open .cb-dot{opacity:0;animation:none}
#sg-chat-badge{position:absolute;top:-7px;left:-7px;min-width:20px;height:20px;padding:0 6px;display:none;align-items:center;justify-content:center;font-family:var(--cw-num);font-weight:700;font-size:11.5px;line-height:1;color:#fff;background:var(--cw-red);box-shadow:0 0 0 2px #07070a,0 0 12px rgba(230,0,18,.6);animation:cbBadge .4s var(--cw-spring) both}
@keyframes cbBadge{from{transform:scale(0)}to{transform:none}}

/* ── فقاعة الترحيب ── */
#sg-chat-greet{position:fixed;bottom:36px;left:108px;z-index:8999;width:max-content;max-width:min(300px,calc(100vw - 130px));padding:8px 14px 9px;direction:rtl;text-align:right;white-space:normal;
  color:#f2f2f6;font-family:'Tajawal',sans-serif;font-size:13.5px;font-weight:700;line-height:1.5;background:#0d0d13;border:1px solid var(--cw-line2);border-left:3px solid var(--cw-red);
  box-shadow:0 14px 36px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-10px);transition:opacity .4s,transform .45s var(--cw-spring),visibility .4s}
#sg-chat-greet.show{opacity:1;visibility:visible;transform:none}
#sg-chat-greet::before{content:'';position:absolute;top:-1px;right:-1px;width:10px;height:10px;border:2px solid var(--cw-red);border-left:0;border-bottom:0}
#sg-chat-greet::after{content:'';position:absolute;left:-10px;bottom:14px;border:5px solid transparent;border-right:7px solid var(--cw-red);border-left:0}
#sg-chat-greet small{display:block;font-family:var(--cw-num);font-weight:700;font-size:10px;letter-spacing:.26em;color:var(--cw-red2);direction:ltr;text-align:right;line-height:1.2;margin-bottom:2px}
#sg-chat-greet span{display:block}

/* ── نافذة المحادثة ── */
#sg-chat-window{position:fixed;bottom:106px;left:28px;z-index:9000;width:384px;height:min(600px,calc(100vh - var(--sg-dock,0px) - 150px));height:min(600px,calc(100dvh - var(--sg-dock,0px) - 150px));display:none;flex-direction:column;
  overflow:hidden;overflow:clip;direction:rtl;color:#f2f2f6;font-family:'Tajawal',sans-serif;line-height:1.6;transform-origin:bottom left;
  background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px),#0a0a0f;
  border:1px solid var(--cw-line2);box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 50px rgba(230,0,18,.08)}
#sg-chat-window.open{display:flex;animation:cwOpen .45s var(--cw-spring) both}
#sg-chat-window.closing{animation:cwClose .22s cubic-bezier(.4,0,1,1) forwards}
@keyframes cwOpen{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes cwClose{to{opacity:0;transform:translateY(14px) scale(.94)}}
#sg-chat-window::before,#sg-chat-window::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--cw-red);z-index:6;pointer-events:none}
#sg-chat-window::before{top:-1px;right:-1px;border-left:0;border-bottom:0}
#sg-chat-window::after{bottom:-1px;left:-1px;border-right:0;border-top:0}
.cw-beam{position:absolute;top:0;left:0;right:0;height:2px;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,var(--cw-red) 35%,var(--cw-red2) 50%,var(--cw-red) 65%,transparent);transform:scaleX(0);transform-origin:50% 50%}
#sg-chat-window.open .cw-beam{animation:cwBeam .7s var(--cw-ease) .15s both}
@keyframes cwBeam{to{transform:none}}

/* الرأس */
.cw-head{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 18px 12px;border-bottom:1px solid var(--cw-line2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.cw-head::after{content:'';position:absolute;bottom:-1px;right:18px;width:36px;height:2px;background:var(--cw-red);box-shadow:0 0 10px var(--cw-red)}
.cw-avatar{position:relative;flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;color:#fff;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:linear-gradient(160deg,var(--cw-red2),#8d000e 70%)}
.cw-avatar::before{content:'';position:absolute;inset:1.5px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:linear-gradient(160deg,#1c1c25,#0b0b10 60%,#17080c)}
.cw-avatar svg{position:relative;width:24px;height:24px;display:block}
.cw-info{flex:1 1 auto;min-width:0}
.cw-eye{font-family:var(--cw-num);font-weight:700;font-size:10.5px;letter-spacing:.28em;color:var(--cw-red2);direction:ltr;text-align:right;line-height:1.2}
.cw-name{font-family:var(--cw-disp);font-size:15.5px;font-weight:700;color:#fff;line-height:1.45;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:2px;font-family:var(--cw-num);font-weight:600;font-size:11px;letter-spacing:.16em;color:#6b6b7c;direction:ltr;line-height:1.2}
.cw-status i{width:7px;height:7px;flex:0 0 auto;background:var(--cw-ok);box-shadow:0 0 8px var(--cw-ok)}
#sg-chat-window.open .cw-status i{animation:cwBlink 2.4s infinite}
@keyframes cwBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cw-close{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;padding:0;margin:0;border:1px solid var(--cw-line);border-radius:0;color:#c9c9d6;background:rgba(255,255,255,.04);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s,background .2s,transform .4s var(--cw-spring)}
.cw-close svg{width:16px;height:16px;display:block}
.cw-close:hover,.cw-close:focus-visible{color:#fff;border-color:var(--cw-red);background:rgba(230,0,18,.16);transform:rotate(90deg);outline:0}

/* الرسائل */
.cw-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 10px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.cw-msgs::-webkit-scrollbar{width:4px}
.cw-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}
.cw-msg{display:flex;align-items:flex-end;gap:8px;animation:cwMsg .35s var(--cw-ease) both}
@keyframes cwMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cw-msg.user{flex-direction:row-reverse}
.cw-msg-av{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:var(--cw-red2);background:#111118;border:1px solid var(--cw-line2);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.cw-msg-av svg{width:15px;height:15px;display:block}
.cw-bubble{position:relative;max-width:82%;padding:10px 13px 7px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;color:#dcdce4;background:rgba(255,255,255,.035);border:1px solid var(--cw-line)}
.cw-msg.bot .cw-bubble{border-right:2px solid var(--cw-red);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.cw-msg.user .cw-bubble{color:#fff;background:linear-gradient(160deg,rgba(230,0,18,.24),rgba(230,0,18,.1));border-color:rgba(230,0,18,.45);clip-path:polygon(9px 0,100% 0,100% 100%,0 100%,0 9px)}
.cw-bubble a{color:#ff6b78}
.cw-time{display:block;margin-top:5px;font-family:var(--cw-num);font-weight:600;font-size:10.5px;letter-spacing:.1em;line-height:1.2;color:#55556a;direction:ltr;text-align:right}
.cw-msg.user .cw-time{text-align:left;color:rgba(255,255,255,.45)}
.cw-typing .cw-bubble{padding:13px 16px}
.cw-dots{display:flex;gap:5px;align-items:center;height:8px}
.cw-dots span{width:7px;height:7px;background:var(--cw-red2);animation:cwDot 1.1s ease-in-out infinite}
.cw-dots span:nth-child(2){animation-delay:.15s}
.cw-dots span:nth-child(3){animation-delay:.3s}
@keyframes cwDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}

/* أزرار الاختيار داخل المحادثة (مناطق الشحن / الألوان) */
.cw-zones{display:flex;flex-wrap:wrap;gap:7px;width:100%;padding:0 0 4px;animation:cwMsg .35s var(--cw-ease) both}
.cw-zone-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;margin:0;font:inherit;font-size:12.5px;line-height:1.35;color:#fff;text-align:right;background:rgba(255,255,255,.035);border:1px solid var(--cw-line2);border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent;clip-path:var(--cw-cut7);transition:background .2s,border-color .2s,transform .3s var(--cw-spring)}
.cw-zone-btn:hover,.cw-zone-btn:focus-visible{background:rgba(230,0,18,.18);border-color:var(--cw-red);transform:translateY(-2px);outline:0}
.cw-zone-btn .zone-name{font-weight:700;display:flex;align-items:center;gap:8px}
.cw-zone-btn .zone-fee{font-size:11.5px;font-weight:700;color:var(--cw-red2)}
.color-sw{width:16px;height:16px;flex:0 0 auto;border:2px solid rgba(255,255,255,.3);box-shadow:0 0 0 1px #000}
.color-sw-none{background:conic-gradient(#e60012,#ff8a8a,#fff,#888,#e60012)}

/* الردود السريعة */
.cw-quick{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;padding:10px 16px;border-top:1px solid var(--cw-line)}
.cw-q{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;margin:0;font:inherit;font-weight:700;font-size:12.5px;line-height:1;color:#c9c9d6;background:rgba(255,255,255,.035);border:1px solid var(--cw-line2);border-radius:0;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;clip-path:var(--cw-cut7);transition:color .2s,background .2s,border-color .2s}
.cw-q svg{width:14px;height:14px;display:block;color:var(--cw-red2)}
.cw-q:hover,.cw-q:focus-visible{color:#fff;background:rgba(230,0,18,.18);border-color:var(--cw-red);outline:0}

/* الإدخال */
.cw-foot{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px 10px;border-top:1px solid var(--cw-line2);background:#08080c}
.cw-foot::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cw-red) 40%,var(--cw-red) 60%,transparent)}
.cw-input{flex:1 1 auto;min-width:0;height:40px;padding:0 13px;margin:0;font:inherit;font-size:13.5px;color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--cw-line2);border-radius:0;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
.cw-input::placeholder{color:#55556a;opacity:1}
.cw-input:focus{border-color:var(--cw-red);background:rgba(230,0,18,.06)}
.cw-send{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:0;color:#fff;background:var(--cw-red);cursor:pointer;-webkit-tap-highlight-color:transparent;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:filter .2s,transform .3s var(--cw-spring),opacity .2s}
.cw-send svg{width:18px;height:18px;display:block}
.cw-send:hover,.cw-send:focus-visible{filter:brightness(1.12);transform:translateX(-2px);outline:0}
.cw-send:active{transform:scale(.94)}
.cw-send:disabled{opacity:.35;cursor:not-allowed;transform:none;filter:none}
.cw-note{flex:0 0 auto;padding:0 16px 9px;background:#08080c;font-size:11px;line-height:1.4;color:#55556a;text-align:center}

/* الجوال الضيّق: الردود السريعة صفّ واحد قابل للتمرير، وبلا سطر التنويه لتوفير المساحة */
@media (max-width:520px){
  .cw-quick{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:9px 14px}
  .cw-quick::-webkit-scrollbar{display:none}
  .cw-note{display:none}
  .cw-msgs{padding:14px 14px 8px}
  .cw-foot{padding:10px 14px}
}

/* شاشة قصيرة (هاتف بالعرض): النافذة تملأ الارتفاع — !important لتجاوز قواعد الدوك ذات الأولوية الأعلى */
@media (max-height:520px){
  #sg-chat-window{top:8px!important;bottom:8px!important;height:auto!important;max-height:none!important;width:min(440px,calc(100vw - 20px))!important;left:10px!important;right:auto!important}
  .cw-note{display:none}
}

/* حركة أقلّ */
@media (prefers-reduced-motion:reduce){
  .cb-pl,.cb-brk,.cb-core,.cb-sw,.cb-bot .tp,.cb-bot .ey,.cb-dot,#sg-chat-badge,.cw-status i,.cw-dots span,.cw-msg,.cw-zones,.cw-beam,#sg-chat-window.open,#sg-chat-window.closing{animation:none}
  .cw-beam{transform:none}
}

/* #sg-card */

/* ══════════════════════════════════════════════════════════════
   sg-card · بطاقة المنتج «اللوح — الشريط المائل» (A3)
   تُستخدم في كل شبكات المنتجات وصفوف الرئيسية. حركة عند التمرير فقط (transform/opacity).
   ══════════════════════════════════════════════════════════════ */
.prods-grid{gap:14px}
@media (max-width:600px){.prods-grid,.wishlist-grid{gap:10px !important}}
.prod-row-track .p-card{padding:0 7px}
.p-card.sgc{display:block;text-decoration:none;color:inherit;height:100%;-webkit-tap-highlight-color:transparent}
.sgc,.sgc *,.sgc *::before,.sgc *::after{box-sizing:border-box}
.sgc{--sgc-red:#e60012;--sgc-red2:#ff2a3a;--sgc-ok:#8fe3a9;--sgc-lo:#ffab40;--sgc-line:rgba(255,255,255,.08);--sgc-line2:rgba(255,255,255,.16);--sgc-ease:cubic-bezier(.2,.8,.2,1);
  --sgc-cut:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);font-family:'Tajawal',sans-serif;line-height:1.5;direction:rtl}
.sgc-pl{position:relative;height:100%;padding:1px;background:var(--sgc-line2);clip-path:var(--sgc-cut);transition:transform .35s var(--sgc-ease)}
.sgc-pl::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,var(--sgc-red2),rgba(255,255,255,.2) 45%,rgba(255,255,255,.2) 55%,var(--sgc-red));opacity:0;transition:opacity .35s}
.sgc:hover .sgc-pl{transform:translateY(-5px)}
.sgc:hover .sgc-pl::before{opacity:1}
.sgc-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,#13131a,#0c0c11 60%);clip-path:var(--sgc-cut)}
.sgc-beam{position:absolute;top:0;left:18px;right:0;height:2px;z-index:4;background:linear-gradient(90deg,transparent,var(--sgc-red2) 30%,var(--sgc-red2) 70%,transparent);transform:scaleX(0);transition:transform .45s var(--sgc-ease)}
.sgc:hover .sgc-beam{transform:none}
/* الرأس فوق الصورة */
.sgc-hd{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 0}
.sgc-br{display:inline-flex;align-items:center;gap:7px;max-width:62%;padding:4px 8px 3px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.2em;line-height:1.2;color:#fff;background:rgba(10,10,15,.78);direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgc-br::before{content:'';flex:0 0 auto;width:3px;height:12px;background:var(--sgc-red)}
.sgc-br:empty{display:none}
.sgc-sn{padding:4px 8px 3px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.16em;line-height:1.2;color:#8a8a9a;background:rgba(10,10,15,.78);direction:ltr;white-space:nowrap}
.sgc-sn b{color:#ffc247;font-weight:700}
/* مسرح الصورة */
.sgc-im{position:relative;aspect-ratio:1/.95;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#222230,#111118 72%);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
.sgc-im::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px);pointer-events:none}
.sgc-im::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,42,58,.16),transparent 62%);opacity:0;transition:opacity .5s;pointer-events:none}
.sgc:hover .sgc-im::after{opacity:1}
.sgc-im img{position:relative;z-index:1;width:80%;height:80%;object-fit:contain;transition:transform .55s var(--sgc-ease)}
.sgc:hover .sgc-im img{transform:translateY(-6px) scale(1.06)}
.sgc-ic{position:relative;z-index:1;font-size:64px;line-height:1}
.sgc-im i.c{position:absolute;z-index:2;width:16px;height:16px;border:2px solid var(--sgc-red);transition:transform .35s var(--sgc-ease),opacity .3s}
.sgc-im i.tl{top:42px;right:8px;border-left:0;border-bottom:0}
.sgc-im i.br{bottom:34px;left:8px;border-right:0;border-top:0}
.sgc-im i.tr{top:42px;left:8px;border-right:0;border-bottom:0;opacity:0;transform:translate(8px,8px)}
.sgc-im i.bl{bottom:34px;right:8px;border-left:0;border-top:0;opacity:0;transform:translate(-8px,-8px)}
.sgc:hover .sgc-im i.tr,.sgc:hover .sgc-im i.bl{opacity:1;transform:none}
.sgc-rb{position:absolute;top:46px;right:0;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);padding:10px 5px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;letter-spacing:.2em;line-height:1;color:#fff;background:var(--sgc-red);direction:ltr}
.sgc-rb.new{background:#fff;color:#0a0a0f}
.sgc-rb.hot{background:#ff7a00}
.sgc-tab{position:absolute;left:0;bottom:0;z-index:3;display:flex;align-items:baseline;gap:7px;padding:8px 20px 6px 14px;color:#fff;background:var(--sgc-red);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.sgc-tab b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:23px;line-height:1;direction:ltr}
.sgc-tab b small{font-size:13px;opacity:.85;margin-inline-end:2px}
.sgc-tab s{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;line-height:1;opacity:.72;direction:ltr}
.sgc.is-out .sgc-tab{background:#2a2a34;color:#b4b4c2}
.sgc .sg-out{z-index:2}
/* النصّ */
.sgc-bd{padding:12px 14px 0}
.sgc-nm{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;font-size:14.5px;font-weight:700;line-height:1.5;color:#fff;min-height:44px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sgc-sp{display:flex;gap:5px;margin-top:8px;overflow:hidden}
.sgc-sp:empty{display:none}
.sgc-sp i{font-family:'Rajdhani','Tajawal',sans-serif;font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.06em;line-height:1.3;color:#b4b4c2;border:1px solid var(--sgc-line2);background:rgba(255,255,255,.03);padding:2px 7px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.sgc-pm{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:8px 14px 0}
.sgc-st{direction:ltr;text-align:left}
.sgc-st small{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;line-height:1.2;color:var(--sgc-ok)}
.sgc-st.lo small{color:var(--sgc-lo)}
.sgc-st.out small{color:var(--sgc-red2)}
.sgc-st i{display:flex;gap:2px;margin-top:4px}
.sgc-st i b{width:7px;height:5px;background:#26262f}
.sgc-st i b.f{background:var(--sgc-ok)}
.sgc-st.lo i b.f{background:var(--sgc-lo)}
.sgc-st.out i b.f{background:var(--sgc-red2)}
.sgc-rt{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.06em;color:#ffc247;direction:ltr}
.sgc-rt small{color:#6b6b7c;font-weight:600;font-size:11px;margin-left:3px}
/* شريط الإجراءات */
.sgc-acts{display:grid;grid-template-columns:minmax(0,1fr) 46px;margin-top:auto;padding-top:12px}
.sgc-acts.has-sw{grid-template-columns:minmax(0,1fr) 46px 46px}
.sgc-acts>*{height:44px;margin:0;padding:0;border:0;border-top:1px solid var(--sgc-line2);border-inline-start:1px solid var(--sgc-line2);border-radius:0;background:none;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;font-size:13px;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.sgc-acts>*:first-child{border-inline-start:0}
.sgc-acts svg{width:18px;height:18px;display:block;flex:0 0 auto}
.sgc-cart:hover,.sgc-cart:focus-visible{background:var(--sgc-red);outline:0}
.sgc-cart.ntf{font-size:12px;color:#ffc247}
.sgc-cart.ntf:hover{background:rgba(255,194,71,.14)}
.sgc .btn-wish-mini{color:#c9c9d6}
.sgc .btn-wish-mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:transform .35s cubic-bezier(.34,1.45,.64,1)}
.sgc .btn-wish-mini:hover,.sgc .btn-wish-mini:focus-visible{background:rgba(255,255,255,.06);color:#fff;outline:0}
.sgc .btn-wish-mini[data-active="true"]{color:var(--sgc-red2)}
.sgc .btn-wish-mini[data-active="true"] svg{fill:currentColor}
.sgc .btn-wish-mini.is-pulsing svg{transform:scale(1.25)}
.sgc-sw{color:var(--sgc-red2)}
.sgc-sw:hover,.sgc-sw:focus-visible{background:rgba(230,0,18,.18);color:#fff;outline:0}
.sgc:focus-visible{outline:2px solid var(--sgc-red2);outline-offset:3px}
@media (max-width:900px){
  .sgc{--sgc-cut:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
  .sgc-hd{padding:9px 10px 0}.sgc-br{font-size:10px;letter-spacing:.12em;padding:3px 6px 2px;max-width:72%}.sgc-sn{font-size:9.5px;padding:3px 6px 2px}
  .sgc-im i.tl,.sgc-im i.tr{top:36px}.sgc-rb{top:38px;font-size:10px;padding:8px 4px}
  .sgc-tab{padding:6px 14px 5px 10px}.sgc-tab b{font-size:20px}.sgc-tab s{font-size:11px}
  .sgc-bd{padding:10px 10px 0}.sgc-nm{font-size:13.5px;min-height:40px}.sgc-sp i{font-size:10px;padding:2px 5px 1px}.sgc-sp i:nth-child(3){display:none}
  .sgc-pm{margin:8px 10px 0}
  .sgc-acts{grid-template-columns:minmax(0,1fr) 40px;padding-top:10px}.sgc-acts.has-sw{grid-template-columns:minmax(0,1fr) 40px 40px}
  .sgc-acts>*{height:42px;font-size:12px;gap:5px;white-space:nowrap}.sgc-acts svg{width:16px;height:16px}.sgc-cart.ntf{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.sgc *{transition:none !important}}

/* ── صفحة المنتج: شريط السوفتوير والتعريفات (S2) ── */
.pv-sw{display:grid;grid-template-columns:50px minmax(0,1fr) 24px;align-items:center;gap:14px;margin:-10px 0 26px;padding:10px 12px;color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.025);position:relative;transition:border-color .25s,background .25s}
.pv-sw[hidden]{display:none}
.pv-sw::before{content:'';position:absolute;right:0;top:0;bottom:0;width:3px;background:#e60012}
.pv-sw:hover{border-color:#e60012;background:rgba(230,0,18,.08)}
.pv-sw .ic{width:50px;height:50px;display:grid;place-items:center;color:#fff;background:#e60012;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.pv-sw .ic svg{width:24px;height:24px;display:block}
.pv-sw .tx{min-width:0}
.pv-sw .tx b{display:block;font-family:'Noto Kufi Arabic','Tajawal',sans-serif;font-size:15px;font-weight:700;color:#fff;line-height:1.4}
.pv-sw .tx small{display:block;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;color:#8a8a9a;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-sw .ar{color:#ff2a3a}
.pv-sw .ar svg{width:22px;height:22px;display:block;transition:transform .3s}
.pv-sw:hover .ar svg{transform:translate(-3px,-3px)}

/* #sg-pages */

/* ══════════════════════════════════════════════════════════════
   sg-pages · نظام الصفحات الداخلية (التجميعات، الفيجرات، المستعمل، الرقمي، عنّا، الدفع، الحساب)
   رأس صفحة موحّد (pgh) + رؤوس أقسام (pgs) + بلاطات (pgt) + أشرطة (pgb) + تبويبات (pgtab) + متغيّرات البطاقة (sgc-*)
   ══════════════════════════════════════════════════════════════ */
:root{--red2:#ff2a3a;--ok:#8fe3a9;--lo:#ffab40;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);--mute:#9a9aa8;
  --disp:'Noto Kufi Arabic','Tajawal',sans-serif;--num:'Rajdhani',sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.64,1);
  --cut:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);--cut10:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);--cut7:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.pgbg,.pgbg *,.pgbg *::before,.pgbg *::after{box-sizing:border-box}
.pgbg{font-family:'Tajawal',sans-serif;line-height:1.6;color:#f2f2f6}
:where(.pgbg) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:0}
:where(.pgbg) a{color:inherit;text-decoration:none}
:where(.pgbg) svg{display:block;flex:0 0 auto}
:where(.pgbg) img{display:block}
:where(.pgbg) :is(h1,h2,h3,p,ul){margin:0}
.pgbg{position:relative;min-height:60vh;padding-bottom:60px;background:radial-gradient(ellipse at 85% 0%,rgba(230,0,18,.14),transparent 45%)}
.pgwrap{max-width:1300px;margin:0 auto;padding:0 32px}
.pgbg .num{font-family:var(--num);font-weight:700;direction:ltr;display:inline-block;font-variant-numeric:tabular-nums}

/* ── رأس الصفحة الموحّد (ph) ── */
.pgh{position:relative;overflow:hidden;border-bottom:1px solid var(--line2);background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px)}
.pgh-fx{position:absolute;inset:0;pointer-events:none}
.pgh-fx .cor{position:absolute;width:26px;height:26px;border:2px solid var(--red)}
.pgh-fx .cor.a{top:14px;right:14px;border-left:0;border-bottom:0}.pgh-fx .cor.b{top:14px;left:14px;border-right:0;border-bottom:0}
.pgh-fx .cor.c{bottom:14px;right:14px;border-left:0;border-top:0}.pgh-fx .cor.d{bottom:14px;left:14px;border-right:0;border-top:0}
.pgh-fx .hud{position:absolute;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.26em;color:#55556a;direction:ltr}
.pgh-fx .hud.tl{top:22px;left:52px}.pgh-fx .hud.tr{top:22px;right:52px}.pgh-fx .hud.bl{bottom:20px;left:52px}.pgh-fx .hud.br{bottom:20px;right:52px}
.pgh-fx .hud i{display:inline-block;width:6px;height:6px;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:8px;vertical-align:middle}
.pgh-fx .beam{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red2) 50%,var(--red) 70%,transparent)}
.pgh-in{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:40px;align-items:center;padding:64px 0 54px}
.pgh-bc{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b6b7c;margin-bottom:14px}
.pgh-bc b{color:#b4b4c2;font-weight:600}
.pgh-bc i{width:4px;height:4px;background:var(--red);transform:rotate(45deg)}
.pgh-eye{display:flex;align-items:center;gap:12px;font-family:var(--num);font-weight:700;font-size:12.5px;letter-spacing:.32em;color:var(--red2);direction:ltr;justify-content:flex-end}
.pgh-eye i{width:48px;height:2px;background:var(--red);box-shadow:0 0 10px var(--red)}
.pgh h1{margin:8px 0 0;font-family:var(--disp);font-size:54px;font-weight:700;line-height:1.25;color:#fff;letter-spacing:-.01em}
.pgh h1 em{font-style:normal;color:var(--red2)}
.pgh-sub{margin:10px 0 0;max-width:620px;font-size:16px;color:#b4b4c2;line-height:1.8}
.pgh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pgh-chips span{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;font-size:13px;font-weight:700;color:#e6e6ee;background:rgba(255,255,255,.035);border:1px solid var(--line2);clip-path:var(--cut7)}
.pgh-chips svg{width:15px;height:15px;color:var(--red2)}
.pgh-con{position:relative;padding:1px;background:var(--line2);clip-path:var(--cut)}
.pgh-con-in{position:relative;background:linear-gradient(180deg,#13131a,#0b0b10);clip-path:var(--cut);padding:22px 26px 24px}
.pgh-con-in::before{content:'';position:absolute;top:0;left:18px;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red2) 30%,var(--red2) 70%,transparent)}
.pgh-con-hd{display:flex;align-items:center;justify-content:space-between;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.26em;color:#6b6b7c;direction:ltr;margin-bottom:14px}
.pgh-con-hd .dots{display:flex;gap:5px}.pgh-con-hd .dots i{width:6px;height:6px;background:#2a2a34}.pgh-con-hd .dots i.on{background:var(--red2);box-shadow:0 0 8px var(--red2)}
.pgh-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.pgh-stats div{padding:6px 12px;text-align:center;border-inline-start:1px solid var(--line)}
.pgh-stats div:first-child{border-inline-start:0}
.pgh-stats b{display:block;font-family:var(--num);font-weight:700;font-size:36px;line-height:1;color:#fff;direction:ltr}
.pgh-stats b em{font-style:normal;color:var(--red2);font-size:22px}
.pgh-stats small{display:block;margin-top:6px;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.24em;color:#6b6b7c;direction:ltr}
.pgh-con-ft{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--mute)}
.pgh-con-ft i{display:inline-flex;gap:2px}.pgh-con-ft i b{width:8px;height:5px;background:#2a2a34}.pgh-con-ft i b.f{background:var(--ok)}

/* ── رأس القسم (sh) ── */
.pgs{display:flex;align-items:flex-end;gap:18px;margin:46px 0 22px;flex-wrap:wrap}
.pgs-n{font-family:var(--num);font-weight:700;font-size:56px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--red)}
.pgs-t{flex:1 1 300px}
.pgs-eye{font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:var(--red2);direction:ltr;text-align:right}
.pgs h2{margin:2px 0 0;font-family:var(--disp);font-size:28px;font-weight:700;line-height:1.3;color:#fff}
.pgs h2 em{font-style:normal;color:var(--red2)}
.pgs-ctl{display:flex;gap:6px;flex-wrap:wrap}
.pgtab{height:38px;padding:0 16px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:#c9c9d6;background:rgba(255,255,255,.03);border:1px solid var(--line2);clip-path:var(--cut7);transition:background .2s,color .2s,border-color .2s}
.pgtab.on,.pgtab:hover{color:#fff;background:var(--red);border-color:var(--red)}
.pgtab svg{width:15px;height:15px;color:var(--red2)}.pgtab.on svg,.pgtab:hover svg{color:#fff}
.pgtab small{font-family:var(--num);font-weight:700;font-size:11.5px;color:inherit;opacity:.7}
.pgs-cnt{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.14em;color:#6b6b7c;direction:ltr}

/* ── بلاطات الميزات ── */
.pgt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pgt-i{position:relative;padding:18px 18px 16px;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);overflow:hidden;transition:border-color .25s}
.pgt-i:hover{border-color:rgba(230,0,18,.5)}
.pgt-i .n{position:absolute;top:-4px;left:10px;font-family:var(--num);font-weight:700;font-size:52px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12)}
.pgt-i .ic{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:var(--red);clip-path:var(--cut7);margin-bottom:12px}
.pgt-i .ic svg{width:22px;height:22px}
.pgt-i b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.pgt-i p{margin:4px 0 0;font-size:13.5px;color:var(--mute);line-height:1.6}
.pgt-i .tg{position:absolute;bottom:12px;left:14px;font-family:var(--num);font-weight:700;font-size:10px;letter-spacing:.22em;color:var(--red2);direction:ltr}

/* ── شريط CTA ── */
.pgb{position:relative;margin:34px 0 54px;padding:1px;background:linear-gradient(135deg,var(--red),rgba(255,255,255,.16) 40%,rgba(255,255,255,.16) 60%,var(--red));clip-path:var(--cut)}
.pgb-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:26px 30px;background:linear-gradient(90deg,#15080b,#0d0d13 55%);clip-path:var(--cut);flex-wrap:wrap}
.pgb-in::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--red)}
.pgb .eye{font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:var(--red2);direction:ltr;text-align:right}
.pgb b{display:block;font-family:var(--disp);font-size:24px;font-weight:700;color:#fff;margin-top:2px}
.pgb p{margin:4px 0 0;font-size:14.5px;color:var(--mute)}
.pgb .acts{display:flex;gap:8px;flex-wrap:wrap}
.pgbtn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;font-weight:800;font-size:14.5px;color:#fff;background:var(--red);clip-path:var(--cut10);transition:filter .2s}
.pgbtn svg{width:18px;height:18px}
.pgbtn:hover{filter:brightness(1.12)}
.pgbtn.ghost{background:transparent;border:1px solid rgba(255,255,255,.35)}
.pgbtn.ghost:hover{background:#fff;color:#0a0a0f}
.pgbtn.wa{background:#1f9d55}

/* ── البطاقة الموحّدة (sgc) ── */
.pggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pggrid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sgc-br.ar{font-family:'Tajawal',sans-serif;letter-spacing:0;font-size:12.5px;direction:rtl}
.sgc-br.ok::before{background:var(--ok)}.sgc-br.lo::before{background:var(--lo)}.sgc-br.gr::before{background:#8a8a9a}.sgc-br.pu::before{background:#a855f7}.sgc-br.bl::before{background:#4ea3ff}
.sgc-rb.new{background:#fff;color:#0a0a0f}.sgc-rb.pu{background:#a855f7}
.sgc-tab em{font-style:normal;font-size:11px;opacity:.8;margin-inline-end:4px}
.sgc-stamp{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.sgc-stamp span{font-family:var(--disp);font-size:26px;font-weight:700;color:#fff;background:var(--red);padding:6px 26px;transform:rotate(-12deg);box-shadow:0 10px 30px rgba(0,0,0,.6);letter-spacing:.02em}
.sgc-sp i.g{color:var(--ok);border-color:rgba(143,227,169,.35)}
.sgc-ls{list-style:none;margin:8px 0 0;padding:0;font-size:12px;color:var(--mute)}
.sgc-ls li{display:flex;align-items:baseline;gap:6px;line-height:1.9}
.sgc-ls li::after{content:'';flex:1 1 auto;border-bottom:1px dotted rgba(255,255,255,.14);order:1;transform:translateY(-4px)}
.sgc-ls li span{order:0;white-space:nowrap}
.sgc-ls li b{order:2;font-family:var(--num),'Tajawal',sans-serif;font-weight:700;font-size:12.5px;color:#fff;letter-spacing:.03em;direction:ltr;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgc-fps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 14px 0}
.sgc-fps div{text-align:center;padding:6px 2px 5px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.sgc-fps b{display:block;font-family:var(--num);font-weight:700;font-size:17px;line-height:1;color:#fff;direction:ltr}
.sgc-fps b small{font-size:9px;color:var(--red2);margin-left:2px}
.sgc-fps span{display:block;font-family:var(--num);font-weight:600;font-size:9.5px;letter-spacing:.12em;color:#6b6b7c;margin-top:3px;direction:ltr}
.sgc-acts.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sgc-ghost{color:#c9c9d6;font-weight:700}.sgc-ghost:hover{background:rgba(255,255,255,.06);color:#fff}
.sgc-w{color:#c9c9d6}.sgc-w:hover{background:rgba(255,255,255,.06);color:#fff}
.sgc-off{color:#6b6b7c;cursor:default}


/* ── إضافات: البطاقة داخل الصفحات، الحالات الفارغة، التحديدات، الأقسام الفرعية ── */
.pgbg .sgc{display:block;text-decoration:none;color:inherit;height:100%;-webkit-tap-highlight-color:transparent}
.pgbg .sgc:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.pgh-stats.four{grid-template-columns:1fr 1fr;row-gap:16px}
.pgh-stats.four div:nth-child(3){border-inline-start:0}
.pgh-stats span{display:block;font-size:12px;color:var(--mute);margin-top:3px}
.pgh-bc a{color:inherit;display:inline-flex;align-items:center;min-height:40px;margin:-10px 0;cursor:pointer}
.pgt-i .ic.em{background:#1a1a22;border:1px solid var(--line2);font-size:22px;line-height:1}
.pgt-i .ic.em img{width:100%;height:100%;object-fit:cover}
.pgtl-card .tg{font-size:16px;line-height:1}
.pgtab .dot{width:7px;height:7px;display:inline-block;flex:0 0 auto}
.pgsel{height:38px;padding:0 34px 0 12px;font:inherit;font-weight:700;font-size:13.5px;color:#c9c9d6;background:rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff2a3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;border:1px solid var(--line2);border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;clip-path:var(--cut7)}
.pgsel:focus{outline:0;border-color:var(--red)}
.pgempty{grid-column:1/-1;position:relative;padding:44px 24px;text-align:center;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut)}
.pgempty .ei{font-size:46px;line-height:1;margin-bottom:12px}
.pgempty h3{font-family:var(--disp);font-size:20px;font-weight:700;color:#fff}
.pgempty p{margin:6px auto 0;max-width:460px;font-size:14px;color:var(--mute)}
.pgempty .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.pgadmin{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 0;padding:12px 16px;border:1px dashed rgba(230,0,18,.5);background:rgba(230,0,18,.06);font-family:var(--num);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--red2);direction:ltr}
.pgadmin .pgbtn{height:38px;padding:0 14px;font-size:13px;font-family:'Tajawal',sans-serif;letter-spacing:0;direction:rtl}
.pgb.pgb-top{margin:26px 0 6px}
.pgs-sub{font-size:14px;color:var(--mute);margin-top:2px}
.pgdgc-art .sub{position:absolute;top:10px;left:12px;font-size:11px;font-weight:700;color:#c9c9d6;background:rgba(10,10,15,.78);padding:3px 8px 2px}
.pgdgc .pgdgc-art img{position:absolute;top:40px;bottom:14px;left:0;right:0;margin:auto;width:78%;height:calc(100% - 54px);max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));transition:transform .35s var(--ease)}
.pgdgc:hover .pgdgc-art img{transform:scale(1.04)}
.pgdgc-ico{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;background:#15151c;border:1px solid var(--line2);clip-path:var(--cut7)}
.pgs-ctl .pgdgc-ico img{width:100%;height:100%;object-fit:contain;padding:4px}
.pgdgc-ico .dg-cat-header-ico{font-size:22px;line-height:1}
.pgsub-h{grid-column:1/-1;margin:8px 0 -4px;font-family:var(--num);font-weight:700;font-size:12px;letter-spacing:.26em;color:var(--red2);direction:ltr;text-align:right}
.pgdesc{margin:30px 0 0;padding:20px 22px;font-size:14.5px;line-height:1.9;color:#c9c9d6;background:rgba(255,255,255,.025);border:1px solid var(--line2);border-right:3px solid var(--red)}
.pgdesc[style*="display: none"],.pgdesc[hidden]{display:none}
.pgdgc-art .dg-cat-icon,.pgdgc-art .e img{width:56px;height:56px;object-fit:contain}
.sgc-dg .pst .e{font-size:36px;line-height:1}
#dg-productsView .pgs{margin-top:22px}

/* ── الرقمي: منصّات وأقسام ── */
.pgplats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pgplat{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .25s,background .25s}
.pgplat .ic{width:46px;height:46px;display:grid;place-items:center;color:#fff;background:#1a1a22;border:1px solid var(--line2);clip-path:var(--cut7);flex:0 0 auto}
.pgplat .ic svg{width:24px;height:24px}
.pgplat b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.pgplat small{display:block;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.2em;color:#6b6b7c;direction:ltr;text-align:right}
.pgplat.on,.pgplat:hover{border-color:var(--red)}
.pgplat.on{background:linear-gradient(180deg,#1c0a0e,#0f0b0d)}
.pgplat.on .ic{background:var(--red);border-color:var(--red)}
.pgplat::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--red);transition:width .35s var(--ease)}
.pgplat.on::after,.pgplat:hover::after{width:100%}
.pgdgc{position:relative;padding:1px;background:var(--line2);clip-path:var(--cut);transition:transform .35s var(--ease)}
.pgdgc:hover{transform:translateY(-4px)}
.pgdgc-in{position:relative;background:#0d0d13;clip-path:var(--cut);height:100%;display:flex;flex-direction:column}
.pgdgc-art{position:relative;height:178px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#1c1c26,#0e0e14 70%)}
.pgdgc-art::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px)}
.pgdgc-art .e{position:relative;font-size:56px;line-height:1}
.pgdgc-art .lb{position:absolute;top:10px;right:12px;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.22em;color:#fff;background:rgba(10,10,15,.78);padding:3px 8px 2px;direction:ltr}
.pgdgc-art .lb::before{content:'';display:inline-block;width:3px;height:10px;background:var(--red);margin-right:7px;vertical-align:-1px}
.pgdgc-bd{padding:12px 14px 12px}
.pgdgc-bd b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.pgdgc-bd small{display:block;font-size:12.5px;color:var(--mute)}
.pgdgc-ft{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:10px 14px;border-top:1px solid var(--line2);font-size:12.5px;color:#c9c9d6;font-weight:700}
.pgdgc-ft em{font-style:normal;font-family:var(--num);font-weight:700;color:var(--red2);font-size:13px;direction:ltr}
.pgdgc-ft svg{width:16px;height:16px;color:var(--red2)}
.sgc-dg .sgc-im{aspect-ratio:1/.8}
.sgc-build .sgc-im{aspect-ratio:1/.66}
.sgc-build .sgc-im img{width:62%;height:84%}
.sgc-dg .sgc-im .pst{position:relative;z-index:1;width:62%;aspect-ratio:1.58;display:grid;place-items:center;background:linear-gradient(135deg,#1f3a8a,#0b1b4d);border:1px solid rgba(255,255,255,.14);clip-path:var(--cut10);box-shadow:0 20px 40px rgba(0,0,0,.6);transition:transform .55s var(--ease)}
.sgc:hover .sgc-im .pst{transform:translateY(-6px) rotate(-3deg)}
.sgc-dg .pst span{font-family:var(--num);font-weight:700;font-size:22px;letter-spacing:.1em;color:#fff;direction:ltr}
.sgc-dg .pst small{position:absolute;bottom:6px;right:8px;font-family:var(--num);font-weight:700;font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.6);direction:ltr}
.sgc-dg .pst.xb{background:linear-gradient(135deg,#107c10,#063d06)}
.sgc-dg .pst.st{background:linear-gradient(135deg,#1b2838,#0a1420)}
.sgc-dg .pst.pb{background:linear-gradient(135deg,#f3b21b,#9a6b00)}
.sgc-inst{position:absolute;top:46px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 8px 3px;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.18em;color:#fff;background:rgba(10,10,15,.8);border:1px solid rgba(255,194,71,.5);direction:ltr}
.sgc-inst i{width:6px;height:6px;background:#ffc247;box-shadow:0 0 8px #ffc247}

/* ── فريقنا ── */
.pgtl{position:relative;padding:10px 0 10px;margin:0 0 10px}
.pgtl::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--red) 10%,var(--red) 90%,transparent);box-shadow:0 0 14px rgba(230,0,18,.5)}
.pgtl-row{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:0;margin:0 0 18px}
.pgtl-y{font-family:var(--num);font-weight:700;font-size:40px;line-height:1;color:var(--red2);direction:ltr}
.pgtl-row:nth-child(odd) .pgtl-y{text-align:left;padding-left:22px}
.pgtl-row:nth-child(even) .pgtl-y{text-align:right;padding-right:22px}
.pgtl-node{width:60px;display:grid;place-items:center}
.pgtl-node i{width:14px;height:14px;background:#0a0a0f;border:3px solid var(--red);transform:rotate(45deg);box-shadow:0 0 14px var(--red)}
.pgtl-card{position:relative;padding:16px 18px;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10)}
.pgtl-card b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.pgtl-card p{margin:4px 0 0;font-size:13.5px;color:var(--mute)}
.pgtl-card .tg{position:absolute;top:10px;left:12px;font-family:var(--num);font-weight:700;font-size:10px;letter-spacing:.22em;color:var(--red2);direction:ltr}
.pgtl-row:nth-child(odd) .pgtl-card{grid-column:1}.pgtl-row:nth-child(odd) .pgtl-y{grid-column:3;grid-row:1}.pgtl-row:nth-child(odd) .pgtl-node{grid-column:2;grid-row:1}
.pgtl-row:nth-child(even) .pgtl-card{grid-column:3}.pgtl-row:nth-child(even) .pgtl-y{grid-column:1;grid-row:1}.pgtl-row:nth-child(even) .pgtl-node{grid-column:2;grid-row:1}
.pgt.six{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1100px){.pgt{grid-template-columns:repeat(2,minmax(0,1fr))}.pgplats{grid-template-columns:repeat(3,minmax(0,1fr))}.pggrid{grid-template-columns:repeat(3,minmax(0,1fr))}.pggrid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .pgwrap{padding:0 14px}
  .pgh-in{grid-template-columns:1fr;gap:22px;padding:38px 0 34px}.pgh h1{font-size:36px}.pgh-sub{font-size:14.5px}.pgh-fx .hud{display:none}.pgh-fx .cor{width:18px;height:18px}
  .pgh-stats b{font-size:28px}.pgh-con-in{padding:16px 16px 18px}
  .pgs{margin:32px 0 16px}.pgs-n{font-size:40px}.pgs h2{font-size:22px}
  .pgt,.pgt.six{grid-template-columns:1fr 1fr;gap:8px}.pgt-i{padding:14px 12px 12px}.pgt-i .n{font-size:40px}.pgt-i b{font-size:14px}.pgt-i p{font-size:12.5px}
  .pggrid,.pggrid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sgc-stamp span{font-size:20px;padding:4px 18px}
}
@media (max-width:600px){.pggrid.g3{grid-template-columns:1fr}.sgc-build .sgc-im{aspect-ratio:1/.6}
  .pgplats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pgplat{padding:12px 12px;gap:10px}.pgplat .ic{width:38px;height:38px}.pgplat b{font-size:14px}
  .pgdgc-art{height:142px}.pgdgc .pgdgc-art img{top:34px;bottom:10px;height:calc(100% - 44px);width:82%}.pgdgc-art .e{font-size:44px}
  .pgb{margin:26px 0 40px}.pgb-in{padding:20px 18px}.pgb b{font-size:19px}.pgbtn{height:42px;padding:0 16px;font-size:13.5px}
  .pgtl::before{left:20px}.pgtl-row{grid-template-columns:40px 1fr}.pgtl-row .pgtl-node{grid-column:1 !important;grid-row:1 !important;width:40px}.pgtl-row .pgtl-y{grid-column:2 !important;grid-row:1 !important;text-align:right !important;padding:0 0 6px !important;font-size:28px}.pgtl-row .pgtl-card{grid-column:2 !important;grid-row:2}
}

/* #sg-ctes */

/* ── sg-ctes: فريقنا + تواصل معنا (يعتمد رموز sg-pages) ── */
.pgb b em{font-style:normal;color:var(--red2)}
/* ── بطاقة لاعب ── */
.pgpl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgpl{--gc:var(--red);position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .25s}
.pgpl:hover{border-color:var(--gc)}
.pgpl-im{position:relative;aspect-ratio:4/4.6;overflow:hidden;background:#0a0a0f}
.pgpl-im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease);will-change:transform}
.pgpl:hover .pgpl-im img{transform:scale(1.06)}
.pgpl-im .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:54px;letter-spacing:.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);background:radial-gradient(ellipse at 50% 100%,rgba(230,0,18,.22),transparent 60%),repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.035) 11px 12px)}
.pgpl-im::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(0deg,#0c0c11 10%,transparent);pointer-events:none;z-index:1}
.pgpl-im .cr,.pgpl-game,.pgpl-cap{z-index:2}
.pgpl-im .cr{position:absolute;width:14px;height:14px;border:2px solid var(--gc);pointer-events:none}
.pgpl-im .cr.a{top:8px;right:8px;border-width:2px 2px 0 0}.pgpl-im .cr.b{top:8px;left:8px;border-width:2px 0 0 2px}
.pgpl-game{position:absolute;top:10px;left:50%;transform:translateX(-50%);height:22px;padding:0 10px;display:inline-flex;align-items:center;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.2em;color:var(--gc);background:rgba(8,8,12,.82);border:1px solid var(--gc);clip-path:var(--cut7);direction:ltr;white-space:nowrap;max-width:calc(100% - 50px);overflow:hidden;text-overflow:ellipsis}
.pgpl-cap{position:absolute;right:-1px;bottom:14px;height:24px;padding:0 12px 0 14px;display:inline-flex;align-items:center;gap:6px;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.22em;color:#1a1200;background:linear-gradient(90deg,#ffd34d,#ffb300);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%);direction:ltr}
.pgpl-cap svg{width:12px;height:12px}
.pgpl-bd{position:relative;padding:12px 14px 14px;flex:1}
.pgpl-bd small{display:block;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgpl-bd b{display:block;font-family:var(--num);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:.03em;color:#fff;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgpl-bd b::before{content:'#';color:var(--gc);margin-right:2px}
.pgpl-role{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:22px;padding:0 9px;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.18em;color:#d9d9e3;background:rgba(255,255,255,.05);border:1px solid var(--line2);clip-path:var(--cut7);direction:ltr}
.pgpl-role::before{content:'';width:6px;height:6px;background:var(--gc)}
.pgpl-bar{position:absolute;right:0;bottom:0;height:3px;width:34%;background:var(--gc);transition:width .4s var(--ease)}
.pgpl:hover .pgpl-bar{width:100%}
/* ── قنوات التواصل السريعة ── */
.pgch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pgch{position:relative;display:flex;align-items:center;gap:14px;padding:18px 18px 18px 16px;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);overflow:hidden;transition:border-color .25s;min-height:96px}
.pgch::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--red);transition:width .35s var(--ease)}
.pgch:hover{border-color:var(--red)}.pgch:hover::after{width:100%}
.pgch .ic{width:52px;height:52px;display:grid;place-items:center;color:#fff;background:var(--red);clip-path:var(--cut7);flex:0 0 auto}
.pgch .ic svg{width:25px;height:25px}
.pgch.wa .ic{background:#1f9d55}.pgch.wa:hover{border-color:#2bbf6a}.pgch.wa::after{background:#2bbf6a}
.pgch .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.pgch .t{font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.pgch .s{font-size:12.5px;color:var(--mute)}
.pgch .v{margin-top:4px;font-family:var(--num);font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--red2);direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgch.wa .v{color:#8fe3a9}
.pgch .go{width:34px;height:34px;display:grid;place-items:center;color:#8a8a9a;border:1px solid var(--line2);clip-path:var(--cut7);flex:0 0 auto;transition:transform .3s var(--ease),color .2s}
.pgch .go svg{width:16px;height:16px}
.pgch:hover .go{color:#fff;transform:translateX(-4px)}
/* ── معلومات + نموذج ── */
.pgct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:14px;align-items:start}
.pgct-info,.pgct-form{position:relative;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut);padding:26px 24px}
.pgct-info::after,.pgct-form::after{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--red)}
.pgst{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.22em;color:var(--ok);background:rgba(143,227,169,.08);border:1px solid rgba(143,227,169,.3);clip-path:var(--cut7);direction:ltr}
.pgst i{width:7px;height:7px;background:var(--ok);flex:0 0 auto}
.pgct-info h3,.pgct-form h3{font-family:var(--disp);font-size:24px;font-weight:700;color:#fff;margin-top:12px;line-height:1.3}
.pgct-info h3 em,.pgct-form h3 em{font-style:normal;color:var(--red2)}
.pgct-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pgct-list .it{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--line);clip-path:var(--cut7)}
.pgct-list .it>span:last-child{min-width:0;display:flex;flex-direction:column}
.pgct-list .ic{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;background:#1a1a22;border:1px solid var(--line2);clip-path:var(--cut7);font-size:19px;line-height:1}
.pgct-list small{font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.2em;color:#6b6b7c;direction:ltr;text-align:right}
.pgct-list b{font-size:14.5px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.pgct-soc{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line2)}
.pgct-soc>small{display:block;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.3em;color:var(--red2);direction:ltr;text-align:right}
.pgct-soc>div{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;min-height:6px}
.pgct-soc[hidden]{display:none}
.pgct-soc a{width:42px;height:42px;display:grid;place-items:center;color:#c9c9d6;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut7);transition:background .2s,color .2s,border-color .2s}
.pgct-soc a svg{width:19px;height:19px;fill:currentColor}
.pgct-soc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.pgct-form .hd p{margin-top:6px;font-size:13.5px;color:var(--mute)}
.pgct-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pgf{display:flex;flex-direction:column;gap:6px;margin-top:14px;min-width:0}
.pgf>span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#d9d9e3}
.pgf>span i{font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--red2);font-style:normal;direction:ltr}
.pgin{width:100%;height:46px;padding:0 14px;font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.035);border:1px solid var(--line2);border-radius:0;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
textarea.pgin{height:auto;padding:12px 14px;resize:vertical;min-height:120px;line-height:1.6}
.pgin::placeholder{color:#55556a}
.pgin:focus{border-color:var(--red);background:rgba(230,0,18,.05)}
.pgin.err{border-color:var(--red2);background:rgba(230,0,18,.1)}
.pgct-form .pgsel{width:100%;height:46px;font-size:15px;font-weight:400;color:#fff}
.pgct-form .ft{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.pgct-form .ft small{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#7c7c8c}
.pgct-form .ft small svg{width:14px;height:14px;color:var(--ok)}
.pgct-form .pgbtn{border:0;font-family:inherit;cursor:pointer}
/* ── الأسئلة الشائعة ── */
.pgfaq{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgfaq-i{background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .25s}
.pgfaq-i[open],.pgfaq-i:hover{border-color:rgba(230,0,18,.55)}
.pgfaq-i summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;min-height:56px;-webkit-tap-highlight-color:transparent}
.pgfaq-i summary::-webkit-details-marker{display:none}
.pgfaq-i summary::before{content:'?';font-family:var(--num);font-weight:700;font-size:20px;color:var(--red2);flex:0 0 auto}
.pgfaq-i summary b{flex:1;font-size:15px;font-weight:700;color:#fff;line-height:1.4}
.pgfaq-i summary i{width:26px;height:26px;display:grid;place-items:center;color:#c9c9d6;border:1px solid var(--line2);clip-path:var(--cut7);flex:0 0 auto;transition:transform .3s var(--ease),background .2s}
.pgfaq-i summary i svg{width:13px;height:13px}
.pgfaq-i[open] summary i{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.pgfaq-i p{padding:0 18px 16px 48px;font-size:14px;color:var(--mute);line-height:1.7}
/* ── استجابة ── */
@media (max-width:1100px){.pgpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pgch-grid{grid-template-columns:1fr}.pgct{grid-template-columns:1fr}.pgfaq{grid-template-columns:1fr}.pgpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgt-i{padding-bottom:34px}.pgct-info,.pgct-form{padding:20px 16px}.pgct-form .row{grid-template-columns:1fr}.pgct-form .ft{flex-direction:column;align-items:stretch}.pgct-form .ft .pgbtn{justify-content:center}.pgpl-grid{gap:10px}.pgpl-bd{padding:10px 12px 12px}.pgpl-bd b{font-size:18px}.pgpl-game{font-size:10.5px;letter-spacing:.14em}.pgpl-cap{height:22px;font-size:10px;padding:0 9px 0 12px}.pgch{min-height:84px;padding:14px}.pgch .ic{width:46px;height:46px}.pgfaq-i p{padding-left:18px}}

/* #sg-home2 */

/* ── sg-home2: الجزء السفلي للرئيسية (المدونة · لماذا نحن · النشرة · الآراء · التذييل) — يعتمد رموز sg-pages ── */
.hm2,.hm2 *,.hm2 *::before,.hm2 *::after{box-sizing:border-box}
.hm2{position:relative;font-family:'Tajawal',sans-serif;line-height:1.6;color:#f2f2f6;padding:34px 0}
:where(.hm2) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:0}
:where(.hm2) a{color:inherit;text-decoration:none}
:where(.hm2) svg{display:block;flex:0 0 auto}
:where(.hm2) img{display:block}
:where(.hm2) :is(h2,h3,h4,p,ul){margin:0}
:where(.hm2) ul{padding:0;list-style:none}
.hm2 .pgs{margin:0 0 22px}
@media (min-width:901px){.hm2 .pgwrap{max-width:1400px;padding:0 40px}}
.hm2 .pgs h2 .sg-shine{font-style:normal;color:var(--red2);-webkit-text-fill-color:var(--red2)}
.hm2 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hm2 a.pgtab{min-height:40px}
/* ── المدونة ── */
.hm2-posts{display:grid;grid-template-columns:1.35fr 1fr;grid-auto-rows:minmax(0,auto);gap:14px}
.pgpost{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#121219,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .25s;min-width:0}
.pgpost:hover{border-color:rgba(230,0,18,.6)}
.pgpost-im{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0f}
.pgpost-im img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);will-change:transform}
.pgpost:hover .pgpost-im img{transform:scale(1.05)}
.pgpost-im .ph{position:absolute;inset:0;display:grid;place-items:center;color:#2a2a36;background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(255,255,255,.03) 11px 12px)}
.pgpost-im .ph svg{width:44px;height:44px}
.pgpost-im::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,#0c0c11,transparent);pointer-events:none}
.pgpost-im .cr{position:absolute;width:14px;height:14px;border:2px solid var(--red);pointer-events:none;z-index:1}
.pgpost-im .cr.a{top:8px;right:8px;border-width:2px 2px 0 0}.pgpost-im .cr.b{bottom:8px;left:8px;border-width:0 0 2px 2px}
.pgpost-cat{position:absolute;top:10px;left:10px;z-index:1;height:22px;padding:0 10px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--red);clip-path:var(--cut7);max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgpost-bd{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px;min-width:0}
.pgpost-meta{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.14em;color:#7c7c8c;direction:ltr;justify-content:flex-end;flex-wrap:wrap}
.pgpost-meta i{width:4px;height:4px;background:var(--red);flex:0 0 auto}
.pgpost-bd h3{margin-top:8px;font-family:var(--disp);font-size:17px;font-weight:700;line-height:1.45;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgpost-bd p{margin-top:6px;font-size:13.5px;color:var(--mute);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pgpost-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line2);font-size:12.5px;color:#8a8a9a}
.pgpost-ft .au{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pgpost-ft .au::before{content:'';width:6px;height:6px;background:var(--red);flex:0 0 auto}
.pgpost-ft .rd{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;transition:color .2s;flex:0 0 auto}
.pgpost-ft .rd svg{width:14px;height:14px;color:var(--red2);transition:transform .3s var(--ease)}
.pgpost:hover .pgpost-ft .rd svg{transform:translateX(-3px)}
.pgpost-bar{position:absolute;right:0;bottom:0;height:3px;width:0;background:var(--red);transition:width .4s var(--ease)}
.pgpost:hover .pgpost-bar{width:100%}
.pgpost.lead{grid-row:span 2}
.pgpost.lead .pgpost-im{aspect-ratio:auto;flex:1 1 auto;min-height:260px}
.pgpost.lead .pgpost-bd h3{font-size:24px;-webkit-line-clamp:3}
.pgpost.lead .pgpost-bd p{-webkit-line-clamp:3;font-size:14.5px}
.pgpost.side{flex-direction:row}
.pgpost.side .pgpost-im{flex:0 0 42%;aspect-ratio:auto;min-height:150px}
.pgpost.side .pgpost-im::after{inset:0 0 0 auto;width:50%;height:auto;background:linear-gradient(270deg,#0c0c11,transparent)}
.pgpost.side .pgpost-bd{padding:12px 14px}
.pgpost.side .pgpost-bd h3{font-size:15.5px}
.pgpost.side .pgpost-bd p{display:none}
.hm2-posts.one{grid-template-columns:1fr}
.hm2-posts.one .pgpost.lead{grid-row:auto;flex-direction:row}
.hm2-posts.one .pgpost.lead .pgpost-im{flex:0 0 48%;min-height:280px}
.hm2-posts.two{grid-template-columns:1fr 1fr}
.hm2-posts.two .pgpost.lead{grid-row:auto}
.hm2-posts.two .pgpost.lead .pgpost-im{aspect-ratio:16/9;min-height:0}
.hm2-posts.two .pgpost.side{flex-direction:column}
.hm2-posts.two .pgpost.side .pgpost-im{flex:none;aspect-ratio:16/9}
.hm2-posts.two .pgpost.side .pgpost-im::after{inset:auto 0 0 0;width:auto;height:50%;background:linear-gradient(0deg,#0c0c11,transparent)}
.hm2-posts.two .pgpost.side .pgpost-bd p{display:-webkit-box}
/* ── لماذا نحن ── */
.hm2-feat{padding:40px 0 30px;background:radial-gradient(ellipse at 50% 0%,rgba(230,0,18,.08),transparent 55%)}
.hm2-wm{text-align:center;margin-bottom:28px}
.hm2-wm-eye{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:var(--red2);direction:ltr;margin-bottom:10px}
.hm2-wm-eye i{width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--red))}
.hm2-wm-eye i:last-child{background:linear-gradient(270deg,transparent,var(--red))}
.hm2-wm .feats-bar-title{display:inline-block}
.hm2-wm-sub{margin-top:14px;font-size:14.5px;color:var(--mute)}
.hm2-feats .pgt-i .ic{font-size:22px;line-height:1}
.hm2-feats .pgt-i .ic svg{width:24px;height:24px}
.hm2-feats .pgt-i p{font-size:13.5px}
/* ── النشرة ── */
.pgnl{position:relative;padding:1px;background:linear-gradient(135deg,var(--red),rgba(255,255,255,.16) 40%,rgba(255,255,255,.16) 60%,var(--red));clip-path:var(--cut)}
.pgnl-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:40px 44px;background:linear-gradient(90deg,#15080b,#0d0d13 55%);clip-path:var(--cut);overflow:hidden}
.pgnl-in::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.025) 39px 40px),repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.025) 39px 40px);-webkit-mask:radial-gradient(ellipse at 100% 50%,#000,transparent 70%);mask:radial-gradient(ellipse at 100% 50%,#000,transparent 70%);pointer-events:none}
.pgnl-fx{position:absolute;inset:1px;pointer-events:none;z-index:2}
.pgnl-fx .cor{position:absolute;width:22px;height:22px;border:2px solid var(--red)}
.pgnl-fx .cor.a{top:12px;right:12px;border-left:0;border-bottom:0}.pgnl-fx .cor.b{top:12px;left:12px;border-right:0;border-bottom:0}
.pgnl-fx .cor.c{bottom:12px;right:12px;border-left:0;border-top:0}.pgnl-fx .cor.d{bottom:12px;left:12px;border-right:0;border-top:0}
.pgnl-fx .hud{position:absolute;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.26em;color:#55556a;direction:ltr}
.pgnl-fx .hud.tl{top:16px;left:46px}.pgnl-fx .hud.br{bottom:14px;right:46px}
.pgnl-fx .hud i{display:inline-block;width:6px;height:6px;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:8px;vertical-align:middle}
.pgnl-fx .beam{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red2) 50%,var(--red) 70%,transparent)}
.pgnl-txt{position:relative;min-width:0}
.pgnl-eye,.hm2 .pgs-eye.ar{font-family:'Tajawal',sans-serif;font-weight:700;font-size:13px;letter-spacing:0;color:var(--red2);direction:rtl;text-align:right}
.pgnl h2{margin-top:6px;font-family:var(--disp);font-size:32px;font-weight:700;line-height:1.25;color:#fff}
.pgnl h2 em,.pgnl h2 .sg-shine{font-style:normal;color:var(--red2);-webkit-text-fill-color:var(--red2)}
.pgnl p{margin-top:8px;font-size:15px;color:var(--mute);max-width:440px}
.pgnl-form{position:relative;min-width:0}
.pgnl-form .row{display:flex;gap:8px}
.pgnl-form .pgin{flex:1;height:50px;font-size:15px;direction:ltr;text-align:left}
.pgnl-form .pgin::placeholder{direction:rtl;text-align:right}
.pgnl-form .pgbtn{height:50px;padding:0 24px;border:0;flex:0 0 auto}
.pgnl-form .pgbtn[disabled]{opacity:.6;cursor:wait}
.pgnl-msg{min-height:20px;margin-top:8px;font-size:13px;font-weight:700;color:var(--ok)}
.pgnl-msg.err{color:var(--red2)}
.pgnl-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.pgnl-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9a9aa8}
.pgnl-trust svg{width:14px;height:14px;color:var(--ok)}
/* ── التذييل ── */
.hm2-ft{margin-top:30px;padding:0;background:#07070a;border-top:1px solid var(--line2)}
.hm2-ft::before{content:'';display:block;height:2px;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red2) 50%,var(--red) 70%,transparent)}
.hm2-ft-top{padding:48px 0 40px;background:radial-gradient(ellipse at 100% 0%,rgba(230,0,18,.1),transparent 45%)}
.hm2-ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.hm2-ft-logo{display:inline-block;font-family:var(--num);font-weight:700;font-size:30px;letter-spacing:.14em;color:#fff;line-height:1;direction:ltr}
.hm2-ft-logo span{color:var(--red2)}
.hm2-ft-brand p{margin-top:12px;max-width:380px;font-size:14px;line-height:1.75;color:var(--mute)}
.hm2-ft-soc{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.hm2-ft-soc a{width:42px;height:42px;display:grid;place-items:center;color:#c9c9d6;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut7);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.hm2-ft-soc a:not([href]){display:none}
.hm2-ft-soc a svg{width:19px;height:19px;fill:currentColor}
.hm2-ft-soc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.hm2-ft-col h4{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.hm2-ft-col h4 small{font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.3em;color:var(--red2);direction:ltr;text-align:right}
.hm2-ft-col h4 span{font-family:var(--disp);font-size:16px;font-weight:700;color:#fff}
.hm2-ft-col li+li{margin-top:2px}
.hm2-ft-col a{display:inline-flex;align-items:center;gap:8px;min-height:34px;font-size:14px;color:#b9b9c6;transition:color .2s,transform .25s var(--ease);cursor:pointer}
.hm2-ft-col a::before{content:'';width:5px;height:5px;background:#3a3a48;flex:0 0 auto;transition:background .2s}
.hm2-ft-col a.ic::before{content:none}
.hm2-ft-col a.ic svg{width:16px;height:16px;color:var(--red2)}
.hm2-ft-col a:hover{color:#fff;transform:translateX(-3px)}
.hm2-ft-col a:hover::before{background:var(--red)}
.hm2-ft-bot{border-top:1px solid var(--line);padding:16px 0}
@media (min-width:901px){.hm2 .hm2-ft-bot .pgwrap{padding-left:128px}}
.hm2-ft-bot .pgwrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hm2-ft-copy{font-size:13px;color:#8a8a9a}
.hm2-ft-copy span{color:#fff;font-weight:700}
.hm2-ft-pay{display:flex;gap:8px;flex-wrap:wrap}
.hm2-ft-pay span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.14em;color:#c9c9d6;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut7);direction:ltr}
.hm2-ft-sys{font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.26em;color:#55556a;direction:ltr}
.hm2-ft-sys i{display:inline-block;width:6px;height:6px;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:8px;vertical-align:middle}
/* ── استجابة ── */
@media (max-width:1100px){.hm2-ft-grid{grid-template-columns:1fr 1fr;gap:28px}.hm2-ft-brand{grid-column:1/-1}}
@media (max-width:900px){
  .hm2{padding:26px 0}
  .hm2-posts{grid-template-columns:1fr}.pgpost.lead{grid-row:auto}.pgpost.lead .pgpost-im{aspect-ratio:16/9;min-height:0}.pgpost.lead .pgpost-bd h3{font-size:19px}
  .hm2-posts.one .pgpost.lead{flex-direction:column}.hm2-posts.one .pgpost.lead .pgpost-im{flex:none;min-height:0}
  .hm2-posts.two{grid-template-columns:1fr}
  .pgnl-in{grid-template-columns:1fr;gap:20px;padding:30px 24px 26px}
  .pgnl h2{font-size:26px}
}
@media (max-width:600px){
  .hm2-feats .pgt-i{padding-bottom:14px}
  .pgpost.side{flex-direction:column}.pgpost.side .pgpost-im{flex:none;aspect-ratio:16/9;min-height:0}.pgpost.side .pgpost-im::after{inset:auto 0 0 0;width:auto;height:50%;background:linear-gradient(0deg,#0c0c11,transparent)}.pgpost.side .pgpost-bd p{display:-webkit-box}
  .hm2-feat{padding:30px 0 20px}.hm2-wm-sub{font-size:13px}
  .pgnl-in{padding:26px 16px 22px}.pgnl-form .row{flex-direction:column}.pgnl-form .pgbtn{justify-content:center}.pgnl-fx .hud{display:none}
  .pgnl h2{font-size:24px}
  .hm2-ft-top{padding:34px 0 26px}.hm2-ft-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .hm2-ft-bot .pgwrap{flex-direction:column;align-items:flex-start}
  .hm2-ft-col a{font-size:13.5px}
}

/* #sg-policy */

/* ── sg-policy: نافذة السياسات (شحن · إرجاع · دفع · كفالة · أوقات العمل) — يعتمد رموز sg-pages ── */
.policy-modal,.policy-modal *,.policy-modal *::before,.policy-modal *::after{box-sizing:border-box}
.policy-modal{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,4,7,.86);font-family:'Tajawal',sans-serif;color:#f2f2f6}
.policy-modal.open{display:flex;animation:plcFade .25s ease both}
.policy-doc{position:relative;width:min(820px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;padding:1px;background:linear-gradient(135deg,var(--red),rgba(255,255,255,.16) 35%,rgba(255,255,255,.16) 65%,var(--red));clip-path:var(--cut)}
.policy-modal.open .policy-doc{animation:plcIn .4s var(--ease) both}
.policy-in{position:relative;display:flex;flex-direction:column;min-height:0;flex:1;background:linear-gradient(180deg,#121219,#0b0b10 40%);clip-path:var(--cut)}
.policy-in::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,rgba(230,0,18,.14),transparent 50%)}
.policy-beam{position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--red) 30%,var(--red2) 50%,var(--red) 70%,transparent)}
.policy-head{position:relative;display:flex;align-items:center;gap:14px;padding:22px 26px 16px}
.policy-head-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:var(--red);clip-path:var(--cut7)}
.policy-head-icon svg{width:25px;height:25px;display:block}
.policy-head-text{flex:1;min-width:0}
.policy-tag{font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:var(--red2);direction:ltr;text-align:right}
.policy-head-text h3{margin:2px 0 0;font-family:var(--disp);font-size:22px;font-weight:700;line-height:1.3;color:#fff}
.policy-close{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;padding:0;color:#c9c9d6;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:0;clip-path:var(--cut7);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.policy-close:focus{outline:0}
.policy-close:focus-visible{border-color:var(--red2);color:#fff}
.policy-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.policy-close svg{width:16px;height:16px;display:block}
.policy-tabs{position:relative;display:flex;gap:6px;padding:0 26px 14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.policy-tabs::-webkit-scrollbar{display:none}
.policy-tabs button{height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font:inherit;font-weight:700;font-size:13.5px;color:#c9c9d6;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:0;clip-path:var(--cut7);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.policy-tabs button svg{width:15px;height:15px;color:var(--red2);display:block}
.policy-tabs button.on,.policy-tabs button:hover{color:#fff;background:var(--red);border-color:var(--red)}
.policy-tabs button.on svg,.policy-tabs button:hover svg{color:#fff}
.policy-body{position:relative;flex:1;min-height:0;overflow-y:auto;padding:20px 26px 24px;font-size:14.5px;line-height:1.85;color:#d9d9e3;scrollbar-width:thin;scrollbar-color:rgba(230,0,18,.5) transparent;overscroll-behavior:contain}
.policy-body::-webkit-scrollbar{width:6px}
.policy-body::-webkit-scrollbar-thumb{background:rgba(230,0,18,.5)}
.policy-body p{margin:0 0 14px}
.policy-body strong{color:#fff;font-weight:700}
.policy-section{display:flex;align-items:center;gap:12px;margin:24px 0 14px}
.policy-section:first-child{margin-top:4px}
.policy-section-tag{font-family:var(--num);font-weight:700;font-size:30px;line-height:.9;color:transparent;-webkit-text-stroke:1.2px var(--red);direction:ltr;flex:0 0 auto}
.policy-section h4{margin:0;font-family:var(--disp);font-size:18px;font-weight:700;color:#fff}
.policy-section-line{flex:1;height:1px;background:linear-gradient(270deg,var(--line2),transparent)}
.policy-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.policy-list li{position:relative;padding:10px 30px 10px 14px;background:rgba(255,255,255,.025);border:1px solid var(--line);clip-path:var(--cut7)}
.policy-list li::before{content:'';position:absolute;right:12px;top:21px;width:7px;height:7px;background:var(--red)}
.policy-mini-h{margin:18px 0 10px;font-family:'Tajawal',sans-serif;font-size:13px;font-weight:700;color:var(--red2)}
.policy-pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.policy-price-card{position:relative;padding:16px 12px 14px;text-align:center;background:linear-gradient(180deg,#15151d,#0d0d13);border:1px solid var(--line2);clip-path:var(--cut10)}
.policy-price-card::after{content:'';position:absolute;right:0;bottom:0;height:3px;width:34%;background:var(--red)}
.policy-price-region{font-size:13px;font-weight:700;color:var(--mute);margin-bottom:6px}
.policy-price-value{font-family:var(--num);font-weight:700;font-size:32px;line-height:1;color:#fff;direction:ltr}
.policy-price-currency{font-size:15px;color:var(--red2);margin-left:3px}
.policy-note{display:flex;align-items:flex-start;gap:10px;margin:14px 0;padding:12px 14px;font-size:13.5px;color:#e8dcc0;background:rgba(255,171,64,.06);border:1px solid rgba(255,171,64,.3);clip-path:var(--cut7)}
.policy-note svg{width:18px;height:18px;color:var(--lo);flex:0 0 auto;margin-top:3px;display:block}
.policy-note strong{color:#fff}
.policy-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 26px;border-top:1px solid var(--line);flex-wrap:wrap}
.policy-seal{font-family:var(--num);font-weight:700;font-size:12px;letter-spacing:.26em;color:#6b6b7c;direction:ltr}
.policy-seal b{color:var(--red2);font-weight:700}
.policy-help{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;font:inherit;font-weight:800;font-size:13.5px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:0;clip-path:var(--cut7);cursor:pointer;transition:background .2s,color .2s}
.policy-help svg{width:16px;height:16px;display:block}
.policy-help:hover{background:#fff;color:#0a0a0f}
@keyframes plcFade{from{opacity:0}to{opacity:1}}
@keyframes plcIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .policy-modal{padding:0;align-items:stretch}
  .policy-doc{width:100%;max-height:none;height:100%;height:100dvh;clip-path:none;padding:0;background:none}
  .policy-in{clip-path:none}
  .policy-head{padding:16px 16px 12px}.policy-head-icon{width:42px;height:42px}.policy-head-text h3{font-size:18px}
  .policy-tabs{padding:0 16px 12px}
  .policy-body{padding:16px 16px 20px;font-size:14px}
  .policy-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .policy-seal{display:none}.policy-help{width:100%;justify-content:center;height:44px}
  .policy-price-value{font-size:26px}.policy-price-region{font-size:12px}.policy-pricing{gap:6px}
  .policy-section-tag{font-size:24px}.policy-section h4{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.policy-modal.open,.policy-modal.open .policy-doc{animation:none}}

/* #sg-bundles */

/* ═══ بندلات سوبر جيمز — مسرح HUD فاخر (bfx) ═══ */
.bfx-sec{position:relative;content-visibility:auto;contain-intrinsic-size:auto 760px}
.bfx-sec .pgs-n{font-size:60px}
.bfx-nav{display:flex;align-items:center;gap:6px}
.bfx-nav button{width:40px;height:38px;padding:0;display:grid;place-items:center;color:#e6e6ee;background:rgba(255,255,255,.03);border:1px solid var(--line2);clip-path:var(--cut7);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bfx-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.bfx-nav button:focus-visible{outline:2px solid var(--red2);outline-offset:2px}
.bfx-nav svg{width:17px;height:17px}
.bfx-cnt{min-width:72px;text-align:center;font-family:var(--num);font-weight:700;font-size:14px;letter-spacing:.14em;color:#8d8d9c;direction:ltr}

/* الإطار */
.bfx{position:relative;padding:1px;background:linear-gradient(135deg,rgba(255,42,58,.55),rgba(255,255,255,.14) 30%,rgba(255,255,255,.08) 70%,rgba(255,42,58,.45));clip-path:var(--cut)}
.bfx-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:470px;clip-path:var(--cut);overflow:hidden;
  background:
    radial-gradient(ellipse 55% 75% at 22% 55%,rgba(230,0,18,.20),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px),
    repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,255,255,.022) 35px 36px),
    linear-gradient(160deg,#121219 0%,#0b0b10 55%,#08080b 100%)}
.bfx-c{position:absolute;width:22px;height:22px;border:0 solid var(--red);z-index:3;pointer-events:none}
.bfx-c.tl{top:14px;left:14px;border-top-width:2px;border-left-width:2px}
.bfx-c.tr{top:14px;right:14px;border-top-width:2px;border-right-width:2px}
.bfx-c.bl{bottom:14px;left:14px;border-bottom-width:2px;border-left-width:2px}
.bfx-c.br{bottom:14px;right:14px;border-bottom-width:2px;border-right-width:2px}
.bfx-prog{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.06);z-index:4}
.bfx-prog i{position:absolute;inset:0;background:linear-gradient(270deg,var(--red),var(--red2) 70%,#fff);transform:scaleX(0);transform-origin:100% 50%}
.bfx-prog i.run{animation:bfxProg 6s linear forwards}
@keyframes bfxProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* انتقال المحتوى بين العروض */
.hbf-fade{transition:opacity .38s var(--ease),transform .38s var(--ease)}
.bfx.swapping .hbf-fade{opacity:0;transform:translateY(10px)}

/* لوحة المعلومات */
.bfx-info{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:46px 46px 40px;min-width:0}
.bfx-kick{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--red2)}
.bfx-kick::before{content:'';width:26px;height:2px;background:var(--red)}
.bfx-kick b{font-family:var(--num);font-weight:700;font-size:12.5px;letter-spacing:.28em;direction:ltr}
.bfx-kick span{color:#c9c9d6}
.bfx-name{margin:0;font-family:var(--disp);font-size:32px;font-weight:800;line-height:1.35;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.bfx-desc{margin:-6px 0 0;font-size:14.5px;line-height:1.9;color:var(--mute)}
.bfx-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.bfx-items li{display:flex;align-items:center;gap:12px;min-height:54px;padding:7px 12px;border-top:1px solid var(--line)}
.bfx-items li:first-child{border-top:0}
.bfx-th{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;background:#08080c;border:1px solid var(--line2);overflow:hidden;color:#6f6f7d}
.bfx-th img.bfx-im{width:100%;height:100%;object-fit:contain}
.bfx-th svg{width:20px;height:20px}
.bfx-items .bfx-nm{flex:1;unicode-bidi:plaintext;text-align:right;font-size:14px;font-weight:700;color:#e6e6ee;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfx-items em{flex:0 0 auto;font-style:normal;font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.06em;color:#c9c9d6;padding:3px 9px 2px;border:1px solid var(--line2);direction:ltr}
.bfx-items em.g{font-family:var(--disp);letter-spacing:0;font-size:12px;color:var(--ok);border-color:rgba(143,227,169,.4);background:rgba(143,227,169,.06)}
.bfx-items li.gift .bfx-th{border-color:rgba(143,227,169,.4)}
.bfx-price{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:4px}
.bfx-now{display:flex;align-items:flex-start;gap:4px;direction:ltr;line-height:.85}
.bfx-now b{font-family:var(--num);font-weight:700;font-size:64px;color:#fff;text-shadow:0 0 28px rgba(255,42,58,.35)}
.bfx-now small{font-family:var(--num);font-weight:700;font-size:26px;color:var(--red2);margin-top:4px}
.bfx-was{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}
.bfx-was s{font-family:var(--num);font-weight:600;font-size:20px;color:#7a7a88;direction:ltr;text-align:right}
.bfx-was span{display:inline-flex;align-items:center;height:26px;padding:0 10px;font-size:12.5px;font-weight:800;color:#fff;background:var(--red);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.bfx-meter{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--mute)}
.bfx-segs{flex:1;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:260px}
.bfx-segs i{height:8px;background:rgba(255,255,255,.07)}
.bfx-segs i.on{background:var(--red2);box-shadow:0 0 10px rgba(255,42,58,.45)}
.bfx-meter b{font-family:var(--num);font-weight:700;font-size:16px;color:#fff;direction:ltr}
.bfx-buy{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 26px;margin-top:6px;font:inherit;font-size:16px;font-weight:800;color:#fff;background:var(--red);border:0;cursor:pointer;clip-path:var(--cut10);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:filter .2s,transform .2s var(--ease)}
.bfx-buy:hover{filter:brightness(1.12);transform:translateY(-2px)}
.bfx-buy:active{transform:translateY(0)}
.bfx-buy:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bfx-buy svg{width:20px;height:20px}
.bfx-buy svg:last-child{width:18px;height:18px;transition:transform .25s var(--ease)}
.bfx-buy:hover svg:last-child{transform:translateX(-4px)}

/* مسرح المنتجات */
.bfx-vis{position:relative;display:grid;place-items:center;padding:56px 40px 64px;min-width:0;border-right:1px solid var(--line)}
.bfx-floor{position:absolute;left:-20%;right:-20%;bottom:-40%;height:70%;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(230,0,18,.30) 0 1px,transparent 1px 56px),repeating-linear-gradient(0deg,rgba(230,0,18,.26) 0 1px,transparent 1px 56px);
  transform:perspective(380px) rotateX(64deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%);opacity:.5}
.bfx-vis::before{content:'';position:absolute;left:50%;top:50%;width:440px;height:440px;max-width:90%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,42,58,.22),rgba(230,0,18,.06) 45%,transparent 70%);pointer-events:none}
.bfx-off{position:absolute;top:30px;left:30px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:10px 14px 8px;font-family:var(--num);font-weight:700;font-size:34px;line-height:1;color:#fff;background:var(--red);direction:ltr;clip-path:var(--cut10);box-shadow:0 10px 30px rgba(230,0,18,.35)}
.bfx-off small{font-size:11px;letter-spacing:.3em;margin-bottom:4px;opacity:.85}
.bfx-badge{position:absolute;top:30px;right:30px;z-index:3;max-width:44%;padding:7px 14px;font-size:13px;font-weight:800;color:#fff;background:rgba(10,10,15,.82);border:1px solid rgba(255,42,58,.55);clip-path:var(--cut7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfx-comp{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.bfx-comp.n3,.bfx-comp.n4{display:grid;grid-template-columns:repeat(2,minmax(0,170px));gap:14px;justify-content:center}
.bfx-tile{position:relative;flex:0 1 210px;aspect-ratio:1;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 60%,rgba(255,42,58,.4));clip-path:var(--cut10);transition:transform .4s var(--ease)}
.bfx-tile .bfx-art{position:absolute;inset:1px;display:grid;place-items:center;padding:14%;background:radial-gradient(ellipse at 50% 35%,#1d1d27,#0c0c12 70%);clip-path:var(--cut10)}
.bfx-tile img.bfx-im{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.bfx-tile svg{width:46%;height:46%;color:#56565f}
.bfx-tile:hover{transform:translateY(-4px)}
.bfx-tile.solo{flex:0 1 360px;max-width:100%}
.bfx-tile.solo .bfx-art{padding:10%;background:radial-gradient(ellipse at 50% 40%,#22222e,#0c0c12 72%)}
.bfx-tile.gift{background:linear-gradient(160deg,rgba(143,227,169,.6),rgba(255,255,255,.06) 60%,rgba(143,227,169,.35))}
.bfx-comp.n3 .bfx-tile,.bfx-comp.n4 .bfx-tile{width:100%;flex:none}
.bfx-tq{position:absolute;bottom:10px;left:12px;z-index:2;font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.08em;color:#fff;background:rgba(10,10,15,.85);padding:3px 8px 2px;direction:ltr}
.bfx-gift{position:absolute;top:10px;right:12px;z-index:2;font-style:normal;font-size:11.5px;font-weight:800;color:#07130c;background:var(--ok);padding:3px 9px}
.bfx-plus{position:relative;z-index:2;flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:28px;line-height:1;color:#fff;background:var(--red);clip-path:var(--cut7);box-shadow:0 0 22px rgba(230,0,18,.5)}

/* شريط العروض */
.bfx-tabs{position:relative;display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;scroll-snap-type:x proximity}
.bfx-tabs::-webkit-scrollbar{display:none}
.bfx-tab{flex:1 1 0;min-width:190px;display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;font:inherit;text-align:right;color:#c9c9d6;background:rgba(255,255,255,.025);border:1px solid var(--line2);clip-path:var(--cut7);cursor:pointer;scroll-snap-align:start;transition:background .2s,border-color .2s,color .2s}
.bfx-tab i{font-style:normal;font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.08em;color:#6b6b7c;direction:ltr}
.bfx-tab span{flex:1;min-width:0;unicode-bidi:plaintext;text-align:right;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfx-tab b{font-family:var(--num);font-weight:700;font-size:15px;color:var(--red2);direction:ltr}
.bfx-tab:hover{background:rgba(255,255,255,.05);color:#fff}
.bfx-tab.on{background:linear-gradient(90deg,rgba(230,0,18,.06),rgba(230,0,18,.18));border-color:rgba(255,42,58,.65);color:#fff;box-shadow:inset -3px 0 0 var(--red)}
.bfx-tab.on i{color:var(--red2)}
.bfx-tab:focus-visible{outline:2px solid var(--red2);outline-offset:-2px}

@media (max-width:1100px){
  .bfx-info{padding:40px 32px 34px}
  .bfx-name{font-size:28px}
  .bfx-now b{font-size:56px}
}
@media (max-width:900px){
  .bfx-in{grid-template-columns:minmax(0,1fr)}
  .bfx-vis{order:-1;border-right:0;border-bottom:1px solid var(--line);padding:58px 22px 34px;min-height:300px}
  .bfx-info{padding:28px 22px 30px;gap:14px}
  .bfx-tile.solo{flex-basis:260px}
  .bfx-tile{flex-basis:170px}
  .bfx-comp.n3,.bfx-comp.n4{grid-template-columns:repeat(2,minmax(0,140px))}
}
@media (max-width:560px){
  .bfx-sec .pgs-n{font-size:46px}
  .bfx-nav .bfx-cnt{min-width:58px;font-size:13px}
  .bfx-vis{padding:62px 16px 26px;min-height:260px}
  .bfx-off{top:16px;left:16px;min-width:0;flex-direction:row;align-items:baseline;gap:6px;font-size:22px;padding:7px 10px 6px}
  .bfx-off small{margin:0;font-size:10px;letter-spacing:.2em}
  .bfx-badge{top:18px;right:18px;font-size:12px;padding:6px 11px}
  .bfx-c.tl,.bfx-c.tr{top:10px}.bfx-c.bl,.bfx-c.br{bottom:10px}.bfx-c.tl,.bfx-c.bl{left:10px}.bfx-c.tr,.bfx-c.br{right:10px}
  .bfx-tile.solo{flex-basis:220px}
  .bfx-tile{flex-basis:132px}
  .bfx-plus{width:34px;height:34px;font-size:22px}
  .bfx-comp{gap:10px}
  .bfx-comp.n3,.bfx-comp.n4{grid-template-columns:repeat(2,minmax(0,124px));gap:10px}
  .bfx-name{font-size:23px}
  .bfx-now b{font-size:48px}
  .bfx-now small{font-size:22px}
  .bfx-was s{font-size:17px}
  .bfx-buy{align-self:stretch;justify-content:center;height:54px}
  .bfx-tab{min-width:172px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  .hbf-fade,.bfx-tile,.bfx-buy,.bfx-buy svg:last-child{transition:none}
  .bfx-prog i.run{animation:none;transform:scaleX(1)}
}

/* #sg-r47 */

/* ═══ r47 ═══ */

/* ── 1) شحن الألعاب داخل القسم: الصورة في إطار محدّد بين الشارات وبطاقة السعر — تظهر كاملة ولا تغطّي شيئاً ── */
.sgc-dg .sgc-im img{position:absolute;inset:var(--dg-t,46px) 0 var(--dg-b,48px);margin:auto;width:72%;height:calc(100% - var(--dg-t,46px) - var(--dg-b,48px));max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
@media (max-width:900px){.sgc-dg .sgc-im{aspect-ratio:1/.92;--dg-t:36px;--dg-b:40px}.sgc-dg .sgc-im img{width:78%}}

/* ── 2) الأقسام والفروع: شبكة HUD كاملة خلف المسرح ── */
.cx{background:
  linear-gradient(180deg,#060608 0,rgba(6,6,8,0) 110px,rgba(6,6,8,0) calc(100% - 110px),#060608 100%),
  radial-gradient(900px 420px at 50% 62%,rgba(230,0,18,.07),transparent 70%),
  repeating-linear-gradient(0deg,transparent 0 47px,rgba(255,255,255,.032) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.032) 47px 48px),
  repeating-linear-gradient(0deg,transparent 0 191px,rgba(230,0,18,.07) 191px 192px),
  repeating-linear-gradient(90deg,transparent 0 191px,rgba(230,0,18,.07) 191px 192px),
  #060608}
.cx-stage::before{content:'';position:absolute;inset:-12px;pointer-events:none;
  background:
    linear-gradient(var(--cx-red),var(--cx-red)) right 0 top 0/22px 2px no-repeat,linear-gradient(var(--cx-red),var(--cx-red)) right 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--cx-red),var(--cx-red)) left 0 top 0/22px 2px no-repeat,linear-gradient(var(--cx-red),var(--cx-red)) left 0 top 0/2px 22px no-repeat,
    linear-gradient(var(--cx-red),var(--cx-red)) right 0 bottom 0/22px 2px no-repeat,linear-gradient(var(--cx-red),var(--cx-red)) right 0 bottom 0/2px 22px no-repeat,
    linear-gradient(var(--cx-red),var(--cx-red)) left 0 bottom 0/22px 2px no-repeat,linear-gradient(var(--cx-red),var(--cx-red)) left 0 bottom 0/2px 22px no-repeat;
  opacity:.75}
.cx-t,.cx-par{background-image:
  repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.035) 27px 28px),
  repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.035) 27px 28px),
  linear-gradient(160deg,rgba(22,22,32,.94),rgba(10,10,15,.96))}
.cx-par{background-image:
  repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px),
  repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px),
  linear-gradient(170deg,rgba(25,20,28,.95),rgba(11,11,16,.97))}
@media (max-width:640px){.cx-stage::before{inset:-8px}}

/* ── 3) آراء العملاء ── */
.rvx-ctl{align-self:flex-end}
.rvx-live{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;font-size:13px;font-weight:700;color:#cfcfda;background:rgba(255,255,255,.03);border:1px solid var(--line2);clip-path:var(--cut7);white-space:nowrap}
.rvx-live i{width:8px;height:8px;background:var(--red2);box-shadow:0 0 10px var(--red2);animation:rvxPulse 1.8s ease-in-out infinite}
.rvx-live b{font-family:var(--num);font-size:17px;font-weight:700;color:#fff}
@keyframes rvxPulse{50%{opacity:.35}}
.rvx{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:stretch}
.rvx-sum{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px 22px;clip-path:var(--cut);
  background:linear-gradient(var(--red),var(--red)) right 0 top 0/26px 2px no-repeat,linear-gradient(var(--red),var(--red)) right 0 top 0/2px 26px no-repeat,
    radial-gradient(320px 220px at 100% 0,rgba(230,0,18,.16),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.03) 27px 28px),repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.03) 27px 28px),
    linear-gradient(180deg,#131219,#0b0b10);border:1px solid var(--line2)}
.rvx-score{display:flex;align-items:center;gap:14px}
.rvx-score>b{font-family:var(--num);font-size:68px;font-weight:700;line-height:.85;color:#fff;letter-spacing:-.02em;text-shadow:0 0 28px rgba(230,0,18,.35)}
.rvx-score>span{display:flex;flex-direction:column;gap:6px}
.rvx-score small{font-size:12px;color:var(--mute)}
.rvx-stars{font-family:var(--num);font-size:17px;letter-spacing:.12em;color:var(--red2);direction:ltr;line-height:1;white-space:nowrap}
.rvx-stars b{color:#3a3a48;font-weight:400}
.rvx-stars.fr{color:transparent;background:linear-gradient(90deg,var(--red2) var(--p),#3a3a48 var(--p));-webkit-background-clip:text;background-clip:text}
.rvx-total{display:flex;align-items:baseline;gap:8px;padding:12px 0;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2)}
.rvx-total b{font-family:var(--num);font-size:30px;font-weight:700;color:var(--red2);line-height:1}
.rvx-total span{font-size:13.5px;color:#d0d0da;font-weight:600}
.rvx-dist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rvx-dist li{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:10px;font-family:var(--num);font-weight:700;font-size:14px;color:#cfcfda}
.rvx-dist li span{display:inline-flex;align-items:center;gap:3px;direction:ltr;justify-content:flex-end}
.rvx-dist li span i{font-style:normal;font-size:12px;color:var(--red2)}
.rvx-dist em{position:relative;height:6px;background:rgba(255,255,255,.06);overflow:hidden}
.rvx-dist em i{position:absolute;inset:0 0 0 auto;width:var(--w);background:linear-gradient(270deg,var(--red),var(--red2))}
.rvx-dist b{text-align:left;color:#8a8a99;font-weight:700}
.rvx-vf{display:flex;align-items:center;gap:8px;margin-top:auto;padding:10px 12px;font-size:12.5px;color:#cfe9d7;background:rgba(80,200,120,.06);border:1px solid rgba(80,200,120,.22)}
.rvx-vf svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto}
.rvx-vf b{font-family:var(--num);font-size:15px;color:var(--ok)}

.rvx-stream{position:relative;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rvx-row{overflow:hidden}
.rvx-track{display:flex;width:max-content;animation:rvxMove var(--rvx-dur,40s) linear infinite;animation-play-state:paused;will-change:transform}
.rvx-row.rev .rvx-track{animation-direction:reverse}
.rvx-stream.on .rvx-track{animation-play-state:running}
.rvx-stream.on .rvx-row:focus-within .rvx-track{animation-play-state:paused}
.rvx-set{display:flex;gap:14px;padding-inline-end:14px}
@keyframes rvxMove{to{transform:translateX(50%)}}
.rvx-stream.still{-webkit-mask-image:none;mask-image:none}
.rvx-static{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rvx-static .rvx-card{width:auto}

.rvx-card{position:relative;flex:0 0 auto;width:330px;margin:0;display:flex;flex-direction:column;padding:18px 20px 16px;background:linear-gradient(180deg,#14141b,#0c0c11);border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .25s}
.rvx-card:hover{border-color:rgba(230,0,18,.6)}
.rvx-card .q{position:absolute;top:-10px;left:12px;font-family:var(--num);font-weight:700;font-size:84px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);pointer-events:none}
.rvx-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rvx-card .vf{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ok);white-space:nowrap}
.rvx-card .vf svg{width:12px;height:12px}
.rvx-card blockquote{margin:12px 0 0;font-size:14.5px;line-height:1.75;color:#e2e2ea;min-height:3.5em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext;text-align:right}
.rvx-card figcaption{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2);min-width:0}
.rvx-card .av{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;font-family:var(--num);font-weight:700;font-size:14px;color:#fff;background:var(--red);clip-path:var(--cut7);direction:ltr}
.rvx-card .who{min-width:0;display:flex;flex-direction:column}
.rvx-card .who b{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right}
.rvx-card .who small{font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.12em;color:#7c7c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right;text-transform:uppercase}
.rvx-card .bar{position:absolute;right:0;bottom:0;height:3px;width:30%;background:var(--red);transition:width .4s var(--ease)}
.rvx-card:hover .bar{width:100%}

@media (max-width:1100px){.rvx{grid-template-columns:260px minmax(0,1fr)}.rvx-score>b{font-size:58px}}
@media (max-width:900px){
  .rvx{grid-template-columns:minmax(0,1fr)}
  .rvx-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 22px;align-items:center;padding:18px}
  .rvx-total{grid-column:1;border:0;padding:0;flex-direction:column;align-items:flex-start;gap:4px}
  .rvx-dist{grid-column:2;grid-row:1/3}
  .rvx-vf{grid-column:1/-1;margin-top:0}
}
@media (max-width:560px){
  .rvx-live{height:34px;padding:0 10px;font-size:12px}
  .rvx-sum{grid-template-columns:auto minmax(0,1fr);gap:12px 16px;padding:16px}
  .rvx-total{grid-column:2;grid-row:1;align-self:center;border-right:1px dashed var(--line2);padding-right:14px}
  .rvx-total b{font-size:26px}.rvx-total span{font-size:12.5px}
  .rvx-dist{grid-column:1/-1;grid-row:auto;gap:6px}
  .rvx-score{flex-direction:column;align-items:flex-start;gap:6px}
  .rvx-score>b{font-size:50px}
  .rvx-score small{display:none}
  .rvx-card{width:min(78vw,290px);padding:16px}
  .rvx-card blockquote{font-size:14px}
  .rvx-stream{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}
@media (prefers-reduced-motion:reduce){.rvx-track{animation:none}.rvx-live i{animation:none}}

/* ── 4) مسار صفحة المنتج: هدف لمس مريح على الجوال (44px تقريباً) دون تغيير شكل السطر ── */
@media (pointer:coarse){.hm2-ft-logo{display:inline-flex;align-items:center;min-height:40px}.pv-bc{padding-top:12px;padding-bottom:14px}.pv-bc a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}}

/* #sg-dgx */

/* ═══ r49 — نافذة فئات المنتج الرقمي (dgx): لوحة HUD فاخرة — كمبيوتر: وسط الشاشة · جوال: لوحة من الأسفل ═══ */
.dgx{display:none;position:fixed;inset:0;z-index:9700;align-items:center;justify-content:center;padding:24px}
.dgx.open{display:flex}
.dgx-backdrop{position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 40%,rgba(230,0,18,.10),transparent 70%),rgba(3,3,6,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:dgxFade .25s ease both}
.dgx-box{position:relative;z-index:1;width:100%;max-width:720px;max-height:min(860px,calc(100vh - 48px));max-height:min(860px,calc(100dvh - 48px));display:flex;flex-direction:column;
  background:
    linear-gradient(var(--red),var(--red)) right 0 top 0/26px 2px no-repeat,linear-gradient(var(--red),var(--red)) right 0 top 0/2px 26px no-repeat,
    linear-gradient(var(--red),var(--red)) left 0 bottom 0/26px 2px no-repeat,linear-gradient(var(--red),var(--red)) left 0 bottom 0/2px 26px no-repeat,
    radial-gradient(520px 260px at 85% 0,rgba(230,0,18,.14),transparent 70%),
    linear-gradient(180deg,#121219,#09090d);
  border:1px solid var(--line2);clip-path:var(--cut);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(230,0,18,.08);animation:dgxIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes dgxFade{from{opacity:0}}
@keyframes dgxIn{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* الرأس */
.dgx-hd{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.dgx-art{position:relative;width:150px;height:150px;display:grid;place-items:center;overflow:hidden;clip-path:var(--cut10);
  background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px),radial-gradient(ellipse at 50% 45%,#23232f,#0c0c12 72%);border:1px solid var(--line2)}
.dgx-art::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(255,42,58,.22),transparent 60%);pointer-events:none}
.dgx-art img{position:relative;z-index:1;width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.dgx-floor{position:absolute;left:-30%;right:-30%;bottom:-38%;height:62%;background:repeating-linear-gradient(90deg,rgba(230,0,18,.35) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(230,0,18,.3) 0 1px,transparent 1px 22px);transform:perspective(160px) rotateX(62deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);opacity:.55;pointer-events:none}
.dgx-fb{position:relative;z-index:1;width:74%;aspect-ratio:1;display:grid;place-items:center;font-size:52px;clip-path:var(--cut10)}
.dgx-ttl{min-width:0}
.dgx-eye{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.24em;color:var(--red2);text-transform:uppercase}
.dgx-eye i{width:18px;height:2px;background:var(--red)}
.dgx-eye span{letter-spacing:.06em;color:#8a8a99}
.dgx-ttl h3{margin:8px 0 12px;font-family:var(--disp);font-size:26px;font-weight:700;line-height:1.3;color:#fff;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:right}
.dgx-chips{display:flex;flex-wrap:wrap;gap:6px}
.dgx-chips span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12px;font-weight:700;color:#cfcfda;background:rgba(255,255,255,.035);border:1px solid var(--line2);clip-path:var(--cut6)}
.dgx-chips .dgx-stc i{width:7px;height:7px;background:currentColor;box-shadow:0 0 8px currentColor}
.dgx-chips .dgx-stc.dg-open{color:var(--ok);border-color:rgba(80,200,120,.35);background:rgba(80,200,120,.07)}
.dgx-chips .dgx-stc.dg-closed{color:#ffb547;border-color:rgba(255,181,71,.38);background:rgba(255,181,71,.07)}
.dgx-chips .dgx-stc.dg-paused{color:#c9c9d4;border-color:var(--line2)}
#dgxNote:empty{display:none}
#dgxNote{margin-bottom:16px}
.dgx-chips svg{width:14px;height:14px;flex:0 0 auto}
.dgx-x{align-self:start;width:40px;height:40px;display:grid;place-items:center;padding:0;color:#e6e6ee;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut6);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.dgx-x svg{width:18px;height:18px}
.dgx-x:hover{background:rgba(230,0,18,.14);border-color:var(--red);color:#fff}
.dgx-x:focus-visible,.dgx-v:focus-visible,.dgx-add:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* الجسم */
.dgx-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 20px;scrollbar-width:thin;scrollbar-color:#2a2a35 transparent}
.dgx-lbl{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14.5px;font-weight:800;color:#fff}
.dgx-lbl b{font-family:var(--num);font-size:13px;font-weight:700;color:#fff;background:var(--red);padding:3px 7px;clip-path:var(--cut6);letter-spacing:.06em}
.dgx-lbl span{margin-right:auto;direction:ltr;font-family:var(--num);font-size:11.5px;font-weight:700;letter-spacing:.2em;color:#6f6f7d}
.dgx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dgx-empty{grid-column:1/-1;padding:24px;text-align:center;color:#8a8a99;font-size:13.5px;border:1px dashed var(--line2)}
.dgx-v{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"rd lb" "pr pr" "tg tg";gap:8px 10px;align-items:center;min-height:96px;padding:14px 14px 12px;text-align:right;font:inherit;color:#e8e8ee;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .2s,background .2s,transform .2s}
.dgx-v:hover:not(:disabled){border-color:rgba(230,0,18,.55);background:linear-gradient(180deg,rgba(230,0,18,.07),rgba(255,255,255,.012))}
.dgx-v.selected{border-color:var(--red);background:linear-gradient(180deg,rgba(230,0,18,.16),rgba(230,0,18,.04));box-shadow:inset 0 0 0 1px rgba(230,0,18,.5)}
.dgx-v:disabled{opacity:.42;cursor:not-allowed}
.dgx-rd{grid-area:rd;width:20px;height:20px;display:grid;place-items:center;border:1.5px solid #4a4a58;color:transparent;transition:background .2s,border-color .2s,color .2s}
.dgx-rd svg{width:13px;height:13px}
.dgx-v.selected .dgx-rd{background:var(--red);border-color:var(--red);color:#fff}
.dgx-lb{grid-area:lb;font-size:14.5px;font-weight:800;line-height:1.35;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:right}
.dgx-pr{grid-area:pr;display:flex;align-items:baseline;gap:8px;direction:ltr;justify-content:flex-end}
.dgx-p{font-family:var(--num);font-size:26px;font-weight:700;line-height:1;color:#fff}
.dgx-v.selected .dgx-p{color:var(--red2);text-shadow:0 0 18px rgba(230,0,18,.4)}
.dgx-pr .dg-old-price{font-family:var(--num);font-size:15px;font-weight:600;color:#6f6f7d}
.dgx-tg{grid-area:tg;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.dgx-tg:empty{display:none}
.dgx-v .dg-sale-pct{border-radius:0;font-family:var(--num);font-size:12px;padding:2px 7px;clip-path:var(--cut6)}
.dgx-best{display:inline-flex;align-items:center;height:20px;padding:0 8px;font-size:11px;font-weight:800;color:var(--ok);border:1px solid rgba(80,200,120,.4);background:rgba(80,200,120,.08)}
.dgx-st{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;color:#8a8a99}
.dgx-st.out{color:var(--red2)}
.dgx-v .dg-sale-banner{grid-column:1/-1;margin:2px -14px -12px;border-radius:0;box-shadow:none;padding:5px 10px;font-size:11.5px}
.dgx-v .dg-sale-pct{direction:ltr;unicode-bidi:isolate}
.dgx-v .dg-countdown{border-radius:0;font-family:var(--num)}

.dgx-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.dgx-steps li{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#0d0d12;font-size:12.5px;line-height:1.55;color:#b4b4c2}
.dgx-steps li b{flex:0 0 auto;font-family:var(--num);font-size:18px;font-weight:700;line-height:1;color:var(--red2)}
.dgx-steps li strong{display:block;color:#fff;font-size:13px;margin-bottom:2px}

/* الذيل الثابت */
.dgx-ft{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:14px 24px;border-top:1px solid var(--line2);background:linear-gradient(180deg,rgba(10,10,14,.6),#08080b)}
.dgx-sel,.dgx-tot{min-width:0;display:flex;flex-direction:column;gap:2px}
.dgx-sel small,.dgx-tot small{font-size:11.5px;color:#7c7c8c;font-weight:700}
.dgx-sel b{font-size:14.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right}
.dgx-ft:not(.ready) .dgx-sel b{color:#6f6f7d;font-weight:600}
.dgx-tot b{font-family:var(--num);font-size:28px;font-weight:700;line-height:1;color:#fff;direction:ltr;text-align:right}
.dgx-ft.ready .dgx-tot b{color:var(--red2)}
.dgx-add{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:190px;height:52px;padding:0 24px;font:inherit;font-size:15.5px;font-weight:800;color:#fff;background:var(--red);border:0;clip-path:var(--cut10);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:filter .2s,background .2s}
.dgx-add svg{width:18px;height:18px}
.dgx-add:hover:not(:disabled){filter:brightness(1.12)}
.dgx-add:disabled{background:#22222b;color:#7c7c8c;cursor:not-allowed;box-shadow:none}

@media (max-width:720px){
  .dgx{align-items:flex-end;padding:0}
  .dgx-box{max-width:none;max-height:92vh;max-height:92dvh;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px);border-bottom:0;animation-name:dgxUp}
  @keyframes dgxUp{from{transform:translateY(40px);opacity:0}}
  .dgx-hd{grid-template-columns:92px minmax(0,1fr) auto;gap:14px;padding:18px 16px 14px}
  .dgx-art{width:92px;height:92px}
  .dgx-ttl h3{font-size:19px;margin:6px 0 10px}
  .dgx-chips span{height:26px;font-size:11.5px;padding:0 8px}
  .dgx-chips span:nth-child(3){display:none}
  .dgx-body{padding:14px 16px 16px}
  .dgx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dgx-v{min-height:88px;padding:12px 10px 10px}
  .dgx-v .dg-sale-banner{margin:2px -10px -10px}
  .dgx-p{font-size:22px}
  .dgx-steps{grid-template-columns:minmax(0,1fr)}
  .dgx-steps li{padding:10px 12px}
  .dgx-ft{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .dgx-add{grid-column:1/-1;width:100%;height:50px}
}
@media (max-width:360px){.dgx-grid{grid-template-columns:minmax(0,1fr)}.dgx-hd{grid-template-columns:72px minmax(0,1fr) auto}.dgx-art{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.dgx-box,.dgx-backdrop{animation:none}}

/* #sg-dg-hours */

/* ═══ r53 — حالة تسليم المنتجات الرقمية (متاح / خارج الدوام / متوقّف) ═══ */
:root{--dg-on:#3ddc84;--dg-off:#ffb547;--dg-pz:#a9a9b8}
.dgs,.sg-dgnote{--c:var(--dg-on);--ca:rgba(61,220,132,.08);--cb:rgba(61,220,132,.32)}
.dgs.dg-closed,.sg-dgnote.dg-closed{--c:var(--dg-off);--ca:rgba(255,181,71,.08);--cb:rgba(255,181,71,.34)}
.dgs.dg-paused,.sg-dgnote.dg-paused{--c:var(--dg-pz);--ca:rgba(169,169,184,.06);--cb:rgba(169,169,184,.28)}

/* شريط الحالة أسفل رأس صفحة الشحن */
.dgs-wrap{margin-top:-6px;margin-bottom:26px}
.dgs{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:16px 22px;clip-path:var(--cut10);
  background:linear-gradient(270deg,var(--ca),transparent 60%),linear-gradient(180deg,#121219,#0b0b10);border:1px solid var(--line2)}
.dgs::before{content:'';position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--c);box-shadow:0 0 18px var(--c)}
.dgs-dot{position:relative;width:12px;height:12px;background:var(--c);transform:rotate(45deg);box-shadow:0 0 14px var(--c)}
.dgs.dg-open .dgs-dot{animation:dgsPulse 2s ease-in-out infinite}
@keyframes dgsPulse{50%{box-shadow:0 0 2px var(--c);opacity:.55}}
.dgs-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.dgs-main b{font-size:15.5px;font-weight:800;color:var(--c)}
.dgs-main span{font-size:13.5px;line-height:1.7;color:#cfcfda}
.dgs-hours{display:flex;flex-direction:column;gap:3px;padding-right:18px;border-right:1px dashed var(--line2);min-width:0}
.dgs-hours small{font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.2em;color:#6f6f7d}
.dgs-hours small::after{content:' · HOURS'}
.dgs-hours b{font-size:13px;font-weight:700;color:#e8e8ee;line-height:1.6}
.dgs-side{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--c);white-space:nowrap;padding:6px 12px;border:1px solid var(--cb);clip-path:var(--cut6)}
.dgs-side:empty{display:none}
@media (max-width:900px){.dgs{grid-template-columns:auto minmax(0,1fr);gap:10px 14px;padding:14px 16px}.dgs-hours{grid-column:1/-1;padding-right:0;border-right:0;border-top:1px dashed var(--line2);padding-top:10px}.dgs-side{grid-column:1/-1;justify-self:start}}

/* وحدة التحكّم في رأس الصفحة */
.pgh-con-hd [data-dgl="state-en"]{color:var(--dg-on)}
.pgh-con-hd [data-dgl="state-en"].dg-closed{color:var(--dg-off)}.pgh-con-hd [data-dgl="state-en"].dg-paused{color:var(--dg-pz)}
.pgh-con-ft.dg-closed b.f{background:var(--dg-off);box-shadow:none}.pgh-con-ft.dg-paused b.f{background:var(--dg-pz);box-shadow:none}

/* بطاقة المنتج الرقمي: شارة الحالة وسطر التسليم */
.sgc-inst[data-dgl] i{background:var(--dg-on);box-shadow:0 0 8px var(--dg-on)}
.sgc-inst[data-dgl].dg-closed i{background:var(--dg-off);box-shadow:0 0 8px var(--dg-off)}
.sgc-inst[data-dgl].dg-paused i{background:var(--dg-pz);box-shadow:none}
.sgc-inst[data-dgl]{letter-spacing:0;font-family:inherit;font-size:11px}
.sgc-st[data-dgl].dg-closed small{color:var(--dg-off)}.sgc-st[data-dgl].dg-closed i b.f{background:var(--dg-off)}
.sgc-st[data-dgl].dg-paused small{color:var(--dg-pz)}.sgc-st[data-dgl].dg-paused i b.f{background:var(--dg-pz)}

/* ملاحظة التسليم (النافذة، ملخّص الدفع، صفحة النجاح) */
.sg-dgnote{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;text-align:right;background:linear-gradient(270deg,var(--ca),rgba(12,12,17,.6));border:1px solid var(--cb);border-right:3px solid var(--c)}
.sg-dgnote>i{flex:0 0 auto;width:9px;height:9px;margin-top:6px;background:var(--c);transform:rotate(45deg);box-shadow:0 0 10px var(--c)}
.sg-dgnote>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.sg-dgnote b{font-size:13.5px;font-weight:800;color:var(--c)}
.sg-dgnote span{font-size:12.5px;line-height:1.7;color:#d6d6e0}
.sg-dgnote small{font-size:11.5px;color:#8a8a99;line-height:1.6}
.ck-summary .sg-dgnote,#ckSummary .sg-dgnote{margin-top:10px}
.ck-success .sg-dgnote{max-width:520px;margin:18px auto 0}

/* #sg-r54 */

/* ═══ r54 ═══ */

/* ── صور البطاقات: الصورة الطولية (أطول من عرضها) كانت تتجاوز إطارها فتُقصّ وتبدو أكبر من غيرها
      (القاعدة العامة img:not([class]){height:auto} تلغي ارتفاعها) — سقف ارتفاع لا يمسّ الصور المربّعة والعريضة ── */
.sgc .sgc-im img{position:absolute;inset:0;margin:auto;max-height:84.5%}   /* موضع مطلق: النسبة تُحسب من الإطار نفسه */
.sgc-build .sgc-im img{max-height:95%}
/* صورة شفّافة الخلفية يلامس المنتج فيها الحوافّ: هامش داخلي يعيدها لحجم بقية الصور (تُكتشف تلقائياً) */
.sgc-im img.sg-tight{box-sizing:border-box;padding:9% 10%}

/* ── الإشعار (Toast) ── */
.sgt{--c:#3ddc84;--ca:rgba(61,220,132,.12);position:fixed;top:18px;left:50%;z-index:100010;width:min(420px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px 16px;
  text-align:right;color:#fff;font-family:'Tajawal',sans-serif;pointer-events:none;opacity:0;transform:translate(-50%,-14px);visibility:hidden;
  background:linear-gradient(270deg,var(--ca),transparent 55%),linear-gradient(180deg,rgba(20,20,28,.97),rgba(10,10,15,.98));border:1px solid rgba(255,255,255,.1);clip-path:var(--cut10);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sgt::before{content:'';position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--c);box-shadow:0 0 14px var(--c)}
.sgt.is-error{--c:#ff3b47;--ca:rgba(255,59,71,.13)}
.sgt.is-notice{--c:#ffb547;--ca:rgba(255,181,71,.12)}
.sgt.show{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
.sgt.dismissing{opacity:0;visibility:visible;transform:translate(-50%,-10px);transition:opacity .2s ease,transform .2s ease}
.sgt-ic{width:42px;height:42px;display:grid;place-items:center;color:var(--c);background:var(--ca);border:1px solid var(--c);clip-path:var(--cut6)}
.sgt-ic svg{width:20px;height:20px}
.sgt-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.sgt-eye{font-family:var(--num,'Rajdhani'),sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.24em;color:var(--c);line-height:1.2}
.sgt-tt{font-size:14.5px;font-weight:800;line-height:1.4;color:#fff}
.sgt-mg{font-size:13px;line-height:1.6;color:#c9c9d4;overflow-wrap:anywhere}
.sgt-mg:empty{display:none}
.sgt-x{align-self:start;width:30px;height:30px;display:grid;place-items:center;padding:0;color:#9a9aa8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.sgt-x:hover{color:#fff;border-color:var(--c);background:var(--ca)}
.sgt-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sgt-x svg{width:12px;height:12px}
.sgt-bar{position:absolute;right:0;left:0;bottom:0;height:2px;background:rgba(255,255,255,.06);overflow:hidden}
.sgt-bar i{position:absolute;inset:0;background:var(--c);transform-origin:right center}
.sgt.show .sgt-bar i{animation:sgtBar var(--sgt-d,3400ms) linear forwards}
.sgt.held .sgt-bar i{animation-play-state:paused}
@keyframes sgtBar{to{transform:scaleX(0)}}
@media (max-width:560px){.sgt{top:10px;gap:12px;padding:12px 14px 14px}.sgt-ic{width:38px;height:38px}.sgt-tt{font-size:14px}.sgt-mg{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.sgt.show,.sgt.dismissing{transition:opacity .15s}.sgt,.sgt.show,.sgt.dismissing{transform:translate(-50%,0)}}

/* ── نافذة ألوان الحزمة ── */
.bcp{position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;padding:24px}
.bcp-bd{position:absolute;inset:0;background:radial-gradient(800px 500px at 50% 40%,rgba(230,0,18,.1),transparent 70%),rgba(3,3,6,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:dgxFade .25s ease both}
.bcp-box{position:relative;z-index:1;width:100%;max-width:560px;max-height:min(820px,calc(100vh - 48px));max-height:min(820px,calc(100dvh - 48px));display:flex;flex-direction:column;
  background:linear-gradient(var(--red),var(--red)) right 0 top 0/26px 2px no-repeat,linear-gradient(var(--red),var(--red)) right 0 top 0/2px 26px no-repeat,linear-gradient(var(--red),var(--red)) left 0 bottom 0/26px 2px no-repeat,linear-gradient(var(--red),var(--red)) left 0 bottom 0/2px 26px no-repeat,
    radial-gradient(420px 220px at 85% 0,rgba(230,0,18,.14),transparent 70%),linear-gradient(180deg,#121219,#09090d);
  border:1px solid var(--line2);clip-path:var(--cut);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:dgxIn .32s cubic-bezier(.2,.8,.2,1) both}
.bcp-hd{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.bcp-art{width:76px;height:76px;display:grid;place-items:center;overflow:hidden;clip-path:var(--cut10);border:1px solid var(--line2);color:#8a8a99;
  background:repeating-linear-gradient(0deg,transparent 0 15px,rgba(255,255,255,.05) 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,rgba(255,255,255,.05) 15px 16px),radial-gradient(ellipse at 50% 45%,#23232f,#0c0c12 72%)}
.bcp-art img{width:84%;height:84%;object-fit:contain}
.bcp-art svg{width:30px;height:30px}
.bcp-ttl{min-width:0}
.bcp-eye{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--red2)}
.bcp-eye i{width:16px;height:2px;background:var(--red)}
.bcp-eye span{letter-spacing:0;font-family:'Tajawal',sans-serif;font-size:12px;color:#9a9aa8}
.bcp-ttl h3{margin:6px 0 6px;font-size:19px;font-weight:800;line-height:1.35;color:#fff;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:right}
.bcp-price{display:flex;align-items:center;gap:10px}
.bcp-price b{font-family:var(--num);font-size:22px;font-weight:700;color:var(--red2);direction:ltr}
.bcp-price span{font-size:11.5px;font-weight:800;color:#3ddc84;padding:2px 8px;border:1px solid rgba(61,220,132,.35);background:rgba(61,220,132,.07)}
.bcp-x{align-self:start;width:40px;height:40px;display:grid;place-items:center;padding:0;color:#e6e6ee;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut6);cursor:pointer;transition:background .2s,border-color .2s}
.bcp-x svg{width:18px;height:18px}
.bcp-x:hover{background:rgba(230,0,18,.14);border-color:var(--red)}
.bcp-prog{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--line);font-size:12.5px;color:#9a9aa8}
.bcp-prog b{font-family:var(--num);font-size:14px;color:#fff;direction:ltr}
.bcp-prog i{position:relative;height:4px;background:rgba(255,255,255,.06);overflow:hidden}
.bcp-prog em{position:absolute;inset:0 0 0 auto;width:var(--w);background:linear-gradient(270deg,var(--red),var(--red2));transition:width .3s ease}
.bcp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 22px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#2a2a35 transparent}
.bcp-row{padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line2);clip-path:var(--cut10);transition:border-color .2s}
.bcp-row.done{border-color:rgba(61,220,132,.4)}
.bcp-row.shake{animation:bcpShake .45s ease;border-color:var(--red)}
@keyframes bcpShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.bcp-ph{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center}
.bcp-th{width:48px;height:48px;display:grid;place-items:center;background:#0b0b10;border:1px solid var(--line2);overflow:hidden;color:#6f6f7d}
.bcp-th img{width:88%;height:88%;object-fit:contain}
.bcp-th svg{width:20px;height:20px}
.bcp-nm{min-width:0;display:flex;flex-direction:column;gap:2px}
.bcp-nm b{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;text-align:right}
.bcp-nm small{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:700;font-size:12.5px;color:#7c7c8c}
.bcp-free{font-style:normal;font-family:'Tajawal',sans-serif;font-size:11px;font-weight:800;color:#3ddc84;padding:0 6px;border:1px solid rgba(61,220,132,.35)}
.bcp-st{font-size:12px;font-weight:800;color:var(--red2);padding:3px 9px;border:1px solid rgba(230,0,18,.4);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.bcp-row.done .bcp-st{color:#3ddc84;border-color:rgba(61,220,132,.4)}
.bcp-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8a8a99;white-space:nowrap}
.bcp-ok svg{width:14px;height:14px;color:#3ddc84}
.bcp-sws{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bcp-sw{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;font:inherit;font-size:13px;font-weight:700;color:#e8e8ee;background:rgba(255,255,255,.03);border:1px solid var(--line2);clip-path:var(--cut6);cursor:pointer;transition:border-color .15s,background .15s}
.bcp-sw i{width:18px;height:18px;flex:0 0 auto;border:1px solid rgba(255,255,255,.35);background:#2a2a35;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.bcp-sw:hover:not(:disabled){border-color:rgba(230,0,18,.55);background:rgba(230,0,18,.07)}
.bcp-sw.on{border-color:var(--red);background:linear-gradient(180deg,rgba(230,0,18,.2),rgba(230,0,18,.06));box-shadow:inset 0 0 0 1px rgba(230,0,18,.5)}
.bcp-sw.on i{border-color:#fff;outline:2px solid var(--red);outline-offset:1px}
.bcp-sw:disabled{opacity:.4;cursor:not-allowed}
.bcp-sw em{font-style:normal;font-size:11px;color:var(--red2)}
.bcp-sw:focus-visible,.bcp-go:focus-visible,.bcp-cancel:focus-visible,.bcp-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bcp-ft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);background:linear-gradient(180deg,rgba(10,10,14,.6),#08080b)}
.bcp-cancel{height:50px;font:inherit;font-size:14px;font-weight:700;color:#cfcfda;background:rgba(255,255,255,.04);border:1px solid var(--line2);clip-path:var(--cut6);cursor:pointer}
.bcp-cancel:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.bcp-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;font:inherit;font-size:15px;font-weight:800;color:#fff;background:var(--red);border:0;clip-path:var(--cut10);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:filter .2s,background .2s}
.bcp-go svg{width:18px;height:18px}
.bcp-go:hover:not(:disabled){filter:brightness(1.12)}
.bcp-go:disabled{background:#22222b;color:#7c7c8c;cursor:not-allowed;box-shadow:none}
@media (max-width:640px){
  .bcp{align-items:flex-end;padding:0}
  .bcp-box{max-width:none;max-height:92vh;max-height:92dvh;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px);animation-name:dgxUp}
  .bcp-hd{grid-template-columns:60px minmax(0,1fr) auto;gap:12px;padding:16px}
  .bcp-art{width:60px;height:60px}
  .bcp-ttl h3{font-size:16.5px}
  .bcp-prog,.bcp-body{padding-inline:16px}
  .bcp-ft{padding-inline:16px}
  .bcp-sw{flex:1 1 calc(50% - 8px);justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.bcp-box,.bcp-bd{animation:none}.bcp-row.shake{animation:none}}

/* ── صفوف المنتجات الأفقية: كل بطاقات الصف بنفس الارتفاع (height:100% على عنصر مرن كان يلغي التمدّد
      فتقصر البطاقة ذات العنوان القصير أو بلا مواصفات، ويختلف موضع أزرار الشراء بين البطاقات) ── */
.prod-row-track{align-items:stretch}
.prod-row-track>.p-card.sgc{height:auto}
/* المساحة الزائدة تذهب فوق شريط المخزون، فيصطفّ المخزون والأزرار على خطّ واحد في كل البطاقات */
.sgc-in>.sgc-pm{margin-top:auto}
.sgc-in>.sgc-pm+.sgc-acts{margin-top:0}

/* #sg-safe */

/* ═══ r60 — حواف آيفون (Safari 26): لا فراغ فوق الشريط العلوي ولا تحت شريط التنقّل ═══
   Safari 26 يلوّن منطقة الساعة وما خلف شريطه السفلي من «لون الخلفية الخاص» بأعلى عنصر ثابت ملاصق للحافّة
   (لا الأبناء absolute ولا العناصر الزائفة). كان طبق انتقال الصفحات الشفّاف (فوق كل شيء، دائم الظهور) هو ما يلتقطه
   فيظهر محتوى الصفحة. الآن: الطبق يظهر أثناء الانتقال فقط، والشريط العلوي يحمل لونه بنفسه، وأسفل الشاشة أرضية حقيقية. */
:root{--sg-sat:env(safe-area-inset-top,0px);--sg-chrome:#16161d;--sg-floor:#0a0a0e;--sg-navpad:calc(74px + var(--sg-sat))}
html{background-color:var(--black,#060608)}
.page-transition.ready{visibility:hidden}
.page-transition.ready.sweep-in,.page-transition.ready.sweep-out{visibility:visible}
.nv{top:var(--sg-sat);background-color:var(--sg-chrome)}
/* إشعار «اشترى الآن» المخفي كان يبقى مرئياً بشفافية صفر وملاصقاً للحافّة السفلية فيلتقطه Safari — يُخفى فعلياً بعد انسحابه */
#purchaseNotif{visibility:hidden;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s ease,visibility 0s linear .6s}
#purchaseNotif.show{visibility:visible;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s ease,visibility 0s}
html.sg-pn-off #purchaseNotif{display:none !important}
/* وضع «تطبيق على الشاشة الرئيسية»: منطقة الساعة داخل الصفحة — تُملأ بلون الشريط */
.nv::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:var(--sg-sat);background-color:var(--sg-chrome);pointer-events:none}
.sg-floor{display:none}
@media (max-width:1180px){
  :root{--sg-navpad:calc(58px + var(--sg-sat))}
  .mo{padding-top:calc(14px + var(--sg-sat))}
  /* أرضية حقيقية تحت شريط التنقّل حتى حافّة الشاشة (خلف شريط عنوان Safari) — لونها يقرؤه Safari لشريطه */
  .sg-floor{display:block;position:fixed;left:0;right:0;bottom:0;z-index:949;height:calc(50px + env(safe-area-inset-bottom,0px));
    background-color:rgba(10,10,14,.99);pointer-events:none}
  .sg-floor::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:22px;background:linear-gradient(180deg,rgba(10,10,14,0),rgba(10,10,14,.99))}
  html body.pv-bar-on .sg-floor,html body.on-checkout .sg-floor{display:none}
}
@media (max-width:1180px) and (orientation:landscape) and (max-height:500px){.mo{padding-top:calc(8px + var(--sg-sat))}}

/* #sg-r64 */

/* r64 — تنبيه «للزينة والعرض» (الفيجرات): لغة HUD — زاوية مقطوعة، خطّ أحمر، رمادي غرافيتي */
.sg-decor{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:13px 16px 13px 14px;position:relative;
  background:linear-gradient(270deg,rgba(230,0,18,.10),rgba(255,255,255,.025) 55%);border:1px solid rgba(255,255,255,.08);border-inline-start:2px solid #e60012;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));color:#b9b9c6;font-size:13px;line-height:1.8}
.sg-decor[hidden]{display:none!important}
.sg-decor-ic{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;color:#ff3b47;background:rgba(230,0,18,.10);border:1px solid rgba(230,0,18,.32);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.sg-decor-ic svg{width:17px;height:17px}
.sg-decor-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sg-decor-t b{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;font-weight:700;font-size:13.5px;color:#f2f2f6;line-height:1.5}
.sg-decor-t strong{color:#ececf2;font-weight:700}
.pv-decor{margin:16px 0 14px}
.ck-decor{margin:12px 0 0}
.sgc-sp i.dc{color:#ff6b73;border-color:rgba(230,0,18,.38);background:rgba(230,0,18,.08)}
@media (max-width:600px){.sg-decor{padding:11px 12px;gap:10px;font-size:12.5px}.sg-decor-ic{flex-basis:26px;width:26px;height:26px}.sg-decor-t b{font-size:13px}}

/* #sg-r65 */

/* ═══ r65 — واجهة الدفع الإلكتروني (HUD): زوايا مقطوعة، غرافيتي، لون الحالة كإشارة فقط ═══ */
html.sgp-lock,html.sgp-lock body{overflow:hidden!important}
.sgp{--st:#ff2a3a;--st-rgb:255,42,58;position:fixed;inset:0;z-index:100000;direction:rtl;font-family:'Tajawal',sans-serif;color:#ececf2;
  background-color:#08080c;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .35s ease}
.sgp.on{opacity:1}
.sgp--success{--st:#35d07f;--st-rgb:53,208,127}
.sgp-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.sgp-glow{position:absolute;left:50%;top:-30vh;width:120vw;height:80vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(var(--st-rgb),.16),transparent);}
.sgp-mesh{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent)}
.sgp-in{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.sgp-card{position:relative;width:100%;max-width:560px;padding:20px 26px 26px;outline:none;
  background:linear-gradient(180deg,#14141c,#0c0c11 70%);border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
  transform:translateY(16px) scale(.985);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.sgp.on .sgp-card{transform:none;opacity:1}
.sgp-card::before{content:'';position:absolute;top:0;left:20px;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--st) 30%,var(--st) 70%,transparent)}
.sgp-k{position:absolute;width:14px;height:14px;border:0 solid rgba(var(--st-rgb),.7);pointer-events:none}
.sgp-k.tl{top:8px;left:8px;border-width:0}.sgp-k.tr{top:8px;right:8px;border-top-width:2px;border-right-width:2px}
.sgp-k.bl{bottom:8px;left:8px;border-bottom-width:2px;border-left-width:2px}.sgp-k.br{bottom:8px;right:8px;border-width:0}
.sgp-scan{position:absolute;top:0;left:0;width:30%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:sgpScan 3.2s ease-in-out infinite;pointer-events:none}
@keyframes sgpScan{0%{transform:translateX(-100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(340%);opacity:0}}
.sgp-top{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}
.sgp-logo{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;letter-spacing:.14em;color:#fff}
.sgp-logo b{color:#e60012;font-weight:700}
.sgp-tag{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;color:#9c9cab;
  padding:4px 9px 3px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.sgp-tag i{width:6px;height:6px;background:var(--st);box-shadow:0 0 8px var(--st);animation:sgpBlink 1.6s steps(2,start) infinite}
@keyframes sgpBlink{50%{opacity:.25}}
.sgp-x{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;color:#9c9cab;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:color .2s,background .2s}
.sgp-x:hover{color:#fff;background:rgba(255,255,255,.08)}.sgp-x svg{width:16px;height:16px}
.sgp-x:focus-visible,.sgp-btn:focus-visible,.sgp-copy:focus-visible,.sgp-link:focus-visible{outline:2px solid var(--st);outline-offset:3px}
/* البطل */
.sgp-hero{text-align:center;padding:22px 0 6px}
.sgp-ico{position:relative;width:92px;height:92px;margin:0 auto 16px;display:grid;place-items:center;color:var(--st);
  background:rgba(var(--st-rgb),.08);border:1px solid rgba(var(--st-rgb),.45);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.sgp-ico>svg{width:44px;height:44px;position:relative;z-index:1}
.sgp-ring{position:absolute;inset:10px;border:1px dashed rgba(var(--st-rgb),.35);animation:sgpRot 14s linear infinite}
@keyframes sgpRot{to{transform:rotate(360deg)}}
.sgp-draw{stroke-dasharray:40;stroke-dashoffset:40;animation:sgpDraw .7s .35s cubic-bezier(.65,0,.35,1) forwards}
@keyframes sgpDraw{to{stroke-dashoffset:0}}
.sgp-spin{position:absolute;inset:6px;border:2px solid rgba(var(--st-rgb),.18);border-top-color:var(--st);border-radius:50%;animation:sgpRot .9s linear infinite}
.sgp--redirect .sgp-ring{display:none}
.sgp-eye{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.26em;color:var(--st);margin-bottom:8px}
.sgp-h{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;font-weight:800;font-size:clamp(21px,5.4vw,27px);line-height:1.45;color:#fff;margin:0 0 8px;outline:none}
.sgp-sub{max-width:440px;margin:0 auto;color:#a9a9b8;font-size:14.5px;line-height:1.85}
.sgp-sub b{color:#fff;font-weight:700}
/* رقم الطلب / المرجع */
.sgp-code{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding:16px 18px;position:relative;
  background:linear-gradient(270deg,rgba(var(--st-rgb),.10),rgba(255,255,255,.02) 65%);border:1px solid rgba(var(--st-rgb),.28);border-inline-start:3px solid var(--st);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.sgp-code-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.sgp-code-t small{font-size:12px;color:#9c9cab;font-weight:700}
.sgp-code-t b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(28px,8vw,36px);letter-spacing:.06em;line-height:1.1;color:#fff;text-align:right;overflow-wrap:anywhere}
.sgp-code-t span{font-size:12px;color:#8a8a99;line-height:1.6}
.sgp-copy{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:#ececf2;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:background .2s,color .2s}
.sgp-copy:hover{background:rgba(255,255,255,.1)}.sgp-copy svg{width:16px;height:16px}
.sgp-copy.ok{color:#35d07f;border-color:rgba(53,208,127,.45)}
/* شبكة الإيصال */
.sgp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.sgp-grid>div{background:#101017;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:5px}
.sgp-grid small{font-size:11.5px;color:#8a8a99;font-weight:700}
.sgp-grid b{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#fff;font-weight:700;min-height:22px}
.sgp-grid b svg{width:16px;height:16px;color:#9c9cab;flex:0 0 16px}
.sgp-grid b.num{font-family:'Rajdhani',sans-serif;font-size:22px;letter-spacing:.02em;justify-content:flex-end}
.sgp-sk{display:block;width:84px;height:16px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13),rgba(255,255,255,.05));background-size:200% 100%;animation:sgpSk 1.2s linear infinite}
@keyframes sgpSk{to{background-position:-200% 0}}
.sgp-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;color:#c9c9d4;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.sgp-chip.ok{color:#35d07f;border-color:rgba(53,208,127,.4);background:rgba(53,208,127,.1)}
.sgp-chip svg{width:13px;height:13px;color:inherit!important;flex:0 0 13px}
/* عناوين الأقسام */
.sgp-sec{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.sgp-sec-n{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.2em;color:var(--st);padding:2px 7px 1px;border:1px solid rgba(var(--st-rgb),.4)}
.sgp-sec b{font-family:'Noto Kufi Arabic','Tajawal',sans-serif;font-size:14px;font-weight:700;color:#fff}
.sgp-sec em{margin-inline-start:auto;font-style:normal;font-size:12px;color:#8a8a99}
.sgp-sec::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);order:2}
.sgp-sec em{order:3}
/* ملخّص الطلب */
.sgp-items ul{list-style:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.07)}
.sgp-items li{display:flex;align-items:center;gap:11px;padding:10px 12px;font-size:13px;min-width:0}
.sgp-items li+li{border-top:1px solid rgba(255,255,255,.06)}
.sgp-items .th{position:relative;flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;background:#16161e;border:1px solid rgba(255,255,255,.08);color:#5e5e6c;overflow:hidden}
.sgp-items .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#16161e;z-index:1}
.sgp-items .th svg{width:18px;height:18px}
.sgp-items .nm{flex:1;min-width:0;color:#e2e2ea;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgp-items .nm .sgp-chip{padding:1px 6px;font-size:10.5px}
.sgp-items .q{flex:0 0 auto;font-family:'Rajdhani',sans-serif;font-weight:700;color:#8a8a99}
.sgp-items .p{flex:0 0 auto;min-width:58px;text-align:left;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#fff}
.sgp-items li.more{justify-content:center;color:#8a8a99;font-size:12.5px}
.sgp-tot{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font-size:13px;color:#a9a9b8;border:1px solid rgba(255,255,255,.07);border-top:0}
.sgp-tot b{font-family:'Rajdhani',sans-serif;font-size:15px;color:#fff}
.sgp-tot.big{background:rgba(var(--st-rgb),.06)}.sgp-tot.big span{color:#fff;font-weight:700}.sgp-tot.big b{font-size:21px;color:var(--st)}
/* الخطوات */
.sgp-steps{list-style:none;margin:0;padding:0;position:relative}
.sgp-steps li{position:relative;display:flex;gap:12px;padding:0 0 14px}
.sgp-steps li:last-child{padding-bottom:0}
.sgp-steps li:not(:last-child)::before{content:'';position:absolute;top:30px;bottom:2px;right:14px;width:1px;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.05))}
.sgp-steps li>i{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;font-style:normal;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;color:#8a8a99;
  background:#121219;border:1px solid rgba(255,255,255,.14);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.sgp-steps li>i svg{width:15px;height:15px}
.sgp-steps li.done>i{color:#0b0b10;background:var(--st);border-color:var(--st)}
.sgp-steps li.cur>i{color:var(--st);border-color:rgba(var(--st-rgb),.6);box-shadow:inset 0 0 0 1px rgba(var(--st-rgb),.25)}
.sgp-steps li>div{display:flex;flex-direction:column;gap:2px;padding-top:3px;min-width:0}
.sgp-steps b{font-size:13.5px;color:#fff;font-weight:700}
.sgp-steps small{font-size:12.5px;color:#9c9cab;line-height:1.6}
#sgpDg .sg-dgnote{margin-top:14px}
/* نصائح الفشل */
.sgp-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sgp-tips li{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;font-size:13.5px;line-height:1.75;color:#c9c9d4;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07)}
.sgp-tips li b{color:#fff}
.sgp-tips li>i{flex:0 0 18px;display:flex;line-height:0;color:#9c9cab;margin-top:3px}.sgp-tips li>i svg{width:18px;height:18px}
.sgp-tips li.hot{background:rgba(255,42,58,.07);border-color:rgba(255,42,58,.32)}
.sgp-tips li.hot>i{color:#ff3b47}
/* التحويل */
.sgp-amt{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.sgp-amt small{font-size:13px;color:#a9a9b8;font-weight:700}
.sgp-amt b{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;color:#fff}
.sgp-flow{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sgp-flow li{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 6px;font-size:12px;font-weight:700;color:#7a7a88;text-align:center;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07)}
.sgp-flow li i{width:28px;height:28px;display:grid;place-items:center;color:inherit;border:1px solid rgba(255,255,255,.12)}
.sgp-flow li i svg{width:15px;height:15px}
.sgp-flow li.done{color:#35d07f}.sgp-flow li.done i{border-color:rgba(53,208,127,.45);background:rgba(53,208,127,.1)}
.sgp-flow li.cur{color:#fff;border-color:rgba(var(--st-rgb),.45);background:rgba(var(--st-rgb),.07)}.sgp-flow li.cur i{color:var(--st);border-color:rgba(var(--st-rgb),.6)}
.sgp-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:12.5px;color:#9c9cab;text-align:center}
.sgp-note svg{width:16px;height:16px;flex:0 0 16px;color:#ffb020}
.sgp-note b{color:#fff}
.sgp-link{display:block;margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:#ff6b73;text-decoration:underline;text-underline-offset:4px}
.sgp-link[hidden]{display:none}
/* الأزرار */
.sgp-acts{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.sgp-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 18px;font-family:inherit;font-size:14.5px;font-weight:700;color:#ececf2;text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .2s,border-color .2s,transform .2s}
.sgp-btn svg{width:19px;height:19px;flex:0 0 19px}
.sgp-btn span{text-align:center;line-height:1.4}
.sgp-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.sgp-btn:active{transform:scale(.985)}
.sgp-btn.pri{color:#fff;border:0;background:linear-gradient(180deg,#ff2433,#c4000f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.sgp-btn.pri:hover{background:linear-gradient(180deg,#ff3a47,#d50012)}
.sgp-btn.wa{color:#3ee07b;border-color:rgba(37,211,102,.32);background:rgba(37,211,102,.07)}
.sgp-btn.wa:hover{background:rgba(37,211,102,.14)}
.sgp-foot{margin:16px 0 0;text-align:center;font-size:12px;color:#77778a;line-height:1.7}
.sgp-secure{display:flex;align-items:center;gap:8px;font-size:12px;color:#77778a;text-align:center;max-width:560px}
.sgp-secure svg{width:16px;height:16px;flex:0 0 16px;color:#35d07f}.sgp-secure b{color:#a9a9b8}
@media (min-width:640px){.sgp-acts{display:grid;grid-template-columns:1fr 1fr}.sgp-acts .sgp-btn.pri,.sgp-acts .sgp-btn:last-child:nth-child(even){grid-column:1/-1}}
@media (max-width:420px){.sgp-card{padding:16px 16px 20px}.sgp-code{padding:14px}.sgp-grid>div{padding:11px 12px}.sgp-ico{width:80px;height:80px}.sgp-ico>svg{width:38px;height:38px}
  .sgp-copy span{display:none}.sgp-copy{padding:0 11px}.sgp-tag{font-size:10px;letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.sgp,.sgp-card{transition:none}.sgp-scan,.sgp-ring,.sgp-tag i,.sgp-sk{animation:none}.sgp-draw{animation:none;stroke-dashoffset:0}}

/* #sg-r67-bp */

/* ★ r67: إيقاف التجميعات المؤقت — لغة HUD (زوايا مقصوصة، كهرماني/أحمر على غرافيت) */
.bpz{--bpa:#ffab40;--bpa2:#ffc56b;position:relative;margin:34px 0 4px;padding:1px;background:linear-gradient(100deg,rgba(255,171,64,.75),rgba(255,171,64,.18) 38%,rgba(230,0,18,.55));clip-path:var(--cut)}
.bpz[hidden]{display:none}
.bpz-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 30px 24px;background:radial-gradient(ellipse at 100% 0,rgba(255,171,64,.12),transparent 55%),linear-gradient(180deg,#15110e,#0b0a0e);clip-path:var(--cut);overflow:hidden}
.bpz-in::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:repeating-linear-gradient(-45deg,var(--bpa) 0 10px,transparent 10px 20px);opacity:.9}
.bpz-in::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);pointer-events:none}
.bpz-ic{position:relative;width:68px;height:68px;display:grid;place-items:center;color:var(--bpa2);background:rgba(255,171,64,.08);border:1px solid rgba(255,171,64,.5);clip-path:var(--cut10)}
.bpz-ic svg{width:32px;height:32px}
.bpz-ic::after{content:'';position:absolute;inset:6px;border:1px dashed rgba(255,171,64,.35);clip-path:var(--cut7);animation:bpzSpin 9s linear infinite}
@keyframes bpzSpin{to{transform:rotate(360deg)}}
.bpz-tx{min-width:0}
.bpz-eye{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.28em;color:var(--bpa);direction:ltr}
.bpz-eye i{width:8px;height:8px;background:var(--bpa);box-shadow:0 0 10px var(--bpa);animation:bpzPulse 1.6s ease-in-out infinite}
@keyframes bpzPulse{50%{opacity:.25}}
.bpz h3{margin:8px 0 6px;font-family:var(--disp);font-size:25px;font-weight:700;line-height:1.35;color:#fff}
.bpz h3 em{font-style:normal;color:var(--bpa2)}
.bpz p{margin:0;max-width:760px;font-size:14.5px;line-height:1.9;color:#c9c9d6}
.bpz-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bpz-meta span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;font-size:12.5px;font-weight:700;color:#f2e2c8;background:rgba(255,171,64,.07);border:1px solid rgba(255,171,64,.3);clip-path:var(--cut7)}
.bpz-meta svg{width:14px;height:14px;color:var(--bpa)}
.bpz-meta b{font-family:var(--num);font-weight:700;letter-spacing:.04em;color:#fff}
.bpz-acts{display:flex;flex-direction:column;gap:8px;min-width:210px}
.bpz-acts .pgbtn{justify-content:center}
.bpz-sm{margin:0 0 16px}
.bpz-sm .bpz-in{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px 20px 16px}
.bpz-sm .bpz-ic{width:52px;height:52px}.bpz-sm .bpz-ic svg{width:24px;height:24px}
.bpz-sm h3{font-size:18px;margin:6px 0 4px}.bpz-sm p{font-size:13.5px;line-height:1.8}
.bpz-sm .bpz-acts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0}
.bpz-sm .bpz-acts .pgbtn{flex:1 1 180px;height:44px}
.pv-buy.bpz-off .pv-qty{display:none}
.bpz a.pgbtn,.bpz a.pgbtn:hover{text-decoration:none;color:#fff}
#pvBarBtn.bpz-b{background:linear-gradient(90deg,#ffc56b,#ffab40)!important;color:#1a1000!important}
.sgc-off.bpzl{color:#ffb454}
.cx-bpz{display:inline-flex;align-items:center;gap:5px;margin-top:6px;height:22px;padding:0 9px;font-size:11px;font-weight:800;color:#1a1000;background:linear-gradient(90deg,#ffc56b,#ffab40);clip-path:var(--cut7)}
#bldLive.bpz-live{color:#ffab40}
.bpz-pill{display:inline-flex;align-items:center;gap:9px;margin-top:16px;min-height:38px;padding:7px 14px;font-size:13.5px;font-weight:800;line-height:1.5;color:#1a1000;background:linear-gradient(90deg,#ffc56b,#ffab40);clip-path:var(--cut7);cursor:pointer;border:0;font-family:inherit;text-align:right}
.bpz-pill i{width:8px;height:8px;flex:0 0 8px;background:#1a1000;animation:bpzPulse 1.6s ease-in-out infinite}
.bpz-pill:hover{filter:brightness(1.06)}
.bpz-eye .l{display:inline}
@media (max-width:560px){.bpz-eye{font-size:10.5px;letter-spacing:.2em}.bpz-eye .l{display:none}}
.bpz-cart{margin:0 0 12px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,rgba(255,171,64,.1),rgba(255,171,64,.04));border:1px solid rgba(255,171,64,.4);clip-path:var(--cut10);font-size:13px;line-height:1.75;color:#f2e2c8}
.bpz-cart svg{width:20px;height:20px;flex:0 0 20px;color:#ffab40;margin-top:2px}
.bpz-cart b{display:block;color:#fff;font-size:14px}
.bpz-cart button{margin-top:8px;height:34px;padding:0 14px;font-weight:800;font-size:12.5px;color:#1a1000;background:#ffab40;border:0;cursor:pointer;clip-path:var(--cut7);font-family:inherit}
.bpz-cart button:hover{filter:brightness(1.08)}
@media (max-width:860px){
  .bpz-in{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 18px 18px}
  .bpz-ic{width:54px;height:54px}.bpz-ic svg{width:26px;height:26px}
  .bpz h3{font-size:20px}
  .bpz p{font-size:13.8px}
  .bpz-acts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;min-width:0}
  .bpz-acts .pgbtn{flex:1 1 160px;height:44px;padding:0 14px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.bpz-ic::after,.bpz-eye i{animation:none}}

/* #sg-r67-es */

/* ★ r67: فريقنا — قسم لكل لعبة (بانر غلاف + تشكيلة) */
.esd-wrap{display:flex;flex-direction:column;gap:46px}
.esd{--gc:var(--red);position:relative}
.esd-cv{position:relative;min-height:clamp(270px,25vw,340px);display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:26px;align-items:end;padding:34px 38px 30px;background:#07070b;border:1px solid var(--line2);clip-path:var(--cut);overflow:hidden;isolation:isolate}
.esd-art{position:absolute;inset:0;z-index:-2}
.esd-art svg{width:100%;height:100%;display:block}
.esd-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.esd-cv::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(6,6,10,.94) 0%,rgba(6,6,10,.78) 38%,rgba(6,6,10,.25) 70%,rgba(6,6,10,.55) 100%),linear-gradient(0deg,rgba(6,6,10,.85),transparent 55%)}
.esd-cv::after{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px);pointer-events:none}
.esd-cr{position:absolute;width:24px;height:24px;border:2px solid var(--gc);z-index:1;pointer-events:none}
.esd-cr.a{top:12px;right:12px;border-left:0;border-bottom:0}.esd-cr.b{top:12px;left:12px;border-right:0;border-bottom:0}
.esd-cr.c{bottom:12px;right:12px;border-left:0;border-top:0}.esd-cr.d{bottom:12px;left:12px;border-right:0;border-top:0}
.esd-beam{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gc) 25%,#fff 50%,var(--gc) 75%,transparent);opacity:.9;z-index:1}
.esd-num{position:absolute;top:10px;left:34px;font-family:var(--num);font-weight:700;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--gc) 55%,transparent);opacity:.55;direction:ltr;pointer-events:none;z-index:0}
.esd-hud{position:absolute;top:18px;right:50px;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.55);direction:ltr;display:flex;align-items:center;gap:8px;z-index:1}
.esd-hud i{width:7px;height:7px;background:var(--gc);box-shadow:0 0 10px var(--gc)}
.esd-tx{position:relative;z-index:1;min-width:0}
.esd-eye{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-family:var(--num);font-weight:700;font-size:12px;letter-spacing:.3em;color:var(--gc);direction:ltr}
.esd-eye i{width:40px;height:2px;background:var(--gc);box-shadow:0 0 10px var(--gc)}
.esd-t{margin:6px 0 0;font-family:var(--num);font-weight:700;font-size:clamp(46px,6.2vw,84px);line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:#fff;direction:ltr;text-align:right;text-shadow:0 0 34px color-mix(in srgb,var(--gc) 45%,transparent);overflow-wrap:anywhere}
.esd-ar{display:block;margin-top:8px;font-family:var(--disp);font-size:16px;font-weight:700;color:#d9d9e3}
.esd-ar b{color:var(--gc);font-weight:700}
.esd-tag{margin:10px 0 0;max-width:560px;font-size:14.5px;line-height:1.85;color:#c4c4d0}
.esd-ach{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.esd-ach span{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 12px;font-size:12.8px;font-weight:700;line-height:1.5;color:#fff;background:rgba(8,8,12,.6);border:1px solid color-mix(in srgb,var(--gc) 55%,transparent);clip-path:var(--cut7);backdrop-filter:blur(4px)}
.esd-ach svg{width:15px;height:15px;flex:0 0 15px;color:#ffd34d}
.esd-pn{position:relative;z-index:1;padding:1px;background:color-mix(in srgb,var(--gc) 45%,rgba(255,255,255,.12));clip-path:var(--cut10)}
.esd-pn-in{background:rgba(9,9,14,.86);backdrop-filter:blur(6px);clip-path:var(--cut10);padding:14px 16px}
.esd-pn-hd{display:flex;justify-content:space-between;font-family:var(--num);font-weight:700;font-size:10.5px;letter-spacing:.24em;color:#7a7a8c;direction:ltr;margin-bottom:10px}
.esd-pn-hd b{color:var(--gc);font-weight:700}
.esd-st{display:grid;grid-template-columns:repeat(3,1fr)}
.esd-st div{text-align:center;padding:2px 6px;border-inline-start:1px solid var(--line)}
.esd-st div:first-child{border-inline-start:0}
.esd-st b{display:block;font-family:var(--num);font-weight:700;font-size:28px;line-height:1;color:#fff;direction:ltr}
.esd-st small{display:block;margin-top:5px;font-family:var(--num);font-weight:700;font-size:9.5px;letter-spacing:.2em;color:#6b6b7c;direction:ltr}
.esd-cap{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.14);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mute)}
.esd-cap b{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:.04em;color:#ffd34d;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esd-rh{display:flex;align-items:center;gap:12px;margin:18px 0 14px}
.esd-rh span{font-family:var(--num);font-weight:700;font-size:11.5px;letter-spacing:.3em;color:#8a8a9c;direction:ltr;white-space:nowrap}
.esd-rh i{flex:1;height:1px;background:linear-gradient(270deg,var(--gc),transparent)}
.esd-rh b{font-family:var(--num);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--gc);direction:ltr;white-space:nowrap}
.esd .pgpl{--gc:inherit}
.esd-soon{display:flex;align-items:center;gap:14px;padding:22px 24px;background:linear-gradient(180deg,#121219,#0c0c11);border:1px dashed color-mix(in srgb,var(--gc) 45%,transparent);clip-path:var(--cut10);color:#b4b4c2;font-size:14px}
.esd-soon b{display:block;color:#fff;font-size:15.5px;margin-bottom:2px}
.esd-soon .ic{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;color:var(--gc);border:1px solid color-mix(in srgb,var(--gc) 45%,transparent);clip-path:var(--cut7)}
.esd-soon .ic svg{width:22px;height:22px}
#esTabs .pgtab .gdot{width:8px;height:8px;flex:0 0 8px;background:var(--gc,#fff);box-shadow:0 0 8px var(--gc,#fff)}
#esTabs .pgtab.on .gdot{background:#fff;box-shadow:none}
@keyframes esdIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.esd{animation:esdIn .55s var(--ease) both}
.esd:nth-child(2){animation-delay:.08s}.esd:nth-child(3){animation-delay:.16s}
@media (max-width:1024px){.esd-cv{grid-template-columns:minmax(0,1fr);padding:30px 24px 22px}.esd-pn{max-width:420px}.esd-num{font-size:96px}}
@media (max-width:640px){
  .esd-wrap{gap:36px}
  .esd-cv{min-height:0;padding:58px 16px 18px;gap:18px}
  .esd-cv::before{background:linear-gradient(0deg,rgba(6,6,10,.96) 0%,rgba(6,6,10,.82) 55%,rgba(6,6,10,.35) 100%)}
  .esd-num{font-size:60px;opacity:.28;top:8px;left:16px}
  .esd-hud{right:24px;top:16px;font-size:10px}
  .esd-eye{font-size:10.5px;letter-spacing:.22em}.esd-eye i{width:26px}
  .esd-tag{font-size:13.8px}
  .esd-pn{max-width:none}
  .esd-st b{font-size:24px}
  #esTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;width:100%}
  #esTabs::-webkit-scrollbar{display:none}
  #esTabs .pgtab{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.esd{animation:none}}

/* #sg-r68 */

/* ★ r68: حالة «غير فعّال» الأنيقة للتجميعات أثناء الإيقاف */
.bpz-plate{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 20px 11px;min-width:150px;background:rgba(9,8,12,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(255,197,107,.5);clip-path:var(--cut10);text-align:center;white-space:nowrap;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.bpz-plate .pz{display:flex;gap:4px;height:14px;margin-bottom:2px}
.bpz-plate .pz i{width:4px;height:14px;background:#ffc56b;box-shadow:0 0 8px rgba(255,171,64,.7)}
.bpz-plate b{font-family:var(--disp);font-size:16px;font-weight:700;line-height:1.3;color:#ffd79a;letter-spacing:.01em}
.bpz-plate small{font-family:var(--num);font-weight:700;font-size:9.5px;letter-spacing:.34em;color:rgba(255,197,107,.65);direction:ltr}
.bpz-plate::before,.bpz-plate::after{content:'';position:absolute;width:10px;height:10px;border:1.5px solid #ffc56b}
.bpz-plate::before{top:5px;right:5px;border-left:0;border-bottom:0}.bpz-plate::after{bottom:5px;left:5px;border-right:0;border-top:0}
/* بطاقة التجميعة */
.sgc-build.is-bpz{cursor:pointer}
.sgc-build.is-bpz .sgc-im img,.sgc-build.is-bpz .sgc-im .sgc-ic{filter:grayscale(1) brightness(.5) contrast(.9);transition:filter .35s}
.sgc-build.is-bpz .sgc-hd,.sgc-build.is-bpz .sgc-bd,.sgc-build.is-bpz .sgc-fps,.sgc-build.is-bpz .sgc-tab,.sgc-build.is-bpz .sgc-rb,.sgc-build.is-bpz .sgc-im .c{filter:grayscale(1);opacity:.4;transition:opacity .35s}
.sgc-build.is-bpz .sgc-beam{display:none}
.sgc-build.is-bpz:hover .sgc-hd,.sgc-build.is-bpz:hover .sgc-bd,.sgc-build.is-bpz:hover .sgc-fps,.sgc-build.is-bpz:hover .sgc-tab{opacity:.62}
.sgc-build.is-bpz:hover .sgc-im img{filter:grayscale(1) brightness(.65)}
.sgc-build.is-bpz .sgc-acts .sgc-off.bpzl{opacity:.9}
/* بلاطة القسم في الرئيسية */
.cx-t.is-bpz .cx-art,.cx-t.is-bpz .cx-tx,.cx-t.is-bpz .cx-ft,.cx-t.is-bpz .cx-bgn{filter:grayscale(1);opacity:.38;transition:opacity .3s}
.cx-t.is-bpz:hover .cx-art,.cx-t.is-bpz:hover .cx-tx{opacity:.6}
.cx-t.is-bpz .bpz-plate{padding:10px 16px 9px;min-width:132px}
.cx-t.is-bpz .bpz-plate b{font-size:14px}
/* القوائم */
body.sg-bp-on #nav-builds,body.sg-bp-on a[data-page="builds"],body.sg-bp-on a.dk-tile[href="/builds"]{opacity:.5;filter:grayscale(.6)}
body.sg-bp-on #nav-builds:hover,body.sg-bp-on a[data-page="builds"]:hover{opacity:.75}
.nv-new.bpz-n,a[data-page="builds"] em.bpz-n,.dk-tile .bpz-tag{color:#ffb454!important}
.nv-new.bpz-n::before{background:#ffab40}
.dk-tile .bpz-tag{position:absolute;top:8px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:.02em}

/* ★ r68: بانر يدوي كامل لكل لعبة */
.esd-cvx{position:relative;display:block;border:1px solid color-mix(in srgb,var(--gc) 45%,rgba(255,255,255,.12));clip-path:var(--cut);overflow:hidden;background:#07070b;line-height:0}
.esd-cvx img{display:block;width:100%;height:auto}
.esd-cvx .esd-beam{position:absolute}
.esd-cvx .esd-cr{position:absolute}
.esd-x{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:13px;color:var(--mute)}
.esd-x .t{font-family:var(--num);font-weight:700;font-size:20px;letter-spacing:.04em;color:#fff;direction:ltr;text-transform:uppercase}
.esd-x .t em{font-style:normal;color:var(--gc)}
.esd-x .ach{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#e6e6ee}
.esd-x .ach svg{width:14px;height:14px;color:#ffd34d}

/* #sg-r69 */

/* ★ r69: «شحن مباشر على الحساب — ليس كوداً» */
.dga{--g:#ffc56b;position:relative;margin:0 0 16px;padding:14px 16px 15px;text-align:right;background:linear-gradient(270deg,rgba(255,197,107,.1),rgba(12,12,17,.72));border:1px solid rgba(255,197,107,.4);border-right:3px solid var(--g);clip-path:var(--cut10)}
.dga-hd{display:flex;align-items:center;gap:12px}
.dga-ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;color:var(--g);background:rgba(255,197,107,.08);border:1.5px solid rgba(255,197,107,.55);clip-path:var(--cut10)}
.dga-ic svg{width:21px;height:21px}
.dga-hd small{display:block;font-family:var(--num);font-weight:700;font-size:11px;letter-spacing:.24em;color:rgba(255,197,107,.78);direction:ltr;text-align:right}
.dga-hd b{display:block;font-family:var(--disp);font-size:16.5px;font-weight:800;line-height:1.45;color:#ffe3ad}
.dga-p{margin:10px 0 0;font-size:13.5px;line-height:1.8;color:#e4e4ec}
.dga-p strong{color:#fff;font-weight:800;box-shadow:inset 0 -2px 0 rgba(255,197,107,.55)}
.dga-st{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,197,107,.22);border:1px solid rgba(255,197,107,.22)}
.dga-st li{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;background:#0d0d12;font-size:12.5px;line-height:1.6;color:#d0d0da}
.dga-st li b{flex:0 0 auto;font-family:var(--num);font-size:17px;font-weight:700;line-height:1.1;color:var(--g)}
.dga-sec{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;line-height:1.7;color:#a9a9b8}
.dga-sec svg{flex:0 0 auto;width:14px;height:14px;margin-top:3px;color:var(--g)}
.dga-ok{display:flex;align-items:center;gap:11px;margin-top:12px;padding:11px 12px;cursor:pointer;background:rgba(255,197,107,.07);border:1.5px dashed rgba(255,197,107,.6);font-size:13.5px;font-weight:800;line-height:1.6;color:#fff;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.dga-ok input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dga-ok .bx{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:2px solid var(--g);background:#0b0b10;color:#0b0b10;transition:background .18s}
.dga-ok .bx svg{width:15px;height:15px}
.dga-ok input:checked~.bx{background:var(--g)}
.dga-ok input:focus-visible~.bx{outline:2px solid #fff;outline-offset:2px}
.dga-ok:has(input:checked){background:rgba(61,220,132,.08);border-color:rgba(61,220,132,.6);border-style:solid}
.dga-ok:has(input:checked) .bx{border-color:#3ddc84;background:#3ddc84}
.dga.shake .dga-ok{animation:dgaShake .45s}
@keyframes dgaShake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
/* مختصر: السلة / الدفع / صفحة النجاح */
.dga.sm{margin:10px 0 0;padding:11px 13px 12px}
.dga.sm .dga-ic{width:32px;height:32px}.dga.sm .dga-ic svg{width:17px;height:17px}
.dga.sm .dga-hd b{font-size:14.5px}.dga.sm .dga-hd small{font-size:10px}
.dga.sm .dga-p{margin-top:8px;font-size:12.5px}
/* شريط أعلى القسم */
.dga.ban{grid-column:1/-1;margin:0 0 6px}
/* شارة على البطاقة وفي السلة */
.dga-chip,.dga-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:700;color:#ffd79a;background:rgba(255,197,107,.09);border:1px solid rgba(255,197,107,.42);white-space:nowrap}
.dga-chip{margin-top:7px;padding:2px 8px;font-size:11.5px;line-height:1.7}
.dga-chip svg{width:12px;height:12px}
.dga-tag{margin:4px 0 0;padding:1px 7px;font-size:11px;line-height:1.7}
.ci-brand .dga-tag{margin:0 6px 0 0}
em.dg.acc{color:#ffd79a!important;border-color:rgba(255,197,107,.45)!important;background:rgba(255,197,107,.08)!important}
@media(max-width:640px){
  .dga{padding:12px 13px 13px}
  .dga-hd b{font-size:15px}
  .dga-st{grid-template-columns:minmax(0,1fr)}
  .dga-st li{padding:8px 10px}
  .dga-ok{font-size:13px;padding:10px 11px}
}
@media(prefers-reduced-motion:reduce){.dga.shake .dga-ok{animation:none}}

/* #sg-r71 */

.dga.lite{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 12px;font-size:13px;line-height:1.7;color:#d9d9e2;background:rgba(255,197,107,.07);border:1px solid rgba(255,197,107,.3);border-right:3px solid #ffc56b;clip-path:none}
.dga.lite strong{color:#ffe3ad;font-weight:800;box-shadow:none}
.dga-tri{flex:0 0 auto;display:grid;place-items:center;color:#ffc56b}
.dga-tri svg{width:20px;height:20px}
.dga-chip svg{width:13px;height:13px;color:#ffc56b}
@media(max-width:560px){.dga.lite{font-size:12.5px;padding:8px 10px}}

/* #sg-r72 */

#page-digital .pgh-in{padding:46px 0 40px}
#page-digital .pgh-sub{font-size:15.5px;max-width:520px;margin-top:8px}
#page-digital .pgh-chips{margin-top:16px}
#page-digital .pgh-stats b{font-size:32px}
/* شريط التسليم: سطر واحد مدمج */
#page-digital .dgs-wrap{margin:-4px auto 6px}
#page-digital .dgs{padding:10px 18px;gap:14px}
#page-digital .dgs-main{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
#page-digital .dgs-main b{font-size:14.5px}
#page-digital .dgs-main span{font-size:12.5px;color:#a6a6b6}
#page-digital .dgs-hours{padding-right:14px}
#page-digital .dgs-hours small{display:none}
#page-digital .dgs-hours b{font-size:12.5px;font-weight:600;color:#c9c9d6}
#page-digital .dgs-side{font-size:13.5px;padding:4px 10px}
/* ترويسة الأقسام + المنصّات كتبويبات */
#page-digital .pgs.dg-sec{margin:30px 0 18px;align-items:center}
#page-digital .pgs.dg-sec h2{font-size:26px}
#page-digital .pgs-ctl .pgplats{display:flex;gap:6px;flex-wrap:wrap}
#page-digital .pgs-ctl .pgplat{height:40px;padding:0 15px 0 13px;gap:8px;background:rgba(255,255,255,.03);clip-path:var(--cut7)}
#page-digital .pgs-ctl .pgplat .ic{width:20px;height:20px;background:none;border:0;clip-path:none}
#page-digital .pgs-ctl .pgplat .ic svg{width:18px;height:18px;color:var(--red2)}
#page-digital .pgs-ctl .pgplat b{font-size:13.5px}
#page-digital .pgs-ctl .pgplat small{display:none}
#page-digital .pgs-ctl .pgplat.on{background:var(--red);border-color:var(--red)}
#page-digital .pgs-ctl .pgplat.on .ic svg{color:#fff}
#page-digital .pgs-ctl .pgplat::after{display:none}
/* بطاقات الأقسام أخفّ */
#page-digital #dgCatsGrid .pgdgc-art{height:150px}
#page-digital #dgCatsGrid .pgdgc-bd{padding:10px 14px 10px}
#page-digital #dgCatsGrid .pgdgc-bd small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* كيف يعمل: شريط رفيع */
.dg-how{list-style:none;margin:34px 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line2);background:linear-gradient(180deg,#101016,#0b0b10)}
.dg-how li{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 10px;font-size:13.5px;font-weight:700;color:#d6d6e0;border-inline-start:1px solid var(--line)}
.dg-how li:first-child{border-inline-start:0}
.dg-how b{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;font-family:var(--num);font-size:13px;color:#fff;background:var(--red);clip-path:var(--cut6)}
@media(max-width:900px){
  #page-digital .pgh-in{padding:30px 0 26px}
  #page-digital .pgs.dg-sec{align-items:flex-start}
  #page-digital .pgs-ctl{width:100%}
  #page-digital .pgs-ctl .pgplats{width:100%}
  #page-digital .dgs-main span{display:none}
  #page-digital .dgs{padding:10px 14px}
  #page-digital .dgs-hours{border-top:0;padding-top:0}
  .dg-how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-how li:nth-child(3){border-inline-start:0}
  .dg-how li:nth-child(n+3){border-top:1px solid var(--line)}
  #page-digital #dgCatsGrid .pgdgc-art{height:120px}
}