/* ===============================
   VICODER SPLASH SCREEN
   CSS ONLY STYLE
================================ */

#vicoder-splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#vicoder-splash.hide {
  opacity: 0;
  visibility: hidden;
}

/* اللوقو */
#vicoder-splash img {
  width: min(70vw, 260px);
  max-width: 260px;
  height: auto;
  opacity: 0;
  transform: scale(0.85);
  animation: vicoderLogoIntro 1.2s ease forwards;
}

/* حركة اللوقو */
@keyframes vicoderLogoIntro {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* موبايل */
@media (max-width: 480px) {
  #vicoder-splash img {
    max-width: 220px;
  }
}






























html, body {
  height: 100%;
}

body {
  min-height: 100dvh;
    background-color: black;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 🎨 النـاف بـار الشفاف */

#mainnav {
  background: rgba(255, 255, 255, 0.05); /* خلفية شبه شفافة */
  backdrop-filter: blur(10px); /* تأثير الزجاج */
  border: 1px solid rgba(255, 255, 255, 0.15); /* حدود خفيفة */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* بروز ناعم */
  border-radius: 14px; /* حواف ناعمة */
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  z-index: 999;
  transition: all 0.3s ease;
}

/* 🖋️ الروابط داخل القائمة */
#mainnav a {
  color: #fff !important; /* لون أبيض */
  font-weight: 500;
  transition: all 0.3s ease;
}

/* ✨ تأثير عند المرور والضغط على الرابط */
#mainnav a:hover,
#mainnav a:active {
  color: #FAAFBA	!important; /* لون ذهبي عند التفاعل */
  transform: scale(1.05);
}






/* ===============================
   NAVBAR LINK HOVER – ORANGE LUX
================================ */

#mainnav a {
  position: relative;
  border-radius: 10px;
  
}

/* الخط المتوهج السفلي */
#mainnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #ff9933,
    #ffd19a,
    #ff9933,
    transparent
  );
  transform: translateX(-50%);
  transition: width 0.4s ease;
  border-radius: 10px;
}

/* وهج زجاجي خفيف */
#mainnav a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(255,153,51,0.28),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* عند المرور */
#mainnav a:hover {
  color: #ff9933 !important;
  transform: translateY(-1px);
}

/* تفعيل التأثير */
#mainnav a:hover::after {
  width: 70%;
}

#mainnav a:hover::before {
  opacity: 1;
}





/* ===============================
         قائمة الحساب
============================= */

/* الصندوق الأبيض نفسه */
.s-user-menu,
.s-user-menu-dropdown {
  background: rgba(15, 15, 15, 0.92) !important;
  backdrop-filter: blur(18px);
  border-radius: 18px !important;
  border: 1px solid rgba(255,153,51,0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  padding: 12px 0;
}

/* رأس القائمة (الصورة + الاسم) */
.s-user-menu-header,
.s-user-menu-trigger {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,153,51,0.25);
  padding: 14px 16px;
}

/* صورة الحساب */
.s-user-menu-trigger-avatar {
  border-radius: 50%;
  border: 2px solid rgba(255,153,51,0.6);
  box-shadow: 0 0 0 4px rgba(255,153,51,0.15);
}

/* النص */
.s-user-menu-trigger-hello {
  color: #bbb;
  font-size: 12px;
}

.s-user-menu-trigger-name {
  color: #fff;
  font-weight: 600;
}

/* عناصر القائمة */
.s-user-menu a,
.s-user-menu button {
  color: #eee !important;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  margin: 4px 8px;
  transition: all .25s ease;
}

/* أيقونات القائمة */
.s-user-menu svg {
  fill: #ff9933;
  opacity: .85;
}

/* Hover للعناصر */
.s-user-menu a:hover,
.s-user-menu button:hover {
  background: linear-gradient(
    90deg,
    rgba(255,153,51,0.18),
    rgba(255,153,51,0.05)
  );
  color: #ff9933 !important;
}

/* زر تسجيل الخروج */
.s-user-menu a.logout,
.s-user-menu button.logout {
  color: #ff6b6b !important;
}

.s-user-menu a.logout svg {
  fill: #ff6b6b;
}

/* السهم الصغير */
.s-user-menu-trigger-icon svg {
  fill: #ff9933;
  transition: transform .3s ease;
}

.s-user-menu-trigger:hover .s-user-menu-trigger-icon svg {
  transform: rotate(180deg);
}




/* ==================== ✨ أيقونة البحث ==================== */
.search-icon {
    margin-left: 12px;    
    margin-right: 12px;   
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* تأثير Hover على أيقونة البحث */
.search-icon:hover {
    transform: none;        
    filter: brightness(1.1);
}

/* تصغير أيقونة البحث إذا كانت صورة */
#mainnav .search-icon img {
    width: 18px;
    height: 18px;
}

/* ==================== 🔍 صندوق البحث ==================== */
.search-box {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-15px);
    opacity: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 14px 16px;
    width: 360px;  /* أكبر لتناسب البحث */
    height: 50px;  
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: all 0.35s ease;
}

/* ظهور صندوق البحث */
.search-box.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}

/* مربع الإدخال داخل صندوق البحث */
.search-box input {
    width: 90%;
    padding: 8px 12px;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 16px;
    text-align: center;
}

/* Placeholder داخل البحث */
.search-box input::placeholder {
    color: #eee;
    text-align: center;
}

/* ==================== 🛒 عداد السلة ==================== */
.s-cart-summary-count {
    font-size: 10px;          
    background-color: #FAAFBA; 
    color: white;              
    width: 14px;               
    height: 14px;              
    line-height: 14px;         
    border-radius: 50%;        
    text-align: center;        
    position: absolute;        
    top: -4px;                 
    right: -4px;               
    box-shadow: 0 0 4px #020202eb; 
}

/* إخفاء السعر داخل السلة */
.s-cart-summary-content {
    display: none;
}

/* ==================== 📏 ضبط محاذاة الأيقونات ==================== */
#mainnav .flex.items-center.justify-end {
    align-items: center; 
    height: 69px;        
}

/* المسافة بين الأيقونات */
.search-icon,
.header-btn,
.s-cart-summary-wrapper {
    margin-inline: 6px; 
}

/* ==================== 🌟 حركة ظهور صندوق البحث ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.top-navbar {
    display: flex;
    min-height: 48px;
    padding-bottom: .5rem;
    padding-top: .5rem;
    display: none;
}




.bg-inherit {
    background-color: #ffffff00;
}




/* ====================
   🔥 فك ضغط الشعار (إجباري)
==================== */
#mainnav .navbar-brand img {
    width: auto !important;     /* فك العرض */
    height: 100px !important;    /* 👈 هذا اللي يرفع الطول */
    max-height: none !important;
    object-fit: contain;
    display: block;
}




/* 1. تنسيق الحاوية العامة للأيقونات */
.flex.items-center.justify-end.my-2.5 {
    gap: 15px;
    padding: 10px;
}

/* 2. أيقونة البحث - تحويلها لشكل عصري */
.search-icon i.sicon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #dd8f46; /* لون ViCoder البرتقالي */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") no-repeat center;
    color: transparent !important;
    transition: all 0.3s ease;
}

/* 3. أيقونة الحساب (المستخدم) - تصميم هندسي جديد */
.header-btn__icon.sicon-user-circle {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E") no-repeat center;
    color: transparent !important;
    transition: all 0.3s ease;
}

/* 4. أيقونة السلة - تصميم "حقيبة تسوق" فاخرة */
.s-cart-summary-wrapper .sicon-shopping-bag, 
.s-cart-summary-icon svg {
    display: none !important; /* إخفاء الأيقونة القديمة تماماً */
}

#s-cart-icon::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E") no-repeat center;
}

/* 5. رقم السلة (العداد) - تنسيق احترافي */
.s-cart-summary-count {
    background-color: #ff6b00 !important;
    color: #fff !important;
    font-weight: bold;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    top: -5px !important;
    right: -5px !important;
}

/* 6. تأثيرات الحركة عند التمرير (Hover) */
.search-icon:hover i, .header-btn:hover i, .s-cart-summary-wrapper:hover #s-cart-icon::before {
    transform: translateY(-3px);
    background-color: #ff6b00; /* تغيير اللون للبرتقالي عند الهوفر */
    filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.6));
}




/* =================================================
   🔧 ADD-ON FIX
   توحيد استقامة جميع عناصر الناف بار
   بدون تعديل أي كود سابق
================================================= */

/* الحاوية الرئيسية */
#mainnav .flex.items-stretch.justify-between {
    align-items: center !important;
}

