/* ==========================================
   هوية متجر رونق – البنفسجي والذهبي
   تنسيق صور المنتجات وأزرار إضافة للسلة
   ========================================== */

:root {
  /* ألوان هوية متجر رونق */
  --rawnaq-purple-dark: #5b2c6f;
  --rawnaq-purple-deep: #442052;
  --rawnaq-purple-light: #eee3f3;

  --rawnaq-gold: #c7a252;
  --rawnaq-gold-light: #ead9a5;
  --rawnaq-gold-soft: #f7f0dc;

  --rawnaq-white: #ffffff;
}

/* ==========================================
   إطار صور المنتجات
   ========================================== */

salla-product-card .s-product-card-image,
custom-salla-product-card .s-product-card-image,
.s-product-card-image,
.product-entry__image,
.product-card .product-image,
.product-card__image {
  position: relative !important;

  background:
    linear-gradient(
      145deg,
      var(--rawnaq-white),
      var(--rawnaq-gold-soft)
    ) !important;

  border: 2px solid var(--rawnaq-gold-light) !important;
  border-radius: 20px !important;
  padding: 7px !important;
  overflow: hidden !important;

  box-shadow:
    0 7px 22px rgba(91, 44, 111, 0.10),
    0 0 0 1px rgba(199, 162, 82, 0.12) !important;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease !important;
}

/* إطار داخلي بنفسجي ناعم */
salla-product-card .s-product-card-image::after,
custom-salla-product-card .s-product-card-image::after,
.product-entry__image::after,
.product-card .product-image::after,
.product-card__image::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;

  border: 1px solid rgba(91, 44, 111, 0.15) !important;
  border-radius: 15px !important;

  pointer-events: none !important;
  z-index: 2 !important;
}

/* تدوير أطراف صورة المنتج */
salla-product-card .s-product-card-image img,
custom-salla-product-card .s-product-card-image img,
.s-product-card-image img,
.product-entry__image img,
.product-card .product-image img,
.product-card__image img {
  border-radius: 14px !important;

  transition:
    transform 0.4s ease,
    filter 0.4s ease !important;
}

/* تأثير الإطار عند تمرير الماوس */
salla-product-card:hover .s-product-card-image,
custom-salla-product-card:hover .s-product-card-image,
.product-card:hover .product-image,
.product-entry:hover .product-entry__image {
  border-color: var(--rawnaq-gold) !important;

  box-shadow:
    0 12px 30px rgba(91, 44, 111, 0.18),
    0 0 0 4px rgba(199, 162, 82, 0.15) !important;

  transform: translateY(-4px);
}

/* تكبير بسيط للصورة عند المرور */
salla-product-card:hover .s-product-card-image img,
custom-salla-product-card:hover .s-product-card-image img,
.product-card:hover .product-image img,
.product-entry:hover .product-entry__image img {
  transform: scale(1.03);
}

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

