/* ================================================================
   style.css — كامل الستايلات
   ================================================================ */

/* ══════════════════════════════════════════════
   VARIABLES — المتغيرات
   ══════════════════════════════════════════════ */
:root {
  --bg:        #0a0e1a;
  --bg2:       #0f1528;
  --card:      #131928;
  --card-h:    #1a2235;
  --gold:      #f5c518;
  --blue:      #1a6dff;
  --purple:    #7c3aed;
  --text:      #ffffff;
  --text-sec:  #8b9cc8;
  --text-mute: #4a5568;
  --border:    #1e2d4a;
  --r:         14px;
  --r-lg:      20px;
  --ease:      0.22s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); direction: rtl; overflow-x: hidden; }
a     { text-decoration: none; color: inherit; }
button { font-family: 'Cairo', sans-serif; cursor: pointer; border: none; outline: none; }
img   { max-width: 100%; display: block; }

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.hidden    { display: none !important; }
.page-in   { animation: pageIn .3s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }

/* ══════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════ */
.topbar        { background: #0d1220; border-bottom: 1px solid var(--border); padding: 7px 0; font-size: 12px; }
.topbar-in     { display: flex; justify-content: space-between; align-items: center; }
.topbar-links a { color: var(--text-sec); margin-left: 14px; transition: color var(--ease); }
.topbar-links a:hover { color: var(--gold); }
.topbar-social { display: flex; gap: 6px; }
.topbar-social a { width: 26px; height: 26px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 12px; border: 1px solid var(--border); transition: all var(--ease); }
.topbar-social a:hover { border-color: var(--blue); background: rgba(26,109,255,.12); }

/* ══════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════ */
.navbar   { background: rgba(10,14,26,.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; }
.nav-in   { display: flex; align-items: center; gap: 18px; height: 64px; }
.logo     { display: flex; align-items: center; gap: 9px; flex-shrink: 0; cursor: pointer; }
.logo-ico { width: 36px; height: 36px; background: linear-gradient(135deg,var(--blue),var(--purple)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; color: white; }
.logo-txt { font-family: 'Tajawal', sans-serif; font-size: 20px; font-weight: 800; }
.logo-txt span { color: var(--gold); }

.searchbar       { flex: 1; max-width: 480px; position: relative; }
.searchbar input { width: 100%; background: var(--card); border: 1.5px solid var(--border); border-radius: 50px; padding: 10px 44px 10px 16px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: 14px; outline: none; transition: all var(--ease); }
.searchbar input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,109,255,.12); }
.searchbar input::placeholder { color: var(--text-sec); }
.search-ico-btn { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); background: none; color: var(--text-sec); font-size: 16px; }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.btn        { padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: all var(--ease); white-space: nowrap; }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text-sec); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
.btn-gold   { background: var(--gold); color: #0a0e1a; }
.btn-gold:hover { background: #e6b800; box-shadow: 0 0 20px rgba(245,197,24,.4); transform: translateY(-1px); }
.btn-blue   { background: var(--blue); color: white; }
.btn-blue:hover { background: #0055cc; box-shadow: 0 0 20px rgba(26,109,255,.35); }

.cart-btn   { width: 42px; height: 42px; background: var(--card); border: 1.5px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; transition: all var(--ease); font-size: 18px; color: var(--text-sec); }
.cart-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(26,109,255,.1); }
.cart-badge { position: absolute; top: -5px; left: -5px; min-width: 18px; height: 18px; background: var(--gold); border-radius: 9px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #0a0e1a; padding: 0 4px; animation: pop .2s ease; }
@keyframes pop { from { transform: scale(.4) } to { transform: scale(1) } }

/* ══════════════════════════════════════════════
   CATEGORY NAV
   ══════════════════════════════════════════════ */
.catnav    { background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; }
.catnav::-webkit-scrollbar { height: 0; }
.catnav-in { display: flex; }
.catnav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 14px; color: var(--text-sec); cursor: pointer; white-space: nowrap; font-size: 11px; font-weight: 700; border-bottom: 2.5px solid transparent; border-top: none; border-right: none; border-left: none; background: none; transition: all var(--ease); }
.catnav-item .ci { font-size: 18px; }
.catnav-item:hover, .catnav-item.act { color: var(--gold); border-bottom-color: var(--gold); }

/* ══════════════════════════════════════════════
   SECTION
   ══════════════════════════════════════════════ */
.section     { max-width: 1280px; margin: 0 auto; padding: 32px 20px 0; }
.section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-title { font-family: 'Tajawal', sans-serif; font-size: 21px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; width: 4px; height: 22px; background: linear-gradient(180deg,var(--blue),var(--purple)); border-radius: 2px; flex-shrink: 0; }
.see-all { font-size: 13px; color: var(--blue); font-weight: 700; background: none; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: gap var(--ease); }
.see-all:hover { gap: 8px; }

/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.hero { max-width: 1280px; margin: 0 auto; padding: 20px 20px 0; display: grid; grid-template-columns: 1fr 330px; gap: 14px; }

/* ─────────────────────────────────────────
   🖼️ خلفية الهيرو الرئيسي
   لتغيير الصورة: غيّر url() هنا
   ───────────────────────────────────────── */
.hero-main {
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  min-height: 310px; display: flex; align-items: center;
  background:
    linear-gradient(135deg, rgba(10,14,26,.85), rgba(26,16,64,.8)),
    url('') center / cover no-repeat;
    /* 🖼️ مثال: url('images/hero-banner.jpg') */
  background-color: #0d1d3e;
}

.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%,rgba(26,109,255,.25) 0,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.3) 0,transparent 50%); pointer-events: none; }
.hero-content  {  display: none !important; }
.hero-tag      { display: inline-flex; align-items: center; gap: 6px; background: rgba(26,109,255,.15); border: 1px solid rgba(26,109,255,.35); border-radius: 50px; padding: 4px 12px; font-size: 12px; color: #6fb3ff; margin-bottom: 14px; }
.hero-title    { font-family: 'Tajawal', sans-serif; font-size: 36px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.hero-title .gld { color: var(--gold); }
.hero-sub      { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 22px; line-height: 1.65; }
.hero-cta      { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #0a0e1a; padding: 12px 28px; border-radius: 50px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 20px rgba(245,197,24,.35); transition: all var(--ease); }
.hero-cta:hover { background: #e6b800; box-shadow: 0 8px 28px rgba(245,197,24,.5); transform: translateY(-2px); }

.hero-phone-wrap { display: none !important; }
.hero-phone      { width: 120px; background: linear-gradient(135deg,#1a2540,#0f1728); border-radius: 22px; border: 2px solid rgba(255,255,255,.09); padding: 14px 10px; box-shadow: 0 20px 56px rgba(0,0,0,.6); transform: rotate(-5deg); }
.phone-screen    { background: linear-gradient(135deg,#0a1628,#1a2540); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.phone-balance   { background: var(--gold); border-radius: 8px; padding: 7px; text-align: center; }
.pb-amt { font-size: 18px; font-weight: 900; color: #0a0e1a; }
.pb-lbl { font-size: 8px; color: rgba(0,0,0,.6); }
.phone-row { display: flex; gap: 4px; }
.phone-g   { flex: 1; height: 28px; border-radius: 5px; background: var(--card); }
.phone-g.c1 { background: linear-gradient(135deg,#1a1a1a,#333); }
.phone-g.c2 { background: linear-gradient(135deg,#c8a000,#8b6d00); }
.phone-g.c3 { background: linear-gradient(135deg,#ff6b35,#c44a1a); }

.hero-side    { display: flex; flex-direction: column; gap: 12px; }
.promo-card   { border-radius: var(--r); padding: 22px 18px; min-height: 136px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all var(--ease); }
.promo-card:hover { transform: translateY(-3px); }
.tabby-card   { background: linear-gradient(135deg,#1a2d1a,#0f1e0f); border: 1px solid rgba(0,200,100,.25); }
.tg-card      { background: linear-gradient(135deg,#1a1f3e,#0d1228);  border: 1px solid rgba(38,120,220,.25); }
.promo-badge  { font-size: 16px; font-weight: 800; }
.promo-badge.green { color: #00c864; }
.promo-badge.blue  { color: #2678dc; }
.promo-txt    { font-size: 12px; color: var(--text-sec); line-height: 1.5; }
.promo-txt strong { color: white; }
.promo-link   { font-size: 12px; color: var(--gold); font-weight: 700; cursor: pointer; }

/* ══════════════════════════════════════════════
   GAME CARDS
   ══════════════════════════════════════════════ */
.games-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 13px; }

.game-card { border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 3/4; cursor: pointer; transition: all .26s cubic-bezier(.4,0,.2,1); box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.game-card:hover { transform: translateY(-6px) scale(1.025); box-shadow: 0 14px 42px rgba(0,0,0,.7); }

/* ─────────────────────────────────────────
   🖼️ ألوان خلفية الألعاب
   لإضافة صورة لأي لعبة:
   أضف في data.js:  image: 'images/pubg.jpg'
   الصورة ستظهر تلقائياً من خلال الكود
   ───────────────────────────────────────── */
.bg-pubg     { background: linear-gradient(160deg,#1a1200,#3d2900,#c8a000); }
.bg-cod      { background: linear-gradient(160deg,#1a1a2e,#16213e,#0f3460); }
.bg-freefire { background: linear-gradient(160deg,#2d0a0a,#6b1c1c,#ff4444); }
.bg-genshin  { background: linear-gradient(160deg,#0d1e2e,#1a3a5c,#2e6da4); }
.bg-fortnite { background: linear-gradient(160deg,#0d1b3e,#1a2f6e,#4169e1); }
.bg-roblox   { background: linear-gradient(160deg,#1a0d0d,#8b1a1a,#e74c3c); }
.bg-mlbb     { background: linear-gradient(160deg,#0a0d2e,#1a1f6e,#2244cc); }
.bg-coc      { background: linear-gradient(160deg,#0a1a0a,#1a3a1a,#2d6a2d); }
.bg-honor    { background: linear-gradient(160deg,#1a0a2e,#3a1a6e,#6a2acc); }
.bg-zenless  { background: linear-gradient(160deg,#0a1a1a,#1a3a3a,#2a6a6a); }
.bg-delta    { background: linear-gradient(160deg,#1a1a0a,#3a3a1a,#6a6a2a); }
.bg-whiteout { background: linear-gradient(160deg,#0a1a2e,#1a3a5e,#2a6aa0); }
.bg-telegram { background: linear-gradient(160deg,#0a1a2e,#0d2a4e,#2678dc); }
.bg-tiktok   { background: linear-gradient(160deg,#0a0a0a,#1a0a1a,#ee1d52); }
.bg-bigo     { background: linear-gradient(160deg,#0a1a0a,#1a3a1a,#00cc64); }
.bg-ps       { background: linear-gradient(160deg,#00061e,#000c2e,#003087); }
.bg-amazon   { background: linear-gradient(160deg,#0a0a0a,#1a1a0a,#ff9900); }
.bg-spotify  { background: linear-gradient(160deg,#0a1a0a,#0d2a0d,#1db954); }
.bg-watchit  { background: linear-gradient(160deg,#1a0a0a,#3a0a0a,#cc1111); }
.bg-office   { background: linear-gradient(160deg,#1a0a0a,#2a1010,#d04100); }
.bg-windows  { background: linear-gradient(160deg,#0a0a1a,#0a1a2e,#0078d4); }

.game-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(0,0,0,.92) 100%); }
.game-card-info    { position: absolute; bottom: 0; left: 0; right: 0; padding: 9px 9px 11px; }
.game-label  { font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.game-sublbl { font-size: 10px; color: rgba(255,255,255,.6); margin: 1px 0; }
.game-price  { font-size: 11px; color: var(--gold); font-weight: 700; }
.game-badge  { position: absolute; top: 7px; right: 7px; background: rgba(245,197,24,.9); color: #0a0e1a; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 50px; }
.game-fav    { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border-radius: 50%; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 12px; opacity: 0; transition: opacity var(--ease); }
.game-card:hover .game-fav { opacity: 1; }
.game-add    { position: absolute; bottom: 8px; left: 8px; width: 28px; height: 28px; background: var(--blue); border-radius: 50%; color: white; font-size: 18px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--ease); transform: scale(.7); }
.game-card:hover .game-add { opacity: 1; transform: scale(1); }
.game-add:hover { background: #0055cc; transform: scale(1.12) !important; }

/* ══════════════════════════════════════════════
   PLATFORMS
   ══════════════════════════════════════════════ */
.platforms-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.platform-card   { border-radius: var(--r); padding: 17px 18px; display: flex; align-items: center; gap: 13px; transition: all var(--ease); border: 1.5px solid var(--border); }
.platform-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.platform-card.xbox  { background: linear-gradient(135deg,#0a1a0a,#112211); color: #52b043; } .platform-card.xbox:hover  { border-color: #52b043; }
.platform-card.ps    { background: linear-gradient(135deg,#00061e,#000c2e); color: #4a9eff; border-color: rgba(0,48,135,.4); } .platform-card.ps:hover { border-color: #4a9eff; }
.platform-card.steam { background: linear-gradient(135deg,#0a1020,#131a2b); color: #66c0f4; } .platform-card.steam:hover { border-color: #66c0f4; }
.platform-card.epic  { background: linear-gradient(135deg,#0a0a0a,#1a1a1a); color: #aaa; }   .platform-card.epic:hover  { border-color: #aaa; }
.platform-card.itunes{ background: linear-gradient(135deg,#1a0a10,#2a1020); color: #fc3c44; } .platform-card.itunes:hover{ border-color: #fc3c44; }
.platform-card.google{ background: linear-gradient(135deg,#0a1020,#0d1a30); color: #4285f4; } .platform-card.google:hover{ border-color: #4285f4; }
.plat-icon  { font-size: 32px; flex-shrink: 0; }
.plat-name  { font-size: 15px; font-weight: 700; }
.plat-count { font-size: 12px; color: var(--text-sec); margin-top: 2px; }

/* ══════════════════════════════════════════════
   SUBSCRIPTION CARDS
   ══════════════════════════════════════════════ */
.subs-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.sub-card    { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; cursor: pointer; transition: all var(--ease); }
.sub-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 0 30px rgba(26,109,255,.2); }
.sub-hdr     { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 11px; }
.sub-logo-img { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; }
.sub-badge-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 50px; }
.sub-badge-pill.hot  { background: rgba(255,68,68,.13); color: #ff4444; border: 1px solid rgba(255,68,68,.3); }
.sub-badge-pill.new  { background: rgba(26,109,255,.13); color: var(--blue); border: 1px solid rgba(26,109,255,.3); }
.sub-badge-pill.sale { background: rgba(0,200,100,.13); color: #00c864; border: 1px solid rgba(0,200,100,.3); }
.sub-name  { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sub-desc  { font-size: 11px; color: var(--text-sec); margin-bottom: 12px; line-height: 1.5; }
.sub-foot  { display: flex; align-items: flex-end; justify-content: space-between; }
.sub-old   { font-size: 11px; color: var(--text-sec); text-decoration: line-through; }
.sub-new   { font-size: 18px; font-weight: 800; color: var(--gold); }
.sub-cur   { font-size: 10px; color: var(--text-sec); }
.add-btn   { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: white; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all var(--ease); flex-shrink: 0; }
.add-btn:hover { background: #0055cc; transform: scale(1.12); }
.add-btn.done  { background: #00c864; }

/* ══════════════════════════════════════════════
   PROMO BANNERS
   ══════════════════════════════════════════════ */
.promo-banner { border-radius: var(--r-lg); padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }

/* ─────────────────────────────────────────
   🖼️ صور البانرات الترويجية
   غيّر url() لتغيير الصورة
   ───────────────────────────────────────── */
.promo-banner.spider {
  background:
    linear-gradient(135deg,rgba(26,0,51,.9),rgba(13,0,64,.85),rgba(0,13,46,.9)),
    url('images/spiderbanner.webp') center/cover no-repeat;
    /* 🖼️ مثال: url('images/spider-banner.jpg') */
  background-color: #1a0033;
  border: 1px solid rgba(100,0,255,.3);
}
.promo-banner.fox {
  background:
    linear-gradient(135deg,rgba(26,10,0,.9),rgba(45,21,0,.85),rgba(10,26,46,.9)),
    url('') center/cover no-repeat;
    /* 🖼️ مثال: url('images/fox-banner.jpg') */
  background-color: #1a0a00;
  border: 1px solid rgba(255,120,0,.3);
}

.banner-glow    { position: absolute; inset: 0; pointer-events: none; }
.banner-glow.sp { background: radial-gradient(ellipse at 85% 50%,rgba(100,0,255,.2) 0,transparent 60%); }
.banner-glow.fx { background: radial-gradient(ellipse at 85% 50%,rgba(255,120,0,.2) 0,transparent 60%); }

/* ─────────────────────────────────────────
   🖼️ ماسكوت البانر (الإيموجي / الصورة)
   لاستبدال الإيموجي بصورة:
   <div class="banner-mascot"><img src="images/spider.png"></div>
   ───────────────────────────────────────── */
.banner-mascot  { font-size: 72px; position: absolute; left: 36px; top: 50%; transform: translateY(-50%); }
.banner-mascot img { width: 120px; height: auto; } /* لو استخدمت صورة */

.banner-content { max-width: 62%; margin-right: 90px; position: relative; z-index: 2; }
.banner-title   { font-family: 'Tajawal', sans-serif; font-size: 26px; font-weight: 900; margin-bottom: 7px; }
.banner-sub     { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 18px; line-height: 1.6; }
.banner-side    { position: relative; z-index: 2; }
.channel-chips  { display: flex; gap: 8px; }
.ch-chip        { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; padding: 8px 14px; font-size: 12px; color: rgba(255,255,255,.75); }
.ch-chip strong { color: white; display: block; margin-top: 2px; }
.mini-chip      { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 8px 10px; text-align: center; font-size: 11px; color: rgba(255,255,255,.75); }
.gld            { color: var(--gold); }

/* ══════════════════════════════════════════════
   TELECOM
   ══════════════════════════════════════════════ */
.telecom-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 11px; }
.telecom-card { border-radius: var(--r); padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; transition: all var(--ease); border: 1.5px solid var(--border); background: var(--card); }
.telecom-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.telecom-logo { font-size: 13px; font-weight: 900; text-align: center; }
.telecom-nm   { font-size: 11px; font-weight: 600; color: var(--text-sec); text-align: center; }
.telecom-ct   { font-size: 10px; color: var(--text-mute); }

/* ══════════════════════════════════════════════
   MOST SOLD
   ══════════════════════════════════════════════ */
.mostsold-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.sold-card  { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 13px; display: flex; gap: 11px; cursor: pointer; transition: all var(--ease); align-items: center; }
.sold-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.sold-rank  { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.sold-rank.r1 { background: linear-gradient(135deg,#f5c518,#e6b800); color: #0a0e1a; }
.sold-rank.r2 { background: linear-gradient(135deg,#a0a0a0,#808080); }
.sold-rank.r3 { background: linear-gradient(135deg,#cd7f32,#b8731c); }
.sold-rank.rn { background: linear-gradient(135deg,#1e2d4a,#131928); }
.sold-img   { width: 48px; height: 48px; border-radius: 10px; background: var(--bg2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; }
.sold-nm    { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sold-sub   { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.sold-price { font-size: 14px; font-weight: 800; color: var(--gold); margin-top: 4px; }

/* ══════════════════════════════════════════════
   LOYALTY
   ══════════════════════════════════════════════ */
.loyalty       { border-radius: var(--r-lg); background: linear-gradient(135deg,#1a0a30,#2d1060,#1a0a30); border: 1px solid rgba(200,100,255,.3); padding: 30px 38px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.loyalty::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%,rgba(200,100,255,.2) 0,transparent 60%); }
.loyalty-left  { position: relative; z-index: 2; }
.loyalty-title { font-family: 'Tajawal', sans-serif; font-size: 28px; font-weight: 900; margin-bottom: 7px; }
.loyalty-title .pur { color: #c864ff; }
.loyalty-sub   { font-size: 13px; color: rgba(255,255,255,.7); max-width: 380px; line-height: 1.65; }
.loyalty-right { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pts-circle    { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg,#c864ff,#7c3aed); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 38px rgba(200,100,255,.4); }
.pts-num { font-size: 26px; font-weight: 900; }
.pts-lbl { font-size: 10px; color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════
   FEATURES
   ══════════════════════════════════════════════ */
.features    { background: var(--bg2); margin-top: 44px; padding: 38px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.features-in { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.feat      { text-align: center; }
.feat-ico  { width: 62px; height: 62px; border-radius: 15px; background: linear-gradient(135deg,rgba(26,109,255,.14),rgba(124,58,237,.14)); border: 1.5px solid rgba(26,109,255,.2); margin: 0 auto 13px; display: flex; align-items: center; justify-content: center; font-size: 27px; transition: all var(--ease); }
.feat:hover .feat-ico { transform: translateY(-4px); border-color: rgba(26,109,255,.4); }
.feat-title { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.feat-desc  { font-size: 12px; color: var(--text-sec); line-height: 1.65; }

/* ══════════════════════════════════════════════
   APP CTA
   ══════════════════════════════════════════════ */
.app-cta {
  border-radius: var(--r-lg); padding: 38px 48px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden;
  /* 🖼️ لإضافة صورة خلفية: url('images/app-bg.jpg') */
  background: linear-gradient(135deg,#0d1f3e,#1a0d3e,#0d1f3e);
  border: 1px solid rgba(26,109,255,.2);
}
.app-glow    { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%,rgba(26,109,255,.15) 0,transparent 60%); pointer-events: none; }
.app-content { position: relative; z-index: 2; }
.app-title   { font-family: 'Tajawal', sans-serif; font-size: 28px; font-weight: 900; margin-bottom: 7px; }
.app-title .gld { color: var(--gold); }
.app-sub     { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 22px; max-width: 380px; line-height: 1.65; }
.app-btns    { display: flex; gap: 10px; }
.app-btn     { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); border-radius: 13px; padding: 9px 18px; cursor: pointer; transition: all var(--ease); }
.app-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.app-btn-ico { font-size: 24px; }
.store-lbl   { font-size: 10px; color: rgba(255,255,255,.6); }
.store-nm    { font-size: 13px; font-weight: 700; }
.app-phones  { position: relative; z-index: 2; display: flex; gap: 18px; }
.app-phone   { width: 84px; background: #111827; border-radius: 17px; border: 1.5px solid rgba(255,255,255,.07); padding: 9px; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.app-phone:first-child { transform: rotate(-8deg) translateY(14px); }
.app-phone:last-child  { transform: rotate(4deg); }
.app-phone-screen { background: var(--bg); border-radius: 9px; height: 150px; }

/* ══════════════════════════════════════════════
   REVIEWS
   ══════════════════════════════════════════════ */
.reviews-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.review-card  { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 17px; transition: all var(--ease); }
.review-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.rev-stars  { color: var(--gold); font-size: 15px; margin-bottom: 9px; letter-spacing: 2px; }
.rev-txt    { font-size: 12px; color: rgba(255,255,255,.78); line-height: 1.72; margin-bottom: 13px; font-style: italic; }
.rev-author { display: flex; align-items: center; gap: 8px; }
.rev-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; overflow: hidden; color: white; }
.rev-name   { font-size: 12px; font-weight: 700; }
.rev-handle { font-size: 10px; color: var(--text-sec); }

/* ══════════════════════════════════════════════
   PAYMENTS
   ══════════════════════════════════════════════ */
.payments-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pay-chip { background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--text-sec); transition: all var(--ease); }
.pay-chip:hover { border-color: var(--blue); color: var(--text); }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
footer      { background: var(--bg2); border-top: 1px solid var(--border); margin-top: 56px; padding: 48px 0 0; }
.footer-in  { display: grid; grid-template-columns: 270px repeat(4,1fr); gap: 36px; margin-bottom: 36px; }
.footer-brand p { font-size: 13px; color: var(--text-sec); line-height: 1.7; margin: 13px 0 15px; }
.footer-social  { display: flex; gap: 7px; }
.soc-btn        { width: 34px; height: 34px; border-radius: 9px; background: var(--card); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-sec); cursor: pointer; transition: all var(--ease); }
.soc-btn:hover  { border-color: var(--blue); color: var(--blue); background: rgba(26,109,255,.1); }
.footer-col h4  { font-size: 14px; font-weight: 700; margin-bottom: 15px; }
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer-col ul li a { font-size: 12px; color: var(--text-sec); transition: color var(--ease); display: flex; align-items: center; gap: 5px; }
.footer-col ul li a::before { content: '‹'; font-size: 11px; color: var(--blue); }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bot  { border-top: 1px solid var(--border); padding: 18px 20px; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-size: 12px; color: var(--text-sec); }
.footer-copy a { color: var(--blue); }
.trust-badges  { display: flex; gap: 6px; }
.trust-b  { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font-size: 11px; color: var(--text-sec); display: flex; align-items: center; gap: 4px; }
.trust-b .ok { color: #00c864; }

/* ══════════════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════════════ */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 400; opacity: 0; pointer-events: none; transition: opacity var(--ease); backdrop-filter: blur(4px); }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer  { position: fixed; top: 0; left: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--bg2); border-right: 1px solid var(--border); z-index: 401; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.drawer-hdr   { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border); }
.drawer-title { font-family: 'Tajawal', sans-serif; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.drawer-close { width: 36px; height: 36px; background: var(--card); border: 1.5px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text-sec); transition: all var(--ease); }
.drawer-close:hover { border-color: #ff4444; color: #ff4444; }
.drawer-items { flex: 1; overflow-y: auto; padding: 16px; }
.cart-item    { display: flex; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; position: relative; animation: slideIn .22s ease; }
@keyframes slideIn { from { opacity:0; transform:translateX(-16px) } to { opacity:1; transform:translateX(0) } }
.ci-img     { width: 54px; height: 54px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; overflow: hidden; }
.ci-info    { flex: 1; min-width: 0; }
.ci-name    { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-variant { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.ci-price   { font-size: 14px; font-weight: 800; color: var(--gold); margin-top: 5px; }
.ci-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-btn    { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg2); color: var(--text); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ease); line-height: 1; }
.qty-btn:hover { border-color: var(--blue); background: rgba(26,109,255,.15); }
.qty-num    { font-size: 14px; font-weight: 700; min-width: 22px; text-align: center; }
.ci-del     { position: absolute; top: 10px; left: 10px; background: none; color: var(--text-mute); font-size: 14px; cursor: pointer; transition: color var(--ease); }
.ci-del:hover { color: #ff4444; }
.cart-empty   { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; text-align: center; }
.empty-ico    { font-size: 64px; opacity: .35; }
.empty-title  { font-family: 'Tajawal', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-sec); }
.empty-sub    { font-size: 13px; color: var(--text-mute); }
.drawer-foot  { border-top: 1px solid var(--border); padding: 18px; }
.sum-row      { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-sec); margin-bottom: 8px; }
.checkout-btn { width: 100%; padding: 13px; background: var(--gold); color: #0a0e1a; border: none; border-radius: 50px; font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: all var(--ease); margin-top: 12px; }
.checkout-btn:hover { background: #e6b800; box-shadow: 0 0 20px rgba(245,197,24,.4); transform: translateY(-1px); }

/* ══════════════════════════════════════════════
   SEARCH OVERLAY
   ══════════════════════════════════════════════ */
.search-ov   { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 300; display: flex; flex-direction: column; align-items: center; padding-top: 80px; backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--ease); }
.search-ov.open { opacity: 1; pointer-events: all; }
.search-wrap { width: 100%; max-width: 640px; position: relative; padding: 0 20px; }
.search-big  { width: 100%; background: var(--card); border: 2px solid var(--blue); border-radius: 50px; padding: 14px 52px 14px 20px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: 16px; outline: none; box-shadow: 0 0 30px rgba(26,109,255,.25); }
.search-big::placeholder { color: var(--text-sec); }
.search-x    { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); background: none; color: var(--text-sec); font-size: 20px; cursor: pointer; }
.search-res  { width: calc(100% - 40px); margin: 16px 0 0; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.sr-item     { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background var(--ease); border-bottom: 1px solid var(--border); }
.sr-item:hover { background: var(--card); }
.sr-item:last-child { border-bottom: none; }
.sr-ico  { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; overflow: hidden; }
.sr-nm   { font-size: 14px; font-weight: 700; }
.sr-cat  { font-size: 11px; color: var(--text-sec); }
.sr-price { font-size: 14px; font-weight: 700; color: var(--gold); margin-right: auto; }
.no-results { padding: 32px; text-align: center; color: var(--text-sec); font-size: 14px; }

/* ══════════════════════════════════════════════
   PRODUCT PAGE
   ══════════════════════════════════════════════ */
.prod-page    { max-width: 1280px; margin: 0 auto; padding: 28px 20px; }
.back-btn     { display: inline-flex; align-items: center; gap: 8px; color: var(--text-sec); font-size: 13px; font-weight: 700; cursor: pointer; background: none; padding: 0; margin-bottom: 22px; transition: color var(--ease); }
.back-btn:hover { color: var(--text); }
.prod-grid    { display: grid; grid-template-columns: 1fr 420px; gap: 28px; }
.prod-visual  { border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 100px; }
.related-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 12px; cursor: pointer; display: flex; gap: 10px; align-items: center; transition: all var(--ease); }
.related-card:hover { border-color: var(--blue); }
.prod-tags    { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.prod-tag     { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: rgba(26,109,255,.13); color: var(--blue); border: 1px solid rgba(26,109,255,.3); }
.prod-name    { font-family: 'Tajawal', sans-serif; font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.prod-rating  { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.prod-stars   { color: var(--gold); font-size: 15px; }
.prod-reviews { font-size: 12px; color: var(--text-sec); }
.prod-desc    { font-size: 14px; color: var(--text-sec); line-height: 1.75; margin-bottom: 22px; }
.variants-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--text-sec); }
.variants-grid  { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.variant-btn  { background: var(--card); border: 2px solid var(--border); border-radius: 8px; padding: 11px 14px; text-align: right; cursor: pointer; transition: all var(--ease); color: inherit; }
.variant-btn:hover { border-color: var(--blue); }
.variant-btn.sel  { border-color: var(--gold); background: rgba(245,197,24,.08); }
.var-nm  { font-size: 13px; font-weight: 700; }
.var-p   { font-size: 16px; font-weight: 900; color: var(--gold); }
.var-old { font-size: 11px; color: var(--text-sec); text-decoration: line-through; }
.prod-action { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 18px; margin: 18px 0; }
.final-price  { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fp-price { font-size: 32px; font-weight: 900; color: var(--gold); }
.fp-disc  { background: rgba(0,200,100,.15); color: #00c864; border: 1px solid rgba(0,200,100,.3); border-radius: 50px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.fp-old   { font-size: 13px; color: var(--text-sec); text-decoration: line-through; margin-bottom: 14px; }
.prod-add-btn { width: 100%; padding: 14px; background: var(--gold); color: #0a0e1a; border: none; border-radius: 50px; font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 800; cursor: pointer; transition: all var(--ease); display: flex; align-items: center; justify-content: center; gap: 8px; }
.prod-add-btn:hover { background: #e6b800; box-shadow: 0 0 20px rgba(245,197,24,.4); transform: translateY(-2px); }
.prod-add-btn.done { background: #00c864; color: white; }
.prod-guarantees { display: flex; gap: 12px; margin-top: 14px; }
.prod-g   { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-sec); }
.prod-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; margin-top: 28px; }
.prod-tab  { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--text-sec); cursor: pointer; border-bottom: 2.5px solid transparent; background: none; border-top: none; border-right: none; border-left: none; font-family: 'Cairo', sans-serif; transition: all var(--ease); }
.prod-tab.act { color: var(--gold); border-bottom-color: var(--gold); }
.tab-content  { font-size: 13px; color: var(--text-sec); line-height: 1.75; list-style: none; padding: 0; }
.tab-content li { margin-bottom: 8px; display: flex; align-items: flex-start; gap: 6px; }
.tab-content li::before { content: '✓'; color: var(--blue); flex-shrink: 0; }

/* ══════════════════════════════════════════════
   CATEGORY PAGE
   ══════════════════════════════════════════════ */
.cat-page       { max-width: 1280px; margin: 0 auto; padding: 28px 20px; }
.cat-title-row  { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.cat-big-title  { font-family: 'Tajawal', sans-serif; font-size: 28px; font-weight: 900; }
.cat-count      { font-size: 13px; color: var(--text-sec); }
.filter-bar     { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.filter-lbl     { font-size: 13px; color: var(--text-sec); font-weight: 600; }
.filter-chips   { display: flex; gap: 8px; flex-wrap: wrap; }
.fc             { padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); background: var(--card); color: var(--text-sec); cursor: pointer; transition: all var(--ease); font-family: 'Cairo', sans-serif; }
.fc:hover       { border-color: var(--blue); color: var(--blue); }
.fc.act         { border-color: var(--gold); color: var(--gold); background: rgba(245,197,24,.08); }
.sort-sel       { background: var(--card); border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: 12px; cursor: pointer; outline: none; }
.cat-grid       { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.cat-pcard      { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: all var(--ease); }
.cat-pcard:hover { border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 0 30px rgba(26,109,255,.2); }
.cat-visual     { height: 140px; display: flex; align-items: center; justify-content: center; font-size: 56px; position: relative; overflow: hidden; }
.cat-badge      { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 50px; }
.cat-body       { padding: 12px; }
.cat-pname      { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.cat-psub       { font-size: 11px; color: var(--text-sec); margin-bottom: 10px; }
.cat-pfoot      { display: flex; align-items: center; justify-content: space-between; }
.cat-price      { font-size: 16px; font-weight: 800; color: var(--gold); }
.cat-add        { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: white; font-size: 17px; display: flex; align-items: center; justify-content: center; transition: all var(--ease); }
.cat-add:hover  { background: #0055cc; transform: scale(1.12); }

/* ══════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════ */
.cartpage        { max-width: 1000px; margin: 0 auto; padding: 28px 20px; }
.cartpage-title  { font-family: 'Tajawal', sans-serif; font-size: 26px; font-weight: 900; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.cartpage-grid   { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.cartpage-items  { display: flex; flex-direction: column; gap: 12px; }
.cp-item         { display: flex; gap: 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 16px; align-items: center; }
.cp-img          { width: 60px; height: 60px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; overflow: hidden; }
.cp-info         { flex: 1; min-width: 0; }
.cp-name         { font-size: 14px; font-weight: 700; }
.cp-variant      { font-size: 12px; color: var(--text-sec); margin-top: 3px; }
.cp-actions      { display: flex; align-items: center; gap: 12px; }
.cp-price        { font-size: 16px; font-weight: 800; color: var(--gold); }
.del-btn         { background: none; color: var(--text-mute); font-size: 16px; cursor: pointer; transition: color var(--ease); padding: 4px; }
.del-btn:hover   { color: #ff4444; }
.summary-box     { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 20px; position: sticky; top: 90px; }
.sum-title       { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.cs              { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-sec); margin-bottom: 9px; }
.cs.big          { font-size: 17px; font-weight: 800; color: var(--text); padding-top: 11px; border-top: 1px solid var(--border); margin-top: 5px; }
.cs.big span     { color: var(--gold); }
.coupon-row      { display: flex; gap: 8px; margin: 14px 0; }
.coupon-inp      { flex: 1; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 12px; color: var(--text); font-family: 'Cairo', sans-serif; font-size: 13px; outline: none; transition: border-color var(--ease); }
.coupon-inp:focus { border-color: var(--blue); }
.coupon-inp::placeholder { color: var(--text-mute); }
.coupon-inp:disabled { opacity: .6; }
.coupon-btn      { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 14px; color: var(--text-sec); font-size: 13px; cursor: pointer; transition: all var(--ease); font-family: 'Cairo', sans-serif; font-weight: 600; white-space: nowrap; }
.coupon-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.coupon-btn:disabled { opacity: .6; cursor: default; }
.cart-checkout   { width: 100%; padding: 14px; background: var(--gold); color: #0a0e1a; border: none; border-radius: 50px; font-family: 'Cairo', sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: all var(--ease); margin-top: 12px; }
.cart-checkout:hover { background: #e6b800; box-shadow: 0 0 20px rgba(245,197,24,.4); }

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast      { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 12px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 24px rgba(0,0,0,.5); animation: toastIn .3s ease; min-width: 220px; }
@keyframes toastIn { from { opacity:0; transform:translateY(16px) scale(.94) } to { opacity:1; transform:translateY(0) scale(1) } }
.toast.ok  { border-color: rgba(0,200,100,.4); color: #00c864; }
.toast.err { border-color: rgba(255,68,68,.4); color: #ff6b6b; }
.toast.inf { border-color: rgba(26,109,255,.4); color: #6fb3ff; }

/* ══════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════ */
   
.chat-float {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 300;

    width: 50px;
    height: 50px;
border-radius: 50%;
background: url("../images/whatsapp-2.png") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    cursor: pointer;
    text-decoration: none;

    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);

    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}
.chat-float:hover { transform: scale(1.1); }
@keyframes pulse { 0%,100% { box-shadow:0 4px 18px rgba(37,211,102,.4) } 50% { box-shadow:0 4px 28px rgba(37,211,102,.7) } }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .games-grid { grid-template-columns: repeat(4,1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-side { flex-direction: row; }
  .footer-in { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2,1fr); }
  .prod-grid { grid-template-columns: 1fr; }
  .cartpage-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .subs-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .games-grid { grid-template-columns: repeat(3,1fr); }
  .platforms-grid { grid-template-columns: repeat(2,1fr); }
  .telecom-grid { grid-template-columns: repeat(3,1fr); }
  .mostsold-grid { grid-template-columns: 1fr; }
  .features-in { grid-template-columns: repeat(2,1fr); }
  .btn-outline { display: none; }
  .hero-title { font-size: 24px; }
  .hero-content { max-width: 100%; padding: 24px; }
  .hero-phone-wrap { display: none; }
  .app-cta { flex-direction: column; gap: 24px; padding: 28px; }
  .app-phones { align-self: center; }
  .loyalty { flex-direction: column; gap: 20px; }
  .promo-banner { flex-direction: column; gap: 18px; }
  .banner-mascot { position: static; transform: none; font-size: 56px; }
  .banner-content { margin-right: 0; max-width: 100%; }
  .footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .games-grid { grid-template-columns: repeat(2,1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .features-in { grid-template-columns: 1fr; }
  .hero-side { flex-direction: column; }
  .subs-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
}



















.hero-main,
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-img,
.side-banner,
.full-banner {
  width: 100%;
  display: block;
  border-radius: 16px; /* احذفه لو تبغى بدون حواف */
  object-fit: cover;
  cursor: pointer;
}