/* الجهة اليسار (الشعار + الهامبرغر) */
#mainnav .flex.items-stretch.justify-between > .flex.items-center {
    align-items: center !important;
}

/* الجهة اليمين (بحث – حساب – سلة) */
#mainnav .flex.items-center.justify-end.my-2.5 {
    align-items: center !important;
    height: auto !important;
}

/* توحيد خط المنتصف للأيقونات */
.search-icon,
.header-btn,
.s-cart-summary-wrapper {
    display: flex;
    align-items: center;
}

/* تثبيت الشعار على نفس الخط */
#mainnav .navbar-brand {
    display: flex;
    align-items: center;
}

/* تأكيد أن صورة الشعار ما تنزل أو تطلع */
#mainnav .navbar-brand img {
    vertical-align: middle !important;
}







/* حق الايقونات*/

.header-btn__icon.sicon-user-circle {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: #fff;
    -webkit-mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E) no-repeat center;
    mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z' /%3E%3C/svg%3E) no-repeat center;
    color: transparent !important;
    transition: all 0.3s ease;
    position: relative;
    top: -3px;
}
.search-icon i.sicon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #dd8f46;
    -webkit-mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E) no-repeat center;
    mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E) no-repeat center;
    color: transparent !important;
    transition: all 0.3s ease;
    position: relative;
    top: -3px;
}
#s-cart-icon::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    -webkit-mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E) no-repeat center;
    mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z' /%3E%3C/svg%3E) no-repeat center;
    position: relative;
    left: 10px;
}


.s-cart-summary-count {
    background-color: #ff6b00 !important;
    color: #fff !important;
    font-weight: bold;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    top: -5px !important;
    right: -18px !important;
}


#mainnav {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    z-index: 999;
    transition: all 0.3s ease;
    height: 47px;
}



.container  video{
  border-bottom: #dd8f46 5px solid;
  border-radius: 30px;

}




/* =================================================
   📱 FIX نهائي: شعار واضح + نافبار نحيف (جوال)
================================================= */
@media (max-width: 768px) {

  /* ارتفاع النافبار */
  #mainnav {
    height: 52px !important;   /* متناسق */
    top: 6px;
  }

  /* تكبير الشعار بشكل مقروء */
  #mainnav .navbar-brand img {
    height: 76px !important;   /* 👈 واضح بدون مبالغة */
    max-height: 86px !important;
    width: auto !important;
  }

  /* توسيط كل العناصر */
  #mainnav .navbar-brand,
  #mainnav .flex.items-center,
  #mainnav .flex.items-center.justify-end {
    align-items: center !important;
  }

  /* الأيقونات بدون تصغير زيادة */
  .search-icon i,
  .header-btn__icon,
  #s-cart-icon::before {
    transform: scale(1);
  }
}





/* ===============================
   VICODER GLASS FEATURES BAR
   PREMIUM GLASS STYLE
=============================== */

.vicoder-features-bar-final {
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* الزجاج الحقيقي */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.02)
        ) !important;

    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;

    /* إطار زجاجي ناعم */
    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    /* الحجم والمكان */
    margin: 60px auto 35px auto !important;
    padding: 18px 40px !important;
    border-radius:10px !important;
    max-width: 1050px !important;
    width: 92%;

    /* عمق + لمعة */
    box-shadow:
        0 10px 35px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.05);

    position: relative;
    z-index: 10;
    direction: rtl;
}

/* خط لمعان خفيف أعلى الزجاج */
.vicoder-features-bar-final::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0)
    );
    opacity: 0.35;
    pointer-events: none;
}

/* ===============================
   العناصر الداخلية
=============================== */

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px;
    font-weight: 500;

    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* أيقونات برتقالية متوهجة */
.feature-item i {
    font-size: 18px;
    color: #ff8c00 !important;

    filter:
        drop-shadow(0 0 6px rgba(255,140,0,0.6))
        drop-shadow(0 0 14px rgba(255,140,0,0.35));
}

/* ===============================
   تحسين الجوال
=============================== */

@media (max-width: 768px) {
    .vicoder-features-bar-final {
        flex-wrap: wrap;
        gap: 16px;
        padding: 22px !important;
        border-radius: 26px !important;
        margin: 35px 12px !important;
    }


}
@media (max-width: 768px) {

    .vicoder-features-bar-final {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        padding: 10px 10px !important;   /* نحافظ على حجم البوكس */
        margin: 22px 10px !important;
        border-radius: 22px !important;
    }

    .feature-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 6px;                  /* ⭐ المسافة بين الميزات */
        gap: 4px;

        font-size: 9.5px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

    .feature-item i {
        font-size: 13px;
        margin-top: -1px;
    }
}





@media (max-width: 768px) {
    .vicoder-features-bar-final {
   
        gap: 2px;
 
    }
}




@media (max-width: 768px) {
    .vicoder-features-bar-final {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 18px 1px !important;
        margin: 22px 10px !important;
        border-radius: 22px !important;
    }
}














/* =========================================
   iOS GLASSMORPHISM PRODUCT CARDS – SALLA
   Premium iPhone-style Glass UI
========================================= */

/* كرت المنتج */
.s-product-card-entry {
  position: relative;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 20px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden;
  transition: all .45s ease;
}

/* لمعة القزاز (iOS shine) */
.s-product-card-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.05),
    rgba(255,255,255,.25)
  );
  opacity: .55;
  pointer-events: none;
}

/* حركة الهوفر */
.s-product-card-entry:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 30px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.45);
}

/* صورة المنتج */
.s-product-card-image img {
  border-radius: 18px;
  transition: transform .6s ease;
}

.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.08);
}

/* عنوان المنتج */
.s-product-card-content-title a {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .3px;
}

/* السعر */
.s-product-card-price,
.s-product-card-sale-price h4,
.s-product-card-sale-price span {
  color: #fff !important;
  font-weight: 700;
}

/* زر إضافة للسلة – iOS Button */
.s-button-primary-outline {
  background: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  transition: all .35s ease;
}

.s-button-primary-outline:hover {
  background: rgba(255,255,255,.32) !important;
}

/* زر المفضلة */
.s-product-card-wishlist-btn {
  background: rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
}

/* الجوال */
@media (max-width: 768px) {
  .s-product-card-entry {
    border-radius: 22px;
    backdrop-filter: blur(14px);
  }
}



/* =========================================
   FIX WHITE BACKGROUND + BIGGER IMAGE
   iOS GLASS PRODUCT CARD – SALLA
========================================= */

/* إزالة أي خلفية بيضاء من الكرت */
.s-product-card-entry,
.s-product-card-image,
.s-product-card-content {
  background: transparent !important;
}

/* حاوية الصورة */
.s-product-card-image {
  padding: 18px 18px 0;
}

/* صورة المنتج – كبيرة وموزونة بدون قص */
.s-product-card-image img {
  width: 100%;
  height: 200px;              /* 👈 تكبير واضح */
  object-fit: contain;        /* ❗ ما تنقص ولا تنقص */
  background: transparent !important;
  border-radius: 18px;
  transform: scale(1.15);     /* 👈 تكبير إضافي ناعم */
  transition: transform .6s ease;
}

/* هوفر للصورة */
.s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.22);
}

/* إزالة أي أبيض من المحتوى السفلي */
.s-product-card-content {
  padding: 16px 18px 18px;
}

/* الجوال */
@media (max-width: 768px) {
  .s-product-card-image img {
    height: 180px;
    transform: scale(1.1);
  }
}



/* تمطيط خفيف للبطاقة */
.s-product-card-entry {
  min-height: 420px; /* لا طويل ولا قصير */
  padding-bottom: 16px;
}


@media (min-width: 768px) {
    .rtl\:md\:pl-10:where([dir=rtl],[dir=rtl] *) {
        padding-left: 2.5rem;
        margin-top: 90px;
    }

}



/* =========================================
   MODERN ICON ADD-TO-CART BUTTON (GLOBAL STYLE)
   تعديل زر إضافة للسلة ليصبح أيقونة احترافية
========================================= */

/* 1. إخفاء النص "إضافة للسلة" وإظهار الأيقونة فقط */
.s-product-card-content-footer .s-button-text span {
    display: none !important; /* إخفاء النص */
}

