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

/* ============================================================
   FOLLOW STORE — تحسينات تنسيق فوق ثيم Blast
   1. خط عربي Tajawal
   2. بطاقات منتج مدوّرة بحدود ناعمة
   3. تصحيح تسلسل السعر
   ============================================================ */

:root {
  --fs-blue: #00A8FF;   /* نفس أزرق السعر في صفحة المنتج */
  --fs-dim: #9AA3B5;    /* نفس رمادي السعر القديم في صفحة المنتج */
  --fs-card-radius: 14px;
}

/* ---------- 1) الخط العربي ---------- */
body,
button,
input,
select,
textarea,
.ab-header,
.ab-footer,
.ab-featured-name,
.ab-pgrid-name,
.ab-plist-name,
.ab-featured-price,
.ab-pgrid-price,
.ab-plist-price,
.ab-price-old,
.ab-price-sale,
.ab-pgrid-title,
.ab-footer-heading {
  font-family: 'Tajawal', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---------- 2) بطاقات المنتج ---------- */
.ab-featured-card,
.ab-pgrid-card,
.ab-plist-card {
  border-radius: var(--fs-card-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(155, 168, 194, 0.16) !important;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease,
              box-shadow .3s ease !important;
}

.ab-featured-card:hover,
.ab-pgrid-card:hover,
.ab-plist-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(0, 168, 255, .5) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
              0 0 22px rgba(0, 168, 255, .18) !important;
}

.ab-featured-media,
.ab-pgrid-media,
.ab-plist-media {
  border-radius: 0 !important;
  overflow: hidden !important;
}

.ab-featured-img-primary,
.ab-featured-img-hover,
.ab-pgrid-img-primary,
.ab-pgrid-img-hover {
  transition: transform .5s ease !important;
}

.ab-featured-card:hover .ab-featured-img-primary,
.ab-pgrid-card:hover .ab-pgrid-img-primary {
  transform: scale(1.05) !important;
}

/* الشارات */
.ab-featured-badge,
.ab-pgrid-badge,
.ab-plist-badge,
.ab-sale-badge {
  border-radius: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
}

/* زر الإضافة السريعة */
.ab-featured-add-btn,
.ab-pgrid-add-btn,
.ab-plist-add-btn {
  border-radius: 10px !important;
  transition: filter .2s ease, transform .2s ease !important;
}

.ab-featured-add-btn:hover,
.ab-pgrid-add-btn:hover,
.ab-plist-add-btn:hover {
  filter: brightness(1.15) !important;
}

/* اسم المنتج — إصلاح تباين حرج
   كان اللون rgb(18,18,18) على خلفية rgb(2,13,34) = تباين 1.03 (غير مقروء)
   بعد الإصلاح = 16.51 */
.ab-featured-name,
.ab-pgrid-name,
.ab-plist-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: #E8EDF7 !important;
  -webkit-text-fill-color: #E8EDF7 !important;
}

/* ---------- 3) تسلسل السعر ---------- */
.ab-featured-price-row,
.ab-pgrid-price-row,
.ab-plist-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* السعر الحالي — أكبر وبلون التركواز بدل الأحمر الفاقع
   ملاحظة: ثيم Blast يستخدم -webkit-text-fill-color فلا يكفي color وحده */
.ab-featured-price,
.ab-pgrid-price,
.ab-plist-price,
.ab-price-sale {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #00A8FF !important;
  -webkit-text-fill-color: #00A8FF !important;
  letter-spacing: -.01em !important;
}

/* السعر القديم — أصغر وباهت ومشطوب */
.ab-price-old {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9AA3B5 !important;
  -webkit-text-fill-color: #9AA3B5 !important;
  text-decoration: line-through !important;
  opacity: .85 !important;
}

/* ============================================================
   4) إصلاح النصوص المخفية — نص أسود على خلفية كحلية
   كل هذه العناصر كانت بتباين أقل من 1.1 (غير مقروءة إطلاقاً)
   السبب: قيم الثيم الافتراضية مصمّمة لخلفية بيضاء
   ============================================================ */

/* عناوين الأقسام في الصفحة الرئيسية — كانت rgb(0,0,0) */
.home_section_container h1,
.home_section_container h2,
.home_section_container h3,
.home_section_container h4 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* النص التوضيحي تحت العناوين — كان rgb(0,0,0) */
.home_section_container .description,
.content_container .description {
  color: #9AA3B5 !important;
  -webkit-text-fill-color: #9AA3B5 !important;
}

