/* Add custom CSS styles below */ 
/* ===== نفس كودك مع تنظيف المشاكل فقط ===== */

/* الهيدر */
#edit-headers-design-before.s-design-before--header.s-design-invisible-dom,
.s-header,
header,
.main-header {
    background-color: #000 !important;
    color: #fff !important;
}

.s-header *,
header *,
.main-header * {
    color: #fff !important;
}

.s-header svg,
header svg,
.main-header svg {
    fill: #fff !important;
}

/* ===== الهوية ===== */

:root{
--color-primary:#16a3ff !important;
--color-secondary:#ff4fa8 !important;
--color-primary-dark:#16a3ff !important;
--color-secondary-dark:#ff4fa8 !important;
--bg-color:#000000 !important;
--body-bg:#000000 !important;
--text-color:#ffffff !important;
--heading-color:#ffffff !important;
--card-bg:#050509 !important;
--input-bg:#050509 !important;
}

/* الخلفية */
body,
.site-wrapper,
.main-content{
background:#000 !important;
color:#fff !important;
}

/* الأزرار */
.btn,
button,
.s-button,
.btn-primary{
background: linear-gradient(45deg,#16a3ff,#ff4fa8) !important;
border:none !important;
color:#fff !important;
}

/* الروابط */
a{ color:#16a3ff !important; }
a:hover{ color:#ff4fa8 !important; }

/* الكروت */
.card,
.product,
.s-product-card{
background:#050509 !important;
border:1px solid rgba(255,255,255,0.06) !important;
color:#fff !important;
}

/* الأسعار */
.price,
.s-price{
background:linear-gradient(45deg,#16a3ff,#ff4fa8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* إخفاء أسهم */
.s-slider-nav-arrow,
.swiper-button-next,
.swiper-button-prev,
.s-slider-prev,
.s-slider-next{
display:none !important;
}

/* custom card (دمجت الثلاث نسخ في نسخة واحدة فقط) */
.custom-salla-product-card{
border:2px solid transparent;
border-radius:16px;
background:
linear-gradient(#0b0b0b,#0b0b0b) padding-box,
linear-gradient(90deg,#16a3ff,#4cc2ff,#ff4fa8,#ff7ac3) border-box;
transition:0.3s;
}

.custom-salla-product-card:hover{
box-shadow:
0 0 15px #16a3ff66,
0 0 15px #ff4fa866;
}

/* تأثير البلور */
div.w-full.md\:w-1\/2.space-y-6{
backdrop-filter: blur(6px);
background: linear-gradient(
90deg,
rgba(22,163,255,0.15),
rgba(255,79,168,0.15)
);
border: 1px solid rgba(22,163,255,0.4);
border-radius: 16px;
}

/* شريط لعبة الشهر */
span.inline-block.py-1.px-3.rounded-full.text-xs.font-bold.tracking-wider.uppercase{
display:block;
width:100%;
text-align:center;
font-size:14px !important;
padding:6px 0;
border-radius:0;
color:white;
background: linear-gradient(
270deg,
#16a3ff,
#ff4fd8,
#16a3ff
);
background-size:300% 100%;
animation: moveGradient 5s linear infinite;
}

@keyframes moveGradient{
0%{background-position:0% 50%;}
100%{background-position:300% 50%;}
}

/* خط متحرك تحت البلوك */
div.flex.flex-col.lg\:flex-row.items-center.gap-16.lg\:gap-12{
position:relative;
}

div.flex.flex-col.lg\:flex-row.items-center.gap-16.lg\:gap-12::after{
content:"";
position:absolute;
bottom:-4px;
left:0;
width:100%;
height:4px;
background: linear-gradient(
90deg,
#16a3ff,
#ff4fd8,
#16a3ff
);
background-size:300% 100%;
animation: borderMove 4s linear infinite;
}

@keyframes borderMove{
0%{background-position:0% 50%;}
100%{background-position:300% 50%;}
}

/* الفوتر */
footer,
.footer,
.s-footer,
#footer{
width:100% !important;
max-width:100% !important;
}

footer .container,
.footer .container,
.s-footer .container{
max-width:100% !important;
width:100% !important;
padding-left:40px !important;
padding-right:40px !important;
}

/* منع اللودر من تعطيل الضغط */
.loader,
.init-loader,
.page-loader,
#app-loader{
pointer-events:none !important;
}
svg.w-5.h-5.text-green-500{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
}
div.absolute.bottom-8.left-8.right-8{
    display:none !important;
}
div.absolute.inset-0.bg-gradient-to-t.from-black.via-transparent.to-transparent{
    display: none !important;
}
.s-slider ul{
    display:none !important;
}

}
/* تغيير لون البوكس لألوان الهوية */

.w-16.h-16.rounded-xl{
    background: linear-gradient(135deg,#16a3ff,#ff4fa8) !important;
}
#l3bh-intro{
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    overflow: hidden;
    transition: opacity 0.4s ease;
}

/* الصورة */
.l3bh-intro-content img{
    width: 280px;
    position: relative;
    z-index: 2;
    filter: contrast(1.1) saturate(1.1);
}

/* طبقة تدرج لوني خفيف */
#l3bh-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        135deg,
        rgba(22,163,255,0.15),
        rgba(255,79,168,0.15)
    );
    mix-blend-mode: overlay;
    z-index:1;
}

/* Glow متحرك خفيف */
#l3bh-intro::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background: radial-gradient(
        circle,
        rgba(22,163,255,0.25),
        transparent 60%
    );
    animation: introGlow 6s infinite alternate ease-in-out;
    z-index:1;
}