/* 2. تحويل الزر إلى دائرة احترافية (Glass Icon) */
.s-product-card-content-footer .s-button-element {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    padding: 0 !important;
    border-radius: 50% !important; /* شكل دائري */
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* توسيط */
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 3. تكبير وتنسيق الأيقونة داخل الزر */
.s-product-card-content-footer .s-button-element i {
    font-size: 20px !important;
    color: #fff !important;
    margin: 0 !important;
}

/* 4. تأثير الهوفر الاحترافي (توهج وحركة) */
.s-product-card-content-footer .s-button-element:hover {
    background: #fff !important; /* يتحول للأبيض عند الهوفر */
    transform: scale(1.15) rotate(-10deg) !important; /* تكبير مع ميلان خفيف */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

.s-product-card-content-footer .s-button-element:hover i {
    color: #000 !important; /* تغيير لون الأيقونة للأسود لتباين فخم */
}

/* 5. ترتيب العناصر (السعر والأيقونة في سطر واحد) */
.s-product-card-content {
    display: flex;
    flex-direction: column;
}

.s-product-card-content-sub {
    margin-bottom: 10px;
}

.s-product-card-content-footer {
    position: absolute; /* وضع الزر فوق الكرت بشكل جمالي */
    bottom: 20px;
    left: 20px;
    z-index: 10;
}

/* تحسين مكان السعر ليتناسب مع الزر الجديد */
.s-product-card-price {
    font-size: 1.2rem !important;
    text-align: right;
}

/* لمسة إضافية: جعل البطاقة متجاوبة أكثر */
@media (max-width: 768px) {
    .s-product-card-content-footer .s-button-element {
        width: 38px !important;
        height: 38px !important;
    }
    .s-product-card-content-footer {
        bottom: 15px;
        left: 15px;
    }
}

/* =========================================
   ADDITIONAL RESPONSIVENESS (IPAD & MOBILE)
   إضافات التجاوب دون تعديل الكود السابق
========================================= */

/* للأجهزة اللوحية (iPad) - شاشات متوسطة */
@media (min-width: 769px) and (max-width: 1024px) {
    .s-product-card-entry {
        min-height: 400px; /* تقليل الطول قليلاً ليناسب الأيباد */
    }
    .s-product-card-image img {
        height: 170px; /* موازنة حجم الصورة */
        transform: scale(1.1);
    }
}

/* للجوالات الصغيرة جداً */
@media (max-width: 480px) {
    .s-product-card-entry {
        min-height: 360px; /* موازنة الطول على الشاشات النحيفة */
        border-radius: 18px; /* زوايا أنعم للجوال */
    }
    .s-product-card-image img {
        height: 150px; /* تصغير الصورة لتجنب التداخل */
    }
    .s-product-card-content-footer {
        bottom: 10px;
        left: 10px;
    }
    .s-product-card-price {
        font-size: 1rem !important; /* تصغير السعر قليلاً */
    }
    .s-product-card-content-title a {
        font-size: 0.9rem !important; /* تصغير العنوان ليناسب المساحة */
    }
}

/* ضمان عدم تداخل العناصر عند الهوفر على اللمس */
@media (hover: none) {
    .s-product-card-entry:hover {
        transform: none; /* إلغاء حركة الـ Hover في أجهزة اللمس لتجنب التعليق */
    }
}

/* =========================================
   NEW: WIDTH ADJUSTMENT & CENTERING
   تعديل العرض المطلوب مع الحفاظ على التجاوب
========================================= */

.s-product-card-entry {
    max-width: 280px !important; /* تقليل العرض كما طلبت */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* الحفاظ على العرض مرناً في الجوال ليتناسب مع الشبكة (Grid) */
@media (max-width: 768px) {
    .s-product-card-entry {
        max-width: 100% !important; 
    }
}





.s-product-card-vertical .s-product-card-wishlist-btn button {
    --tw-bg-opacity
1!important
: 1 !important;
    background-color: #fff !important;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important;
    margin: 0;
    display: none;
}





/* =========================================
   ADD TO CART TOOLTIP (iOS STYLE)
   ظهور رسالة "أضف للسلة" عند التحويم
========================================= */

/* جعل حاوية الزر مرجعاً للرسالة */
.s-product-card-content-footer .s-button-element {
    position: relative;
}

/* إنشاء الرسالة الصغيرة */
.s-product-card-content-footer .s-button-element::after {
    content: "أضف للسلة"; /* النص المطلوب */
    position: absolute;
    bottom: 125%; /* تظهر فوق الزر */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.15); /* زجاجي شفاف */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0; /* مخفية في البداية */
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 100;
}

/* إنشاء سهم صغير أسفل الرسالة */
.s-product-card-content-footer .s-button-element::before {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.15) transparent transparent transparent;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
}

/* إظهار الرسالة والسهم عند مرور الماوس (Hover) */
.s-product-card-content-footer .s-button-element:hover::after,
.s-product-card-content-footer .s-button-element:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* إخفاء الرسالة في الجوال لأنها تعتمد على الماوس */
@media (max-width: 768px) {
    .s-product-card-content-footer .s-button-element::after,
    .s-product-card-content-footer .s-button-element::before {
        display: none !important;
    }
}


h2{
      color: #db8e41;
}


.s-slider-block__title h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.75rem;
    line-height: 1.2;
    position: relative;
}


.s-slider-block__display-all {
    color: #414042;
    color: #cd8f4f;
    border-bottom: 3px solid #d09150;
    display: inline-block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 2.0rem;
    border-radius: 9px;
    border-top: 3px solid #d09150;
}


.s-product-card-price, .s-product-card-sale-price h4, .s-product-card-sale-price span {
    color: #dc8f42 !important;
    font-weight: 700;
}



.s-product-card-content-title a {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: .3px;
    position: relative;
    top: -28px;
}




/* =========================================
   FIX: 2 CARDS PER VIEW IN HORIZONTAL SLIDER
   إظهار بطاقتين كاملتين في السلايدر بالجوال
========================================= */

@media (max-width: 768px) {
    /* التأكد من أن الحاوية تحافظ على الصف الأفقي ولا تنزل تحت بعض */
    .s-slider-block__content, 
    .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important; /* يمنع نزول المنتجات تحت بعض */
        gap: 10px !important; /* المسافة بين البطاقتين */
    }

    /* تحديد عرض البطاقة لتظهر ثنتين فقط في الواجهة */
    .s-slider-block__item, 
    .swiper-slide {
        width: calc(50% - 15px) !important; /* يخلي العرض بالضبط لنصف الشاشة */
        flex: 0 0 auto !important; /* يمنع تمدد أو تقلص البطاقة */
    }

    /* ضبط أبعاد البطاقة لتتناسب مع العرض الجديد */
    .s-product-card-entry {
        min-height: 320px !important; /* تقليل الارتفاع قليلاً ليناسب العرض الأصغر */
        max-width: 100% !important;
    }

    /* موازنة حجم الصورة داخل البطاقة الصغيرة */
    .s-product-card-image img {
        height: 120px !important;
        transform: scale(1.0) !important; /* تقليل التكبير عشان لا تخرج من الكرت */
    }

    /* تعديل مكان العنوان ليناسب الحجم الجديد */
    .s-product-card-content-title a {
        top: -15px !important;
        font-size: 0.85rem !important;
    }

    /* ضبط مكان زر السلة والسعر */
    .s-product-card-content-footer {
        bottom: 12px !important;
        left: 10px !important;
    }
    
    .s-product-card-content-footer .s-button-element {
        width: 35px !important;
        height: 35px !important;
    }
}




/* =====================================
   VICODER – FINAL iOS SAFE RESPONSIVE FIX
   (No deletion – Override only)
===================================== */

/* أمان عام */
.vicoder-features-bar-final {
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* iOS + Mobile Safari */
@supports (-webkit-touch-callout: none) {

  .vicoder-features-bar-final {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;

    padding: 14px 10px !important;
    margin: 20px auto !important;

    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

    overflow: hidden;
  }

  .feature-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;
    padding: 0 4px !important;

    font-size: 10px !important;
    line-height: 1.25 !important;

    white-space: nowrap !important;
    text-align: center !important;
  }

  .feature-item span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feature-item i {
    font-size: 14px !important;
    flex-shrink: 0;
  }
}

/* شاشات أصغر جدًا (iPhone mini / SE) */
@media (max-width: 390px) {
  .feature-item {
    font-size: 9px !important;
    gap: 4px !important;
  }

  .feature-item i {
    font-size: 12px !important;
  }
}










/* تقليل طول بطاقة المنتج في الجوال */
@media (max-width: 768px) {

  /* 1️⃣ الطول العام للبطاقة */
  .s-product-card-entry {
    min-height: 280px !important;   /* ← كان 320 / 360 / 420 */
    padding-bottom: 10px;           /* ← قلل الفراغ السفلي */
  }

  /* 2️⃣ تقليل ارتفاع الصورة */
  .s-product-card-image img {
    height: 110px !important;       /* ← كان 120 / 150 / 180 */
    transform: scale(1.0) !important;
  }

  /* 3️⃣ تقليل المسافة أسفل المحتوى */
  .s-product-card-content {
    padding: 12px 14px 14px !important;
  }

  /* 4️⃣ رفع زر السلة شوي */
  .s-product-card-content-footer {
    bottom: 8px !important;         /* ← كان 12 / 15 / 20 */
    left: 10px !important;
  }

  /* 5️⃣ (اختياري) تصغير العنوان أكثر */
  .s-product-card-content-title a {
    font-size: 0.82rem !important;
    top: -12px !important;
  }
}

