/* ELLE — custom styles beyond Tailwind utilities */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ease-out-smooth: cubic-bezier(.22,1,.36,1);
}

html[lang="ar"] body{ font-family:'Cairo','Tajawal',sans-serif; }
html[lang="en"] body{ font-family:'Poppins','Inter',sans-serif; }

html{ scroll-behavior:smooth; }

body{ background:#faf6f0; color:#2b2521; }

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#d9c9b8; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out-smooth), transform .7s var(--ease-out-smooth); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Header ---------- */
#site-header{ transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
#main-nav{ background-color:#faf6f0; transition:background-color .35s ease, backdrop-filter .35s ease, color .35s ease; }
#site-header.scrolled #main-nav{ background-color:rgba(250,246,240,.9); backdrop-filter:blur(10px); box-shadow:0 2px 18px rgba(0,0,0,.06); }

/* Transparent nav overlay (home hero only) — starts see-through over the hero image,
   turns solid once the page scrolls past it. */
#site-header.nav-transparent #main-nav{
  background-color:transparent;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
#site-header.nav-transparent #main-nav svg{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
#site-header.nav-transparent .lang-pill{ border-color:transparent; }
#site-header.nav-transparent .lang-pill-group{ border-color:rgba(255,255,255,.45); }
#site-header.nav-transparent .lang-pill.active{ background-color:#fff; color:#2b2521; }
#site-header.nav-transparent .logo-img{ filter:invert(1) brightness(1.5); }

#site-header.nav-transparent.scrolled #main-nav{
  background-color:rgba(250,246,240,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 18px rgba(0,0,0,.06);
  color:#2b2521;
  text-shadow:none;
}
#site-header.nav-transparent.scrolled #main-nav svg{ filter:none; }
#site-header.nav-transparent.scrolled .lang-pill-group{ border-color:rgba(43,37,33,.15); }
#site-header.nav-transparent.scrolled .lang-pill.active{ background-color:#2b2521; color:#fff; }
#site-header.nav-transparent.scrolled .logo-img{ filter:none; }

/* ---------- Product card ---------- */
.product-card{ transition:transform .35s var(--ease-out-smooth), box-shadow .35s var(--ease-out-smooth); }
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(43,37,33,.12); }
.product-card .card-img-primary,
.product-card .card-img-secondary{ transition:opacity .5s ease, transform .6s var(--ease-out-smooth); }
.product-card:hover .card-img-primary{ opacity:0; }
.product-card:hover .card-img-secondary{ opacity:1; transform:scale(1.06); }
.product-card .card-img-secondary{ opacity:0; position:absolute; inset:0; }

/* Heart button pop animation */
.heart-btn{ transition:transform .2s ease, background-color .2s ease; }
.heart-btn.pop{ animation:heartPop .45s var(--ease-out-smooth); }
@keyframes heartPop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.35); }
  60%{ transform:scale(.9); }
  100%{ transform:scale(1); }
}

/* ---------- Buttons ---------- */
.btn-press{ transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-press:active{ transform:scale(.97); }

/* Ripple */
.ripple-container{ position:relative; overflow:hidden; }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation:rippleAnim .6s ease-out; pointer-events:none; }
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ---------- Toasts ---------- */
#toast-container{ position:fixed; top:1rem; inset-inline-end:1rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; }
.toast{
  pointer-events:auto;
  min-width:240px; max-width:320px;
  display:flex; align-items:center; gap:.6rem;
  background:#fff; color:#2b2521; border-radius:.9rem;
  padding:.8rem 1rem; box-shadow:0 12px 30px rgba(43,37,33,.18);
  transform:translateY(-16px); opacity:0;
  animation:toastIn .35s var(--ease-out-smooth) forwards;
  border-inline-start:4px solid #b9808d;
}
.toast.toast-out{ animation:toastOut .3s ease forwards; }
.toast.toast-success{ border-inline-start-color:#7a9b6f; }
.toast.toast-info{ border-inline-start-color:#8a8fc7; }
.toast.toast-remove{ border-inline-start-color:#c96b6b; }
@keyframes toastIn{ to{ transform:translateY(0); opacity:1; } }
@keyframes toastOut{ to{ transform:translateY(-10px); opacity:0; } }

/* ---------- Mobile drawer ---------- */
.drawer{ transition:transform .4s var(--ease-out-smooth); }
.drawer-overlay{ transition:opacity .3s ease; }

/* ---------- Hero slider ---------- */
.hero-slide{ transition:opacity 1s ease; }

/* ---------- Product gallery zoom ---------- */
.zoom-wrap{ position:relative; overflow:hidden; cursor:crosshair; }
.zoom-lens{
  position:absolute; border:2px solid rgba(185,128,141,.9);
  background:rgba(185,128,141,.15);
  pointer-events:none; display:none;
  border-radius:.5rem;
}
.zoom-panel{
  position:absolute; top:0; inset-inline-start:calc(100% + 1rem); width:100%; height:100%;
  background-repeat:no-repeat; border:1px solid #e7ddd0; border-radius:.75rem;
  background-color:#fff; display:none; box-shadow:0 20px 40px rgba(43,37,33,.15);
  z-index:20;
}
@media (max-width:1024px){
  .zoom-panel{ display:none !important; }
}

/* Thumbnail active state */
.thumb{ transition:border-color .2s ease, opacity .2s ease; opacity:.65; }
.thumb.active{ opacity:1; border-color:#b9808d; }

/* Crossfade main image */
.main-img-fade{ transition:opacity .35s ease; }

/* ---------- Order success checkmark ---------- */
.success-check{ animation:successPop .55s var(--ease-out-smooth); }
@keyframes successPop{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); }
}

/* ---------- Skeleton loaders ---------- */
.skeleton{ position:relative; overflow:hidden; background:#eee3d6; }
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:skeletonShine 1.4s infinite;
}
@keyframes skeletonShine{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* ---------- Placeholder image box ---------- */
.img-placeholder{ display:flex; align-items:center; justify-content:center; background:#ece3d6; color:#b7a893; }

/* ---------- Countdown ---------- */
.countdown-box{ min-width:3rem; }

/* ---------- Misc ---------- */
.line-through-old{ text-decoration:line-through; }
.badge{ font-size:.7rem; line-height:1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}