/* أسماء الفئات — كانت rgb(1,1,1) على خلفية داكنة */
.category_card_name {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* استثناء: بعض أسماء الفئات داخل "حبّة" بيضاء — تبقى داكنة */
.category_card_name .bg-white,
.category_card_name .bg-white *,
.category_card .bg-white,
.category_card .bg-white * {
  color: #020D22 !important;
  -webkit-text-fill-color: #020D22 !important;
}

/* عنوان قسم قائمة المنتجات — كان rgb(18,18,18) */
.ab-plist-title,
.ab-pgrid-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* نصوص فوق الصور — إضافة ظل لضمان القراءة على الصور الفاتحة */
.ab-featured-hero-title,
.ab-featured-hero-subtitle {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75),
               0 1px 3px rgba(0, 0, 0, .9) !important;
}

/* ---------- لمسات إضافية ---------- */
/* زر عرض الكل — كان أبيض على أبيض (غير مرئي) */
.ab-pgrid-viewall-btn {
  border-radius: 999px !important;
  background: #0077D9 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 0 !important;
  transition: box-shadow .25s ease, transform .2s ease, filter .2s ease !important;
}

.ab-pgrid-viewall-btn:hover {
  filter: brightness(1.12) !important;
  box-shadow: 0 0 20px rgba(0, 168, 255, .45) !important;
  transform: translateY(-2px) !important;
}

.ab-footer-social-link {
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.ab-footer-social-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 16px rgba(0, 168, 255, .3) !important;
}

/* ============================================================
   5) توحيد الخلفيات — كانت الصفحة فيها ٣ درجات سوداء مختلفة
   #070B14 (html/app_container) و #050914 (مسار/تبويبات/فوتر منتج)
   بجانب الكحلي الصحيح #020D22
   ============================================================ */
html,
body,
.ab-breadcrumbs,
.ab-pd-breadcrumbs,
.ab-pd-footer,
.lq-tab-headers {
  background-color: #020D22 !important;
}

/* app_container يحتاج أولوية أعلى — قاعدة الثيم تتغلب على المحدد البسيط */
html body div.app_container,
html body .app_container.flex {
  background-color: #020D22 !important;
}

/* ============================================================
   6) إزالة الفراغات الناتجة عن أسطر فارغة في محرر المنتج
   كل سطر فارغ <p><br></p> كان يشغل 55–109 بكسل
   ============================================================ */
.ql-editor p:has(> br:only-child),
.ql-editor h1:has(> br:only-child),
.ql-editor h2:has(> br:only-child),
.ql-editor h3:has(> br:only-child),
.ql-editor h4:has(> br:only-child),
.ql-editor h5:has(> br:only-child),
.ql-editor h6:has(> br:only-child) {
  display: none !important;
}

/* ============================================================
   7) أحجام الخطوط وتباعد الأسطر
   كان عنوان المنتج 28.8px بتباعد 54.72px (١.٩ ضعف)
   ============================================================ */
.ql-editor.leading-10 { line-height: 1.9 !important; }

/* عنوان المنتج — يتدرّج مع عرض الشاشة تلقائياً
   16px على الجوالات الصغيرة ← 24px على الديسكتوب */
h1.ql-align-right,
h1.ql-align-center,
h1.ql-align-left,
.ql-editor h1 {
  font-size: clamp(16px, 4.2vw, 24px) !important;
  line-height: 1.45 !important;
  margin-block: .3em !important;
}

.ql-editor h2 { font-size: 20px !important; line-height: 1.5 !important; }
.ql-editor h3,
.ql-editor h4 { font-size: 17px !important; line-height: 1.5 !important; }

/* تقليل الفراغات الزائدة */
.ab-breadcrumbs,
.ab-pd-breadcrumbs {
  min-height: 0 !important;
  height: auto !important;
  padding-block: 10px !important;
}

.ab-gallery-desktop-layout { padding-top: 16px !important; }

@media (max-width: 767px) {
  .ql-editor h2 { font-size: 17px !important; }
  .ql-editor.leading-10 { line-height: 1.8 !important; }
  .ab-gallery-desktop-layout { padding-top: 8px !important; }
}