/* =========================================
   APPLE STYLE CATEGORY CARDS – 2x2 GRID
========================================= */

/* نخلي السلايدر Grid بدل صف */
.s-block--categories .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* نلغي خصائص السلايدر */
.s-block--categories .swiper-slide {
  width: 100% !important;
}

/* الكرت */
.slide--cat-entry {
  position: relative;
  aspect-ratio: 1 / 1;              /* مربّع */
  border-radius: 28px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.04)
  );

  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);

  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.12);

  transition: transform .35s ease, box-shadow .35s ease;
}

/* تكبير الصورة */
.slide--cat-entry img.vicoder-cat-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  z-index: 2;
}

/* إخفاء النص نهائيًا */
.slide--cat-entry h2,
.slide--cat-entry i {
  display: none !important;
}

/* انعطاف الزاوية (Apple-like) */
.slide--cat-entry::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 90px;
  height: 90px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0.06)
  );

  clip-path: polygon(0 100%, 0 0, 100% 100%);
  opacity: 0;
  transform: translate(-25px, 25px);
  transition: .35s ease;

  backdrop-filter: blur(18px);
}

/* Hover */
.slide--cat-entry:hover {
  transform: translateY(-6px);
  box-shadow:
    0 45px 100px rgba(0,0,0,0.7);
}

.slide--cat-entry:hover::after {
  opacity: 1;
  transform: translate(0,0);
}

/* ============================
   الجوال – 2 فوق + 2 تحت
============================ */
@media (max-width: 768px) {

  .s-block--categories .swiper-wrapper {
    gap: 18px;
  }

  .slide--cat-entry {
    border-radius: 22px;
  }

  .slide--cat-entry img.vicoder-cat-img {
    width: 72%;
    height: 72%;
  }
}







/* تحويل الشبكة إلى 2x2 وتوسيطها في الصفحة */
.s-block--categories .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 10px !important;
    transform: none !important;
}

/* تصميم الكرت بنمط آيفون الزجاجي */
.slide--cat-entry {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px !important;
    padding: 25px 15px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 150px !important;
}

/* حركة انثناء الزاوية عند التمرير */
.slide--cat-entry::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, rgba(255,165,0,0.4) 0%, rgba(255,255,255,0.1) 50%, transparent 51%); /* لمسة برتقالية */
    border-radius: 0 25px 0 0;
    transition: all 0.4s ease;
    z-index: 2;
}

.slide--cat-entry:hover::before {
    width: 45px;
    height: 45px;
}

/* تنسيق الصور الأربع */
.vicoder-cat-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
}

/* تنسيق النصوص (العناوين) */
.slide--cat-entry h2 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}





/* نرفع طبقة الانثناء فوق كل محتوى الكرت */
.slide--cat-entry::before {
    z-index: 5 !important;
    pointer-events: none;
}

/* نخلي الصورة والنصوص تحت الانثناء */
.slide--cat-entry > * {
    position: relative !important;
    z-index: 1 !important;
}





/* إخفاء أي أيقونات قديمة أو عناصر زائدة من سلة */
.slide--cat-entry i, .s-slider-nav-arrow {
    display: none !important;
}

/* لضمان الظهور 2x2 في الجوال أيضاً */
@media (max-width: 768px) {
    .s-block--categories .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}




.vicoder-cat-img {
    width: 234px !important;
    height: 206px !important;
    object-fit: contain !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
    max-width: 600px;
    max-height: 600px;
}



/* نمنع الكرت من إنشاء stacking context جديد */
.slide--cat-entry {
    isolation: isolate !important;
}

/* نخلي الانثناء أعلى طبقة فعلًا */
.slide--cat-entry::before {
    z-index: 10 !important;
    pointer-events: none;
}

/* نضمن أن الصورة والنص داخل طبقة أقل */
.slide--cat-entry img,
.slide--cat-entry h2 {
    position: relative !important;
    z-index: 1 !important;
}





/* ✅ نخلي الصورة تصير باكقراوند للكرت + نحافظ على الزجاج */
.slide--cat-entry{
  background:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)),
    var(--vicoder-cat-bg) center/contain no-repeat !important;
}

/* ✅ نخفي img نفسها (بدون حذفها) عشان ما تسوي طبقات وتغطي الانثناء */
.slide--cat-entry .vicoder-cat-img{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  filter: none !important; /* مهم جدًا */
}

/* ✅ نضمن الانثناء فوق أي شيء داخل الكرت */
.slide--cat-entry::before{
  z-index: 999 !important;
  pointer-events: none !important;
}




/* ===============================
   FIX CENTER (2x2) ALL DEVICES
   الصقيه آخر الـ CSS بدون حذف شيء من كودك
=============================== */

/* نخلي إطار السوايبر نفسه يوسّط المحتوى */
.s-block--categories .s-slider-container{
  display: flex !important;
  justify-content: center !important;
}

/* نوسّط الـ grid فعلياً */
.s-block--categories .swiper-wrapper.s-slider-swiper-wrapper{
  width: fit-content !important;          /* يخلي العرض على قد الشبكة */
  margin: 0 auto !important;              /* يوسّط */
  justify-content: center !important;
  justify-items: center !important;
}

/* نخلي كل slide ما يجبر الشبكة تتمدد يمين */
.s-block--categories .swiper-slide.slide--one-sixth{
  width: auto !important;
  margin: 0 !important;
}

/* --------- ميديا (مطلوب منك) --------- */
@media (min-width: 769px){
  .s-block--categories .swiper-wrapper.s-slider-swiper-wrapper{
    gap: 14px !important;                 /* قربهم للدسكتوب */
    padding: 10px !important;
  }
}

@media (max-width: 768px){
  .s-block--categories .swiper-wrapper.s-slider-swiper-wrapper{
    gap: 10px !important;                 /* قربهم للجوال */
    padding: 8px !important;
  }
}






@media (max-width: 768px) {
    .s-block--categories .swiper-wrapper.s-slider-swiper-wrapper {
        gap: 11px !important;
        padding: 8px !important;
        position: relative;
        right: 22px;
    }
}






/* ===============================
   تكبير الكروت للديسكتوب فقط
=============================== */
@media (min-width: 1024px) {

  /* نكبّر الكرت نفسه */
  .slide--cat-entry {
    min-height: 260px !important;
    padding: 35px 25px !important;
  }

  /* نكبّر مساحة الشبكة */
  .s-block--categories .swiper-wrapper {
    gap: 28px !important;
  }

  /* نكبّر العنوان */
  .slide--cat-entry h2 {
    font-size: 20px !important;
  }

  /* نكبّر الصورة الخلفية بصريًا */
  .slide--cat-entry{
    background-size: 75% !important;
  }
}









.banner--fixed img, .banner-entry {
    --tw-bg-opacity: 1;
    background-color: #f3f4f6;
    background-color: rgb(0 0 0);
}




/*قسم البطايق المنجااااااات*/










/* قسم الاراء */



/* === تنسيق قسم آراء العملاء بأسلوب الزجاج الشفاف (Glassmorphism) === */

/* --- إعدادات عامة للبطاقات (مشتركة بين الجوال وسطح المكتب) --- */
.s-reviews-testimonial {
    background: rgba(255, 255, 255, 0.1) !important; /* خلفية شفافة بنسبة 10% */
    backdrop-filter: blur(15px) !important; /* تأثير ضبابي قوي للزجاج */
    -webkit-backdrop-filter: blur(15px) !important; /* دعم لمتصفحات سفاري */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* حدود بيضاء شفافة */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important; /* ظل ناعم */
    border-radius: 20px !important; /* زوايا دائرية */
    padding: 25px 20px !important; /* هوامش داخلية */
    margin: 10px !important; /* هوامش خارجية */
    transition: all 0.3s ease !important; /* تأثير حركة ناعم */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: auto !important; /* ارتفاع تلقائي ليتناسب مع المحتوى */
}

.s-reviews-testimonial:hover {
    transform: translateY(-3px) !important; /* رفع البطاقة قليلاً عند التحويم */
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.15) !important; /* زيادة الظل */
    background: rgba(255, 255, 255, 0.15) !important; /* زيادة الشفافية قليلاً */
}

