/* =========================
   GENERAL COLORS
========================= */
:root {
  --saje-light: #C8D6A3;
  --saje-dark: #5F6F52;
  --saje-green: #0F3D2E;
}

/* Page background */
body {
  background-color: var(--saje-light);
  font-family: 'Helvetica Neue', sans-serif;
}

/* =========================
   HEADER
========================= */
header, .header {
  background-color: var(--saje-dark) !important;
  border-radius: 70px;
  margin: 5px;
  padding: 5px 5px;
}

header .container, 
header .header,
header .header-content,
header .card {
  background: transparent !important;
  border: none !important;
}

header *{
  background:  transparent !important;
}


.navbar-brand img {
    max-height: 100px; /* غيري الرقم حسب الحجم اللي تبغينه */
    width: auto;
}
.navbar-brand {
    display: flex;
    align-items: center;
}

/* Icons (menu + profile) */
header svg,
.header svg {
  color: #ffffff !important;
}



/* =========================
   FOOTER
========================= */
footer, footer {
  background-color: var(--saje-dark) !important;
  border-radius: 40px 40px 0 0;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  color: #ffffff !important;}
}
footer, .site-footer{
  background: transparent !important;}


footer .container, 
footer .footer,
footer .footer-content,
footer .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

footer *{
  background:  transparent !important;
}
/* =========================
   ROUNDED STYLE GLOBAL
========================= */
* {
  border-radius: 10px;
}


/* REMOVE WHITE BACKGROUND FROM ANY IMAGE CONTAINER */
img {
  background-color: transparent !important;
}

/* REMOVE BACKGROUND FROM ANY WRAPPER */
div[style*="background"],
section[style*="background"] {
  background-color: transparent !important;
}


/* =========================
   Product SECTION
========================= */

/* 1. تغيير خلفية الكارد */
.s-product-card-entry {
    background-color: var(--saje-dark) !important; 
    border-radius: 16px;
    padding: 12px;
}

/* 2. إضافة مسافة حول الصورة */
.s-product-card-image {
    background:var(--saje-dark) !important; /* يخلي الصورة واضحة */
    padding: 1px;
    border-radius: 12px;
}

/* 3. توسيط السعر */
.s-product-card-price {
    text-align: center;
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 18px;
}

/* 4. تعديل زر إضافة للسلة ليكون basket */
.s-product-card-content-footer .s-button-element {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 10px;
}


/* تكبير الأيقونة */
.s-product-card-content-footer .sicon-shopping-bag {
    font-size: 20px;
}

/* توسيط الزر */
.s-product-card-content-footer {
    justify-content: center;
}

/* تحسين النص داخل الكارد */
.s-product-card-content-title a,
.s-product-card-content-subtitle {
    color: #fff;
    justify-content: center;
    align-items: center;


}
/* 1. كل النصوص داخل الكارد أبيض */
.s-product-card-entry,
.s-product-card-entry * {
    color: #fff !important;
}


/* 3. حالة hover */
.s-product-card-content-footer .s-button-element:hover {
    background-color: #222 !important;
    border-color: #222 !important;
}
.s-button {
    background-color: var(--saje-light) !important;
    border-color:  var(--saje-light) !important;
    opacity: 1 !important; /* إزالة الشفافية */
    color:  var(--saje-green) !important;
}
/* 4. زر نفدت الكمية (disabled) */
.s-button-disabled {
    background-color: var(--saje-light) !important;
    border-color:  var(--saje-light) !important;
    opacity: 0.8 !important; /* إزالة الشفافية */
    color:  var(--saje-green) !important;
}

/* 5. أيقونة السلة تبقى بيضاء */
.s-product-card-content-footer .sicon-shopping-bag {
    color: #fff !important;
}

/* 6. النجوم (التقييم) تبقى واضحة */
.s-product-card-rating i {
    color: #ffd700 !important;
}