/* -------------------------------------------------------------
   TOFIAH Custom Theme  ✦  v3.2
   Palette captured from Asset 100.png
-----------------------------------------------------------------
   bg        #e0dddc   |  surface  #f1efe9  |  border  #d6d1c9
   text      #766b57   |  accent   #976a21  |  muted   #969186
----------------------------------------------------------------*/

/* 0. Loader -----------------------------------------------------------*/
.loader-init{background:#e0dddc!important;}
.loader-init::after{border-color:#d6d1c9;border-top-color:#976a21;}

/* 1. Root variables ---------------------------------------------------*/
:root{
  --brand-bg:#e0dddc;
  --brand-surface:#f1efe9;
  --brand-border:#d6d1c9;
  --brand-text:#766b57;
  --brand-text-alt:#969186;
  --brand-accent:#976a21;
  --font-main:'PingARLT','Tajawal',sans-serif;
  --fs-700:clamp(2.4rem,5vw,3rem);
  --fs-600:1.75rem;
  --fs-500:1.25rem;
  --fs-400:1rem;
}

/* 2. Base reset -------------------------------------------------------*/
html,body,.app-inner{background:var(--brand-bg);color:var(--brand-text);font-family:var(--font-main);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.color-mode-dark{background:var(--brand-bg)!important;color:var(--brand-text)!important;}
h1,h2,h3,h4,h5,h6{color:var(--brand-accent);font-weight:700;letter-spacing:.02em;}
a{color:var(--brand-accent);text-decoration:none;transition:color .2s ease;}
a:hover,a:focus{color:var(--brand-text-alt);} 

/* 3. Buttons ----------------------------------------------------------*/
.btn-primary,.s-button-primary{background:var(--brand-accent)!important;border-color:var(--brand-accent)!important;color:#fff!important;border-radius:40px;padding:.75em 1.75em;font-weight:600;transition:background .25s ease,box-shadow .25s ease;}
.btn-primary:hover,.s-button-primary:hover{background:color-mix(in srgb,var(--brand-accent) 85%,#000 15%);box-shadow:0 4px 14px rgba(151,106,33,.35);} 

/* 4. Surface elements -------------------------------------------------*/
.card,.main-nav-container,.store-footer,.tabs.hide-scroll{background:var(--brand-surface)!important;color:var(--brand-text);} 

/* 4a. Product cards */
.s-product-card-entry{background:var(--brand-surface);box-shadow:0 6px 16px rgba(214,209,201,.12);border:none!important;border-radius:12px;overflow:hidden;}
.s-product-card-content{background:transparent;border:none!important;}
.s-product-card-image{border:none!important;}
/* Keep colour when out of stock */
.s-product-card-out-of-stock .s-product-card-image img,
.s-product-card-out-of-stock .s-product-card-image{filter:none!important;-webkit-filter:none!important;opacity:1!important;}

/* 4b. Price box -------------------------------------------------------*/
/* Background & rounded edges */
.product-form > section:not(.sticky-product-bar){background:var(--brand-surface)!important;border:none!important;border-radius:12px!important;}
/* Price value colour */
.product-form .total-price,
.product-form label b{color:var(--brand-accent)!important;}

/* 4c. Installment (Tamara etc.) --------------------------------------*/
/* Container */
salla-installment, .installment-box{
  background:var(--brand-surface)!important;
  border:none!important;
  border-radius:12px!important;
  color:var(--brand-text)!important;
  padding:1rem 1.25rem;
}
/* Highlight amount & link */
salla-installment b,
.installment-box b,
salla-installment strong,
.installment-box strong{color:var(--brand-accent)!important;}

salla-installment a,
.installment-box a{color:var(--brand-accent)!important;text-decoration:underline;transition:color .2s ease;}

salla-installment a:hover,
.installment-box a:hover{color:var(--brand-text-alt)!important;}

/* Tamara logo could be small—keep as-is but add subtle rounded bg if needed */
.installment-box img[src*="tamara"],
.installment-box img[src*="Tamara" ]{border-radius:6px;}

/* 4d. Sticky product bar */
.sticky-product-bar{background:var(--brand-surface)!important;}

/* 4e. Testimonial cards ----------------------------------------------*/
.s-block--testimonials{background:var(--brand-bg);} 
.s-block--testimonials .swiper-slide,
.s-block--testimonials .s-card,
.s-block--testimonials .s-review-entry,
.s-block--testimonials .s-review-card,
.s-block--testimonials .testimonial-card{background:var(--brand-surface)!important;border:none!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(214,209,201,.12);color:var(--brand-text);} 
.s-block--testimonials .s-review-entry .author,
.s-block--testimonials .s-review-card .author-name{color:var(--brand-accent)!important;}
.s-block--testimonials .swiper-button-prev,
.s-block--testimonials .swiper-button-next{background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.08);width:48px;height:48px;color:var(--brand-text);}

/* 5. Hero -------------------------------------------------------------*/
.hero-waves{background:url('Asset%20100.png') no-repeat top center/cover;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;padding:6rem 1rem 4rem;position:relative;overflow:hidden;}
.hero-waves::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(224,221,220,0) 45%,var(--brand-bg) 90%);} 
.hero-waves>*{position:relative;z-index:1;}
.hero-waves .logo{width:140px;margin-inline:auto 1rem 1rem auto;}
.hero-waves h1{font-size:var(--fs-700);margin-bottom:.5rem;}
.hero-waves p{max-width:620px;margin-inline:auto;color:var(--brand-text);font-size:var(--fs-500);} 

/* 6. Footer -----------------------------------------------------------*/
.store-footer{background:var(--brand-surface)!important;color:var(--brand-text-alt);} 
.store-footer a:hover{color:var(--brand-accent);} 

/* 7. Utilities --------------------------------------------------------*/
.text-accent{color:var(--brand-accent)!important;}
.bg-surface{background:var(--brand-surface)!important;}
.border-soft{border-color:var(--brand-border)!important;}

/* 8. Responsive -------------------------------------------------------*/
@media(max-width:768px){.hero-waves{min-height:340px;padding:5rem 1rem 3rem;}.hero-waves h1{font-size:2.25rem;}}


/* ➊ تحريك الصورة عند الـHover */
.s-product-card-image img{
  transition: transform .4s ease;
}
.s-product-card-entry:hover img{
  transform: scale(1.06);
}

/* ➋ ظلّ ناعم عند التمرير */
.s-product-card-entry{
  transition: box-shadow .35s ease;
}
.s-product-card-entry:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* ➌ قصّ العنوان على سطرين */
.s-product-card-content-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ➍ تمييز حالة النفاد */
.s-product-card-out-of-stock{
  opacity:.9;
}
.s-product-card-out-of-stock .s-button-btn{
  background:#fff;
  color:var(--brand-text);
}

/* ➎ شارة “جديد” إن لزم */
.s-product-card-entry[data-badge=\"new\"]::before{
  content:\"جديد\";
  position:absolute;top:12px;right:12px;
  background:#976a21;color:#fff;
  padding:2px 8px;border-radius:6px;font-size:12px;
}

/* ضع هذا الكود في “CSS مخصّص” ثم انشر */
label[for="shipping_21839256"] img.company-logo,
img.company-logo[src*="salla-dev-portal"]{
  display:none !important;   /* أخفِ العنصر نهائياً */
}


/* ========= TOFIAH x CHEFZ — Wisepops CTA Styling ========= */

/* 0) ألوان العلامة (تقدر تغيّرها إن حبيت) */
:root{
  --tofiah-beige:#d8d2cb;
  --tofiah-gold:#976a21;
  --tofiah-brown:#4b2e16;
  --cta-text:#fff;
}

/* 1) استهداف أي بوب-أب من Wisepops بدون الاعتماد على ID ثابت */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a{
  position: relative;
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 2) تنسيق صورة شعار ذا شيفز داخل البوب-أب */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a span img{
  display: block;
  width: 220px;                 /* يحافظ على نقاوة الشعار */
  max-width: 60vw;              /* مناسب للجوال */
  height: auto;
  border-radius: 16px;
  background: #fff;             /* لو كان PNG شفاف يظهر جميل */
  padding: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  outline: 1px solid rgba(0,0,0,.05);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* 3) لمعان خفيف + نبضة اهتمام دورية */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a span img::selection{ background:transparent; }
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a:hover span img{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(151,106,33,.38); }
  70%  { box-shadow: 0 0 0 18px rgba(151,106,33,0); }
  100% { box-shadow: 0 0 0 0 rgba(151,106,33,0); }
}

/* 4) شريط دعوة للحركة فوق الصورة (نضيف النص بالـ ::after) */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a::after{
  content: "حصريًا بالرياض — استلم خلال دقائق عبر ذا شيفز";
  position: absolute;
  inset-inline: 50% auto;       /* يدعم RTL/LTR */
  transform: translateX(-50%);
  bottom: -14px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--cta-text);
  white-space: nowrap;
  background: linear-gradient(135deg, var(--tofiah-beige), var(--tofiah-gold));
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  z-index: 2;
  animation: cta-pulse 2.6s ease-in-out infinite;
}

/* 5) لمعان خفيف يمشي على الزر */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a::before{
  content:"";
  position:absolute;
  left:-120%;
  right:auto;
  top: calc(100% - 12px);
  height: 34px;
  width: 120px;
  border-radius:999px;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.55) 50%, transparent 55%);
  filter: blur(.4px);
  z-index:3;
  animation: shine 3s linear infinite;
}
@keyframes shine { to{ transform: translateX(240%);} }

/* 6) تأكد أن البوب-أب فوق كل شيء */
[id^="wisepops-wisepop-scrollable-"]{
  z-index: 999999 !important;
}

/* 7) تحسين الهوامش حتى ما يقطع محتوى البوب-أب */
[id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper{
  padding-bottom: 28px;
}

/* 8) استجابة للجوال */
@media (max-width: 480px){
  [id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a span img{
    width: 190px;
    border-radius: 14px;
    padding: 8px;
  }
  [id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a::after{
    font-size: 12.5px;
    bottom: -12px;
    padding: 8px 14px;
  }
}

/* 9) احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  [id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a::before,
  [id^="wisepops-wisepop-scrollable-"] .wisepops-blocks-wrapper a::after{
    animation: none;
  }
}