@keyframes introGlow{
    0%{ transform: translate(-20%, -20%); }
    100%{ transform: translate(20%, 20%); }
}

/* زر التخطي */
#l3bh-skip{
    position:absolute;
    top:20px;
    right:20px;
    background: linear-gradient(45deg,#16a3ff,#ff4fa8);
    border:none;
    padding:10px 22px;
    border-radius:30px;
    color:white;
    font-size:14px;
    cursor:pointer;
    opacity:0.7;
    z-index:3;
}

#l3bh-skip:enabled{
    opacity:1;
}
#l3bh-intro img{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}
#l3bh-intro{
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  transition: 0.5s;
  overflow: hidden;
}

/* الخلفية المتحركة من الهوية */
.l3bh-intro-bg{
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(22,163,255,0.35),
    rgba(255,79,168,0.35),
    transparent 60%
  );
  animation: glowMove 6s linear infinite;
}

/* حركة خفيفة */
@keyframes glowMove{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}

.l3bh-intro-content{
  position: relative;
  z-index: 2;
}

#l3bh-intro img{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: contain;
  box-shadow:
    0 0 25px #16a3ff,
    0 0 35px #ff4fa8;
}

/* زر التخطي */
#l3bh-skip{
  position: absolute;
  top: 30px;
  right: 30px;
  background: linear-gradient(45deg,#16a3ff,#ff4fa8);
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
}

#l3bh-skip:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
section.s-block.s-block--slider-with-bg,
.s-block--slider-with-bg,
.s-slider-with-bg {

  background: none !important;
  background-image: none !important;

}
/* ===== Footer Identity Gradient Text ===== */

footer,
.s-footer{

    color: #fff !important;
}

