/* ============================================
   COMPLETE CUSTOM CSS FOR SELIA THEME
   Mohammed - Updated March 2026
   ============================================ */

/* الخلفية للصفحة الرئيسية فقط (Selia = body.index) */  /*edit by shady*/
body.index .app-inner {
  background-image: url('https://i.postimg.cc/sxb445hd/freepik-5136.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* خلفية كل الصفحات ما عدا الرئيسية */   /*edit by shady*/
body:not(.index) .app-inner.bg-storeBG {
  background: url('https://i.postimg.cc/QM2wVrHJ/freepik-ultra-realistic-ramadan-night-sky-background-deep-5135.png') center center / cover no-repeat fixed !important;
}

/* إزالة اللون الافتراضي للخلفية في الصفحات الداخلية */
body:not(.index) .bg-storeBG {
  background-color: transparent !important;
}






/* ============================================
   COMPLETE CUSTOM CSS FOR SELIA THEME
   Mohammed - Updated March 2026
   ============================================ */

/* الخلفية للصفحة الرئيسية فقط (Selia = body.index) */  /*edit by shady*/
body.index .app-inner {
  background-image: url('https://i.postimg.cc/sxb445hd/freepik-5136.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* خلفية كل الصفحات ما عدا الرئيسية */   /*edit by shady*/
body:not(.index) .app-inner.bg-storeBG {
  background: url('https://i.postimg.cc/QM2wVrHJ/freepik-ultra-realistic-ramadan-night-sky-background-deep-5135.png') center center / cover no-repeat fixed !important;
}

/* إزالة اللون الافتراضي للخلفية في الصفحات الداخلية */
body:not(.index) .bg-storeBG {
  background-color: transparent !important;
}

/*-------------------------------------------------------------------------------------*/


/* ===== Selia Product Card Styling (Homepage & Lists) ===== */
custom-salla-product-card,
.product-card {

  transform: scale(0.9); /* تصغير الكارت كله */
  transform-origin: center;
  
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px);
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  /* transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important; */
  /* overflow: hidden !important; */
}

custom-salla-product-card:hover,
.product-card:hover {
  /* transform: translateY(-8px) !important; */
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important; */
  border-color: rgba(79, 209, 197, 0.4) !important;
}


/* Product card image */
custom-salla-product-card img.main-image,
.product-card__image img {
  
  border-radius: 18px 18px 0 0 !important;
  /* transition: transform .4s ease, opacity .4s ease !important; */
}


custom-salla-product-card:hover img.main-image,
.product-card:hover .product-card__image img {
  transform: scale(1.05) !important;
  opacity: 0.92 !important;

  
}



/* تكبير مساحة الصورة داخل الكارت */
.product-card__image {
  width: 100%;
  height: 200px !important;
  overflow: hidden;
}

/* جعل الصورة تملأ المساحة */
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* تأثير اللمعة الزجاجية على صورة المنتج */
.product-card__image {
  position: relative;
  overflow: hidden;
}

/* طبقة اللمعة */
.product-card__image::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.7s ease;
}

/* حركة اللمعة عند hover */
.product-card:hover .product-card__image::after {
  left: 120%;
}



/*-------------------------------------------------------------------------------------*/






/* Product card title */
custom-salla-product-card h3,
custom-salla-product-card h3 a,
custom-salla-product-card a[title],
.product-card__title a {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #ffffff !important;
}

/* Product card price */
.total-price,
custom-salla-product-card .total-price,
custom-salla-product-card .price,
custom-salla-product-card .product-price,
custom-salla-product-card [class*="price"] {
  color: #4FD1C5 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* Add to cart button in product cards */
custom-salla-product-card .s-button,
custom-salla-product-card button,
.product-card__normal-cart__btn button,
.product-card__enhnaced-mini-cart__btn button {
  background: linear-gradient(135deg, #0FA3A3, #4FD1C5) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

custom-salla-product-card .s-button:hover,
custom-salla-product-card button:hover,
.product-card__normal-cart__btn button:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 10px 20px rgba(79, 209, 197, 0.4) !important;
}

/* Remove outline button borders if unwanted */
.s-button-outline {
  border: none !important;
}

/* =========================
   PRODUCT PAGE (Selia)
   Purple/Gold + Glass Cards
   ========================= */
body .product,
body .product-details,
body .product__info,
body .product-content,
body .product-form,
body .product-section {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important;
}

/* Gold/purple overlay effect on product page cards */
body .product,
body .product-details,
body .product__info,
body .product-content,
body .product-form {
  position: relative;
  overflow: hidden;
}

body .product::before,
body .product-details::before,
body .product__info::before,
body .product-content::before,
body .product-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 400px at 85% 20%, rgba(214, 178, 94, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(59, 42, 82, 0.55), rgba(90, 59, 124, 0.25));
  pointer-events: none;
  z-index: 0;
}

body .product *,
body .product-details *,
body .product__info *,
body .product-content *,
body .product-form * {
  position: relative;
  z-index: 1;
}

/* Product page title & price */
body .product h1,
body .product-details h1,
body .product__title,
body .product-title {
  color: #ffffff !important;
  font-weight: 900 !important;
}

body .total-price,
body .price,
body .product-price,
body [class*="price"] {
  color: #D6B25E !important; /* golden */
  font-weight: 900 !important;
}

/* Add to cart / Buy now button on product page */
body .product-form button,
body salla-add-product-button button,
body salla-button button,
body button[type="submit"],
body .add-to-cart button,
body .buy-now button,
body .s-button {
  background: linear-gradient(135deg, #0FA3A3, #4FD1C5) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(79, 209, 197, 0.38) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}

body .product-form button:hover,
body salla-add-product-button button:hover,
body salla-button button:hover,
body button[type="submit"]:hover,
body .s-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(79, 209, 197, 0.48) !important;
  filter: brightness(1.05) !important;
}

/* Product page text color */
body .product p,
body .product-details p,
body .product__info p,
body .product-content p,
body .product-form p,
body .product li {
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.9 !important;
}

/* Badges / tags on product page */
body .badge,
body [class*="badge"],
body .tag,
body [class*="tag"] {
  background: rgba(214, 178, 94, 0.18) !important;
  border: 1px solid rgba(214, 178, 94, 0.35) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
}

/* Hide reviews tab on product page */
.more-info-tabs__nav-link[data-id="reviews"] {
  display: none !important;
}

/* Quick buy button styling */
salla-add-product-button {
  background: #fff !important;
  border-radius: 12px !important;
}

salla-add-product-button * {
  color: #154264 !important;
}

/* ============================================
   STORE REVIEWS SECTION (Bottom of homepage)
   ONLY inner review cards → white + golden border
   ============================================ */

/* Each individual review card (the ones that were blue) */
section.s-block.s-block--custom-reviews .review > div {
  background-color: white !important;             /* pure white background */
  border: 1px solid #D6B25E !important;           /* small golden border */
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Fix text color inside review cards (was white → now visible) */
section.s-block.s-block--custom-reviews .review p {
  color: #333333 !important;                      /* dark gray body text */
}

section.s-block.s-block--custom-reviews .review h4 {
  color: #154264 !important;                      /* theme primary for names */
}

/* Quote icon to match gold theme */
section.s-block.s-block--custom-reviews .sicon-quote {
  color: #D6B25E !important;
  opacity: 0.3 !important;
}

/* Optional: slight padding tweak inside cards */
section.s-block.s-block--custom-reviews .review > div {
  padding: 1.6rem !important;
}
/* إزالة الخلفية الذهبية من صندوق الفوتر */

footer .container div{
background: transparent !important;
border: none !important;
}

/* إذا كان الصندوق المحدد */

footer .bg-primary,
footer .bg-secondary{
background: transparent !important;
border: none !important;
}



/*whats app icon animation*/
/* WhatsApp button base */

a[href*="wa.me"]{
  position: relative;
  transition: transform 0.25s ease;
}

/* hover scale */

a[href*="wa.me"]:hover{
  transform: scale(1.08);
}

/* notification badge */

a[href*="wa.me"]::after{
  content: "1";
  position: absolute;
  top: -5px;
  right: -5px;

  width: 20px;
  height: 20px;

  background: #ff3b30;
  color: white;

  font-size: 12px;
  font-weight: bold;

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

  border-radius: 50%;

  animation: badgeBounce 1.5s infinite;
}

/* badge animation */

@keyframes badgeBounce{

  0%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(-4px);
  }

  100%{
    transform: translateY(0);
  }

}














/* =========================
   PRODUCT PAGE (Selia)
   Purple/Gold + Glass Cards
   ========================= */
body .product,
body .product-details,
body .product__info,
body .product-content,
body .product-form,
body .product-section {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.30) !important;
}

/* Gold/purple overlay effect on product page cards */
body .product,
body .product-details,
body .product__info,
body .product-content,
body .product-form {
  position: relative;
  overflow: hidden;
}

body .product::before,
body .product-details::before,
body .product__info::before,
body .product-content::before,
body .product-form::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 400px at 85% 20%, rgba(214, 178, 94, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(59, 42, 82, 0.55), rgba(90, 59, 124, 0.25));
  pointer-events: none;
  z-index: 0;
}

body .product *,
body .product-details *,
body .product__info *,
body .product-content *,
body .product-form * {
  position: relative;
  z-index: 1;
}

/* Product page title & price */
body .product h1,
body .product-details h1,
body .product__title,
body .product-title {
  color: #ffffff !important;
  font-weight: 900 !important;
}

body .total-price,
body .price,
body .product-price,
body [class*="price"] {
  color: #D6B25E !important; /* golden */
  font-weight: 900 !important;
}

/* Add to cart / Buy now button on product page */
body .product-form button,
body salla-add-product-button button,
body salla-button button,
body button[type="submit"],
body .add-to-cart button,
body .buy-now button,
body .s-button {
  background: linear-gradient(135deg, #0FA3A3, #4FD1C5) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 28px rgba(79, 209, 197, 0.38) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}

body .product-form button:hover,
body salla-add-product-button button:hover,
body salla-button button:hover,
body button[type="submit"]:hover,
body .s-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(79, 209, 197, 0.48) !important;
  filter: brightness(1.05) !important;
}

/* Product page text color */
body .product p,
body .product-details p,
body .product__info p,
body .product-content p,
body .product-form p,
body .product li {
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.9 !important;
}

/* Badges / tags on product page */
body .badge,
body [class*="badge"],
body .tag,
body [class*="tag"] {
  background: rgba(214, 178, 94, 0.18) !important;
  border: 1px solid rgba(214, 178, 94, 0.35) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
}

/* Hide reviews tab on product page */
.more-info-tabs__nav-link[data-id="reviews"] {
  display: none !important;
}

/* Quick buy button styling */
salla-add-product-button {
  background: #fff !important;
  border-radius: 12px !important;
}

salla-add-product-button * {
  color: #154264 !important;
}

/* ============================================
   STORE REVIEWS SECTION (Bottom of homepage)
   ONLY inner review cards → white + golden border
   ============================================ */

/* Each individual review card (the ones that were blue) */
section.s-block.s-block--custom-reviews .review > div {
  background-color: white !important;             /* pure white background */
  border: 1px solid #D6B25E !important;           /* small golden border */
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Fix text color inside review cards (was white → now visible) */
section.s-block.s-block--custom-reviews .review p {
  color: #333333 !important;                      /* dark gray body text */
}

section.s-block.s-block--custom-reviews .review h4 {
  color: #154264 !important;                      /* theme primary for names */
}

/* Quote icon to match gold theme */
section.s-block.s-block--custom-reviews .sicon-quote {
  color: #D6B25E !important;
  opacity: 0.3 !important;
}

/* Optional: slight padding tweak inside cards */
section.s-block.s-block--custom-reviews .review > div {
  padding: 1.6rem !important;
}
/* إزالة الخلفية الذهبية من صندوق الفوتر */

footer .container div{
background: transparent !important;
border: none !important;
}

/* إذا كان الصندوق المحدد */

footer .bg-primary,
footer .bg-secondary{
background: transparent !important;
border: none !important;
}



/*whats app icon animation*/
/* WhatsApp button base */

a[href*="wa.me"]{
  position: relative;
  transition: transform 0.25s ease;
}

/* hover scale */

a[href*="wa.me"]:hover{
  transform: scale(1.08);
}

/* notification badge */

a[href*="wa.me"]::after{
  content: "1";
  position: absolute;
  top: -5px;
  right: -5px;

  width: 20px;
  height: 20px;

  background: #ff3b30;
  color: white;

  font-size: 12px;
  font-weight: bold;

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

  border-radius: 50%;

  animation: badgeBounce 1.5s infinite;
}

/* badge animation */

@keyframes badgeBounce{

  0%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(-4px);
  }

  100%{
    transform: translateY(0);
  }

}



.reviews-loop {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

.reviews-loop::-webkit-scrollbar {
  display: none;
}

.reviews-loop {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.reviews-loop .swiper-wrapper,
.reviews-loop .s-block__items-list,
.reviews-loop .reviews-wrapper,
.reviews-loop .swiper-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  width: max-content !important;
}

.reviews-loop .swiper-slide,
.reviews-loop .s-block__item,
.reviews-loop .review-item {
  flex: 0 0 auto !important;
  width: 260px !important;
  max-width: 260px !important;
}

@media (max-width: 768px) {
  .reviews-loop .swiper-slide,
  .reviews-loop .s-block__item,
  .reviews-loop .review-item {
    width: 220px !important;
    max-width: 220px !important;
  }
}