salla-product-card salla-add-product-button button,
custom-salla-product-card salla-add-product-button button,
salla-add-product-button .s-button-primary,
.s-product-card-content .s-button-primary,
.product-entry__content .btn--add-to-cart,
.product-card .add-to-cart,
.product-form salla-add-product-button button,
.product-form .s-button-primary {
  background:
    linear-gradient(
      135deg,
      var(--rawnaq-purple-dark),
      var(--rawnaq-purple-deep)
    ) !important;

  background-color: var(--rawnaq-purple-dark) !important;
  color: var(--rawnaq-white) !important;

  border: 1px solid var(--rawnaq-gold) !important;
  border-radius: 13px !important;

  min-height: 44px !important;
  font-weight: 700 !important;

  box-shadow:
    0 6px 16px rgba(68, 32, 82, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* تأثير زر السلة عند تمرير الماوس */
salla-product-card salla-add-product-button button:hover,
custom-salla-product-card salla-add-product-button button:hover,
salla-add-product-button .s-button-primary:hover,
.s-product-card-content .s-button-primary:hover,
.product-entry__content .btn--add-to-cart:hover,
.product-card .add-to-cart:hover,
.product-form salla-add-product-button button:hover,
.product-form .s-button-primary:hover {
  background:
    linear-gradient(
      135deg,
      var(--rawnaq-gold),
      #b58c38
    ) !important;

  background-color: var(--rawnaq-gold) !important;
  color: var(--rawnaq-purple-deep) !important;

  border-color: var(--rawnaq-purple-dark) !important;

  transform: translateY(-2px);

  box-shadow:
    0 9px 22px rgba(91, 44, 111, 0.28),
    0 0 0 3px rgba(234, 217, 165, 0.30) !important;
}

/* ألوان أيقونة السلة */
salla-add-product-button button svg,
.s-button-primary svg,
.btn--add-to-cart svg,
.add-to-cart svg {
  color: currentColor !important;
  fill: currentColor !important;
}

/* ==========================================
   سعر المنتج بالبنفسجي
   ========================================== */

.s-product-card-price,
.s-product-card-sale-price,
.product-entry__price,
.product-card__price,
.product-price {
  color: var(--rawnaq-purple-dark) !important;
  font-weight: 800 !important;
}

/* ==========================================
   شارة الخصم بالذهبي والبنفسجي
   ========================================== */

.s-product-card-promotion-title,
.product-entry__discount,
.product-card .discount-badge,
.sale-badge {
  background: var(--rawnaq-gold) !important;
  color: var(--rawnaq-purple-deep) !important;

  border: 1px solid var(--rawnaq-purple-dark) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* ==========================================
   تحسين العرض على الجوال
   ========================================== */

@media screen and (max-width: 768px) {
  salla-product-card .s-product-card-image,
  custom-salla-product-card .s-product-card-image,
  .s-product-card-image,
  .product-entry__image,
  .product-card .product-image,
  .product-card__image {
    border-radius: 16px !important;
    padding: 5px !important;
  }

  salla-product-card salla-add-product-button button,
  custom-salla-product-card salla-add-product-button button,
  .s-product-card-content .s-button-primary,
  .product-entry__content .btn--add-to-cart,
  .product-card .add-to-cart {
    min-height: 42px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
}
/* ==========================================
   إطار بطاقة المنتج كاملة – متجر رونق
   ========================================== */

salla-product-card,
custom-salla-product-card,
.s-product-card-entry,
.product-entry,
.product-card {
  background: #ffffff !important;
  border: 1.5px solid #ead9a5 !important;
  border-radius: 20px !important;
  padding: 10px !important;
  overflow: hidden !important;

  box-shadow:
    0 6px 20px rgba(91, 44, 111, 0.08),
    0 0 0 1px rgba(199, 162, 82, 0.08) !important;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* تأثير البطاقة عند تمرير الماوس */
salla-product-card:hover,
custom-salla-product-card:hover,
.s-product-card-entry:hover,
.product-entry:hover,
.product-card:hover {
  border-color: #c7a252 !important;

  box-shadow:
    0 12px 30px rgba(91, 44, 111, 0.16),
    0 0 0 3px rgba(234, 217, 165, 0.28) !important;

  transform: translateY(-5px);
}

/* تحسين المسافات داخل البطاقة */
.s-product-card-content,
.product-entry__content,
.product-card__content {
  padding: 12px 8px 8px !important;
}

/* تحسين عرض البطاقة على الجوال */
@media screen and (max-width: 768px) {
  salla-product-card,
  custom-salla-product-card,
  .s-product-card-entry,
  .product-entry,
  .product-card {
    border-radius: 16px !important;
    padding: 7px !important;
  }
}

/* =========================================
   قسم عرض المنتج والعداد – متجر رونق
   الهوية: البنفسجي والذهبي
   ========================================= */

.rawnaq-offer-countdown {
  --rawnaq-purple: #55245f;
  --rawnaq-purple-dark: #3d1247;
  --rawnaq-purple-light: #f3eaf6;

  --rawnaq-gold: #c9a24f;
  --rawnaq-gold-light: #ead7a2;
  --rawnaq-gold-soft: #fbf7eb;

  position: relative !important;
  padding: 30px 15px !important;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(201, 162, 79, 0.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcf9fd 100%
    ) !important;

  overflow: hidden !important;
}

/* زخرفة بنفسجية خفيفة في الخلفية */
.rawnaq-offer-countdown::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  inset-inline-start: -100px;
  bottom: -120px;

  background: rgba(85, 36, 95, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

/* =========================================
   البطاقة الرئيسية للعرض
   ========================================= */

.rawnaq-offer-countdown .container > div:first-child {
  position: relative !important;
  z-index: 1 !important;

  background: rgba(255, 255, 255, 0.97) !important;

  border: 1px solid var(--rawnaq-gold-light) !important;
  border-radius: 26px !important;

  padding: 18px !important;
  overflow: hidden !important;

  box-shadow:
    0 18px 45px rgba(61, 18, 71, 0.10),
    0 0 0 4px rgba(234, 215, 162, 0.08) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

/* خط ذهبي فاخر أعلى البطاقة */
.rawnaq-offer-countdown .container > div:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 12%;
  height: 3px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--rawnaq-gold),
    transparent
  );

  border-radius: 50px;
}

/* حركة خفيفة على الكمبيوتر */
.rawnaq-offer-countdown .container > div:first-child:hover {
  transform: translateY(-4px);

  border-color: var(--rawnaq-gold) !important;

  box-shadow:
    0 24px 55px rgba(61, 18, 71, 0.15),
    0 0 0 4px rgba(201, 162, 79, 0.10) !important;
}


/* ==========================================
   رونق الجميلات - تحسين عرض التصنيفات
========================================== */

/* المسافات بين البطاقات */
.categories-grid,
.home-categories,
.category-slider{
    gap:18px;
}

/* البطاقة */
.categories-grid .category-item,
.home-categories .category-item,
.category-slider .category-item{

    border-radius:20px;
    overflow:hidden;
    background:#fff;
    transition:.35s ease;
    transform:translateY(0);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    position:relative;
}

/* الصورة */
.category-item img{
    width:100%;
    height:175px;
    object-fit:cover;
    transition:transform .45s ease;
}

/* عنوان التصنيف */
.category-item h3,
.category-item .title{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin:0;
}

/* تدرج فوق الصورة لإظهار النص */
.category-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.05));
    transition:.35s;
}

/* التأثير عند مرور الماوس */
.category-item:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 38px rgba(0,0,0,.18);

}

