:root{
--color-primary:#5B4960 !important;
--color-primary-dark:#4A3B4F !important;
}

body{
background:#FFFFFF !important;
}

/* الأزرار */
button,
.s-button-primary,
.btn-primary{
background:#5B4960 !important;
border-color:#5B4960 !important;
border-radius:30px !important;
color:#FFFFFF !important;
}

/* نصوص وأيقونات الأزرار */
button *,
.s-button-primary *,
.btn-primary *,
button i,
.s-button-primary i,
.btn-primary i,
button svg,
.s-button-primary svg,
.btn-primary svg{
color:#FFFFFF !important;
fill:#FFFFFF !important;
stroke:#FFFFFF !important;
}

/* تأثير عند المرور */
button:hover,
.s-button-primary:hover,
.btn-primary:hover{
background:#9A7AA6 !important;
border-color:#9A7AA6 !important;
transform:translateY(-2px);
transition:all .3s ease !important;
}

/* تأثير عند النقر */
button:active,
.s-button-primary:active,
.btn-primary:active{
transform:scale(.96);
transition:all .15s ease !important;
}

/* لون التخفيضات */
.badge,
.sale-badge{
background:#9A7AA6 !important;
}

/* لون وفري */
[class*="sale"],
[class*="discount"],
[class*="before"],
.p-s-product-card-content-subtitle{
color:#D62828 !important;
opacity:1 !important;
}

/* البطاقات */
.s-block,
.card,
.product{
background:#FFFFFF !important;
border-radius:20px !important;
box-shadow:0 8px 25px rgba(91,73,96,.08) !important;
}

/* الهيدر */
header,
.store-header{
background:#FFFFFF !important;
}

/* الفوتر */
footer{
background:#FFFFFF !important;
}

/* حقول الإدخال */
input,
select{
border-radius:15px !important;
}
/*==================================
   MODEL ALRAQI HELP CENTER v1.0
==================================*/

:root{
--primary:#5B4960;
--primary-dark:#46384a;
--white:#fff;
--shadow:0 20px 45px rgba(0,0,0,.18);
}

#help-center{

position:fixed;

right:22px;

bottom:22px;

z-index:999999;

font-family:inherit;

}

/*=====================
Main Button
======================*/

.help-btn{

width:66px;

height:66px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 10px 30px rgba(37,211,102,.35);

transition:.35s;

animation:helpPulse 2.4s infinite;

}

.help-btn:hover{

transform:scale(1.08);

}

.help-btn svg{

width:34px;

height:34px;

fill:#fff;

}

/*=====================
Popup
======================*/

.help-popup{

position:absolute;

bottom:84px;

right:0;

width:310px;

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

display:none;

animation:popupShow .3s;

}

.help-popup.active{

display:block;

}

/*=====================
Header
======================*/

.help-header{

background:linear-gradient(135deg,#5B4960,#78657c);

padding:22px;

color:#fff;

text-align:center;

}

.help-header h3{

margin:0;

font-size:20px;

}

.help-header p{

margin-top:8px;

font-size:14px;

opacity:.9;

}

/*=====================
Items
======================*/

.help-body{

padding:18px;

}

.help-item{

display:flex;

align-items:center;

gap:14px;

padding:15px;

margin-bottom:12px;

background:#F8F6F9;

border-radius:15px;

cursor:pointer;

transition:.3s;

}

.help-item:hover{

background:var(--primary);

color:#fff;

transform:translateX(-4px);

}

.help-item:last-child{

margin-bottom:0;

}

.help-icon{

width:46px;

height:46px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}

/*=====================
Welcome Bubble
======================*/

.help-bubble{

position:absolute;

bottom:86px;

right:78px;

background:#fff;

padding:18px;

border-radius:18px;

box-shadow:var(--shadow);

width:250px;

animation:bubbleShow .4s;

}

.help-bubble h4{

margin:0 0 8px;

font-size:18px;

color:var(--primary);

}

.help-bubble p{

margin:0;

line-height:1.8;

font-size:14px;

color:#666;

}

/*=====================
Back To Top
======================*/

.help-top{

margin-top:14px;

padding:14px;

text-align:center;

background:var(--primary);

color:#fff;

border-radius:14px;

cursor:pointer;

transition:.3s;

}

.help-top:hover{

background:var(--primary-dark);

}

/*=====================
Animation
======================*/

@keyframes helpPulse{

0%{transform:scale(1)}

50%{transform:scale(1.08)}

100%{transform:scale(1)}

}

@keyframes popupShow{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes bubbleShow{

from{

opacity:0;

transform:translateX(30px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/*=====================
Mobile
======================*/

@media(max-width:768px){

#help-center{

right:18px;

bottom:18px;

}

.help-popup{

width:290px;

}

.help-bubble{

display:none;

}

}