/* خلفية المتجر مع شكل سيارة */
body{
background:#050505;
font-family:Tajawal,sans-serif;
color:#fff;
position:relative;
}

/* صورة سيارة شفافة بالخلفية */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("https://images.unsplash.com/photo-1503376780353-7e6692767b70") center/cover no-repeat;
opacity:0.07;
z-index:-1;
}

/* خطوط رياضية */
body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent 40%,rgba(255,0,0,.15),transparent 60%);
z-index:-1;
}

/* كرت المنتج */
.product,.product-card{
background:linear-gradient(180deg,#111,#050505);
border-radius:18px;
border:1px solid rgba(255,0,0,.2);
overflow:hidden;
transition:.35s;
}

/* تأثير hover */
.product:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(255,0,0,.4);
border-color:#ff2e2e;
}

/* صورة المنتج */
.product img{
border-radius:14px;
transition:.4s;
}

.product:hover img{
transform:scale(1.1);
}

/* السعر */
.price{
color:#ff2e2e;
font-weight:bold;
font-size:18px;
}

/* زر الشراء */
button,
.btn-primary,
.salla-add-product-button{
background:linear-gradient(135deg,#ff0000,#ff4d4d);
border:none;
border-radius:14px;
color:#fff;
padding:12px;
font-weight:bold;
transition:.3s;
}

button:hover{
transform:scale(1.05);
box-shadow:0 10px 30px rgba(255,0,0,.5);
}
#archer-loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#050505;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:999999;
color:white;
font-family:Tajawal;
overflow:hidden;
}

/* جسم الشخصية */
.archer{
position:relative;
width:120px;
height:120px;
}

/* الرأس */
.head{
width:25px;
height:25px;
background:white;
border-radius:50%;
position:absolute;
top:0;
left:40px;
}

/* الجسم */
.body{
width:6px;
height:40px;
background:white;
position:absolute;
top:25px;
left:50px;
}

/* الذراع */
.arm{
width:40px;
height:4px;
background:white;
position:absolute;
top:40px;
left:50px;
transform-origin:left;
animation:pullBow 1.5s ease forwards;
}

/* القوس */
.bow{
width:40px;
height:80px;
border-left:4px solid white;
border-radius:50%;
position:absolute;
left:80px;
top:20px;
}

/* السهم */
.arrow{
position:absolute;
width:60px;
height:3px;
background:white;
top:40px;
left:60px;
opacity:0;
}

/* رأس السهم */
.arrow::after{
content:"";
position:absolute;
right:-8px;
top:-3px;
border-left:8px solid white;
border-top:4px solid transparent;
border-bottom:4px solid transparent;
}

/* حركة شد القوس */
@keyframes pullBow{
0%{transform:rotate(0deg);}
50%{transform:rotate(-35deg);}
100%{transform:rotate(0deg);}
}

/* حركة السهم */
@keyframes shoot{
0%{
transform:translateX(0);
opacity:1;
}
100%{
transform:translateX(900px);
opacity:0;
}
}

.loader-text{
margin-top:30px;
letter-spacing:5px;
color:#ff2e2e;
}
#spear-loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#050505;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
z-index:999999;
overflow:hidden;
color:white;
font-family:Tajawal;
}

/* الرمح */
.spear{
position:relative;
width:220px;
height:6px;
background:linear-gradient(90deg,#999,#fff,#999);
border-radius:4px;
transform-origin:left;
animation:prepare 1s ease;
}

/* رأس الرمح */
.spear::after{
content:"";
position:absolute;
right:-18px;
top:-7px;
border-left:18px solid #fff;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
}

/* حركة تجهيز الرمح */
@keyframes prepare{
0%{
transform:scaleX(.5) rotate(-10deg);
opacity:0;
}
100%{
transform:scaleX(1) rotate(0deg);
opacity:1;
}
}

/* حركة الرمي */
@keyframes throwSpear{
0%{
transform:translateX(0);
}
100%{
transform:translateX(1200px);
}
}

.loader-text{
margin-top:30px;
letter-spacing:5px;
color:#ff2e2e;
}