/* canvas stays at z=0, content above it */
#galaxyCanvasGlobal { z-index: 0 !important; }
header.store-header, main, footer { position: relative; z-index: 2; }
/* شاشة التحميل الكبرى */
#galaxy-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 28, 0.85); /* لون كحلي سماوي غامق شفاف */
    backdrop-filter: blur(20px); /* تأثير الزجاج المضبب */
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000000; /* أعلى من أي شيء في الثيم */
    transition: opacity 0.6s ease-in-out;
}

/* الحاوية الداخلية */
.loader-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* اللوجو مع أنيميشن النبض */
.loader-logo {
    width: 130px; /* مقاس مناسب جداً */
    height: auto;
    filter: drop-shadow(0 0 15px rgba(174, 216, 224, 0.4));
    animation: logoPulse 2s infinite ease-in-out;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 25px rgba(174, 216, 224, 0.7)); }
}

/* النص نيون سماوي */
.loader-text {
    font-size: 18px;
    font-weight: bold;
    color: #aed8e0;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(174, 216, 224, 0.5);
    animation: textFlicker 1.5s infinite;
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* شريط تقدم صغير تحت النص */
.loader-progress-bar {
    width: 150px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.loader-progress-bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #aed8e0, transparent);
    position: absolute;
    left: -100%;
    animation: progressRun 1.5s infinite linear;
}

@keyframes progressRun {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* كلاس الاختفاء */
#galaxy-preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}


#galaxy-services-bar {
width: 100%;
overflow: hidden;
background: #ffffff;
border-bottom: 2px solid #3f79ee;
padding: 10px 0;
white-space: nowrap;
position: relative;
z-index: 10;
}
/* 2. تحريك الشريط (انميشن مستمر) */
.marquee-track {
display: flex;
width: max-content;
animation: scrollMarquee 40s linear infinite;
}
@keyframes scrollMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(50%); } /* للتحريك من اليمين لليسار في RTL */
}
/* 3. تنسيق كل عنصر (أيقونة + نص) */
.marquee-item {
display: flex;
align-items: center;
padding: 0 30px;
gap: 10px;
}
.marquee-item img {
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 4px;
}
.marquee-item span {
font-size: 14px;
font-weight: bold;
color: #333;
}
/* 4. إيقاف الحركة عند وقوف الماوس (اختياري) */
#galaxy-services-bar:hover .marquee-track {
animation-play-state: paused;
}
body.color-mode-dark #galaxy-services-bar {
background: #000000 !important;
border-bottom: 2px solid #00b4ff;
box-shadow: 0 4px 15px rgba(0, 180, 255, 0.3); 
}
body.color-mode-dark .marquee-item span {
color: #00b4ff !important;
text-shadow: 0 0 5px rgba(0, 180, 255, 0.5);
}
body.color-mode-dark .marquee-item img {
filter: drop-shadow(0 0 3px #00b4ff);
}
/* تاني حاجه الهيدر
/* ============================= */
/*      1. GALAXY HEADER FIXED   */
/* ============================= */

/* إخفاء القوائم الافتراضية لمنع التداخل */
#mainnav custom-main-menu, 
#mainnav .main-menu,
.galaxy-header-clone custom-main-menu,
.galaxy-header-clone .main-menu {
    display: none !important;
}

/* --- الهيدر الأصلي (في أعلى الصفحة) --- */
#mainnav {
    background: linear-gradient(135deg, #bde7ee, #9fd4df) !important;
    border-radius: 60px !important;
    height: 70px !important;
    width: 96%;
    margin: 10px auto;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: opacity 0.3s;
    opacity: 1;
    visibility: visible;
}

/* --- الهيدر المنسوخ (الزجاجي عند السكرول) --- */
.galaxy-header-clone {
    position: fixed !important;
    top: -100px;
    left: 0; 
    right: 0;
    margin: 0 auto !important;
    width: 95% !important;
    height: 70px !important;
    
    /* الخلفية الزجاجية هنا فقط */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px);
    
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* حل مشكلة التداخل: جعل خلفية الحاوية الداخلية شفافة في النسخة المنسوخة */
.galaxy-header-clone .inner,
.galaxy-header-clone .container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* تفعيل السكرول */
body.galaxy-scrolled-mode #mainnav {
    opacity: 0;
    visibility: hidden;
}
body.galaxy-scrolled-mode .galaxy-header-clone {
    top: 15px !important;
    visibility: visible;
    opacity: 1;
}

/* تنسيق الزر والبحث */
.custom-menu-trigger {
    background: #2f5961 !important;
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 30px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
    display: flex; align-items: center;
}
.galaxy-search-integrated .s-search-input {
    background: rgba(255,255,255,0.5) !important;
    border: none !important;
    border-radius: 30px !important;
    height: 40px !important;
}

/* ============================= */
/*      2. GALAXY DRAWER         */
/* ============================= */
#galaxyCloseDrawer {
    position: absolute;
    top: 15px; left: 15px;
    font-size: 24px;
    color: #aed8e0;
    cursor: pointer;
    z-index: 10;
}
.galaxy-drawer-list li a {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    color: #fff !important;
    text-decoration: none;
    border: 1px solid rgba(174, 216, 224, 0.1);
}
.galaxy-drawer-list li a img {
    width: 28px !important; height: 28px !important;
    margin-left: 10px !important;
    border-radius: 5px;
}

