/* =========================================
   1. تنسيق الخلفية العامة
   ========================================= */
body, .salla-app, .app-inner, .content, .footer-bottom {
    background-color: #f4f1ec !important; 
}

/* =========================================
   2. تنظيف الفوتر وإخفاء الشعار المربع
   ========================================= */
.footer__logo, 
.store-footer__desc,
.store-footer .footer-logo,
.store-footer .col-md-4 > img, 
.store-footer img[alt="store logo"] {
    display: none !important;
}

/* =========================================
   3. تنسيق فوتر متجر عذوب (النسخة الرسمية)
   ========================================= */
.store-footer, 
.store-footer__inner, 
.footer-main {
    background-color: #c58a6c !important;
    color: #ffffff !important;
    border: none !important;
    position: relative;
    margin-top: 90px !important; 
    padding-top: 60px !important;
}

.store-footer::before {
    content: "";
    position: absolute;
    top: -48px; 
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #c58a6c !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
}

.store-footer::after {
    content: "";
    display: block;
    width: 120px; 
    height: 120px;
    background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/lGXyRW/r5Vjeu0gzybpUIZkAKFpdCMKvKEOvPa02iSEuVx8.png');
    background-size: 65%; 
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff; 
    position: absolute;
    top: -60px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    border-radius: 50%;
    border: 4px solid #c58a6c; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

.store-footer h3, 
.store-footer h4, 
.store-footer strong, 
.footer-title {
    color: #ffffff !important;
    font-weight: bold;
    margin-bottom: 25px;
    padding-bottom: 10px;
    position: relative;
}

.store-footer h3::after, 
.store-footer h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; 
    width: 40px;
    height: 2px;
    background-color: rgba(255,255,255,0.5);
}

.store-footer p, 
.store-footer a, 
.store-footer span, 
.store-footer li {
    color: #f9f9f9 !important;
    font-size: 14px;
    transition: all 0.3s ease;
}

.store-footer a:hover {
    color: #601a21 !important; 
    text-decoration: none;
    transform: translateX(-5px); 
}

.social-icons a {
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

.social-icons a:hover {
    background-color: #fff !important;
    color: #c58a6c !important;
}

.store-footer .copyrights,
.store-footer > div:last-child {
    border-top: 1px solid rgba(255,255,255,0.15);
    background-color: rgba(0,0,0,0.05) !important;
    margin-top: 30px;
    padding: 20px 0;
    text-align: center !important;
}

/* =========================================
   تنسيق بطاقات المميزات الفاخرة
   ========================================= */
.store-features__item, .feature-item {
    background: linear-gradient(145deg, #ffffff, #fcfcfc) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: 3px solid #c58a6c !important; 
    border-radius: 20px !important;
    padding: 35px 20px !important;
    margin-bottom: 25px;
    box-shadow: 
        0 10px 20px rgba(197, 138, 108, 0.05), 
        0 6px 6px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.store-features__item:hover, .feature-item:hover {
    transform: translateY(-12px) scale(1.02) !important; 
    box-shadow: 
        0 20px 40px rgba(197, 138, 108, 0.15), 
        0 15px 12px rgba(0, 0, 0, 0.03) !important;
}

.feature-icon, .store-features__item .icon-wrapper {
    width: 90px !important;
    height: 90px !important;
    background: linear-gradient(135deg, #e0b499, #c58a6c) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        inset 0 2px 5px rgba(255, 255, 255, 0.4), 
        0 10px 20px rgba(197, 138, 108, 0.4) !important; 
    margin-bottom: 25px !important;
    transition: all 0.5s ease;
}

.store-features__item:hover .feature-icon, 
.feature-item:hover .feature-icon {
    transform: rotateY(180deg); 
    background: linear-gradient(135deg, #601a21, #852d36) !important; 
    box-shadow: 0 15px 30px rgba(96, 26, 33, 0.4) !important;
}

.feature-icon i, 
.feature-icon svg,
.store-features__item img {
    color: #ffffff !important; 
    fill: #ffffff !important;
    font-size: 36px !important;
    width: 40px !important;
    height: 40px !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)) !important;
}

.store-features__item h4, 
.feature-title {
    color: #601a21 !important; 
    font-size: 20px !important;
    font-weight: 800 !important; 
    margin-bottom: 10px !important;
    letter-spacing: 0.5px; 
}

.store-features__item p, 
.feature-description {
    color: #7a7a7a !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    width: 90%;
}

/* ====/* =========================================================
   ADOOB — Couture Section Title (FULL)
   واضح + فخم + عباية مغلقة + أنيميشن
   يطبق على عناوين أقسام المنتجات في الصفحة الرئيسية
   ========================================================= */

/* 1) الحاوية */
.s-slider-block__title{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;

  margin: 18px 0 60px !important;
  padding: 0 14px !important;
}

/* زخرفة خلفية ناعمة خلف العنوان */
.s-slider-block__title::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: 50%;

  width: min(680px, 96vw);
  height: 64px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%, rgba(197,138,108,0.10), transparent 58%),
    linear-gradient(90deg, transparent, rgba(197,138,108,0.08), transparent);

  pointer-events:none;
  z-index: 0;
}

/* 2) جهة الأسهم */
.s-slider-block__title-left{
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3;
}

/* 3) جهة العنوان */
.s-slider-block__title-right{
  position: relative;
  z-index: 2;
  padding-bottom: 18px; /* مساحة للزخرفة السفلية */
}

/* 4) العنوان (كبسولة زجاجية فخمة) */
.s-slider-block__title-right h2{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* RTL: الأيقونة يمين النص */
  flex-direction: row-reverse !important;

  gap: 12px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;

  color: #601a21 !important;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: .3px !important;

  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(197,138,108,0.30) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.07) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* لمعان خفيف على الكبسولة */
.s-slider-block__title-right h2::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(197,138,108,0.22),
    rgba(255,255,255,0.0) 50%,
    rgba(197,138,108,0.12)
  );
  pointer-events:none;
  opacity: .9;
}

