/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════════════════
   مجمع دنت الطبي — CSS مخصص v5
   لوحة التحكم ← المظهر ← إعدادات القالب ← CSS مخصص
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes dent-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,187,187,.6), 0 4px 16px rgba(26,36,36,.2); }
  60%     { box-shadow: 0 0 0 12px rgba(34,187,187,0), 0 4px 16px rgba(26,36,36,.2); }
}
@keyframes dent-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-5px) rotate(-3deg); }
  30%  { transform: translateX(5px) rotate(3deg); }
  50%  { transform: translateX(-3px); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@keyframes dent-shimmer {
  0%        { left: -80%; }
  50%, 100% { left: 130%; }
}
@keyframes dent-sticky-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes dent-img-glow {
  0%,100% { box-shadow: 0 8px 32px rgba(26,36,36,.22), 0 0 0 5px rgba(34,187,187,.08), 0 0 24px rgba(34,187,187,.16); }
  50%     { box-shadow: 0 8px 32px rgba(26,36,36,.22), 0 0 0 5px rgba(34,187,187,.15), 0 0 40px rgba(34,187,187,.30); }
}

/* ══════════════════════════════════════
   1 — HEADINGS — selectors قوية تكسر الثيم
══════════════════════════════════════ */

/* H1 — فيروزي غامق بدون خلفية */
body h1,
body .page h1,
body main h1,
body article h1,
body section h1,
body .product h1,
body .rte h1,
h1,
h1.product-name,
h1.product-title,
h1[class],
h1:not([class]) {
  background:       transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color:            #0A8585 !important;
  padding:          0 0 8px 0 !important;
  border-radius:    0 !important;
  border:           none !important;
  border-bottom:    3px solid rgba(10,133,133,.2) !important;
  font-family:      'Cairo', sans-serif !important;
  font-size:        24px !important;
  font-weight:      800 !important;
  line-height:      1.5 !important;
  margin-bottom:    14px !important;
  display:          block !important;
  width:            100% !important;
  box-sizing:       border-box !important;
  text-shadow:      none !important;
}

/* H2 — بنفسجي متوسط + أبيض */
body h2,
body .page h2,
body main h2,
body article h2,
body section h2,
body .product h2,
body .rte h2,
h2,
h2[class],
h2:not([class]) {
  background:       #6355A4 !important;
  background-color: #6355A4 !important;
  background-image: none !important;
  color:            #FFFFFF !important;
  padding:          11px 20px !important;
  border-radius:    10px !important;
  border:           none !important;
  font-family:      'Cairo', sans-serif !important;
  font-size:        18px !important;
  font-weight:      700 !important;
  line-height:      1.5 !important;
  margin:           20px 0 10px !important;
  display:          block !important;
  width:            100% !important;
  box-sizing:       border-box !important;
  text-shadow:      none !important;
}

/* H3 — تيل داكن + أبيض */
body h3,
body .page h3,
body main h3,
body article h3,
body section h3,
body .product h3,
body .rte h3,
h3,
h3[class],
h3:not([class]) {
  background:       #0A8585 !important;
  background-color: #0A8585 !important;
  background-image: none !important;
  color:            #FFFFFF !important;
  padding:          9px 18px !important;
  border-radius:    8px !important;
  border:           none !important;
  font-family:      'Cairo', sans-serif !important;
  font-size:        16px !important;
  font-weight:      700 !important;
  line-height:      1.5 !important;
  margin:           16px 0 8px !important;
  display:          block !important;
  width:            100% !important;
  box-sizing:       border-box !important;
  text-shadow:      none !important;
}

/* H4 — خط جانبي بدون خلفية */
body h4,
body .rte h4,
h4 {
  background:       transparent !important;
  background-color: transparent !important;
  color:            #1A2424 !important;
  font-family:      'Cairo', sans-serif !important;
  font-size:        15px !important;
  font-weight:      700 !important;
  border-right:     4px solid #22BBBB !important;
  border-bottom:    none !important;
  padding:          4px 12px !important;
  border-radius:    0 !important;
  margin:           14px 0 6px !important;
  display:          block !important;
  text-shadow:      none !important;
}

/* ══════════════════════════════════════
   استثناء — عناوين الكروت في التصنيف
   بدون خلفية عشان ما تأثرش على الكارد
══════════════════════════════════════ */
[class*="card"] h2,
[class*="card"] h3,
[class*="product-item"] h2,
[class*="product-item"] h3,
[class*="product_item"] h2,
[class*="product_item"] h3,
[class*="collection"] h2,
[class*="collection"] h3 {
  background:       transparent !important;
  background-color: transparent !important;
  color:            #1A2424 !important;
  padding:          8px 14px 4px !important;
  border-radius:    0 !important;
  font-size:        14px !important;
  border:           none !important;
  margin:           0 !important;
}

/* ══════════════════════════════════════
   2 — صورة المنتج — شادو + glow
══════════════════════════════════════ */
.product img,
[class*="product"] img,
[class*="media"] img,
[class*="gallery"] img,
[class*="slider"] img,
[class*="swiper"] img,
figure img {
  border-radius: 14px !important;
  border: 2.5px solid rgba(34,187,187,.3) !important;
  box-shadow:
    0 8px 32px rgba(26,36,36,.22),
    0 2px 8px  rgba(26,36,36,.12),
    0 0 0 5px rgba(34,187,187,.08),
    0 0 24px  rgba(34,187,187,.16) !important;
  animation: dent-img-glow 3.5s ease-in-out infinite !important;
  display: block !important;
  width: 100% !important;
  transition: transform .35s, box-shadow .35s !important;
}

.product img:hover,
[class*="product"] img:hover,
[class*="media"] img:hover,
figure img:hover {
  transform: translateY(-5px) scale(1.012) !important;
  border-color: #22BBBB !important;
  box-shadow:
    0 18px 52px rgba(26,36,36,.28),
    0 0 0 8px rgba(34,187,187,.13),
    0 0 52px rgba(34,187,187,.3) !important;
  animation: none !important;
}

/* ══════════════════════════════════════
   3 — زر السلة العادي — نبضة + shimmer
══════════════════════════════════════ */
form button[type="submit"],
button[type="submit"],
button[name="add"],
[class*="add-to-cart"],
[class*="addToCart"],
[class*="add_to_cart"],
[class*="btn-cart"],
[class*="btn_cart"] {
  background:    #22BBBB !important;
  color:         #1A2424 !important;
  border:        none !important;
  border-radius: 10px !important;
  font-family:   'Cairo', sans-serif !important;
  font-size:     16px !important;
  font-weight:   800 !important;
  cursor:        pointer !important;
  position:      relative !important;
  overflow:      hidden !important;
  animation:     dent-pulse 2.6s ease-out infinite !important;
  transition:    background .2s !important;
}

form button[type="submit"]::after,
button[type="submit"]::after,
button[name="add"]::after,
[class*="add-to-cart"]::after {
  content:    '' !important;
  position:   absolute !important;
  top: 0 !important; left: -80% !important;
  width:      55% !important;
  height:     100% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent) !important;
  transform:  skewX(-18deg) !important;
  animation:  dent-shimmer 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

form button[type="submit"]:hover,
button[type="submit"]:hover,
button[name="add"]:hover,
[class*="add-to-cart"]:hover {
  background: #5BCECE !important;
  animation:  dent-shake .5s ease, dent-pulse 2.6s ease-out infinite !important;
}

/* ══════════════════════════════════════
   4 — STICKY BAR — شريط ثابت في الأسفل
   يظهر بعد التمرير 300px لأسفل
══════════════════════════════════════ */
.dent-sticky {
  position:       fixed !important;
  bottom:         0 !important;
  right:          0 !important;
  left:           0 !important;
  z-index:        9999 !important;
  background:     #1A2424 !important;
  border-top:     2px solid #22BBBB !important;
  padding:        12px 20px !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            12px !important;
  box-shadow:     0 -4px 24px rgba(26,36,36,.35) !important;
  transform:      translateY(100%) !important;
  transition:     transform .35s cubic-bezier(.4,0,.2,1) !important;
  font-family:    'Cairo', sans-serif !important;
}

.dent-sticky.dent-sticky--visible {
  transform: translateY(0) !important;
}

/* اسم المنتج في الشريط */
.dent-sticky__name {
  font-size:   14px !important;
  font-weight: 700 !important;
  color:       #C8F0F0 !important;
  flex:        1 !important;
  overflow:    hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display:     block !important;
  background:  transparent !important;
  padding:     0 !important;
  margin:      0 !important;
  border:      none !important;
}

/* السعر في الشريط */
.dent-sticky__price {
  font-size:   20px !important;
  font-weight: 900 !important;
  color:       #22BBBB !important;
  white-space: nowrap !important;
  font-family: 'Cairo', sans-serif !important;
}

/* زر أضف للسلة في الشريط */
.dent-sticky__btn-cart {
  background:    #22BBBB !important;
  color:         #1A2424 !important;
  border:        none !important;
  border-radius: 8px !important;
  padding:       11px 22px !important;
  font-family:   'Cairo', sans-serif !important;
  font-size:     14px !important;
  font-weight:   800 !important;
  cursor:        pointer !important;
  white-space:   nowrap !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           7px !important;
  transition:    background .2s, transform .15s !important;
  position:      relative !important;
  overflow:      hidden !important;
  animation:     dent-pulse 2.6s ease-out infinite !important;
  text-decoration: none !important;
}

.dent-sticky__btn-cart:hover {
  background:  #5BCECE !important;
  animation:   dent-shake .5s ease, dent-pulse 2.6s ease-out infinite !important;
}

/* زر واتساب في الشريط */
.dent-sticky__btn-wa {
  background:    #25D366 !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 8px !important;
  padding:       11px 18px !important;
  font-family:   'Cairo', sans-serif !important;
  font-size:     14px !important;
  font-weight:   700 !important;
  cursor:        pointer !important;
  white-space:   nowrap !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           7px !important;
  transition:    background .2s !important;
  text-decoration: none !important;
}
.dent-sticky__btn-wa:hover { background: #1EB857 !important; }

/* أيقونات في الشريط */
.dent-sticky__icon { font-size: 18px !important; }

/* موبايل — نخفي الاسم */
@media (max-width: 600px) {
  .dent-sticky { padding: 10px 12px !important; gap: 8px !important; }
  .dent-sticky__name { display: none !important; }
  .dent-sticky__price { font-size: 17px !important; }
  .dent-sticky__btn-cart,
  .dent-sticky__btn-wa { padding: 10px 14px !important; font-size: 13px !important; }
}

/* ══════════════════════════════════════
   باقي التفاصيل
══════════════════════════════════════ */

/* نقاط القوائم */
.product ul li,
[class*="description"] ul li,
.rte ul li {
  list-style: none !important;
  position:   relative !important;
  padding-right: 18px !important;
  margin-bottom: 7px !important;
}
.product ul li::before,
[class*="description"] ul li::before,
.rte ul li::before {
  content:       '' !important;
  position:      absolute !important;
  right:         0 !important;
  top:           9px !important;
  width:         7px !important;
  height:        7px !important;
  background:    #22BBBB !important;
  border-radius: 50% !important;
}

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: #EDF8F8; }
::-webkit-scrollbar-thumb  { background: #5BCECE; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #22BBBB; }

/* Responsive headings */
@media (max-width: 768px) {
  body h1 { font-size: 19px !important; }
  body h2 { font-size: 16px !important; padding: 10px 14px !important; }
  body h3 { font-size: 14px !important; padding: 8px 12px !important; }
}
<!--
  ════════════════════════════════════════════════════════
  مجمع دنت الطبي — شريط الشراء الثابت (Sticky Bar)
  يُضاف في: لوحة التحكم ← المظهر ← HTML مخصص ← قبل </body>
  ════════════════════════════════════════════════════════
  عدّلي:
    WHATSAPP_NUMBER  ← رقم الواتساب
    SCROLL_OFFSET    ← كم بيكسل نتمرير قبل ما يظهر
  ════════════════════════════════════════════════════════
-->
<div class="dent-sticky" id="dentStickyBar">

  <!-- اسم المنتج — بيتجلب تلقائياً من الصفحة -->
  <span class="dent-sticky__name" id="dentStickyName">جاري التحميل...</span>

  <!-- السعر — بيتجلب تلقائياً -->
  <span class="dent-sticky__price" id="dentStickyPrice"></span>

  <!-- زر أضف للسلة -->
  <button class="dent-sticky__btn-cart" id="dentStickyCart" onclick="dentAddToCart()">
    <span class="dent-sticky__icon">🛒</span>
    أضف للسلة
  </button>

  <!-- زر واتساب -->
  <a class="dent-sticky__btn-wa"
     id="dentStickyWA"
     href="https://wa.me/966509919924?text=أريد الاستفسار عن هذا المنتج"
     target="_blank"
     rel="noopener">
    <span class="dent-sticky__icon">💬</span>
    واتساب
  </a>

</div>

<script>
(function () {
  /* ── إعدادات ── */
  var WHATSAPP_NUMBER = '966509919924';
  var SCROLL_OFFSET   = 300; /* px — متى يظهر الشريط */

  var bar     = document.getElementById('dentStickyBar');
  var nameEl  = document.getElementById('dentStickyName');
  var priceEl = document.getElementById('dentStickyPrice');
  var waBtn   = document.getElementById('dentStickyWA');

  /* ── جلب اسم المنتج من الصفحة ── */
  function getProductName() {
    var selectors = ['h1', '.product__title', '.product-name',
                     '[class*="product_title"]', '[class*="product-name"]'];
    for (var i = 0; i < selectors.length; i++) {
      var el = document.querySelector(selectors[i]);
      if (el && el.textContent.trim()) {
        return el.textContent.trim().substring(0, 60);
      }
    }
    return '';
  }

  /* ── جلب السعر من الصفحة ── */
  function getProductPrice() {
    var selectors = ['.product__price', '.product-price', '[class*="price__current"]',
                     '[class*="product_price"]', '.price--sale .price-item--sale',
                     '[class*="price"]:not([class*="old"]):not([class*="compare"])'];
    for (var i = 0; i < selectors.length; i++) {
      var el = document.querySelector(selectors[i]);
      if (el && el.textContent.trim()) {
        return el.textContent.trim().replace(/\s+/g,' ');
      }
    }
    return '';
  }

  /* ── جلب رابط الصفحة للواتساب ── */
  function updateWALink(name) {
    var msg = 'أريد الاستفسار عن: ' + name + ' — ' + window.location.href;
    waBtn.href = 'https://wa.me/' + WHATSAPP_NUMBER + '?text=' + encodeURIComponent(msg);
  }

  /* ── تعبئة البيانات ── */
  function populate() {
    var name  = getProductName();
    var price = getProductPrice();
    if (name)  { nameEl.textContent  = name; updateWALink(name); }
    if (price) { priceEl.textContent = price; }
  }

  /* ── إضافة للسلة من زر الشريط ── */
  window.dentAddToCart = function () {
    /* يحاول يضغط زر السلة الأصلي في الصفحة */
    var selectors = [
      'form[action*="cart"] button[type="submit"]',
      'button[name="add"]',
      '[class*="add-to-cart"]',
      '[class*="addToCart"]',
      'form .btn-add-to-cart',
      '.s-add-to-cart-btn'
    ];
    for (var i = 0; i < selectors.length; i++) {
      var btn = document.querySelector(selectors[i]);
      if (btn) { btn.click(); return; }
    }
    /* fallback — يروح لأعلى الصفحة */
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  /* ── إظهار / إخفاء عند التمرير ── */
  var visible = false;
  function onScroll() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if (scrolled > SCROLL_OFFSET && !visible) {
      bar.classList.add('dent-sticky--visible');
      visible = true;
    } else if (scrolled <= SCROLL_OFFSET && visible) {
      bar.classList.remove('dent-sticky--visible');
      visible = false;
    }
  }

  /* ── تشغيل ── */
  populate();
  window.addEventListener('scroll', onScroll, { passive: true });

  /* إعادة تعبئة البيانات بعد ثانيتين (في حالة الصفحة بتتحمل ببطء) */
  setTimeout(populate, 2000);

})();
</script>