/* ─────────────────────────────────────────────────────────────
   HAIR STARS — Custom CSS for Salla "شهرة" Theme
   Applied: 2026-05-14
   Where to paste: لوحة سلة ← تصميم المتجر ← شهرة (تخصيص)
                  ← تخصيص متقدم ← تخصيص باستخدام CSS
   Rules: no gold · HAIR STARS all caps · global, search-first
   ───────────────────────────────────────────────────────────── */

/* === FONT LOADING — preload Playfair + Tajawal === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Tajawal:wght@300;400;500;700&display=swap');


/* === 1. ANNOUNCEMENT BAR — black, refined, monochrome === */
.salla-advertisement,
.advertisement-bar,
[class*="advertisement"][class*="bar"],
.top-advertisement {
  background: #1a1a1a !important;
  color: #ffffff !important;
  font-family: 'Tajawal', 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  font-weight: 400 !important;
  padding: 10px 0 !important;
  border: none !important;
}
.salla-advertisement *,
.advertisement-bar *,
[class*="advertisement"][class*="bar"] *,
.top-advertisement * {
  color: #ffffff !important;
} 


/* === 2. MAIN HEADER — clean white, more breathing room === */
.store-header,
.store-header.centered_logo,
header.store-header {
  border-bottom: 1px solid #ececec !important;
  box-shadow: none !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* === 3. BRAND NAME — HAIR STARS uppercase, Playfair Display === */
.store-header .navbar-brand,
.store-header .header-logo,
.store-header .navbar-brand a,
.store-header .navbar-brand span,
.store-header .header-logo span,
header .navbar-brand {
  text-transform: uppercase !important;
  letter-spacing: 8px !important;
  font-family: 'Playfair Display', 'Tajawal', serif !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  color: #1a1a1a !important;
}


/* === 4. HIDE WHATSAPP — global character, search-first === */
a[href*="wa.me"],
a[href*="whatsapp"],
.salla-whatsapp,
.whatsapp-widget,
.whatsapp-floating,
[class*="whatsapp"],
.floating-whatsapp,
.fab-whatsapp,
salla-whatsapp-button {
  display: none !important;
}


/* === 5. ICONS — clean monochrome === */
.header-btn__icon {
  color: #1a1a1a !important;
  font-size: 20px !important;
  transition: opacity 0.3s !important;
}
.header-btn:hover .header-btn__icon {
  opacity: 0.55 !important;
}


/* === 6. TOP NAVBAR — tighter & lighter (40px instead of 48px) === */
.top-navbar {
  height: 40px !important;
  background: #fafafa !important;
  border-bottom: 1px solid #ececec !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}
.top-navbar a {
  color: #666 !important;
  font-weight: 400 !important;
  transition: color 0.3s !important;
}
.top-navbar a:hover {
  color: #1a1a1a !important;
}


/* === 7. CATEGORY NAV — refined spacing === */
.main-menu .menu-item > a,
.main-menu .nav-link,
nav.main-menu a {
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: #1a1a1a !important;
}


/* === 8. TYPOGRAPHY POLISH — globally === */
body,
.product-card,
.product__title,
h1, h2, h3, h4 {
  font-family: 'Tajawal', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* === 9. ACCENT — olive (#5C6938) for featured links === */
.cat-link.featured,
.menu-item.featured > a,
a.featured,
.btn-accent {
  color: #5C6938 !important;
}


/* === 10. PERFORMANCE — delay non-critical UI === */
.help-button,
.floating-help,
[class*="help-fab"] {
  transition-delay: 2s !important;
}


/* === 11. MOBILE TWEAKS === */
@media (max-width: 768px) {
  .store-header .navbar-brand,
  .store-header .header-logo {
    letter-spacing: 4px !important;
    font-size: 18px !important;
  }
  .top-navbar {
    height: 36px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   Hair Stars — CSS لتسريع الفيديوهات في ثيم Selia (شهره)
   ضعه في: لوحة سلة → الإعدادات → الأكواد البرمجية → داخل head
   ========================================================= */

/* خلفية تحميل لطيفة للفيديوهات قبل أن تظهر */
video[autoplay],
video[data-lazy-src],
video[data-skip-load] {
  background: linear-gradient(135deg, #f4ece4 0%, #e8d9c8 50%, #f4ece4 100%);
  background-size: 200% 200%;
  animation: hs-video-loading 2s ease-in-out infinite;
  will-change: opacity;
}

@keyframes hs-video-loading {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* عند اكتمال التحميل توقف الخلفية المتحركة */
video[data-loaded="1"] {
  animation: none;
  background: transparent;
}

/* تحسين السلاسة على الجوال */
@media (max-width: 768px) {
  video[autoplay] {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] {
    animation-play-state: paused !important;
  }
}

/* تقليل الـ Layout Shift عند تحميل الصور */
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

/* إخفاء الفيديو بسلاسة على الاتصالات البطيئة */
video[data-skip-load="1"] {
  display: none;
}
video[data-skip-load="1"] + .video-fallback {
  display: block;
}

/* تحسين أداء الـ scroll */
.hero-banner,
.s-block-banner,
section[class*="banner"] {
  contain: layout style;
}

/* ─────────────────────────────────────────────────────────────
   Hair Stars — Video Speed Optimization CSS
   Applied: 2026-05-16
   Purpose: تسريع تحميل الفيديوهات والصور في ثيم شهرة
   ───────────────────────────────────────────────────────────── */

/* خلفية تحميل لطيفة للفيديوهات قبل أن تظهر */
video[autoplay],
video[data-lazy-src],
video[data-skip-load] {
  background: linear-gradient(135deg, #f4ece4 0%, #e8d9c8 50%, #f4ece4 100%);
  background-size: 200% 200%;
  animation: hs-video-loading 2s ease-in-out infinite;
  will-change: opacity;
}

@keyframes hs-video-loading {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* عند اكتمال التحميل توقف الخلفية المتحركة */
video[data-loaded="1"] {
  animation: none;
  background: transparent;
}

/* تحسين السلاسة على الجوال */
@media (max-width: 768px) {
  video[autoplay] {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] {
    animation-play-state: paused !important;
  }
}

/* تقليل الـ Layout Shift عند تحميل الصور */
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

/* إخفاء الفيديو بسلاسة على الاتصالات البطيئة */
video[data-skip-load="1"] {
  display: none;
}
video[data-skip-load="1"] + .video-fallback {
  display: block;
}

/* تحسين أداء الـ scroll */
.hero-banner,
.s-block-banner,
section[class*="banner"] {
  contain: layout style;
}






/* =========================================================
   Hair Stars — CSS لتسريع الفيديوهات + إزالة اللون الكريمي
   أثناء التحميل في ثيم شهرة
   ========================================================= */

/* ===== إزالة اللون الكريمي أثناء التحميل ===== */
/* فرض خلفية بيضاء على كل الحاويات الرئيسية أثناء التحميل */
html,
body,
body#app,
.app-inner,
main {
  }

/* البانر الرئيسي (Hero Slider) — خلفية بيضاء قبل ظهور الصورة */
salla-slider,
.advanced-slider,
.advanced-slider--1,
.advanced-slider__slide,
section.advanced-slider {
  background-image: none !important;
}

/* صور البانر تظهر بانسيابية فقط لما تتحمل بالكامل */
.advanced-slider__image,
.advanced-slider img {
  transition: opacity 0.4s ease-in;
}

/* الصور كسولة التحميل (lazy) — خلفية بيضاء بدل الكريمي/الرمادي */
img[loading="lazy"],
img.lazy,
.lazy {
  }

/* ===== خلفية شفافة للفيديوهات ===== */
video[autoplay],
video[data-lazy-src],
video[data-skip-load] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  will-change: opacity;
}

video[data-loaded="1"] {
  background: transparent !important;
}

/* تحسين السلاسة على الجوال */
@media (max-width: 768px) {
  video[autoplay] {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] {
    animation-play-state: paused !important;
  }
}

/* تقليل الـ Layout Shift عند تحميل الصور */
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

/* إخفاء الفيديو بسلاسة على الاتصالات البطيئة */
video[data-skip-load="1"] {
  display: none;
}
video[data-skip-load="1"] + .video-fallback {
  display: block;
}

/* تحسين أداء الـ scroll */
.hero-banner,
.s-block-banner,
section[class*="banner"] {
  contain: layout style;
}