/* 5) أيقونة العباية (مغلقة وواضحة) داخل دائرة + أنيميشن */
.s-slider-block__title-right h2::before{
  content:"";
  width: 46px;
  height: 46px;
  border-radius: 999px;
  flex: 0 0 46px;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.72), rgba(197,138,108,0.18) 55%, rgba(96,26,33,0.08));
  border: 1px solid rgba(197,138,108,0.32);
  box-shadow: 0 14px 45px rgba(0,0,0,0.10);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 74%;
  opacity: 1;

  /* ✅ SVG عباية مغلقة */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23601a21' d='M12 2.2c1.5 0 2.7 1 3.2 2.1l2.1 1.6c.9.7 1.2 1.9.7 2.9l-1 2.1c-.3.6-1 .9-1.6.6l-.8-.4 1.4 9.2c.1 1-.6 1.9-1.7 1.9H9.7c-1.1 0-1.8-.9-1.7-1.9l1.4-9.2-.8.4c-.6.3-1.3 0-1.6-.6l-1-2.1c-.5-1-.2-2.2.7-2.9l2.1-1.6c.5-1.1 1.7-2.1 3.2-2.1z'/%3E%3Cpath d='M12 6.1V21.5' stroke='%23c58a6c' stroke-width='1.6' stroke-linecap='round' opacity='.95'/%3E%3Cpath d='M10.4 5.1c.3 1 .9 1.6 1.6 1.6s1.3-.6 1.6-1.6' stroke='%23c58a6c' stroke-width='1.6' stroke-linecap='round' opacity='.95'/%3E%3Cpath d='M8.6 9.2c1.0.6 2.2.9 3.4.9s2.4-.3 3.4-.9' stroke='%23c58a6c' stroke-width='1.3' stroke-linecap='round' opacity='.65'/%3E%3C/svg%3E");

  transform-origin: 50% 35%;
  animation: awAbayaIn .55s cubic-bezier(.2,.9,.2,1) both, awAbayaSway 2.8s ease-in-out .6s infinite;
}