/* ============================= */
/*        SIDEBAR DRAWER (تعديل الأيقونات والمسافات) */
/* ============================= */

.mm-ocd__content {
background: #0d1117 !important;
padding: 0 !important;
max-width: 270px !important; /* تصغير عرض القائمة قليلاً */
overflow-y: auto;
}
.menu-header-galaxy img {
width: 80px !important; 
height: auto !important;
margin-bottom: 10px;
filter: drop-shadow(0 0 10px rgba(174, 216, 224, 0.5));
border-radius: 0 !important;
}
.mm-ocd__content li a img {
width: 32px !important; 
height: 32px !important;
border-radius: 8px !important; 
margin-left: 15px !important;
object-fit: cover;
border: 1px solid rgba(174, 216, 224, 0.3);
transition: 0.3s;
}
/* 3. تنسيق روابط الخدمات */
.mm-ocd__content ul {
padding: 0 12px !important;
}
.mm-ocd__content li {
list-style: none;
margin-bottom: 8px;
}
.mm-ocd__content a {
display: flex !important;
align-items: center;
padding: 10px 12px !important;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
gap: 12px;
color: #fff !important;
text-decoration: none;
border: 1px solid rgba(174, 216, 224, 0.08);
transition: all 0.3s ease;
font-size: 13px !important; /* تصغير الخط قليلاً ليكون أنيق */
}
.mm-ocd__content a:hover {
background: rgba(174, 216, 224, 0.15) !important;
border-color: #aed8e0 !important;
transform: translateX(-5px);
}
.mm-ocd__content a:hover img {
transform: scale(1.1); /* تكبير الأيقونة قليلاً عند التأشير */
border-color: #aed8e0;
}
/* زر الإغلاق X */
#galaxyCloseDrawer {
position: absolute;
top: 15px;
left: 15px;
font-size: 20px;
color: #aed8e0;
cursor: pointer;
z-index: 10;
transition: 0.3s;
}
#galaxyCloseDrawer:hover {
color: #ff4d4d; /* تغيير اللون للأحمر عند الإغلاق */
transform: scale(1.2);
}
.galaxy-banner-parent {
height: auto !important;
min-height: 650px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important; 
padding: 50px 0 !important;
}
.galaxy-centered-container {
width: 100%;
max-width: 1200px; /* ضمان عدم تمدد المحتوى أكثر من اللازم */
margin: 0 auto;
direction: rtl;
}
/* جهة النصوص */
.content-side {
flex: 1;
max-width: 550px;
text-align: right;
}
.hero-text-area {
background: rgba(0, 0, 0, 0.6);
padding: 25px;
border-radius: 15px;
backdrop-filter: blur(10px);
border-right: 5px solid #aed8e0;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.hero-title {
font-size: 32px !important;
font-weight: 800;
color: #fff !important;
margin-bottom: 12px;
}
.hero-title span { color: #aed8e0; }
.hero-subtitle {
font-size: 16px !important;
color: #e0e0e0 !important;
line-height: 1.6;
}
/* شبكة المميزات - سنترتها وتصغيرها */
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.f-box {
background: rgba(0, 0, 0, 0.85) !important;
border: 1px solid rgba(174, 216, 224, 0.2);
padding: 15px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
transition: 0.3s;
}
.f-box:hover { transform: translateY(-3px); border-color: #aed8e0; }
.f-icon {
width: 40px;
height: 40px;
background: #fff;
border-radius: 10px;
padding: 7px;
flex-shrink: 0;
}
.f-info h3 { font-size: 15px !important; color: #fff !important; margin: 0; font-weight: 700; }
.f-info p { font-size: 12px !important; color: #bbb !important; margin: 0; }
/* جهة الصورة - مقاس متناسق بدون قص */
.image-side {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.hero-img-wrap {
width: 100%;
max-width: 450px; /* مقاس متوسط ومريح للعين */
}
.hero-img-wrap img {
width: 100%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 15px 35px rgba(0,0,0,0.5));
}
/* الموبايل - سنترة كل شيء تحت بعضه */
@media (max-width: 1024px) {
.galaxy-banner-parent { min-height: auto !important; }
.content-side { max-width: 100%; text-align: center; }
.features-grid { grid-template-columns: 1fr; }
.hero-text-area { border-right: none; border-bottom: 4px solid #aed8e0; }
.hero-img-wrap { max-width: 320px; margin-top: 30px; }
.f-box { justify-content: flex-start; }
}
/*البانرالتحت الشريط
/* ضبط البانر ليكون متمركزاً بالكامل */
.galaxy-banner-parent {
    height: auto !important;
    min-height: 650px !important;
    display: flex !important;
    align-items: center !important; /* سنترة عمودية */
    justify-content: center !important; /* سنترة أفقية */
    padding: 50px 0 !important;
}

.galaxy-centered-container {
    width: 100%;
    max-width: 1200px; /* ضمان عدم تمدد المحتوى أكثر من اللازم */
    margin: 0 auto;
    direction: rtl;
}

/* جهة النصوص */
.content-side {
    flex: 1;
    max-width: 550px;
    text-align: right;
}

.hero-text-area {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border-right: 5px solid #aed8e0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.hero-title {
    font-size: 32px !important;
    font-weight: 800;
    color: #fff !important;
    margin-bottom: 12px;
}

.hero-title span { color: #aed8e0; }

.hero-subtitle {
    font-size: 16px !important;
    color: #e0e0e0 !important;
    line-height: 1.6;
}

/* شبكة المميزات - سنترتها وتصغيرها */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.f-box {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(174, 216, 224, 0.2);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}

.f-box:hover { transform: translateY(-3px); border-color: #aed8e0; }

.f-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 10px;
    padding: 7px;
    flex-shrink: 0;
}

.f-info h3 { font-size: 15px !important; color: #fff !important; margin: 0; font-weight: 700; }
.f-info p { font-size: 12px !important; color: #bbb !important; margin: 0; }

/* جهة الصورة - مقاس متناسق بدون قص */
.image-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img-wrap {
    width: 100%;
    max-width: 450px; /* مقاس متوسط ومريح للعين */
}

.hero-img-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.5));
}

/* الموبايل - سنترة كل شيء تحت بعضه */
@media (max-width: 1024px) {
    .galaxy-banner-parent { min-height: auto !important; }
    .content-side { max-width: 100%; text-align: center; }
    .features-grid { grid-template-columns: 1fr; }
    .hero-text-area { border-right: none; border-bottom: 4px solid #aed8e0; }
    .hero-img-wrap { max-width: 320px; margin-top: 30px; }
    .f-box { justify-content: flex-start; }
}
.mm-ocd,
.mm-ocd__content {
    z-index: 10000000 !important;
}

/* ==========================================================
   GALAXY V2 (FROM SCRATCH) — NO BIG BOX / NO INNER BOX LOOK
   - section: no huge container box, just subtle glass strip
   - cards: THE <a> ITSELF becomes the circle (neon glass)
   - inner div exists (JS) but becomes invisible (no box)
   - theme title centered + neon
========================================================== */

/* --------- 0) Theme tokens --------- */
:root{
  --gx-neon-a: 0 240 255;   /* cyan */
  --gx-neon-b: 255 64 220;  /* pink */
  --gx-ink: 10 12 18;

  --gx-radius: 18px;
  --gx-gap: 14px;

  /* circle sizing */
  --gx-s: clamp(84px, 10vw, 118px);
}

/* --------- 1) Kill the big "box" idea --------- */
.galaxy-section{
  width: min(1400px, 98%);
  margin: 16px auto;
  padding: 14px 10px;

  /* no big gradient panel */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  position: relative;
}

/* A subtle glass “strip” behind the whole section (not a box) */
.galaxy-section::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 40px;     /* starts after title area */
  bottom: 0;

  border-radius: var(--gx-radius);

  /* glass look even if page background is flat */
  background:
    radial-gradient(900px 220px at 12% 18%, rgba(var(--gx-neon-a), .10), transparent 60%),
    radial-gradient(700px 240px at 90% 55%, rgba(var(--gx-neon-b), .09), transparent 62%),
    rgba(18, 20, 30, .18);

  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.35);

  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);

  pointer-events:none;
}

/* --------- 2) Hide JS title (we use theme title) --------- */
.galaxy-section > .galaxy-title{ display:none !important; }

/* --------- 3) Theme title: centered + neon pill --------- */
.galaxy-section .s-block__title{
  margin: 0 0 12px !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

.galaxy-section .s-block__title .right-side{
  width: 100%;
  display: flex;
  justify-content: center;
}

.galaxy-section .s-block__title h2{
  margin: 0 !important;
  padding: 10px 18px;
  border-radius: 999px;

  /* glass pill */
  background: rgba(20, 22, 34, .28);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  color: rgb(var(--gx-neon-a));
  font-weight: 900;
  letter-spacing: .5px;
  text-align: center;

  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 1px rgba(var(--gx-neon-a), .18) inset,
    0 0 26px rgba(var(--gx-neon-a), .22);

  text-shadow:
    0 0 10px rgba(var(--gx-neon-a), .65),
    0 0 22px rgba(var(--gx-neon-a), .30);
}

/* offers title = pink */
.galaxy-type-offers .s-block__title h2{
  color: rgb(var(--gx-neon-b));
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 1px rgba(var(--gx-neon-b), .18) inset,
    0 0 26px rgba(var(--gx-neon-b), .22);
  text-shadow:
    0 0 10px rgba(var(--gx-neon-b), .65),
    0 0 22px rgba(var(--gx-neon-b), .30);
}

/* --------- 4) Grid --------- */
.galaxy-grid{
  display: grid;
  gap: var(--gx-gap);
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  align-items: start;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* --------- 5) THE CIRCLE (apply to the <a>) --------- */
.galaxy-grid .galaxy-card{
  position: relative;
  width: var(--gx-s);
  height: var(--gx-s);

  margin: 6px auto; /* centers each item in its column */
  border-radius: 999px;

  display: grid;
  place-items: center;

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  /* glass core */
  background: rgba(18, 20, 30, .22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  /* depth */
  box-shadow:
    0 18px 36px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Neon ring (cyan default) */
.galaxy-grid .galaxy-card::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 999px;

  background:
    conic-gradient(
      from 210deg,
      rgba(var(--gx-neon-a), .95),
      rgba(255,255,255,.18),
      rgba(var(--gx-neon-a), .65),
      rgba(var(--gx-neon-b), .35),
      rgba(var(--gx-neon-a), .95)
    );

  filter: blur(.2px);
  opacity: .92;
  z-index: 0;
}

/* Ring mask so it becomes a border, not a fill */
.galaxy-grid .galaxy-card::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;

  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,.14), transparent 62%),
    rgba(18, 20, 30, .40);

  z-index: 0;

  /* creates “border ring” effect */
  box-shadow:
    0 0 28px rgba(var(--gx-neon-a), .20),
    0 0 0 1px rgba(var(--gx-neon-a), .30) inset;
}

/* Offers = pink ring */
.galaxy-type-offers .galaxy-card::after{
  box-shadow:
    0 0 28px rgba(var(--gx-neon-b), .20),
    0 0 0 1px rgba(var(--gx-neon-b), .30) inset;
}

/* Hover lift (desktop) */
@media (hover:hover){
  .galaxy-grid .galaxy-card{
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
  }
  .galaxy-grid .galaxy-card:hover{
    transform: translateY(-3px) scale(1.06);
    box-shadow:
      0 24px 46px rgba(0,0,0,.50),
      0 0 0 1px rgba(255,255,255,.08) inset;
  }
}

/* --------- 6) Neutralize the JS inner box completely --------- */
.galaxy-grid .galaxy-card-inner{
  /* exists but should NOT look like a box */
  position: absolute;
  inset: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  pointer-events: none;
}

/* --------- 7) Icon inside circle --------- */
/* الغي أي positioning قديم من الثيم */
.galaxy-grid .galaxy-card .lazy__bg{
  position: relative !important;   /* بدل absolute */
  inset: unset !important;
  top: unset !important;
  right: unset !important;
  left: unset !important;
  bottom: unset !important;
  margin: 0 auto !important;

  width: 60%;
  height: 60%;

  display: block;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* تأكيد إن الدايرة هي المرجع */
.galaxy-grid .galaxy-card{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------- 8) Mobile layout tuning --------- */
@media (max-width: 768px){
  :root{ --gx-s: clamp(78px, 15vw, 104px); --gx-gap: 12px; }

  .galaxy-section{
    width: 96%;
  }

  .galaxy-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .galaxy-section::before{
    top: 44px;
    border-radius: 16px;
  }
}

@media (max-width: 480px){
  .galaxy-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*لوجو التحميل */
/* 1. تغيير خلفية الموقع بالكامل */
body {
    background-color: #050a18 !important; /* لون الفضاء */
    margin: 0;
    padding: 0;
}
/* قتل القائمة البيضاء نهائي */
body .mm-menu:not(.mm-ocd__content) {
    display: none !important;
}



/* 5. مسح أي حدود بيضاء تانية في الثيم */
header, footer {
    background: rgba(5, 10, 24, 0.9) !important;
    backdrop-filter: blur(10px);
}
/* إخفاء المثلثات والزوايا الديكورية في البانر تماماً */
.full-banner-entry:after, 
.full-banner-entry:before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* ===========================
   FIX ICON PERFECT CENTERING
   + Bigger icon inside circle
=========================== */

/* خلّي الكارد Grid center بدل Flex عشان سنترة أدق */
.galaxy-grid .galaxy-card{
  display: grid !important;
  place-items: center !important;
}

/* خلّي أي محتوى داخلي يتمركز */
.galaxy-grid .galaxy-card-inner{
  display: grid !important;
  place-items: center !important;
}

/* سنترة الأيقونة نفسها + تكبيرها + إلغاء أي إزاحات */
.galaxy-grid .galaxy-card .lazy__bg{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  /* كبّر الأيقونة */
  width: 105% !important;
  height: 105% !important;

  margin: 0 !important;

  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  /* مهم: يلغي أي padding/line-height غريب من الثيم */
  line-height: 0 !important;
  vertical-align: middle !important;
}
/* ================================= */
 /*  GALAXY MOBILE HEADER FULL FIX */
/* ================================= */
@media (max-width:768px){

    /* منع أي خروج برا الشاشة */
    body, html{
        overflow-x:hidden !important;
    }

    /* اصلاح الهيدر الاساسي والمتحرك */
    #mainnav,
    .galaxy-header-clone{
        height:60px !important;
        padding:0 8px !important;
        width:100% !important;
        margin:0 !important;
        border-radius:0 !important;
    }

    /* حاوية الهيدر */
    #mainnav .container,
    .galaxy-header-clone .container{
        padding:0 !important;
    }

    /* الصف الداخلي */
    #mainnav .flex,
    .galaxy-header-clone .flex{
        flex-wrap:nowrap !important;
        gap:6px !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    /* اللوجو */
    .navbar-brand img{
        max-height:34px !important;
        width:auto !important;
    }

    /* تصغير الايقونات يمين (سلة + حساب) */
    .header-btn,
    .header-icon,
    .s-cart-icon,
    .s-user-menu-trigger{
        width:34px !important;
        height:34px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
    }

    /* تصغير الايقونات نفسها */
    .header-btn i,
    .header-icon i{
        font-size:18px !important;
    }

    /* منع النصوص جنب الايقونات */
    .header-btn span,
    .header-icon span{
        display:none !important;
    }

    /* زر القائمة */
    .custom-menu-trigger{
        padding:6px 10px !important;
        border-radius:50% !important;
        width:34px;
        height:34px;
        justify-content:center;
    }
    .custom-menu-trigger span{
        display:none !important;
    }

    /* البحث = عدسة فقط */
 @media (max-width:768px){
  .galaxy-search-integrated{ position: relative; }

  .galaxy-search-integrated.active .s-search-input{
    width:140px !important;
    opacity:1 !important;
    padding:0 12px !important;
    pointer-events:auto !important;
    background:#fff !important;
    transition:0.3s;
  }

  .galaxy-search-integrated .s-search-input{
    width:0 !important;
    opacity:0 !important;
    padding:0 !important;
    pointer-events:none;
    transition:0.3s;
  }
}

    .galaxy-search-integrated .s-search-icon{
        width:34px;
        height:34px;
        border-radius:50%;
        background:#2f5961;
        color:#fff;
        display:flex !important;
        align-items:center;
        justify-content:center;
    }

    /* السماح للعناصر بالانكماش بدل ما تخرج برا */
    #mainnav *{
        min-width:0 !important;
        flex-shrink:1 !important;
    }
}
@media (max-width:768px){

    .galaxy-header-clone{
        height:60px !important;
        padding:0 8px !important;
        width:100% !important;
        border-radius:0 !important;
    }

    .galaxy-header-clone .flex{
        flex-wrap:nowrap !important;
        justify-content:space-between !important;
        align-items:center !important;
        gap:6px !important;
    }

    /* منع تكرار زر القائمة */
    .galaxy-header-clone .custom-menu-trigger + .custom-menu-trigger{
        display:none !important;
    }

    /* منع overflow */
    .galaxy-header-clone *{
        min-width:0 !important;
        flex-shrink:1 !important;
    }
}
/* اظهار نتائج البحث فوق كل حاجة */
.s-search-results,
.autocomplete-suggestions,
.header-search .dropdown-menu {
    z-index: 10000001 !important;
    position: absolute !important;
}

#mainnav,
.galaxy-header-clone,
header.store-header {
    overflow: visible !important;
    z-index: 20 !important; /* خلي الهيدر يسمح للـ dropdown يظهر فوقه */
}
/* ========================================= */
 /*  Galaxy Auto-Fit Gallery - (5, 6, or 7 Images) */
 /*  ========================================= */

/* 1. إخفاء جميع أدوات التحكم */
.s-block--photos-slider .s-slider-block__title-nav,
.s-block--photos-slider .s-slider-nav-arrow,
.s-block--photos-slider .swiper-pagination,
.s-block--photos-slider .s-slider-block__title {
    display: none !important;
}

/* 2. تحويل السلايدر لصف مرن (يستوعب أي عدد) */
.s-block--photos-slider .swiper-wrapper {
    transform: none !important;
    display: flex !important;
    justify-content: center !important; /* توسيط المجموعة */
    width: 100% !important;
    gap: 10px !important; /* مسافة صغيرة بين الصور للحفاظ على المساحة */
    padding: 0 10px !important;
}

/* 3. تنسيق الصور لتكون مرنة (تتوسع وتتقلص حسب العدد) */
.s-block--photos-slider .swiper-slide {
    /* السطر السحري: 1 يعني تمدد وخذ مساحة متساوية */
    flex: 1 1 0 !important; 
    width: auto !important; /* إلغاء العرض الثابت */
    min-width: 0 !important; /* يسمح للصورة بالتقلص لتناسب الشاشة */
    
    margin: 0 !important;
    height: auto !important;
    
    /* تصميم الجالاكسي */
    border: 1px solid rgba(174, 216, 224, 0.3);
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* تكبير الصورة قليلاً عند الوقوف عليها */
.s-block--photos-slider .swiper-slide:hover {
    flex: 1.5 1 0 !important; /* عند الوقوف، الصورة تكبر لتأخذ مساحة أكبر */
    border-color: #aed8e0;
    box-shadow: 0 0 15px rgba(174, 216, 224, 0.25);
    z-index: 2; /* تظهر فوق الباقين */
}

/* 4. ضبط أبعاد الصورة الداخلية */
.s-block--photos-slider .swiper-slide img {
    width: 100% !important;
    height: 400px !important; /* الارتفاع الطولي */
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* =========================================  */
  /* Responsive - وضع الموبايل */
/*   ========================================= */
/* في الموبايل، 7 صور بجانب بعض مستحيل تظهر، لذلك نرجع للسحب */
@media (max-width: 768px) {
    .s-block--photos-slider .swiper-wrapper {
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 20px !important;
    }

    .s-block--photos-slider .swiper-slide {
        flex: 0 0 auto !important; /* إلغاء المرونة في الموبايل */
        width: 45% !important; /* كل صورة تأخذ نصف الشاشة تقريباً */
    }

    .s-block--photos-slider .swiper-slide img {
        height: 300px !important;
    }
}
/* ========================================= */
/*   Galaxy Features Block - مميزات المتجر */
/*   ========================================= */

/* 1. تنسيق الحاوية والشبكة */
.s-block--features {
    padding: 40px 0 !important;
    background: transparent !important;
}

/* تعديل الشبكة لتكون متناسقة */
.s-block--features .grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* 2. تصميم الكارت الواحد (الصندوق) */
.s-block--features__item {
    flex: 1 1 300px !important; /* مرونة في العرض */
    max-width: 380px !important;
    
    /* ستايل الجالاكسي الزجاجي */
    background: rgba(13, 17, 23, 0.6) !important; /* خلفية داكنة شفافة */
    border: 1px solid rgba(174, 216, 224, 0.15) !important; /* إطار تيفاني خافت */
    border-radius: 20px !important;
    padding: 30px 20px !important;
    
    /* تنسيق المحتوى */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    
    /* تأثيرات إضافية */
    backdrop-filter: blur(5px); /* تمويه الخلفية */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

/* 3. تأثير عند الوقوف على الكارت */
.s-block--features__item:hover {
    transform: translateY(-10px); /* يرتفع للأعلى */
    border-color: #aed8e0 !important; /* الإطار يضيء */
    box-shadow: 0 10px 30px rgba(174, 216, 224, 0.15); /* ظل تيفاني */
    background: rgba(13, 17, 23, 0.8) !important;
}

/* 4. تنسيق دائرة الأيقونة */
.s-block--features__item .feature-icon {
    width: 70px !important;
    height: 70px !important;
    background: rgba(174, 216, 224, 0.05) !important; /* خلفية الأيقونة باهتة */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(174, 216, 224, 0.1);
    transition: all 0.4s ease;
}

/* تنسيق الأيقونة نفسها (الرمز) */
.s-block--features__item .feature-icon i {
    font-size: 32px !important;
    color: #aed8e0 !important; /* لون الأيقونة تيفاني */
    transition: all 0.4s ease;
}

/* حركة الأيقونة عند الهوفر */
.s-block--features__item:hover .feature-icon {
    background: #aed8e0 !important; /* الدائرة تصبح تيفاني */
    box-shadow: 0 0 20px #aed8e0; /* توهج */
    transform: scale(1.1); /* تكبير بسيط */
}

.s-block--features__item:hover .feature-icon i {
    color: #000 !important; /* الرمز يصبح أسود ليتباين مع الخلفية المضيئة */
}

/* 5. تنسيق العناوين والنصوص */
.s-block--features__item h2 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.5px;
}

.s-block--features__item p {
    font-size: 14px !important;
    color: #b0b0b0 !important; /* لون رمادي فاتح للنص */
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ========================================= */
 /*  Mobile Features - FIX BIG BOX */
  /* ========================================= */
@media (max-width: 768px) {

    .s-block--features__item {
        display: grid !important;
        grid-template-columns: 36px 1fr !important;
        grid-template-rows: auto auto !important;

        padding: 8px 10px !important;   /* تصغير جامد */
        margin: 0 !important;

        height: auto !important;        /* كسر height */
        min-height: unset !important;   /* كسر min-height */
        max-height: none !important;

        column-gap: 8px !important;
        align-items: center !important;
    }

    /* الايقونة */
    .s-block--features__item .feature-icon {
        grid-row: 1 / span 2;
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        margin: 0 !important;
    }

    .s-block--features__item .feature-icon i {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    /* العنوان */
    .s-block--features__item h2 {
        font-size: 13px !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    /* الوصف */
    .s-block--features__item p {
        font-size: 11px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* اهم سطر بيصغر الصندوق فعلاً */
    .s-block--features__item * {
        margin-bottom: 0 !important;
    }
}

/* ========================================= */
 /*  Reviews Visibility Fix - توضيح خطوط التقييمات */
/*   ========================================= */

/* 1. عنوان "آراء العملاء" */
.s-reviews-header {
    color: #aed8e0 !important;
    text-shadow: 0 0 15px rgba(174, 216, 224, 0.4) !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    text-align: center !important;
    letter-spacing: 1px; /* مسافة بين الحروف */
    margin-bottom: 15px; /* مسافة تحت العنوان */
}


/* 2. خلفية كارت الرأي (لضمان ظهور الكلام الأبيض بوضوح) */
.s-reviews-testimonial {
    background: rgba(13, 17, 23, 0.9) !important; /* خلفية غامقة للكلام */
    border: 1px solid rgba(174, 216, 224, 0.3) !important; /* إطار خفيف */
    border-radius: 15px !important;
}

/* 3. نص الرأي (الكلام اللي العميل كتبه) */
.s-reviews-testimonial__text p {
    color: #ffffff !important; /* أبيض ناصع */
    font-size: 16px !important; /* تكبير الخط قليلاً */
    font-weight: 500 !important; /* تعريض الخط ليكون أوضح */
    line-height: 1.6 !important; /* مسافة بين السطور للقراءة المريحة */
}

/* 4. اسم العميل */
.s-reviews-testimonial__info h2 {
    color: #ffd700 !important; /* تيفاني لاسم العميل */
    font-weight: bold !important;
    font-size: 15px !important;
}

/* 5. أيقونة الاقتباس (علامة التنصيص الخلفية) */
.s-reviews-testimonial__icon {
    color: #aed8e0 !important;
    opacity: 0.2 !important; /* تظهر بشكل خافت في الخلفية */
}

/* 6. النجوم */
.s-rating-stars-selected {
    color: #ffd700 !important; /* لون ذهبي واضح للنجوم */
}
/* ========================================= */
 /*  Premium Galaxy Footer */
 /*  ========================================= */

.store-footer__inner {
    position: relative;
    background: linear-gradient(135deg, #05070d 0%, #0a0f1f 50%, #05070d 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 195, 255, 0.15);
    overflow: hidden;
}

/* Glow كبير ناعم */
.store-footer__inner::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,195,255,0.18) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

/* خط نيون رفيع */
.store-footer__inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00c3ff, transparent);
    opacity: 0.7;
}

/* عناوين الفوتر */
.store-footer__inner h3 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
}

/* النصوص */
.store-footer__inner p,
.store-footer__inner a {
    color: #a9b3c9;
    transition: 0.3s;
}

/* hover */
.store-footer__inner a:hover {
    color: #00c3ff;
    text-shadow: 0 0 10px rgba(0,195,255,0.6);
}
/* ============================= */
/*       Breadcrumb Styling       */
/* ============================= */
.s-breadcrumb-wrapper {
    display: flex;
    align-items: center;
    gap: 5px; /* مسافة بين العناصر */
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5); /* خلفية شبه شفافة */
    border-radius: 12px;
    list-style: none;
    font-size: 14px;
    color: #fff; /* لون النص */
    backdrop-filter: blur(5px); /* يجعل الخلفية ضبابية */
}

.s-breadcrumb-wrapper a {
    color: #00f6ff; /* لون الروابط */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.s-breadcrumb-wrapper a:hover {
    color: #ff00ff; /* تغير اللون عند التأشير */
}

.s-breadcrumb-item {
    color: #fff; /* نص عادي للعنصر النشط */
}

.s-breadcrumb-arrow svg path {
    fill: #aed8e0; /* لون السهم */
    width: 16px;
    height: 16px;
}

/* ============================= */
/*     Page Main Title Styling    */
/* ============================= */
#page-main-title {
    font-size: 24px !important;  /* حجم أكبر للعنوان */
    color: #ffffff;               /* لون النص */
    text-shadow: 0 0 8px rgba(0, 246, 255, 0.6); /* توهج بسيط للنص */
    margin-bottom: 20px;
}

#page-main-title span {
    color: #00f6ff;               /* لون الرقم */
    font-weight: bold;
}
/* ============================= */
/*      Product Filter Label     */
/* ============================= */
label[for="product-filter"] {
    color: #fff !important; /* نص أبيض */
    font-weight: 600;        /* خط ثقيل شوي */
    font-size: 14px;
    text-shadow: 0 0 5px rgba(0, 246, 255, 0.5); /* توهج خفيف لزيادة الوضوح */
}

@media (max-width: 768px) {
    label[for="product-filter"] {
        font-size: 13px;   /* تقليل الحجم على الموبايل */
        text-shadow: 0 0 3px rgba(0, 246, 255, 0.5);
    }
}
/* ============================= */
/* ============================= */
/*      تنسيق وصف المنتج الشامل   */
/* ============================= */

/* 1. الصندوق الأساسي للوصف */
.product__description, 
.article--main, 
.content-entry {
    color: #e0e0e0 !important;           /* لون النص الأساسي فاتح */
    background: rgba(13,17,23,0.95) !important; /* خلفية داكنة (شبه سوداء) */
    padding: 20px !important;
    border-radius: 15px;
    line-height: 1.8;
    font-size: 14px;
    text-align: right;
    direction: rtl;
    border: 1px solid #333; /* إطار خفيف */
}

/* 2. الحل السحري: إزالة الخلفية البيضاء من جميع العناصر الداخلية */
/* النجمة * تعني: طبق هذا على كل شيء داخل الوصف (نصوص، عناوين، قوائم) */
.product__description *, 
.article--main *,
.content-entry * {
    background-color: transparent !important; /* جعل الخلفية شفافة إجبارياً */
    color: inherit !important; /* جعل اللون يرث من الصندوق الأساسي */
    font-family: inherit !important; /* توحيد الخط */
}

/* 3. تنسيق الكلام المهم (Bold/Strong) */
/* لكي يظهر بشكل مميز بدلاً من الأبيض العادي */
.product__description strong,
.article--main strong,
.content-entry strong {
    color: #00f6ff !important; /* لون أزرق نيون (نفس الستايل الخاص بك) */
    font-weight: bold !important;
}

/* 4. تنسيق القوائم والنقاط */
.product__description ul, .article--main ul {
    list-style-type: disc !important;
    margin-right: 20px !important;
}

.product__description li, .article--main li {
    margin-bottom: 8px !important;
}

/* 5. العناوين الكبيرة في الصفحة (كما كانت في كودك) */
h1.text-xl.md\:text-2xl {
    color: #00f6ff !important;
    text-shadow: 0 0 10px rgba(0,246,255,0.5);
}

.s-slider-block__title h2 {
    color: #ff00ff !important;
    text-shadow: 0 0 10px rgba(255,0,255,0.5);
}
/* ============================= */
/*  اللون اول حاجه المنيو نفسه */

/* 1. تعديل خلفية الهيدر وإزالة التدرج اللوني الافتراضي */
.profile-header {
    background-image: none !important; /* إلغاء التدرج القديم */
    background-color: #2c3e50 !important; /* لون الخلفية الجديد (كحلي غامق) */
    border-bottom: 4px solid #d4af37; /* خط ذهبي أسفل الهيدر كلمسة جمالية */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 2. تعديل لون روابط مسار التنقل (الرئيسية، حسابي...) */
.profile-header salla-breadcrumb a {
    color: #ffffff !important; /* لون النص أبيض */
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* 3. لون النص عند تمرير الماوس */
.profile-header salla-breadcrumb a:hover {
    color: #d4af37 !important; /* يتحول للذهبي عند التمرير */
    text-decoration: none;
}

/* 4. تعديل لون الأسهم الفاصلة بين الكلمات */
.profile-header salla-breadcrumb .s-breadcrumb-arrow svg {
    fill: #dddddd !important; /* لون السهم رمادي فاتح */
    width: 20px; /* تصغير حجم السهم قليلاً */
}

/* 5. تعديل لون الكلمة الأخيرة (الصفحة الحالية) */
.profile-header salla-breadcrumb .s-breadcrumb-item:last-child {
    color: #d4af37 !important; /* لون مميز للصفحة الحالية */
    font-weight: normal;
}
/* تكبير العنوان وتغيير لونه */
h1.font-bold.text-lg.text-center {
    color: #d4af37 !important; /* لون ذهبي */
    font-size: 32px !important; /* تكبير الخط */
    font-family: 'Tajawal', sans-serif; /* نوع خط (اختياري) */
    margin-bottom: 20px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* ظل خفيف للنص */
}

/* محاذاة النص ليكون في المنتصف دائماً (اختياري) */
@media (min-width: 640px) {
    h1.font-bold.text-lg.text-center {
        text-align: right !important; /* أو center لو تحب */
    }
}

/* ضبط مكان السايد بار وإلغاء التداخل مع الهيدر */
@media (min-width: 1024px) {
    nav.sidebar {
        margin-top: 0 !important; /* إلغاء الرفع للأعلى */
        padding-top: 20px !important;
        background-color: #ffffff !important; /* لون خلفية أبيض */
        border: 1px solid #e5e7eb; /* إطار رمادي خفيف */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* ظل خفيف */
        border-radius: 12px; /* تدوير الزوايا */
        position: sticky !important; /* تثبيت القائمة عند النزول */
        top: 120px !important; /* المسافة من سقف المتصفح عند التمرير */
        z-index: 99;
    }
}
/* تنسيق الروابط داخل القائمة الجانبية */
.s-user-menu-dropdown-item-link {
    padding: 12px 15px !important; /* تكبير المساحة الداخلية */
    margin-bottom: 5px; /* مسافة بين كل رابط */
    border-radius: 8px; /* تدوير حواف الأزرار */
    transition: all 0.3s ease;
    color: #555 !important;
    display: flex;
    align-items: center;
}

/* عند مرور الماوس على العنصر */
.s-user-menu-dropdown-item-link:hover {
    background-color: #f3f4f6 !important; /* لون رمادي فاتح جداً */
    color: #000 !important;
    transform: translateX(-5px); /* حركة بسيطة للجانب */
}

/* تلوين الأيقونات بجانب الكلام */
.s-user-menu-dropdown-item-prefix svg {
    fill: #777 !important; /* لون الأيقونة الأصلي */
    width: 20px !important;
    height: 20px !important;
}

/* تلوين الأيقونة عند مرور الماوس */
.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg {
    fill: #d4af37 !important; /* تتحول للذهبي (أو أي لون تفضله) */
}

/* إخفاء الخطوط الفاصلة القديمة إن وجدت */
.s-user-menu-inline > li {
    border: none !important;
}
/* =========================================
   GALAXY V2 - Minimal Services Page
   ========================================= */

/* 1. تنظيف الصفحة وإزالة الخلفيات الافتراضية */
.content--single-page, 
.content-entry,
.galaxy-v2-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* إخفاء عنوان سلة الافتراضي */
.content--single-page > h1 { display: none !important; }

/* 2. عنوان الصفحة الجديد */
.galaxy-v2-title {
    display: block !important;
    text-align: center !important;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 40px auto 50px auto !important;
    position: relative;
}

/* خط نيون تحت العنوان */
.galaxy-v2-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #00f6ff;
    margin: 15px auto 0;
    border-radius: 10px;
    box-shadow: 0 0 15px #00f6ff;
}

/* 3. شبكة الأيقونات */
#galaxyV2Grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding-bottom: 80px;
    width: 100%;
}

/* 4. تصميم الأيقونة الواحدة (Minimal Style) */
.galaxy-v2-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px; /* حجم مناسب */
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* دائرة الصورة */
.galaxy-v2-img-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* دائرية بالكامل */
    background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة جداً */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.galaxy-v2-img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}

/* النص تحت الأيقونة */
.galaxy-v2-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    opacity: 0.9;
    transition: 0.3s;
}

/* 5. تأثير الهوفر (عند الوقوف) */
.galaxy-v2-item:hover {
    transform: translateY(-10px);
}

.galaxy-v2-item:hover .galaxy-v2-img-wrap {
    background: rgba(0, 246, 255, 0.15); /* إضاءة زرقاء */
    border-color: #00f6ff;
    box-shadow: 0 0 25px rgba(0, 246, 255, 0.4);
    transform: scale(1.1);
}

.galaxy-v2-item:hover .galaxy-v2-text {
    color: #00f6ff;
    text-shadow: 0 0 10px rgba(0, 246, 255, 0.5);
}

/* =========================================
   Mobile Optimization
   ========================================= */
@media (max-width: 768px) {
    #galaxyV2Grid {
        gap: 15px;
        padding: 0 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 أيقونات في الصف للموبايل */
    }
    
    .galaxy-v2-item {
        width: 100%;
    }

    .galaxy-v2-img-wrap {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }
    
    .galaxy-v2-text {
        font-size: 12px;
    }
}