@import url('https://fonts.googleapis.com/css2?family=Kufam:ital@0;1&display=swap');
/* ألوان الشبكات */
:root{
  --ig: #E4405F;   /* Instagram */
  --sc: #FFFC00;   /* Snapchat */
  --tt: #25F4EE;   /* TikTok */
   --wa: #25D366;   /* WhatsApp */
   --ph: #007BFF;   /* Phone */
  --em: #FF5722;   /* Email */
}




/* ==============================
   2- إعدادات الصفحة الأساسية (Body)
============================== */
body {
    font-family: "Kufam" !important;/* خط النص */
}

body#app.index {
    background: white; /* خلفية بيضاء لصفحة الهوم */
}


/* ==============================
   3- إعدادات اللازي لود (Lazy Loading)
============================== */
.lazy__bg.lazy.entered.loaded {
    background-size: contain;      /* ملاءمة الخلفية بدون قص */
    background-repeat: no-repeat;  /* منع التكرار */
}


/* ==============================
   4- إعدادات الصور والبنرات
============================== */
a.banner-entry.square-photos {
    background: transparent; /* خلفية شفافة */
}

.banner-entry {
    transition:
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),       /* حركة تكبير/تصغير */
        background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* انتقال حجم الخلفية */
        background-position 0.6s ease;                             /* انتقال موضع الخلفية */
}

.banner-entry:hover {
    transform: scale(1.05) translateY(-10px); /* تكبير وتحريك لأعلى عند الهوفر */
}

img {
    background: transparent !important; /* إزالة خلفية الصور */
    border-radius: 0;                   /* إزالة الزوايا الدائرية */
}


/* ==============================
   5- إعدادات الهيدر والشعار
============================== */
.store-header .inner .container {
    max-width: 85%; /* تقليل عرض الكونتينر */
}

salla-slider.photos-slider .swiper-slide {
        margin:0;
        width: 100%;
        padding:0;
    }
    
salla-slider.photos-slider .swiper {
    padding: 0;
}
section.s-block.s-block--photos-slider {
    margin-top: 0;
}



/* ==============================
   6- إعدادات البانرات (Banners)
============================== */
.index section.s-block--fixed-banner:nth-of-type(1) > .container{
    max-width: 100%; /* تمديد الكونتينر بعرض الصفحة */
    padding: 0;      /* إزالة الهوامش الداخلية */
}
section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type {
    margin-top: 0;
}
@media (min-width: 1025px) {
  .index section.s-block--fixed-banner:nth-of-type(7) > .container {
    max-width: 40%;
  }
  

header .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.main-nav-container.fixed-pinned .navbar-brand img,
.navbar-brand img {
    max-height: 3.8rem; /* تحديد أقصى ارتفاع للشعار */
}

}
@media (max-width: 768px){
.index section.s-block--fixed-banner > .container{
    max-width: 100%; /* تمديد الكونتينر بعرض الصفحة */
    padding: 0;      /* إزالة الهوامش الداخلية */
}
}
/* ==============================
   8- المنتجات (Products)
============================== */
/* تأثير Hover Float Shadow على كروت المنتجات */
.s-product-card-entry {
  transition: transform 0.3s ease;
  position: relative;
  border: inherit; /* يثبت أي بوردر موجود أصلاً */
}

.s-product-card-entry:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0.35) 0%,
              rgba(0, 0, 0, 0) 80%);
  transition: transform 0.3s, opacity 0.3s;
}

.s-product-card-entry:hover {
  transform: translateY(-5px); /* يرفع الكارت */
  border: inherit; /* يفضل البوردر زي ما هو */
}

.s-product-card-entry:hover:before {
  opacity: 1;
  transform: translateY(5px); /* يطلع الظل */
}


.s-product-card-content-sub {
    text-align: center;
    display: inline-block;
}

.s-product-card-content-title a {
    font-size: 16px;     /* حجم النص */
    font-weight: bold;   /* نص سميك */
    text-align: center;
    display: block;
}


/* ==============================
   9- الأزرار (Buttons)
============================== */
.s-button-btn.s-button-primary-outline {
    background-color: #5B867F; /* لون الخلفية */
    color: white;             /* لون النص */
}

.s-button-btn.s-button-primary-outline:hover {
    background-color: #5B867F;
    color: white;
}


/* ==============================
   10- الفوتر (Footer)
============================== */
.store-footer__inner {
    background-color: #5B867F; /* خلفية الفوتر */
}

.store-footer a.flex h3 {
    font-size: 0;                                      /* إخفاء النص */
    background-image: url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/GYBVmb/LpfKYr7odwJTmXRh6K0WS1nPskoTUh0Cj2GQSuoc.jpg); /* شعار */
    background-size: contain;                          /* ملاءمة الحجم */
    background-repeat: no-repeat;                      /* منع التكرار */
    background-position: center;                       /* توسيط */
    display: block;
    width: 200px;
    height: 115px;
}
p.max-w-sm.leading-6.mb-6 {
    MARGIN: -22PX;
}
/* ==============================
   12- responsive
============================== */