.category-item:hover img{

    transform:scale(1.08);

}

.category-item:hover::after{

    background:linear-gradient(to top,
    rgba(0,0,0,.40),
    rgba(0,0,0,0));

}

/* إطار ذهبي ناعم */
.category-item::before{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(198,158,79,.15);
    border-radius:20px;
    pointer-events:none;
    transition:.3s;
}

.category-item:hover::before{
    border-color:#c69e4f;
}

/* ===========================
   عدد البطاقات بكل صف
=========================== */

/* كمبيوتر */
@media(min-width:1200px){

.categories-grid{
grid-template-columns:repeat(6,1fr);
}

.category-slider .category-item,
.home-categories .category-item{
max-width:180px;
}

}

/* لابتوب */
@media(max-width:1199px){

.categories-grid{
grid-template-columns:repeat(5,1fr);
}

}

/* تابلت */
@media(max-width:992px){

.categories-grid{
grid-template-columns:repeat(4,1fr);
}

.category-item img{
height:155px;
}

}

/* جوال */
@media(max-width:768px){

.categories-grid{
grid-template-columns:repeat(2,1fr);
}

.category-item img{
height:130px;
}

.category-item h3,
.category-item .title{
font-size:13px;
}

}

/* =====================================================
   RAWNAQ PREMIUM CATEGORY DESIGN v2
   Luxury Glass Style
======================================================*/