/* 6) زخرفة سفلية فخمة (نقاط + خط) */
.s-slider-block__title-right::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 0;

  width: min(230px, 72vw);
  height: 10px;

  background:
    radial-gradient(circle, rgba(197,138,108,0.95) 0 3px, transparent 4px) left center / 18px 10px repeat-x,
    linear-gradient(to right, transparent, rgba(197,138,108,0.85), transparent);

  opacity: .95;
  filter: drop-shadow(0 10px 22px rgba(197,138,108,0.20));
}

/* 7) خط سفلي داخل h2 مع لمعان متحرك */
.s-slider-block__title-right h2{
  --aw-sheen: linear-gradient(90deg, transparent, rgba(255,255,255,0.70), transparent);
}
.s-slider-block__title-right h2 .aw-title-text{ position: relative; } /* لو موجود */

.s-slider-block__title-right h2{
  /* خط سفلي وهمي + لمعة */
}
.s-slider-block__title-right h2{
  background-clip: padding-box;
}
.s-slider-block__title-right h2{
  /* لا شيء هنا - فقط تنظيم */
}

.s-slider-block__title-right h2{
  /* نضيف الخط تحت العنوان عبر pseudo إضافي؟ (منعًا للتعارض، نستخدم box-shadow لطيف) */
  box-shadow: 0 18px 60px rgba(0,0,0,0.07), 0 0 0 1px rgba(197,138,108,0.12) !important;
}

/* خط سفلي منفصل (لا يتعارض مع ::after للكبسولة) */
.s-slider-block__title-right h2{
  padding-bottom: 12px !important;
}
.s-slider-block__title-right h2{
  /* مساحة بسيطة */
}
.s-slider-block__title-right h2{
  /* نعتمد على ::after للكبسولة، فالخط السفلي يكون في عنصر مستقل داخل .title-right */
}

/* لمعان متحرك إضافي (خفيف) فوق زخرفة .title-right */
.s-slider-block__title-right::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 0;

  width: min(230px, 72vw);
  height: 10px;
  border-radius: 999px;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  opacity: .35;
  animation: awSheen 2.6s ease-in-out infinite;
  pointer-events:none;
}

/* 8) تحسين الأسهم */
.s-slider-nav-arrow{
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(197,138,108,0.26) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10) !important;
  border-radius: 999px !important;
  color: #601a21 !important;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.s-slider-nav-arrow:hover{
  background: #601a21 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,0.14) !important;
}

/* ===== Animations ===== */
@keyframes awAbayaIn{
  from{ opacity: 0; transform: scale(.86) translateY(4px); filter: blur(6px); }
  to{ opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes awAbayaSway{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-6deg); }
}
@keyframes awSheen{
  0%   { transform: translateX(-50%) translateX(-60%); }
  50%  { transform: translateX(-50%) translateX(60%); }
  100% { transform: translateX(-50%) translateX(-60%); }
}

/* موبايل */
@media (max-width: 768px){
  .s-slider-block__title{ margin-bottom: 52px !important; }
  .s-slider-block__title-right h2{ padding: 10px 14px !important; }
  .s-slider-block__title-right h2::before{ width: 42px; height: 42px; flex-basis: 42px; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .s-slider-block__title-right h2::before,
  .s-slider-block__title-right::before{
    animation: none !important;
  }
}


/* =========================
   ADOOB MODERN SPLASH (Fixed)
   ========================= */

#aw-splash{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1);
}

#aw-splash.aw-show{ opacity: 1; }
#aw-splash.aw-hide{ opacity: 0; pointer-events: none; }

#aw-splash .aw-splash-card{
  width: min(320px, 86vw);
  text-align: center;
  padding: 22px 18px 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.25);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  animation: awCardIn .7s cubic-bezier(.2,.9,.2,1) .05s forwards;
}

/* --- هنا التعديل: الدائرة كلها عنابي --- */
#aw-splash .aw-splash-logo{
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  border-radius: 50%; /* دائرة كاملة */

  display: grid;
  place-items: center;

  /* تغيير الخلفية للون الهوية العنابي لإزالة الفراغ الأبيض */
  background-color: #601a21 !important; 
  
  border: 1px solid rgba(255,255,255,.18);
  position: relative;
  overflow: hidden; /* لضمان عدم خروج أي شيء عن الدائرة */
}