@media(max-width:767px){
#photos-0-slider > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-ios.swiper-backface-hidden{
   padding:0;
}
.s-products-slider-card {
    max-width: 195px;
}
.main-nav-container {
    min-height: 56px;
}
  .s-button-element:not(:disabled):not([loading]) {
    font-size: 11px;
}
}



/* ==============================
   تجهيز الروابط كدوائر
============================== */
.s-social-list .s-social-link a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;   /* حجم الدائرة */
  height: 46px;
  border-radius: 50%;
  transition: box-shadow .35s ease, transform .35s ease;
}

/* الأيقونة نفسها ثابتة الحجم */
.s-social-list .s-social-link a .s-social-icon svg{
  width: 24px;
  height: 24px;
  color: currentColor;
  transition: color .35s ease, filter .35s ease;
}
.s-social-list .s-social-link a .s-social-icon svg path{
  fill: currentColor; /* مهم عشان يتلوّن */
}

/* الهالة باستخدام ::after */
.s-social-list .s-social-link a::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .35s ease, box-shadow .35s ease;
}

/* Instagram */
.s-social-list .s-social-link a[title="instagram"]:hover,
.s-social-list .s-social-link a[title="instagram"]:focus-visible{
  color: var(--ig);
  box-shadow: 0 0 15px var(--ig);
}
.s-social-list .s-social-link a[title="instagram"]:hover::after,
.s-social-list .s-social-link a[title="instagram"]:focus-visible::after{
  opacity: 1;
  box-shadow: 0 0 25px 8px color-mix(in srgb, var(--ig) 50%, transparent);
}

/* Snapchat */
.s-social-list .s-social-link a[title="snapchat"]:hover,
.s-social-list .s-social-link a[title="snapchat"]:focus-visible{
  color: var(--sc);
  box-shadow: 0 0 15px var(--sc);
}
.s-social-list .s-social-link a[title="snapchat"]:hover::after,
.s-social-list .s-social-link a[title="snapchat"]:focus-visible::after{
  opacity: 1;
  box-shadow: 0 0 25px 8px color-mix(in srgb, var(--sc) 50%, transparent);
}

/* TikTok */
.s-social-list .s-social-link a[title="tiktok"]:hover,
.s-social-list .s-social-link a[title="tiktok"]:focus-visible{
  color: var(--tt);
  box-shadow: 0 0 15px var(--tt);
}
.s-social-list .s-social-link a[title="tiktok"]:hover::after,
.s-social-list .s-social-link a[title="tiktok"]:focus-visible::after{
  opacity: 1;
  box-shadow: 0 0 25px 8px color-mix(in srgb, var(--tt) 50%, transparent);
}

/* ==============================
   أيقونات التواصل (واتس / فون / إيميل)
============================== */
.s-contacts .s-contacts-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: currentColor;
  transition: color .35s ease, box-shadow .35s ease;
}

/* حجم SVG */
.s-contacts .s-contacts-icon svg{
  width: 24px;
  height: 24px;
}
.s-contacts .s-contacts-icon svg path{
  fill: currentColor !important;
}

/* WhatsApp */
.s-contacts .s-contacts-item[href*="whatsapp"]:hover .s-contacts-icon,
.s-contacts .s-contacts-item[href*="whatsapp"]:focus-visible .s-contacts-icon{
  color: var(--wa);
  box-shadow: 0 0 15px var(--wa), 0 0 25px var(--wa);
}

/* Phone */
.s-contacts .s-contacts-item[href*="tel"]:hover .s-contacts-icon,
.s-contacts .s-contacts-item[href*="tel"]:focus-visible .s-contacts-icon{
  color: var(--ph);
  box-shadow: 0 0 15px var(--ph), 0 0 25px var(--ph);
}

/* Email */
.s-contacts .s-contacts-item[href*="mailto"]:hover .s-contacts-icon,
.s-contacts .s-contacts-item[href*="mailto"]:focus-visible .s-contacts-icon{
  color: var(--em);
  box-shadow: 0 0 15px var(--em), 0 0 25px var(--em);
}





/* ================== الألوان الأساسية ================== */
:root {   
  --color-primary: #5B867F;
}

/* ================== أزرار الشراء والسلة ================== */
.s-button-btn.s-button-primary-outline,
.s-button-btn.s-button-solid,
.s-fast-checkout-button {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  padding: 12px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.s-button-btn.s-button-primary-outline:hover,
.s-button-btn.s-button-solid:hover,
.s-fast-checkout-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(245, 100, 169, .4);
  background-color: #5B867F;
}

.s-button-btn.s-button-primary-outline::after,
.s-button-btn.s-button-solid::after,
.s-fast-checkout-button::after {
  content:"";
  position: absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background: rgba(255,255,255,.3);
  transform: skewX(-20deg);
  transition: left .5s ease;
}