/* --- تنسيق الصورة الشخصية (الأفاتار) --- */
.s-reviews-testimonial__avatar {
    width: 65px !important; /* تصغير حجم الأفاتار */
    height: 65px !important; /* تصغير حجم الأفاتار */
    margin: 0 auto 15px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important; /* حدود شفافة للأفاتار */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

.s-reviews-testimonial__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- تنسيق النصوص --- */
.s-reviews-testimonial__info h2 {
    color: #ffffff !important; /* لون الاسم أبيض */
    font-size: 14px !important; /* تصغير حجم خط الاسم */
    font-weight: bold !important;
    margin-bottom: 8px !important;
}

.s-reviews-testimonial__text p {
    color: #e0e0e0 !important; /* لون النص رمادي فاتح */
    font-size: 13px !important; /* تصغير حجم خط النص */
    line-height: 1.5 !important;
    margin-top: 8px !important;
}

/* --- تنسيق النجوم --- */
.s-reviews-testimonial__rating {
    margin-bottom: 10px !important;
}

.s-reviews-testimonial__rating svg {
    fill: #ffd700 !important; /* لون النجوم ذهبي ساطع */
    width: 14px !important; /* تصغير حجم النجوم */
    height: 14px !important; /* تصغير حجم النجوم */
}

/* --- إخفاء أيقونة الاقتباس --- */
.s-reviews-testimonial__icon {
    display: none !important;
}

/* --- إعادة ترتيب العناصر الداخلية --- */
.s-reviews-testimonial__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.s-reviews-testimonial__text { order: 3 !important; }
.s-reviews-testimonial__name_wrapper { order: 2 !important; flex-direction: column !important; }
.s-reviews-testimonial__avatar { order: 1 !important; }


/* ==========================================================================
   إعدادات خاصة بالجوال (للشاشات الأصغر من 768 بكسل)
   ========================================================================== */
@media (max-width: 768px) {
    .s-reviews-testimonial {
        width: 90% !important; /* زيادة عرض البطاقة في الجوال لتملأ المساحة */
        max-width: none !important;
        padding: 20px 15px !important; /* تقليل الهوامش الداخلية قليلاً */
        margin: 10px auto !important; /* توسيط البطاقة */
    }
    
    /* لضمان ظهور بطاقتين بجانب بعضهما، قد تحتاج لتعديل إعدادات السلايدر في لوحة التحكم لجعل "عدد الشرائح المعروضة" 2 */
}


/* ==========================================================================
   إعدادات خاصة بسطح المكتب (للشاشات الأكبر من 1024 بكسل)
   ========================================================================== */
@media (min-width: 1024px) {
    .s-reviews-testimonial {
        width: 280px !important; /* تحديد عرض ثابت وصغير لسطح المكتب */
        max-width: 280px !important;
        padding: 30px 20px !important; /* هوامش مناسبة للحجم الجديد */
        margin: 15px !important;
    }
    
    .s-reviews-testimonial__avatar {
        width: 75px !important; /* حجم أفاتار متوسط لسطح المكتب */
        height: 75px !important;
    }
    
    .s-reviews-testimonial__info h2 {
        font-size: 16px !important; /* حجم خط اسم أكبر قليلاً لسطح المكتب */
    }
    
    .s-reviews-testimonial__text p {
        font-size: 14px !important; /* حجم خط نص أكبر قليلاً لسطح المكتب */
    }
}





/* ==========================================================================
   تعديل المسافات بين الكروت في الديسكتوب (فقط)
   ========================================================================== */
@media (min-width: 1024px) {
    
    /* تصغير عرض حاوية السلايدر لتقريب الكروت من المنتصف */
    .s-slider-container {
        max-width: 1000px !important; /* يمكنك تقليل الرقم لتقريبهم أكثر */
        margin: 0 auto !important;
    }

    /* التحكم في عرض الشريحة الواحدة لإزالة الفراغ الجانبي */
    .s-reviews-swiper-slide.swiper-slide {
        width: 340px !important; /* تقليل عرض المساحة المحيطة بالكرت */
        display: flex !important;
        justify-content: center !important;
        margin-left: -20px !important; /* سحب الكروت لتقريبها من بعضها */
        margin-right: -20px !important;
    }

    /* التأكد من أن الكرت نفسه ثابت الحجم وشفاف */
    .s-reviews-testimonial {
        width: 300px !important; /* عرض الكرت الفعلي */
        margin: 0 auto !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    /* توسيط العناصر داخل الحاوية الأم */
    .swiper-wrapper {
        display: flex !important;
        justify-content: center !important;
        gap: 0 !important; /* تصفير القاب الافتراضي */
    }
}







@media (min-width: 1024px) {
    .s-block--testimonials .s-slider-block__title {
        padding-left: 0;
        padding-right
Shorthand property to set values for the thickness of the padding area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. The value may not be negative.

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: 0;
        margin-top: 203px;
    }
}



.s-reviews-header-wrapper {
    display: flex;
    justify-content: space-between;
    display: none;
}



.s-reviews-testimonial__rating svg {
    fill: #ffbf80 !important;
    filter: drop-shadow(0 0 6px rgba(255,191,128,0.5));
}





/* --- ViCoder Premium Footer: Light Orange & Mobile Optimized --- */

:root {
    --light-orange: #ffa347; /* درجة البرتغالي الفاتح العصري */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --deep-black: #080808;
}

.store-footer {
    background-color: var(--deep-black) !important;
    border-top: 2px solid var(--light-orange);
    padding: 60px 0 20px 0 !important;
    position: relative;
    overflow: hidden;
}

/* طبقة الزجاج - استجابة كاملة */
.store-footer__inner {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 163, 71, 0.15) !important;
    border-radius: 30px !important;
    margin: 0 15px !important;
    padding: 50px 30px !important;
    max-width: 1200px;
    margin-inline: auto !important;
}

/* العناوين بالبرتغالي الفاتح */
.store-footer h3 {
    color: var(--light-orange) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
}

/* الروابط والنصوص */
.s-menu-footer-item, .store-footer p, .s-contacts-item {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.95rem !important;
    transition: 0.3s ease;
}

.s-menu-footer-item:hover {
    color: var(--light-orange) !important;
    padding-right: 5px;
}

/* --- تحسينات الجوال (Mobile Professional Look) --- */
@media (max-width: 768px) {
    .store-footer__inner {
        padding: 40px 20px !important;
        text-align: center; /* توسيط المحتوى للجوال ليظهر بشكل أرتب */
        border-radius: 20px !important;
    }

    .store-footer .grid {
        display: flex;
        flex-direction: column;
        gap: 40px; /* مسافة مريحة بين الأقسام */
    }

    .s-contacts-item {
        justify-content: center; /* توسيط أيقونات التواصل */
    }

    .s-menu-footer-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .s-social-list {
        justify-content: center !important;
        margin-top: 20px;
    }
}

/* أيقونات التواصل الاجتماعي */
.s-social-list li a {
    border: 1px solid var(--light-orange) !important;
    color: var(--light-orange) !important;
    background: transparent !important;
    border-radius: 10px !important;
    transition: 0.4s;
}

.s-social-list li a:hover {
    background: var(--light-orange) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--light-orange);
}

/* إضاءة خلفية ناعمة */
.store-footer::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 163, 71, 0.08) 0%, transparent 70%);
    pointer-events: none;
}




/* تعديل عنوان المتجر فقط وتوسيطه */
.store-footer a.flex.items-center.m-0 {
    justify-content: center !important; /* توسيط الحاوية */
    width: 100% !important;
    text-align: center !important;
}

.store-footer a.flex.items-center.m-0 h3 {
    color: #ffa347 !important; /* لون برتغالي فاتح */
    font-size: 1.6rem !important; /* حجم الخط */
    font-weight: 800 !important;
    margin: 18px  !important;
    display: block !important;
}