/* نبض خفيف حول الدائرة */
#aw-splash .aw-splash-logo::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.16);
  animation: awPulse 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}

#aw-splash .aw-splash-logo img{
  width: 66px;
  height: 66px;
  object-fit: contain;
  display: block;
  /* إضافة ظل أبيض خفيف للشعار ليبرز فوق الخلفية الغامقة */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); 
}

#aw-splash .aw-splash-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  letter-spacing: .2px;
}

#aw-splash .aw-splash-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

body.aw-splash-lock{ overflow: hidden !important; }

@keyframes awCardIn{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes awPulse{
  0%{ transform: scale(.98); opacity: .55; }
  70%{ transform: scale(1.08); opacity: .22; }
  100%{ transform: scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #aw-splash, #aw-splash *{
    animation: none !important;
    transition: none !important;
  }
}

/* Fix: إزالة البياض داخل دائرة شعار الفوتر */
.store-footer::after{
  background-color: #601a21 !important; /* أحمر غامق */
}

/* ✅ تقليص المسافة بين شعار الفوتر والمحتوى */
.store-footer,
.store-footer__inner,
.footer-main{
  /* كان 60px — قللناه */
  padding-top: 25px !important;
  /* كان 90px — قللناه */
  margin-top: 60px !important;
}



/* ✅ القوس العلوي: عدّل موقعه ليتوافق مع تقليص margin-top */
.store-footer::before{
  /* كان -80px */
  top: -25px !important;
  /* كان 50px */
  height: 27px !important;
}

/* كود شامل (رقم 2) لجعل الشعار دائري */
.header-logo img,
.store-logo,
.store-logo img,
.site-logo img,
.logo img,
.brand-logo img,
.salla-logo img,
header .logo img,
.site-header__logo img,
img[alt="شعار المتجر"] {
    border-radius: 50% !important;
    border: 2px solid #eaeaea !important; /* لون الإطار */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; /* ظل خفيف */
    object-fit: cover !important; /* لضمان عدم تمطط الصورة */
    aspect-ratio: 1 / 1 !important; /* يجبر الصورة تكون مربعة الأبعاد لتظهر كدائرة */
}

/* ========================================================
   ⛔ بروتوكول عزل صفحة المنتج (Product Page Isolation)
   هذا الكود يوقف الحركات المزعجة داخل صفحة المنتج فقط
   ======================================================== */

/* 1. إيقاف رقص أيقونة العباية (في صفحة المنتج فقط) */
body.product-details .s-slider-block__title-right h2::before,
body.product-details .s-slider-block__title-right::before {
    animation: none !important; /* إلغاء الحركة تماماً */
    transform: none !important; /* إلغاء أي دوران */
}

/* 2. إيقاف قفزة بطاقات المميزات (في صفحة المنتج فقط) */
body.product-details .store-features__item:hover, 
body.product-details .feature-item:hover {
    transform: none !important; /* منع القفز للأعلى */
    box-shadow: 0 10px 20px rgba(197, 138, 108, 0.05) !important; /* ظل ثابت وهادئ */
}

/* 3. تثبيت الفوتر ومنع تداخله (في صفحة المنتج فقط) */
body.product-details .store-footer {
    margin-top: 50px !important;
    padding-top: 40px !important;
    transform: none !important;
}

/* 4. إجبار زر اللايك على الظهور بشكل صحيح (في صفحة المنتج فقط) */
body.product-details .s-product-card-wishlist-btn {
    top: 10px !important;
    inset-inline-end: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999 !important;
}

/* 5. منع أي تمدد غريب في العناوين (في صفحة المنتج فقط) */
body.product-details .s-slider-block__title {
    margin: 20px 0 30px !important;
}

/* هذا الكود يحاول إبعاد الزر عن الحافة اليمنى */
.s-slider-prev.s-slider-nav-arrow {
    right: auto !important;
    left: -10px !important; /* تحريك الزر لليسار */
    position: relative !important; /* تغيير طريقة التموضع مؤقتاً للتجربة */
}