/* ============================================================
   8) تبويبات المنتج (الوصف / الشحن / الاسترجاع) — تصغير
   كانت بارتفاع 77px بسبب min-height:78px على الشريط
   ============================================================ */
html body div.lq-tab-headers {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-block: 8px !important;
}

html body div.lq-tab-headers button.lq-tab-btn {
  font-size: 13.5px !important;
  padding: 8px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
  line-height: 1.4 !important;
}

/* ============================================================
   9) فراغ بين دوائر الهيدر (السلة واللغة والبحث)
   كانت ملتصقة تماماً — المسافة بينها كانت صفر
   ============================================================ */
.header-col-right { gap: 10px !important; }

/* ============================================================
   10) عناوين الفوتر في المنتصف
   ============================================================ */
.ab-footer-heading {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* ============================================================
   11) زر "أضف للسلة" — كان بعرض 50px فينكسر النص لسطرين
   ============================================================ */
html body button.add_to_cart_btn {
  flex: 0 1 auto !important;
  width: fit-content !important;
  min-width: 140px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  min-height: 48px !important;
  height: auto !important;
  border-radius: 12px !important;
  line-height: 1.3 !important;
}

@media (max-width: 767px) {
  html body div.lq-tab-headers button.lq-tab-btn {
    font-size: 12.5px !important;
    padding: 7px 14px !important;
  }
  .header-col-right { gap: 6px !important; }
  html body button.add_to_cart_btn {
    min-width: 120px !important;
    font-size: 13px !important;
    padding: 11px 16px !important;
  }
}

/* ============================================================
   12) بانر الصفحة الرئيسية على الجوال — كان يتمدد ويأخذ الشاشة
   السبب: بانرات الجوال بنسب مختلفة (1.42 و 1.78) والشريط
   يفرض ارتفاعاً واحداً، فتتمدد الصور
   الحل: ربط الارتفاع بنسبة العرض/الارتفاع + سقف 45vh
   ============================================================ */
/* خلفية الشرائح كانت بيضاء فتظهر كصندوق أبيض حول الصورة */
.ab-slider-slide { background: transparent !important; }

/* الشريحة النشطة هي من تحدد الارتفاع — تطبَّق على كل المقاسات
   (مثبتة باختبار: ارتفاع الشريط = ارتفاع الصورة بالضبط) */
html body .ab-slider {
  height: auto !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  border-radius: 12px !important;
}

html body .ab-slider .ab-slider-track {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
}

html body .ab-slider .ab-slider-slide {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}

html body .ab-slider .ab-slider-slide.ab-active {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .ab-slider .ab-slider-slide.ab-active img,
html body .ab-slider .ab-slider-slide.ab-active picture {
  height: auto !important;
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================================
   13) زر "إتمام الطلب" — إلغاء التثبيت اللاصق على الجوال
   ملفك القديم (V22 MOBILE CHECKOUT BUTTON STICKY FIX) كان يفرض
   position:fixed + z-index:999999 فيطفو فوق خيارات الدفع.
   الآن يجلس في مكانه الطبيعي بعد آخر خيار.
   ============================================================ */
@media (max-width: 768px) {
  html body div.fixed.bottom-0.left-0.right-0.z-50,
  html body div[class*="fixed"][class*="bottom-0"][class*="z-50"] {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    padding: 14px 12px 20px !important;
    margin: 0 !important;
  }

  /* إلغاء المساحة التي كانت محجوزة للزر الطافي */
  html body,
  html body main,
  html body .app_container {
    padding-bottom: 0 !important;
  }

  html body button.checkout_buy_now,
  html body .checkout_buy_now {
    position: relative !important;
    width: 100% !important;
  }
}

/* شريط تمرير متناسق مع الهوية */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020D22; }
::-webkit-scrollbar-thumb { background: rgba(155, 168, 194, .35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--fs-blue); }

/* ---------- الجوال ---------- */
@media (max-width: 767px) {
  .ab-featured-name,
  .ab-pgrid-name,
  .ab-plist-name { font-size: 12.5px !important; }

  .ab-featured-price,
  .ab-pgrid-price,
  .ab-plist-price,
  .ab-price-sale { font-size: 16px !important; }

  .ab-price-old { font-size: 11.5px !important; }

  .ab-featured-card,
  .ab-pgrid-card,
  .ab-plist-card { border-radius: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-featured-card,
  .ab-pgrid-card,
  .ab-plist-card { transition: none !important; }
}