/* العناوين داخل الفوتر */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.s-footer h1,
.s-footer h2,
.s-footer h3,
.s-footer h4,
.s-footer h5,
.s-footer h6{

    background: linear-gradient(45deg,#16A3FF,#FF4FA8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* الروابط وأرقام التواصل */
footer a,
footer p,
footer span,
.s-footer a,
.s-footer p,
.s-footer span{

    background: linear-gradient(45deg,#16A3FF,#FF4FA8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
footer a,
footer p{

    background: linear-gradient(45deg,#16A3FF,#FF4FA8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 8px rgba(22,163,255,0.3),
        0 0 8px rgba(255,79,168,0.3);
}

/* مربع الأيقونة */
.w-16.h-16.rounded-xl{
  background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;
}

/* لو فيه bg-accent من القالب */
.bg-accent{
  background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;
}
/* ===== Login Modal Identity Style ===== */

.s-modal-body{

    background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;
    color: #ffffff !important;
    border-radius: 20px !important;

    box-shadow:
        0 0 30px rgba(22,163,255,0.35),
        0 0 30px rgba(255,79,168,0.35);

}
/* إزالة الخلفية والمربع */
.s-modal-close{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* جعل الأيقونة بيضاء */
.s-modal-close svg,
.s-modal-close i{
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* ===== Cart Icon Identity Style ===== */

#s-cart-icon{

    width:40px;
    height:40px;

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

    border-radius:50%;

    background: linear-gradient(135deg,#16A3FF,#FF4FA8);

    box-shadow:
        0 0 10px rgba(22,163,255,0.4),
        0 0 15px rgba(255,79,168,0.4);

}

/* لون الأيقونة أبيض */
#s-cart-icon svg,
#s-cart-icon i{

    color:#ffffff !important;
    fill:#ffffff !important;
}
/* ===== Empty Cart Icon Identity Style ===== */

.siicon-shopping-bag{

    width:120px;
    height:120px;

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

    border-radius:50%;

    background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;

    color:#ffffff !important;
    font-size:48px !important;

    box-shadow:
        0 0 25px rgba(22,163,255,0.4),
        0 0 30px rgba(255,79,168,0.4);
}
/* ===== Animated Border Full Header ===== */

div.flex.items-center.justify-between{

    position: relative;
    border-radius: 14px; /* عدل حسب انحناء الهيدر */
    padding: 8px 16px;

    border: 4px solid transparent;

    background:
        linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)) padding-box,
        linear-gradient(
            90deg,
            #16A3FF,
            #FF4FA8,
            #16A3FF
        ) border-box;

    background-size: 300% 100%;
    animation: headerBorderMove 6s linear infinite;
}

@keyframes headerBorderMove{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 300% 50%; }
}
/* جعل حاوية اللوجو دائرية */
a.navbar-brand{
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* ضبط الصورة داخلها */
a.navbar-brand img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* حسابات الانستا - تكبير + توسيط + تدرج هوية */

h3.text-lg.font-bold.leading-12{

    font-size: 32px !important;
    text-align: center !important;
    width: 100%;

    background: linear-gradient(
        90deg,
        #16A3FF,
        #FF4FA8
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    letter-spacing: 1px;
}
/* زر عرض الكل - هوية المتجر */

a.s-slider-block__display-all{

    background: linear-gradient(
        45deg,
        #16A3FF,
        #FF4FA8
    ) !important;

    color: #fff !important;
    border: none !important;
    border-radius: 999px;
    
    transition: 0.3s;
}

/* تأثير hover احترافي */
a.s-slider-block__display-all:hover{
    transform: scale(1.05);
    box-shadow:
        0 0 15px #16A3FF,
        0 0 25px #FF4FA8;
}
/* ستروك متحرك حول كرت المنتج */

.s-products-slider-card{

    position: relative;
    border-radius: 18px;
    padding: 3px;

    background:
        linear-gradient(#000,#000) padding-box,
        linear-gradient(
            90deg,
            #16A3FF,
            #FF4FA8,
            #16A3FF
        ) border-box;

    border: 3px solid transparent;
    background-size: 300% 100%;
    animation: productBorderMove 6s linear infinite;
}

@keyframes productBorderMove{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 300% 50%; }
}
/* تصغير أيقونات كرت المنتج */

.s-product-card-entry svg,
.s-product-card-entry i{
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}
/* مسافة بين كروت المنتجات */

.s-products-slider-card{
    margin: 0 12px !important;
}
/* فوتر كرت المنتج */

.s-product-card-content-footer{

    background: #000 !important;
    padding: 6px;
    border-radius: 12px;
}

/* السعر */

.s-product-card-content-footer .price,
.s-product-card-content-footer .s-product-card-price{

    font-size: 18px !important;
    font-weight: bold;

    background: linear-gradient(45deg,#16A3FF,#FF4FA8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* زر إضافة للسلة */

.s-product-card-content-footer button{

    background: linear-gradient(45deg,#16A3FF,#FF4FA8) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px;
}

/* الأيقونة خلف الزر */

.s-product-card-content-footer button svg,
.s-product-card-content-footer button i{

    background: white;
    padding: 6px;
    border-radius: 6px;
}
/* كرت المنتج */

.s-product-card{

    position: relative;
    border-radius: 18px;
    padding: 2px;

    background:
        linear-gradient(#000,#000) padding-box,
        linear-gradient(
            90deg,
            #16A3FF,
            #FF4FA8,
            #16A3FF
        ) border-box;

    border: 2px solid transparent;

    background-size: 300% 100%;
    animation: cardBorderMove 6s linear infinite;
}

/* حركة الحواف */

@keyframes cardBorderMove{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
}
/* ايقونة البحث */

.s-search-input + .s-search-icon svg{
    
    filter:
    drop-shadow(0 0 2px #16A3FF)
    drop-shadow(0 0 4px #FF4FA8);

    color:#16A3FF;
}

/* تأثير عند التركيز */

.s-search-input:focus + .s-search-icon svg{

    color:#FF4FA8;

    filter:
    drop-shadow(0 0 4px #16A3FF)
    drop-shadow(0 0 8px #FF4FA8);
}
/* ايقونات السوشيال */

a[href*="instagram"],
a[href*="tiktok"]{

background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;

border-radius:12px;

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

transition:0.3s;

}

/* لون الايقونة */

a[href*="instagram"] svg,
a[href*="tiktok"] svg{

color:white !important;
fill:white !important;

}

/* تأثير عند المرور */

a[href*="instagram"]:hover,
a[href*="tiktok"]:hover{

transform:scale(1.1);

box-shadow:
0 0 10px #16A3FF,
0 0 20px #FF4FA8;

}
/* زر اطلب الحين */

a.w-full.sm\:w-auto.px-8.py-4.font-bold.rounded-xl{

background: linear-gradient(135deg,#16A3FF,#FF4FA8) !important;

color:#fff !important;

border:none !important;

box-shadow:
0 0 10px rgba(22,163,255,0.6),
0 0 20px rgba(255,79,168,0.5);

transition:0.3s;

}

/* تأثير عند المرور */

a.w-full.sm\:w-auto.px-8.py-4.font-bold.rounded-xl:hover{

transform:scale(1.05);

box-shadow:
0 0 15px #16A3FF,
0 0 30px #FF4FA8;

}
/* زر انشاء يمكن تجربتك */

a.w-full.sm\:w-auto.px-8.py-4.font-medium.rounded-xl{

background: linear-gradient(135deg,#FF4FA8,#16A3FF) !important;

color:#fff !important;

border:none !important;

box-shadow:
0 0 10px rgba(255,79,168,0.6),
0 0 20px rgba(22,163,255,0.5);

transition:0.3s;

}

/* تأثير hover */

a.w-full.sm\:w-auto.px-8.py-4.font-medium.rounded-xl:hover{

transform:scale(1.05);

background: linear-gradient(135deg,#16A3FF,#FF4FA8);

box-shadow:
0 0 15px #FF4FA8,
0 0 30px #16A3FF;

}
.s-user-menu-dropdown-list {
background-color: #111827 !important;
color: white;
}
#topLoader{

position:fixed;
top:0;
left:0;

height:3px;
width:0;

background:linear-gradient(90deg,#16A3FF,#FF4FA8);

z-index:9999;

transition:0.7s;

}
body{
transition:0.3s;
}
span.inline-block.px-4.py-1\.5.rounded-full.text-sm.font-bold.mb-4{

font-size:16px !important;

padding:8px 20px !important;

border-radius:30px !important;

background:linear-gradient(135deg,#16A3FF,#FF4FA8) !important;

color:white !important;

font-weight:700;

box-shadow:
0 0 8px rgba(22,163,255,0.5),
0 0 15px rgba(255,79,168,0.4);

}
ul.main-menu.mm-spn--open::before,
ul.main-menu.mm-spn--open::after{
display:none !important;
}

ul.main-menu.mm-spn--open{
background:transparent !important;
}
/* إزالة أي تأثير متحرك */
.border-t.border-b.border-gray-200 {
background: transparent !important;
animation: none !important;
}

/* حدود فقط */
.border-t.border-b.border-gray-200 {
border: 2px solid #ff4ecd !important; /* لون الهوية */
border-radius: 12px;
box-shadow: none !important;
}

/* أزرار الزيادة والنقصان */
.border-t.border-b.border-gray-200 button {
background: transparent !important;
color: #ffffff !important;
border: none !important;
font-weight: bold;
font-size: 18px;
}

/* الرقم */
.border-t.border-b.border-gray-200 span,
.border-t.border-b.border-gray-200 input {
color: #ffffff !important;
background: transparent !important;
text-align: center;
font-weight: bold;
}
/* إزالة التدرج والحركة من الهيدر */
.flex.items-center.justify-between{
background: transparent !important;
animation: none !important;
background-image: none !important;
}

/* جعل الهيدر حدود فقط */
.flex.items-center.justify-between{
border: 2px solid #ff4ecd !important; /* لون الهوية */
border-radius: 14px;
box-shadow: none !important;
}
.inline-flex.items-center.gap-2.px-4.py-2.rounded-full.backdrop-blur-md.mb-8{
display: none !important;
}
/* إخفاء أي أيقونة خطوط في الهيدر */
svg[class*="menu"],
i[class*="menu"],
button[class*="menu"]{
display:none !important;
}
.absolute.inset-0.z-20.rounded-3xl{
background: transparent !important;
}
.backdrop-blur-sm.border.border-white\/10{
position: relative;
border: none !important;
}

.backdrop-blur-sm.border.border-white\/10::before{
content: "";
position: absolute;
inset: -2px;
border-radius: 20px;


h3.text-lg.font-bold.leading-12{
display: inline-block;
padding: 6px 16px;

border: 2px solid transparent;
border-radius: 10px;

background-image: linear-gradient(#000,#000),
linear-gradient(90deg,#00eaff,#ff2bd6);

background-origin: border-box;
background-clip: padding-box, border-box;

width: fit-content;
}
h3.text-lg.font-bold.leading-12{
display: table;
margin: 0 auto; /* يخليه في النص */

padding: 6px 18px;

border: 2px solid transparent;
border-radius: 12px;

background-image: linear-gradient(#000,#000),
linear-gradient(90deg,#00eaff,#ff2bd6);

background-origin: border-box;
background-clip: padding-box, border-box;

width: fit-content;
text-align: center;
}
h3.text-lg.font-bold.leading-12{
display: table;
margin: 0 auto;

padding: 6px 18px;

border: 2px solid transparent;
border-radius: 12px;

background-image: linear-gradient(#000,#000),
linear-gradient(90deg,#00eaff,#ff2bd6);

background-origin: border-box;
background-clip: padding-box, border-box;

width: fit-content;
text-align: center;
}
.backdrop-blur-sm.border.border-white\/10.rounded-2xl.p-8{
background:#000;
border-radius:16px;
position:relative;
border:none;
}
background: linear-gradient(
90deg,
#00eaff,
#ff2bd6,
#00eaff
);

background-size: 300% 300%;
animation: neonBorder 12s linear infinite;

z-index: -1;
}

@keyframes neonBorder{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
.w-16.h-16.rounded-xl{
background: #000000 !important;
}
.p-6.rounded-2xl.border.border-white\/5{
background:#000;
border:2px solid transparent;
border-radius:16px;

background-image: linear-gradient(#000,#000),
linear-gradient(90deg,#00eaff,#ff2bd6);

background-origin:border-box;
background-clip:padding-box,border-box;
}
h3.text-lg.font-bold.leading-12{
display:inline-block;
padding:8px 20px;
border:2px solid #ff2bd6;
border-radius:8px;
color:#fff;
}
.s-quantity-input-button{
width:40px;
height:40px;
border-radius:50%;
background: linear-gradient(135deg,#00eaff,#ff2bd6);
border:none;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:bold;
transition:0.3s;
}

.s-quantity-input-button:hover{
transform:scale(1.1);
box-shadow:0 0 10px #00eaff,0 0 10px #ff2bd6;
}
.s-quantity-input-container{
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.product-section h3{
color:#00eaff !important;
}
.transfer-box{
display:inline-block;
padding:10px 18px;
border-radius:12px;
background:linear-gradient(135deg,#00eaff,#ff2bd6);
color:white;
font-weight:bold;
font-size:14px;
text-align:center;
margin-left:10px;
box-shadow:0 0 10px #00eaff,0 0 10px #ff2bd6;
}
h2.text-2xl.md\:text-3xl.lg\:text-4xl.font-bold.mb-6{
display:none !important;
}
p.text-base.md\:text-lg.opacity-70.leading-relaxed{
color:#000000 !important;
opacity:1 !important;
}