:root{
    --lux-radius:22px;
    --lux-shadow:0 14px 35px rgba(91,44,111,.12);
    --lux-shadow-hover:0 25px 55px rgba(91,44,111,.22);
}

/* الشبكة */

.categories-grid{

display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:18px;

}

/* البطاقة */

.category-item{

position:relative;
overflow:hidden;

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

background:
linear-gradient(
180deg,
rgba(255,255,255,.95),
rgba(252,248,255,.88)
);

border:1px solid rgba(234,217,165,.6);

box-shadow:var(--lux-shadow);

transition:
transform .45s,
box-shadow .45s,
border-color .45s;

isolation:isolate;

}

/* الصورة */

.category-item img{

height:180px;
width:100%;
object-fit:cover;

transition:
transform .7s ease,
filter .7s ease;

}

/* التدرج */

.category-item::after{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.55),
rgba(0,0,0,.05),
transparent
);

transition:.45s;

}

/* انعكاس ضوء فاخر */

.category-item::before{

content:"";

position:absolute;

top:-120%;
left:-40%;

width:40%;
height:260%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:rotate(25deg);

transition:1s;

z-index:3;

}

/* اسم التصنيف */

.category-item h3,
.category-item .title{

position:absolute;

bottom:18px;
left:15px;
right:15px;

z-index:5;

color:#fff;

font-weight:700;

font-size:15px;

text-align:center;

text-shadow:
0 2px 10px rgba(0,0,0,.45);

}

/* Hover */

.category-item:hover{

transform:
translateY(-8px);

border-color:
var(--rawnaq-gold);

box-shadow:
var(--lux-shadow-hover);

}

.category-item:hover img{

transform:scale(1.08);

filter:
brightness(1.05)
contrast(1.04)
saturate(1.08);

}

.category-item:hover::before{

left:140%;

}

.category-item:hover::after{

background:
linear-gradient(
to top,
rgba(0,0,0,.35),
rgba(0,0,0,.03),
transparent
);

}

/* إطار ذهبي */

.category-item{

outline:1px solid rgba(199,162,82,.12);
outline-offset:-1px;

}

/* Responsive */

@media(max-width:1200px){

.categories-grid{
grid-template-columns:repeat(5,1fr);
}

}

@media(max-width:992px){

.categories-grid{
grid-template-columns:repeat(4,1fr);
}

.category-item img{
height:160px;
}

}

@media(max-width:768px){

.categories-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.category-item img{
height:135px;
}

}


====================================== */

/* ==========================
   Footer - Salla
   Black Text + Premium Style
========================== */

footer,
.store-footer {
    background: #faf7f2 !important;
    color: #1f1f1f !important;
    padding-top: 45px !important;
    position: relative;
}

/* الخط الذهبي أعلى الفوتر */
footer::before,
.store-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #c8a85b,
        #e5c978,
        #c8a85b,
        transparent
    );
}

/* عناوين الفوتر */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer .footer-title,
.store-footer h3,
.store-footer h4 {
    color: #171717 !important;
    font-weight: 700 !important;
}

/* جميع النصوص */
footer p,
footer span,
footer li,
footer div,
.store-footer p,
.store-footer span {
    color: #292929 !important;
}

/* الروابط */
footer a,
.store-footer a {
    color: #292929 !important;
    text-decoration: none !important;
    transition: 0.3s ease !important;
}

/* عند المرور على الرابط */
footer a:hover,
.store-footer a:hover {
    color: #6f468b !important;
}

/* الأيقونات */
footer svg,
footer i,
.store-footer svg,
.store-footer i {
    color: #6f468b !important;
}

/* الفاصل السفلي */
footer .copyright,
footer .footer-bottom,
.store-footer .copyright {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #555 !important;
}