/* ضبط حقوق الفوتر إلى سطرين فقط */
/* إعادة ضبط حقوق الفوتر بالكامل */
.store-footer .copyright-text p {
    text-align: center !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* نخلي النص + منصة سلة في نفس السطر */
.store-footer .copyright-text p a[href*="salla.sa"] {
    display: inline !important;
    white-space: nowrap !important;
}

/* نخلي حقوق ViCoder في سطر لحاله */
.store-footer .copyright-text p a[href*="wa.me"] {
    display: block !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
    color: #ffb26b !important;
}

/* نمنع أي تكسير غريب للكلمات */
.store-footer .copyright-text p {
    word-break: keep-all !important;
}



/* نخفي النص الأصلي */
.store-footer .copyright-text p {
    font-size: 0 !important;
}

/* نكتب السطر الأول بشكل صحيح */
.store-footer .copyright-text p::before {
    content: "صنع بإتقان على منصة سلة | 2025";
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin-bottom: 6px;
}

/* نكتب السطر الثاني (ViCoder) */
.store-footer .copyright-text p::after {
    content: "حقوق الملكية الفكرية محفوظة لشركة | ViCoder";
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffb26b;
    text-align: center;
}



/*المنتجاااااات صفحات */

/* --- 1. تصميم شريط المسار (Breadcrumbs) بشكل عصري --- */
.s-breadcrumb-wrapper {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex !important;
    align-items: center;
}

.s-breadcrumb-item a, .s-breadcrumb-item {
    font-size: 13px !important;
    color: #999 !important;
    transition: all 0.3s ease;
}

.s-breadcrumb-item:last-child {
    color: #f68b1e !important; /* لون هوية ViCoder البرتقالي */
    font-weight: bold;
}

/* --- 2. تصميم العنوان الرئيسي (9 منتجات) بلمسة احترافية --- */
#page-main-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* إضافة لمسة فنية للرقم */
#page-main-title span {
    background: linear-gradient(135deg, #f68b1e, #ff5e00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Arial', sans-serif;
    font-style: italic;
}

#page-main-title::after {
    content: '';
    width: 50px;
    height: 4px;
    background: #f68b1e;
    display: block;
    margin-top: 5px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(246, 139, 30, 0.5);
}

/* --- 3. تصميم زر "مقترحاتنا" (الزجاجي الاحترافي) --- */
#product-filter {
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    outline: none !important;
}

#product-filter:focus, #product-filter:hover {
    background: rgba(246, 139, 30, 0.1) !important;
    border-color: rgba(246, 139, 30, 0.5) !important;
    box-shadow: 0 0 20px rgba(246, 139, 30, 0.2) !important;
    transform: translateY(-2px);
}

/* تصميم النص الجانبي "ترتيب" */
label[for="product-filter"] {
    color: #aaa !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px !important;
}

/* تخصيص الخيارات داخل القائمة لتناسب الثيم المظلم */
#product-filter option {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* --- 4. العناوين داخل البطاقات (تحسين الخط فقط) --- */
.s-product-card-content-title a {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: color 0.3s ease;
}

.s-product-card-content-title a:hover {
    color: #f68b1e !important;
}


.py-5 {
    padding-bottom: 1.25rem;
    padding-top: 9.25rem;
}





/*قسم صفحات منتجات الداخلية*/


/* =========================================
   PRODUCT PAGE GLASSMORPHISM (INTERNAL)
   تحويل صفحة المنتج لتصميم زجاجي عالمي
========================================= */

/* الحاوية الرئيسية للمنتج */
.main-content, .sticky-product-bar, section.flex.bg-white {
    background: rgba(255, 255, 255, 0.05) !important; /* خلفية زجاجية */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* تعديل النصوص لتناسب الخلفية المظلمة */
.main-content h1, .main-content h2, .form-label b, .total-price {
    color: #ffffff !important;
}

/* السعر باللون البرتقالي الخاص بك */
.total-price {
    color: #dd8f46 !important; 
    text-shadow: 0 0 10px rgba(221, 143, 70, 0.3);
}

/* تنسيق أزرار الكمية الزجاجية */
salla-quantity-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

salla-quantity-input input {
    background: transparent !important;
    color: white !important;
}

salla-quantity-input button {
    color: white !important;
}

/* زر "إضافة للسلة" و "اشتري الآن" بنمط عالمي */
.s-add-product-button-main .s-button-element {
    background: linear-gradient(135deg, #dd8f46, #faafba) !important; /* مزيج بين ألوانك */
    border: none !important;
    border-radius: 14px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.s-add-product-button-main .s-button-element:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(221, 143, 70, 0.4);
}

/* شريط السعر شامل الضريبة */
.color-grey, small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* =========================================
   RESPONSIVE FIX (MOBILE)
========================================= */
@media (max-width: 768px) {
    .flex-col.items-start.md\:flex-row {
        gap: 20px;
    }
    
    /* جعل صورة المنتج تأخذ زوايا دائرية فخمة */
    #details-slider-31286351 {
        border-radius: 20px;
        overflow: hidden;
    }

    .sticky-product-bar {
        position: relative !important;
        margin-top: 15px;
        border-radius: 20px !important;
    }
}


/* =========================================
   FIX PRODUCT IMAGE ONLY (MOBILE) - SAFE
   يخلّي صورة المنتج تاخذ كامل المساحة مثل المتاجر العالمية
========================================= */

@media (max-width: 768px){

  /* نخلي عمود الصورة ياخذ عرض كامل */
  #product-31286351 #details-slider-31286351,
  #product-31286351 #details-slider-31286351 .swiper,
  #product-31286351 #details-slider-31286351 .swiper-wrapper,
  #product-31286351 #details-slider-31286351 .swiper-slide{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* نلغي أي خلفية/بياض حوالين الصورة */
  #product-31286351 #details-slider-31286351,
  #product-31286351 #details-slider-31286351 .swiper-slide{
    background: transparent !important;
  }

  /* نخلي السلايد يتمركز ويعطي الصورة مساحة محترمة */
  #product-31286351 #details-slider-31286351 .swiper-slide{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* الصورة نفسها: كبيرة + في الوسط + بدون قص */
  #product-31286351 #details-slider-31286351 img{
    width: 100% !important;
    height: auto !important;
    max-height: 52vh !important;   /* يخليها مثل المتاجر العالمية */
    object-fit: contain !important; /* ما يقص الصورة */
    display: block !important;
    margin: 0 auto !important;
  }

  /* تحسين شكل إطار الصورة (اختياري فخم) */
  #product-31286351 #details-slider-31286351{
    border-radius: 18px !important;
    overflow: hidden !important;
  }
}




/* زجاجية داخل صفحة المنتج فقط */
#product-31286351 .main-content,
#product-31286351 .sticky-product-bar{
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

*, :after, :before {
    border: 0 solid #040404;
    box-sizing: border-box;
  
}


.s-comments-product {

    background-color: rgb(0 0 0);

}



#product-31286351 .main-content, #product-31286351 .sticky-product-bar {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgb(67 67 68) !important;
    border-radius: 15px;
    color: #f4f3f3 !important;
}



.s-button-light-outline, .s-button-light-outline:hover {
    border-color: #ffffff54 !important;
    
}

.s-button-light-outline {
    --tw-border-opacity: 1 !important;
    --tw-bg-opacity: 1;
    background-color: #fff;
    background-color: rgb(60 60 60);
    fill: #6b7280;
    --tw-text-opacity: 1;
    color: #6b7280;
    color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}


.main-content h1, .main-content h2, .form-label b, .total-price {
    color: #b3804d !important;
}