.s-button-btn.s-button-primary-outline:hover::after,
.s-button-btn.s-button-solid:hover::after,
.s-fast-checkout-button:hover::after {
  left:200%;
}

.s-button-btn.s-button-primary-outline:active,
.s-button-btn.s-button-solid:active,
.s-fast-checkout-button:active {
  transform: scale(.95);
  box-shadow: 0 2px 8px rgba(245, 100, 169, .3);
}

/* لودر */
.s-button-btn.s-button-primary-outline.is-loading,
.s-button-btn.s-button-solid.is-loading,
.s-fast-checkout-button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.s-button-btn.s-button-primary-outline.is-loading::before,
.s-button-btn.s-button-solid.is-loading::before,
.s-fast-checkout-button.is-loading::before {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:20px; height:20px;
  margin:-10px 0 0 -10px;
  border:3px solid rgba(255,255,255,.6);
  border-top:3px solid #fff;
  border-radius:50%;
  animation: spin .8s linear infinite;
}

/* ================== ويدجت Mini Checkout ================== */
salla-mini-checkout-widget,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: 6px;  
  cursor: pointer;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

salla-mini-checkout-widget:hover,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(245, 100, 169, .4);
  background-color: #f672b1;
}

salla-mini-checkout-widget::after,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content::after {
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background: rgba(255,255,255,.3);
  transform: skewX(-20deg);
  transition: left .5s ease;
}

salla-mini-checkout-widget:hover::after,
salla-mini-checkout-widget .s-add-product-button-mini-checkout-content:hover::after {
  left:200%;
}

salla-mini-checkout-widget:active {
  transform: scale(.95);
  box-shadow: 0 2px 8px rgba(245, 100, 169, .3);
}

salla-mini-checkout-widget.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

salla-mini-checkout-widget.is-loading::before {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:20px; height:20px;
  margin:-10px 0 0 -10px;
  border:3px solid rgba(255,255,255,.6);
  border-top:3px solid #fff;
  border-radius:50%;
  animation: spin .8s linear infinite;
}

/* ================== الكروت ================== */
.s-product-card-content {
  background:#fff;
  border-radius:16px;
  padding:16px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.s-product-card-content:hover {
  transform: translateY(-8px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}

/* العنوان */
.s-product-card-content-title a {
  position:relative;
  text-decoration:none;
  transition:color .3s ease;
}
.s-product-card-content-title a::after {
  content:"";
  position:absolute;
  bottom:-.25em; right:0;
  width:100%; height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin:right;
  transition: transform .6s ease;
}
.s-product-card-content:hover .s-product-card-content-title a::after {
  transform: scaleX(1);
  transform-origin:left;
}

/* السعر */
.s-product-card-price {
  display:inline-block;
  transition: transform .4s ease, text-shadow .4s ease, color .4s ease;
}
.s-product-card-content:hover .s-product-card-price {
  transform: translateY(-2px);
  color:#ff9800;
  text-shadow:0 4px 14px rgba(255,152,0,.4);
}

/* زرار إضافة للسلة داخل الكارد */
.s-product-card-content-footer .s-button-element {
  border-radius:12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.s-product-card-content-footer .s-button-element:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.s-product-card-content-footer .s-button-element:active {
  transform: translateY(0) scale(.97);
}

/* ================== Animation ================== */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }



  
}


/* تكبير الشعار في الجوال - أضف هذا الكود في نهاية الملف */
@media (max-width: 767px) {
    .navbar-brand img {
        max-height: 38px !important; /* يمكنك زيادة هذا الرقم 90 أو 100 حتى يصل للحجم المطلوب */
        width: auto !important;
        transform: scale(1.5); /* تكبير بنسبة 50% إضافية */
        transition: transform 0.3s ease;
    }
    
    /* تأمين مساحة كافية للهيدر بعد تكبير الشعار */
    .main-nav-container {
        min-height: 30px !important; 
    }
}

/* ==============================
   12- Responsive (تعديلات الجوال)
============================== */

@media (max-width: 767px) {
    /* تكبير وتوسيط الشعار */
    .navbar-brand img {
        max-height: 80px !important; /* زيادة الارتفاع الأقصى */
        width: auto !important;
        transform: scale(1.4); /* تكبير بنسبة 40% */
        transform-origin: center;
        transition: transform 0.3s ease;
        margin-top: 5px;
    }

    /* توسيع الهيدر ليعطي مساحة للشعار الكبير */
    .main-nav-container {
        min-height: 90px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* إعدادات السلايدر والكروت للجوال */
    #photos-0-slider > div.swiper.s-slider-container {
       padding: 0 !important;
    }
    
    .s-products-slider-card {
        max-width: 195px;
    }

    .s-button-element:not(:disabled):not([loading]) {
        font-size: 11px;
    }
}