.s-add-product-button-main .s-button-element {
    background: linear-gradient(135deg, #dd8f46, #874f09) !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}


/* =========================================
   GLOBAL PRODUCT IMAGE FIX (MOBILE ONLY)
   Applies to ALL products – SAFE
========================================= */
@media (max-width: 768px) {

  /* نشتغل داخل صفحة المنتج فقط */
  .product-single {

    /* نحافظ على الصفحة نفسها */
    overflow-x: hidden;
  }

  /* سلايدر صور المنتج */
  .product-single .details-slider,
  .product-single .product-slider,
  .product-single .swiper,
  .product-single .swiper-wrapper,
  .product-single .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
  }

  /* نوسّط السلايد */
  .product-single .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* صورة المنتج نفسها */
  .product-single .details-slider img,
  .product-single .product-slider img {
    width: 100% !important;
    height: auto !important;
    max-height: 52vh !important;   /* نفس المتاجر العالمية */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* تحسين جمالي (اختياري) */
  .product-single .details-slider,
  .product-single .product-slider {
    border-radius: 18px;
    overflow: hidden;
  }
}



/* =========================================
   FIX "YOU MAY ALSO LIKE" CARDS (MOBILE)
   ترتيب البطاقات بدون التأثير على صورة المنتج
========================================= */
@media (max-width: 768px) {

  /* سكشن منتجات قد تعجبك فقط */
  .product-single .s-products-list-wrapper,
  .product-single .s-products-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 بطاقات جنب بعض */
    gap: 12px !important; /* مسافة متناسقة */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* كل بطاقة منتج */
  .product-single .s-product-card-entry {
    width: 100% !important;
    margin: 0 !important;
  }

  /* الصورة داخل البطاقة */
  .product-single .s-product-card-image {
    height: auto !important;
    margin-bottom: 6px !important;
  }

  /* إلغاء أي تأثير جاي من swiper العام */
  .product-single .s-products-list .swiper,
  .product-single .s-products-list .swiper-wrapper,
  .product-single .s-products-list .swiper-slide {
    display: contents !important;
    width: auto !important;
    margin: 0 !important;
  }
}




/* =========================================
   FIX YOU MAY ALSO LIKE – CARD WIDTH (MOBILE)
   حل النفخ + عرض متوازن
========================================= */
@media (max-width: 768px) {

  /* سكشن منتجات قد تعجبك */
  .product-single .s-products-list-wrapper,
  .product-single .s-products-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 6px !important; /* يضبط العرض */
    margin: 0 !important;
  }

  /* البطاقة نفسها */
  .product-single .s-product-card-entry {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* منع أي تمدد داخلي */
  .product-single .s-product-card-content,
  .product-single .s-product-card-image,
  .product-single .s-product-card-body {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* الصورة داخل البطاقة */
  .product-single .s-product-card-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* إلغاء تأثير swiper نهائيًا */
  .product-single .s-products-list .swiper,
  .product-single .s-products-list .swiper-wrapper,
  .product-single .s-products-list .swiper-slide {
    display: contents !important;
  }
}


/* =========================================
   FINAL FIX – YOU MAY ALSO LIKE (MOBILE)
   بطاقة بحجم عالمي (غير منفوخة)
========================================= */
@media (max-width: 768px) {

  /* شبكة المنتجات */
  .product-single .s-products-list,
  .product-single .s-products-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    justify-items: center !important; /* ⭐ مهم */
  }

  /* البطاقة نفسها */
  .product-single .s-product-card-entry {
    width: 100% !important;
    max-width: 165px !important;   /* ⭐ هذا السر */
    margin: 0 auto !important;
  }

  /* الصورة داخل البطاقة */
  .product-single .s-product-card-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* إلغاء أي تمدد غبي من swiper */
  .product-single .s-products-list .swiper,
  .product-single .s-products-list .swiper-wrapper,
  .product-single .s-products-list .swiper-slide {
    display: contents !important;
  }
}



/* =========================================
   YOU MAY ALSO LIKE (MOBILE) - FIX SLIDER
   يمنع البطاقة تصير عريضة + يقلل المسافات
========================================= */
@media (max-width: 768px){

  /* سلايدر منتجات قد تعجبك داخل صفحة المنتج فقط */
  .product-single salla-slider[id^="s-products-slider-"] .swiper{
    padding: 0 !important;
    margin: 0 !important;
  }

  .product-single salla-slider[id^="s-products-slider-"] .swiper-wrapper{
    align-items: stretch !important;
  }

  /* حجم البطاقة (سلايدر) - لا تصير منفوخة */
  .product-single salla-slider[id^="s-products-slider-"] .swiper-slide{
    width: 170px !important;       /* ✅ هذا اللي يخليها مثل الصورة الثانية */
    max-width: 170px !important;
    flex: 0 0 170px !important;
    margin: 0 !important;
    padding: 0 6px !important;     /* ✅ يقلل الفراغ بين بطاقة وبطاقة */
    box-sizing: border-box !important;
  }

  /* تأكيد أن البطاقة نفسها ما تتمدد */
  .product-single salla-slider[id^="s-products-slider-"] .s-product-card-entry{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* إزالة أي فراغات داخلية زايدة من قائمة المنتجات */
  .product-single salla-slider[id^="s-products-slider-"] .s-products-list-wrapper,
  .product-single salla-slider[id^="s-products-slider-"] .s-products-list{
    padding: 0 !important;
    margin: 0 !important;
  }
}




/* هدي حق تعديل بطاقات المنتجات في صفحاتها */



/* تحسين الحاوية الكلية */
.main-content {
    background: transparent !important;
}

/* تحويل عناصر السلة إلى بطاقات فاخرة */
.cart-item {
    background: rgba(255, 255, 255, 0.03) !important; /* خلفية شفافة جداً */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border-radius: 20px !important;
    padding: 25px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cart-item:hover {
    transform: translateY(-5px);
    border-color: #f5a342 !important; /* لون هويتك البرتقالي */
    background: rgba(255, 255, 255, 0.07) !important;
}

/* تصغير وتجميل صورة المنتج */
.cart-item img {
    border-radius: 15px !important;
    width: 110px !important;
    height: 110px !important;
    object-fit: cover;
    border: none !important;
}

/* تحسين العناوين والأسعار */
.cart-item h1 a {
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
}

.item-price, .item-total {
    color: #f5a342 !important;
    font-size: 1.1rem !important;
}

/* تجميل أزرار الكمية */
salla-quantity-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50px !important;
    padding: 5px 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.s-quantity-input-button {
    color: #f5a342 !important;
}

/* --- ملخص الطلب (التغيير الجذري) --- */
.sticky.top-24 {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px);
    border-radius: 24px !important;
    padding: 35px 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* زيادة طول ملخص الطلب وجعله فخماً */
#sub-total, #tax-amount, [data-cart-total] {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.flex.justify-between.text-sm.mb-5 {
    margin-bottom: 25px !important; /* زيادة المسافات لزيادة الطول */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

/* تمييز الإجمالي الكبير */
.flex.justify-between.text-lg.mb-5 {
    background: linear-gradient(90deg, transparent, rgba(255, 94, 0, 0.1));
    padding: 20px;
    border-radius: 12px;
    border-right: 4px solid #fe9616;
}

/* زر إتمام الطلب */
#cart-submit button {
    height: 60px !important;
    border-radius: 50px !important;
    background: #f5a342 !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    box-shadow: 0 10px 20px rgba(255, 94, 0, 0.3) !important;
    transition: 0.3s;
}

#cart-submit button:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 25px #d87b0a !important;
}

/* زر الحذف (أيقونة X) */
.btn--delete {
    background: rgba(255, 0, 0, 0.1) !important;
    color: #f78800 !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
}


.cart-item img {
    border-radius: 15px !important;
    width: 135px !important;
    height: 131px !important;
    object-fit: cover;
    border: none !important;
    background-color: #000000;
}





/* ================================
   SALLA LOGIN MODAL – ORANGE GLASS
================================ */

/* جسم المودال */
.s-modal-body {
    background: radial-gradient(circle at top, #ffffff 0%, #ffffff 70%) !important;
  border-radius: 24px;
  border: 1px solid rgba(255,153,51,0.35);
  box-shadow: 0 25px 80px rgba(0,0,0,0.75);
  backdrop-filter: blur(18px);
}

/* الهيدر */
.s-modal-header {
  border-bottom: 1px solid rgba(255,153,51,0.25);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* زر الإغلاق */
.s-modal-close {
  background: rgba(255,153,51,0.12);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
}

.s-modal-close svg {
  fill: #ff9933;
  transition: 0.3s ease;
}

.s-modal-close:hover {
  background: rgba(255,153,51,0.25);
  transform: rotate(90deg) scale(1.05);
}

/* iframe (تسجيل الدخول) */
.s-modal-body iframe {
  border-radius: 18px;
  border: 1px solid rgba(255,153,51,0.25);
  background: #ffffffdf;
}

/* تحسين للجوال */
@media (max-width: 768px) {
  .s-modal-body {
    border-radius: 18px;
    padding: 16px !important;
  }
}



/*كود تعديل اللوان  زر اتمام الطلب*/


.bg-white {
    --tw-bg-opacity: 1;
    background-color: #fff;
    background-color: #ffffff14;
    color: #ffffff;
}





.text-gray-500 {
    --tw-text-opacity: 1;
   
    color: rgb(255 255 255);
}


/*حق صفحة المنتجات الاساسيه ضبط مقاسات البطاقات*/


@media (max-width: 768px) {
    .s-product-card-image img {
        height: 177px !important;
        transform: scale(1.0) !important;
    }
}


/*مكان كتابة التعليق */

.s-comment-form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .75rem;
    border-width: 1px;
    height: 6rem;
    width: 100%;
    --tw-border-opacity: 1;
    border-color: #e5e7eb;
    border-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
    font-size: .875rem;
    line-height: 1.25rem;
    padding: .5rem .75rem;
    --tw-shadow: 0 0 transparent;
    --tw-shadow-colored: 0 0 transparent;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-duration: .3s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    background-color: #262626;
    color: rgb(255, 255, 255);
}



/*تعديل لون السلة حقت اضف للسلة */


.s-product-card-content-footer .s-button-element {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgb(0 0 0) !important;
    border: 1px solid rgb(0 0 0) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}




/* ===============================
   iOS 17+ UNIVERSAL FIX
   Safari + Chrome + Block Mode
================================ */

/* 1. تثبيت الأيقونات ومنع اختفائها */
img, svg {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 2. منع Safari من كسر الشفافية */
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 3. إصلاح مشاكل overlay / blur */
@supports (-webkit-touch-callout: none) {

  .glass,
  .glass-card,
  .overlay,
  .blur,
  .hero,
  .header,
  .footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 4. تثبيت الخلفيات */
  .glass,
  .glass-card,
  .overlay {
    background-color: rgba(0,0,0,0.85) !important;
  }

  /* 5. منع أيقونات ❓ */
  img[src*="svg"],
  svg {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}








































/*منيو الجوووووووووااااااااااال*/



/* =========================================
   VICODER – MOBILE MENU GLASS DESIGN
   Black × Orange | Mobile Only
========================================= */

@media (max-width: 768px) {

  /* الغلاف العام */
  .mm-ocd {
    backdrop-filter: blur(14px);
    background: rgba(0,0,0,0.55) !important;
  }

  /* القائمة نفسها */
  .mm-ocd__content {
    background: rgba(10,10,10,0.88) !important;
    backdrop-filter: blur(22px);
    border-left: 1px solid rgba(255,153,51,0.25);
    box-shadow: -10px 0 40px rgba(0,0,0,0.6);
  }

  /* الهيدر العلوي للقائمة */
  .mm-spn--navbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,153,51,0.2);
  }

  .mm-spn--navbar::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ff9933, transparent);
    opacity: 0.6;
  }

  /* عنوان القائمة */
  .mm-spn__title {
    color: #ffb35c !important;
    font-weight: 700;
    letter-spacing: .5px;
  }

  /* القائمة */
  .mobile-menu {
    background: transparent !important;
  }

  .mobile-menu ul {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* عناصر القائمة */
  .mobile-menu li {
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    border: 1px solid rgba(255,153,51,0.18);
    overflow: hidden;
    transition: all .35s ease;
  }

  .mobile-menu li a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .3px;
  }

  /* Hover / Touch */
  .mobile-menu li:hover,
  .mobile-menu li:active {
    background: linear-gradient(
      135deg,
      rgba(255,153,51,0.22),
      rgba(255,153,51,0.05)
    );
    box-shadow: 0 0 18px rgba(255,153,51,0.35);
    transform: translateX(-4px);
  }

  /* إخفاء النسخ الخاصة بالديسكتوب */
  .mobile-menu li.lg\\:!block {
    display: none !important;
  }

  /* زر الإغلاق */
  .close-mobile-menu {
  
 background: red;
    border-radius: 50%;
    padding: 10px;
    color: #ff9933 !important;
    font-size: 22px;
    transition: all .3s ease;
  }

  .close-mobile-menu:hover {
    background: rgba(255,153,51,0.3);
    transform: rotate(90deg);
  }

  /* الخلفية الخلفية */
  .mm-ocd__backdrop {
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(6px);
  }

}


@media (max-width: 768px) {

  /* ===== إصلاح قصّ النص + توسيط النص ===== */
  .mobile-menu li a {
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.6;
  }

  .mobile-menu li span {
    display: block;
    width: 100%;
  }

  /* ===== توضيح العنوان البرتقالي ===== */
  .mm-spn__title {
    background: linear-gradient(135deg, #ffb35c, #ff8c1a);
    color: #000 !important;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    margin: 12px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255,153,51,0.45);
  }



  /* ===== مسافات بين العناصر ===== */
  .mobile-menu ul {
    gap: 18px !important;
    padding-top: 24px !important;
  }

  .mobile-menu li {
    margin-bottom: 6px;
  }

}


.mm-spn ul {
    -webkit-overflow-scrolling: touch;
    background: inherit;
    bottom: 0;
    cursor: default;
    left: 100%;
    line-height: 24px;
    line-height: var(--mm-spn-line-height);
    overflow: visible;
    overflow-y: auto;
    padding-right: 30%;
    padding-right: var(--mm-spn-panel-offset);
    position: fixed;
    top: 0;
    transition: left .3s ease 0s;
    width: 130%;
    width: 483px;
    z-index: 2;
    left: -4px;
}

@media (max-width: 768px) {
    .mobile-menu ul {
        gap: 31px !important;
        padding-top: 24px !important;
    }
}



@media (max-width: 768px) {
    .mm-spn--navbar::after {
        content: "";
        display: block;
        height: 1px;
        opacity: 0.6;
    }
}



@media (max-width: 768px) {

  /* الهيدر يكون مرجع */
  .mm-spn--navbar {
    position: relative !important;
    padding-left: 56px !important;
  }

  /* إظهار زر سلة الأصلي */
  .close-mobile-menu {
    display: flex !important;
    position: absolute !important;

    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 36px;
    height: 36px;
    padding: 0 !important;

    border-radius: 50%;
    background: linear-gradient(135deg, #ffb35c, #ff8c1a);
    color: #000 !important;

    align-items: center;
    justify-content: center;

    font-size: 18px;
    box-shadow: 0 0 16px rgba(255,153,51,0.5);
    z-index: 9999;
  }

  /* هوفر */
  .close-mobile-menu:hover {
    transform: translateY(-50%) rotate(90deg) scale(1.05);
    box-shadow: 0 0 24px rgba(255,153,51,0.8);
  }

}


@media (max-width: 768px) {
    .mm-ocd__backdrop {
        background: rgba(0, 0, 0, 0.65) !important;
        backdrop-filter: blur(6px);
        display: none;
    }
}

@media (max-width: 768px) {
    .close-mobile-menu {
        display: flex !important;
        position: absolute !important;
        left: 6px !important;
        top: 3% !important;
        transform: translateY(-50%) !important;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        border-radius: 50%;
        background: linear-gradient(208deg, #ffb35cb3, #ff8c1a3d);
        color: #000 !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: 0 0 16px rgba(255, 153, 51, 0.5);
        z-index: 9999;
    }
}


@media only screen and (max-width: 1024px) {
    .mm-spn.mm-spn--light {
        background: #fff;
        color: #f5a342;
    }
}

@media (max-width: 768px) {
    .mm-spn--navbar::after {
        content: "";
        display: block;
        height: 1px;
        background: linear-gradient(90deg, transparent, #000000, transparent);
        opacity: 0.6;
    }
}

.mm-spn.mm-spn--navbar:after {
  
    top: 2px;

}








/* مقاسات الجوال  */



@media (max-width: 768px) {
    .s-product-card-image img {
        height: 144px !important;
        transform: scale(1.0) !important;
        /* max-width: 679px; */
    }
}


@media (max-width: 768px) {
    .s-slider-block__item, .swiper-slide {
        width: calc(50% - -4px) !important;
        flex: 0 0 auto !important;
    }
}






@media (max-width: 480px) {
    .s-product-card-entry {
        min-width: 158px;
        /* height: 90px; */
        min-height: 298px;
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .s-product-card-image img {
        height: 126px;
    }
}





/* توحيد ارتفاع عناوين المنتجات */
/* === FIX PRODUCT TITLE MESS (SALLA FINAL FIX) === */

.s-product-card__content {
  display: flex !important;
  flex-direction: column !important;
}

.s-product-card__title {
  display: block !important;
  height: 52px !important;        /* ارتفاع ثابت */
  max-height: 52px !important;
  line-height: 1.3 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;

  text-align: center !important;
}

/* تثبيت السعر تحت */
.s-product-card__price {
  margin-top: auto !important;
}


.s-product-card-entry {
    max-width: 242px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}











/* ===============================
          جق  الفيديو
=============================== */

.hero-video,
video {
  opacity: 0;
  transition: opacity .4s ease;
  will-change: opacity;
}

.hero-video.is-ready,
video.is-ready {
  opacity: 1;
}

/* يمنع اهتزاز الصفحة */
.hero-video-wrap,
video {
  min-height: 220px;
  background: #000;
}









img {
  content-visibility: auto;
  contain-intrinsic-size: 300px 300px;
}









.store-footer .copyright-text p::after {
    content: "حقوق الملكية الفكرية محفوظة لشركة https://www.vicoder.sa |ViCoder";
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffb26b;
    text-align: center;
}





.store-footer .copyright-text p::after {
    content:
      "حقوق الملكية الفكرية محفوظة لشركة ViCoder\A"
      "https://www.vicoder.sa\A"
      "";
      
    display: block;
    white-space: pre-line;   /* هذا اللي يفعل النزول سطر */
    margin-top: 8px;

    font-size: 14px;
    font-weight: 600;
    color: #ffb26b;
    text-align: center;
}