document.addEventListener('DOMContentLoaded', function () {
  const socialHTML = `
<style>
/* زر الواتساب الرئيسي */
#wa-float-btn {
position: fixed;
bottom: 25px;
right: 25px;
width: 70px;
height: 70px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 25px rgba(37,211,102,0.6), 0 0 0 0 rgba(37,211,102,0.4);
z-index: 99999;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
animation: pulseGlow 2s infinite;
border: 3px solid rgba(255, 255, 255, 0.3);
}

@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 8px 25px rgba(37,211,102,0.6), 0 0 0 0 rgba(37,211,102,0.4);
}
50% {
box-shadow: 0 8px 35px rgba(37,211,102,0.8), 0 0 0 20px rgba(37,211,102,0);
}
}

#wa-float-btn:hover {
transform: scale(1.15) rotate(-10deg);
box-shadow: 0 12px 40px rgba(37,211,102,0.8);
background: linear-gradient(135deg, #2cf07a 0%, #14a890 100%);
}

#wa-float-btn svg {
width: 40px;
height: 40px;
fill: white;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
10% { transform: rotate(-10deg); }
20% { transform: rotate(10deg); }
30% { transform: rotate(-10deg); }
40% { transform: rotate(10deg); }
50%, 100% { transform: rotate(0deg); }
}

/* Badge الإشعارات */
#wa-badge {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, #FF3B30 0%, #ff6b6b 100%);
color: white;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
border: 3px solid white;
animation: bounceScale 1.5s infinite;
box-shadow: 0 4px 12px rgba(255, 59, 48, 0.6);
}

@keyframes bounceScale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}

/* زر التبديل المصغر */
#toggle-social {
position: fixed;
bottom: 105px;
right: 25px;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #007b82 0%, #005c63 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 123, 130, 0.4);
z-index: 99999;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
}

#toggle-social:hover {
transform: scale(1.2);
box-shadow: 0 6px 20px rgba(0, 123, 130, 0.5);
background: linear-gradient(135deg, #008f96 0%, #006b72 100%);
}

#toggle-social.active {
transform: rotate(180deg) scale(1.1);
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.7);
}

#toggle-social svg {
width: 22px;
height: 22px;
fill: white;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
transition: transform 0.4s ease;
}

#toggle-social.active svg {
transform: rotate(180deg);
}

/* شريط المنصات الأفقي */
#social-bar {
position: fixed;
bottom: 25px;
right: 110px;
display: flex;
flex-direction: row;
gap: 10px;
z-index: 99998;
opacity: 0;
transform: translateX(50px);
pointer-events: none;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#social-bar.show {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}

.social-btn {
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 3px solid rgba(255, 255, 255, 0.2);
animation: slideInRight 0.6s ease forwards;
opacity: 0;
}

.social-btn:nth-child(1) { animation-delay: 0.1s; }
.social-btn:nth-child(2) { animation-delay: 0.2s; }
.social-btn:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px) scale(0.7);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}

.social-btn:hover {
transform: translateY(-8px) scale(1.15);
}

.social-btn svg {
width: 28px;
height: 28px;
fill: white;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
transition: all 0.3s;
}

.social-btn:hover svg {
transform: scale(1.1);
}

/* ألوان المنصات */
#instagram-btn {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow: 0 6px 20px rgba(220, 39, 67, 0.5);
}

#instagram-btn:hover {
box-shadow: 0 10px 30px rgba(220, 39, 67, 0.7);
}

#tiktok-btn {
background: linear-gradient(135deg, #000000 0%, #69C9D0 50%, #EE1D52 100%);
box-shadow: 0 6px 20px rgba(105, 201, 208, 0.5);
}

#tiktok-btn:hover {
box-shadow: 0 10px 30px rgba(238, 29, 82, 0.7);
}

#twitter-btn {
background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

#twitter-btn:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
background: linear-gradient(135deg, #000000 0%, #404040 100%);
}

/* Tooltip */
.social-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
right: 50%;
transform: translateX(50%) translateY(-10px);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.social-btn:hover::after {
opacity: 1;
transform: translateX(50%) translateY(-5px);
}

/* Widget الواتساب المحسّن */
#wa-custom-widget {
position: fixed;
bottom: 160px;
right: 25px;
width: 400px;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(35,220,225,0.2);
z-index: 99998;
display: none;
flex-direction: column;
overflow: hidden;
max-height: 580px;
}

#wa-custom-widget.show {
display: flex;
animation: waPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: bottom right;
}

/* أنيميشن الإغلاق */
#wa-custom-widget.wa-closing {
animation: waPopClose 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
transform-origin: bottom right;
}

@keyframes waPopUp {
from {
opacity: 0;
transform: scale(0.6) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

@keyframes waPopClose {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.6) translateY(20px);
}
}

/* Header محسّن */
#wa-header {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
padding: 24px 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}

#wa-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
animation: float 8s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-30px, -30px); }
}

#wa-header-content {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 1;
}

#wa-avatar {
width: 55px;
height: 55px;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid rgba(255, 255, 255, 0.4);
position: relative;
}

#wa-avatar svg {
width: 30px;
height: 30px;
fill: white;
animation: shake 3s ease-in-out infinite;
}

#wa-avatar::after {
content: '';
position: absolute;
bottom: 2px;
right: 2px;
width: 14px;
height: 14px;
background: #25D366;
border: 3px solid white;
border-radius: 50%;
animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}

@keyframes shake {
0%, 100% { transform: rotate(0deg); }
10% { transform: rotate(-15deg); }
20% { transform: rotate(15deg); }
30% { transform: rotate(-15deg); }
40% { transform: rotate(15deg); }
50%, 100% { transform: rotate(0deg); }
}

#wa-header-text h3 {
margin: 0 0 4px 0;
font-size: 19px;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
letter-spacing: 0.3px;
}

#wa-header-text p {
margin: 0;
font-size: 13px;
opacity: 0.95;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}

#wa-header-text p::before {
content: '●';
color: #2cf07a;
font-size: 16px;
animation: blink 2s infinite;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}

#wa-close {
background: rgba(255,255,255,0.25);
border: none;
color: white;
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
font-size: 26px;
line-height: 1;
transition: all 0.3s;
position: relative;
z-index: 1;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}

#wa-close:hover {
background: rgba(255,255,255,0.4);
transform: rotate(90deg) scale(1.1);
}

/* Body محسّن */
#wa-body {
padding: 28px 24px;
background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
flex: 1;
overflow-y: auto;
position: relative;
}

#wa-body::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,.08) 15px, rgba(255,255,255,.08) 30px);
pointer-events: none;
}

#wa-message {
background: white;
padding: 20px 22px;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
position: relative;
margin-bottom: 18px;
animation: messageSlide 0.6s ease;
border-left: 4px solid #25D366;
}

@keyframes messageSlide {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

#wa-message::after {
content: '';
position: absolute;
top: 20px;
right: -12px;
width: 0;
height: 0;
border-left: 12px solid white;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}

#wa-message p {
margin: 0 0 10px 0;
color: #2c2c2c;
font-size: 15px;
line-height: 1.7;
font-weight: 500;
}

#wa-message p:last-of-type {
margin-bottom: 12px;
}

#wa-team {
color: #128C7E;
font-weight: 800;
font-size: 14px;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
padding-top: 8px;
border-top: 1px solid rgba(0,0,0,0.06);
}

#wa-team-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #25D366, #128C7E);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}

/* Footer محسّن */
#wa-footer {
padding: 20px;
background: #f8f8f8;
border-top: 1px solid rgba(0,0,0,0.06);
}

#wa-start-btn {
width: 100%;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
border: none;
padding: 18px;
border-radius: 30px;
font-size: 17px;
font-weight: 800;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(37,211,102,0.35);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}

#wa-start-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}

#wa-start-btn:hover::before {
width: 350px;
height: 350px;
}

#wa-start-btn:hover {
background: linear-gradient(135deg, #2cf07a 0%, #14a890 100%);
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(37,211,102,0.6);
}

#wa-start-btn:active {
transform: translateY(-1px) scale(0.98);
}

#wa-start-btn span {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

@media (max-width: 768px) {

/* ═══ Widget ─ نافذة مصغرة مرتبطة بالزر ═══ */
#wa-custom-widget {
width: 290px;
right: 12px;
bottom: 120px;
max-height: 55vh;
border-radius: 18px;
box-shadow:
  0 10px 40px rgba(0,0,0,0.25),
  0 0 0 1px rgba(37,211,102,0.15);
}

#wa-custom-widget.show {
animation: waPopUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: bottom right;
}

/* رفع النافذة في صفحات المنتجات */
#wa-float-btn.wa-product-page ~ #wa-custom-widget {
bottom: 260px;
}

/* ─── Header مصغر ─── */
#wa-header {
padding: 14px 14px;
}

#wa-header::before {
animation: none;
}

#wa-header-content {
gap: 10px;
}

#wa-avatar {
width: 38px;
height: 38px;
border-width: 2px;
}

#wa-avatar svg {
width: 20px;
height: 20px;
animation: none;
}

#wa-avatar::after {
width: 10px;
height: 10px;
border-width: 2px;
bottom: 0;
right: 0;
}

#wa-header-text h3 {
font-size: 14px;
margin-bottom: 1px;
text-shadow: none;
}

#wa-header-text p {
font-size: 11px;
gap: 4px;
}

#wa-header-text p::before {
font-size: 10px;
}

#wa-close {
width: 28px;
height: 28px;
font-size: 18px;
}

/* ─── Body مصغر ─── */
#wa-body {
padding: 14px 12px;
}

#wa-body::before {
display: none;
}

#wa-message {
padding: 12px 14px;
border-radius: 12px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-left-width: 3px;
}

#wa-message::after {
top: 14px;
right: -8px;
border-left-width: 8px;
border-top-width: 8px;
border-bottom-width: 8px;
}

#wa-message p {
font-size: 13px;
line-height: 1.5;
margin-bottom: 5px;
}

#wa-team {
font-size: 11px;
gap: 5px;
padding-top: 6px;
}

#wa-team-icon {
width: 18px;
height: 18px;
font-size: 10px;
}

/* ─── Footer مصغر ─── */
#wa-footer {
padding: 10px 12px 12px;
}

#wa-start-btn {
padding: 12px 14px;
font-size: 13px;
border-radius: 22px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}

#wa-start-btn span {
gap: 6px;
}

/* ═══ الزر العائم ─ دائري احترافي (يمين) ═══ */
#wa-float-btn {
right: 16px;
bottom: 18px;
width: 54px;
height: 54px;
border-radius: 50%;
animation: waBtnBreathe 3.5s ease-in-out infinite;
}

#wa-float-btn::before {
inset: -2px;
border-radius: 50%;
animation: none;
opacity: 0.4;
}

#wa-float-btn::after {
border-radius: 50%;
}

#wa-float-btn svg {
width: 26px;
height: 26px;
}

#wa-float-btn:hover {
border-radius: 50%;
}

/* ─── رفع الزر في صفحات المنتجات (فوق أزرار الطلب) ─── */
#wa-float-btn.wa-product-page {
bottom: 140px;
}

/* ═══ زر التبديل ─ صغير فوق زر الواتساب ═══ */
#toggle-social {
right: 20px;
bottom: 80px;
width: 34px;
height: 34px;
border-radius: 50%;
}

#toggle-social svg {
width: 16px;
height: 16px;
}

/* ═══ شريط المنصات ─ عمودي مصغر فوق التبديل ═══ */
#social-bar {
right: 18px;
bottom: 122px;
flex-direction: column;
gap: 8px;
}

.social-btn {
width: 36px;
height: 36px;
}

.social-btn svg {
width: 18px;
height: 18px;
}

/* ─── رفع أزرار السوشيال في صفحات المنتجات ─── */
#wa-float-btn.wa-product-page ~ #toggle-social {
bottom: 202px;
}

#wa-float-btn.wa-product-page ~ #social-bar {
bottom: 244px;
}
}

/* ─── حالات الإخفاء/الإظهار الذكي (موبايل) ─── */
#wa-float-btn,
#toggle-social {
transition:
  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
  opacity 0.3s ease,
  box-shadow 0.4s ease,
  background 0.4s ease,
  border-color 0.3s ease,
  border-radius 0.3s ease;
}

#wa-float-btn.wa-scroll-hidden {
transform: translateY(100px) scale(0.8) !important;
opacity: 0 !important;
pointer-events: none !important;
animation: none !important;
}

#toggle-social.wa-scroll-hidden {
transform: translateY(80px) scale(0.8) !important;
opacity: 0 !important;
pointer-events: none !important;
}

/* ─── زر إعادة الإظهار المصغر ─── */
#wa-mini-toggle {
position: fixed;
bottom: 18px;
right: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(37, 211, 102, 0.35);
border: 1.5px solid rgba(37, 211, 102, 0.5);
cursor: pointer;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}

/* رفع في صفحات المنتجات */
#wa-mini-toggle.wa-mini-product {
bottom: 140px;
}

#wa-mini-toggle.visible {
display: flex;
opacity: 0.6;
pointer-events: auto;
animation: waMiniPulse 2s ease-in-out infinite;
}

#wa-mini-toggle:active {
transform: scale(0.9);
opacity: 1;
}

#wa-mini-toggle svg {
width: 14px;
height: 14px;
fill: #25D366;
}

@keyframes waMiniPulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}

</style>

<!-- زر الواتساب -->
<div id="wa-float-btn">
<svg viewBox="0 0 16 16"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"></path></svg>
<span id="wa-badge">1</span>
</div>

<!-- زر إعادة الإظهار المصغر -->
<div id="wa-mini-toggle">
<svg viewBox="0 0 16 16"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326z"></path></svg>
</div>

<!-- زر التبديل المصغر -->
<div id="toggle-social">
<svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
</div>

<!-- شريط المنصات -->
<div id="social-bar">
<div class="social-btn" id="instagram-btn" data-tooltip="انستغرام">
<svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</div>

<div class="social-btn" id="tiktok-btn" data-tooltip="تيك توك">
<svg viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
</div>

<div class="social-btn" id="twitter-btn" data-tooltip="X (تويتر)">
<svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</div>
</div>

<!-- نافذة الواتساب المحسّنة -->
<div id="wa-custom-widget">
<div id="wa-header">
<div id="wa-header-content">
<div id="wa-avatar">
<svg viewBox="0 0 16 16"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"></path></svg>
</div>
<div id="wa-header-text">
<h3>دعم العملاء</h3>
<p>متاح الآن - نرد خلال دقيقة</p>
</div>
</div>
<button id="wa-close">×</button>
</div>
<div id="wa-body">
<div id="wa-message">
<p>مرحباً! 👋</p>
<p>كيف يمكننا مساعدتك اليوم؟ فريقنا جاهز للرد على جميع استفساراتك.</p>
<p id="wa-team">
<span id="wa-team-icon">⚡</span>
فريق الدعم
</p>
</div>
</div>
<div id="wa-footer">
<button id="wa-start-btn"><span>💬 بدء المحادثة الآن</span></button>
</div>
</div>
`;





  document.body.insertAdjacentHTML('beforeend', socialHTML);

  // المتغيرات
  const waBtn = document.getElementById('wa-float-btn');
  const widget = document.getElementById('wa-custom-widget');
  const closeBtn = document.getElementById('wa-close');
  const startBtn = document.getElementById('wa-start-btn');
  const badge = document.getElementById('wa-badge');
  const toggleBtn = document.getElementById('toggle-social');
  const socialBar = document.getElementById('social-bar');

  // ─── كشف صفحة المنتج ورفع الزر فوق أزرار الطلب ───
  function checkProductPage() {
    var isProductPage =
      document.querySelector('.s-product-options-option-container') ||
      document.querySelector('.product__description') ||
      document.querySelector('#product-content') ||
      document.querySelector('[id*="add-to-cart"]') ||
      /\/(p|products)\//.test(window.location.pathname);
    if (isProductPage && window.innerWidth <= 768) {
      waBtn.classList.add('wa-product-page');
      var mt = document.getElementById('wa-mini-toggle');
      if (mt) mt.classList.add('wa-mini-product');
    } else {
      waBtn.classList.remove('wa-product-page');
      var mt2 = document.getElementById('wa-mini-toggle');
      if (mt2) mt2.classList.remove('wa-mini-product');
    }
  }
  // فحص عند التحميل وعند تغيير حجم الشاشة
  checkProductPage();
  window.addEventListener('resize', checkProductPage);

  // دالة إغلاق النافذة مع أنيميشن
  function closeWidget() {
    if (!widget.classList.contains('show')) return;
    if (widget.classList.contains('wa-closing')) return;
    widget.classList.add('wa-closing');
    // إغلاق بعد انتهاء الأنيميشن أو بعد 300ms كحد أقصى
    var closed = false;
    function finishClose() {
      if (closed) return;
      closed = true;
      widget.classList.remove('show', 'wa-closing');
    }
    widget.addEventListener('animationend', finishClose, { once: true });
    setTimeout(finishClose, 300);
  }

  // فتح/إغلاق Widget
  waBtn.addEventListener('click', function () {
    if (widget.classList.contains('show')) {
      closeWidget();
    } else {
      widget.classList.remove('wa-closing');
      widget.classList.add('show');
      badge.style.display = 'none';
    }
    socialBar.classList.remove('show');
    toggleBtn.classList.remove('active');
  });

  closeBtn.addEventListener('click', function () {
    closeWidget();
  });

  // فتح الواتساب
  startBtn.addEventListener('click', function () {
    window.open('https://api.whatsapp.com/send/?phone=966579844925&text=مرحباً، أحتاج مساعدة 👋', '_blank');
  });

  // تبديل شريط المنصات
  toggleBtn.addEventListener('click', function () {
    socialBar.classList.toggle('show');
    toggleBtn.classList.toggle('active');
    closeWidget();
  });

  // روابط المنصات المحدثة
  document.getElementById('instagram-btn').addEventListener('click', function () {
    window.open('https://www.instagram.com/Miftahdigitalksa', '_blank');
  });

  document.getElementById('tiktok-btn').addEventListener('click', function () {
    window.open('https://www.tiktok.com/@Miftahksa', '_blank');
  });

  document.getElementById('twitter-btn').addEventListener('click', function () {
    window.open('https://x.com/MiftahKSA', '_blank');
  });

  // إغلاق عند النقر خارج العناصر
  document.addEventListener('click', function (e) {
    if (!widget.contains(e.target) && !waBtn.contains(e.target) &&
      !socialBar.contains(e.target) && !toggleBtn.contains(e.target)) {
      closeWidget();
      socialBar.classList.remove('show');
      toggleBtn.classList.remove('active');
    }
  });

  // ═══════════════════════════════════════════════════════
  //  نظام الإخفاء/الإظهار الذكي عند التمرير (موبايل فقط)
  // ═══════════════════════════════════════════════════════

  var lastScrollY = window.scrollY;
  var scrollDelta = 0;
  var scrollThreshold = 60;
  var ticking = false;
  var isHidden = false;
  var miniToggle = document.getElementById('wa-mini-toggle');

  function isMobile() {
    return window.innerWidth <= 768;
  }

  function hideFloatingElements() {
    if (isHidden) return;
    isHidden = true;
    waBtn.classList.add('wa-scroll-hidden');
    toggleBtn.classList.add('wa-scroll-hidden');
    // إغلاق النافذة والشريط عند الإخفاء
    if (socialBar.classList.contains('show')) {
      socialBar.classList.remove('show');
      toggleBtn.classList.remove('active');
    }
    // إظهار زر إعادة الإظهار المصغر
    if (miniToggle) miniToggle.classList.add('visible');
  }

  function showFloatingElements() {
    if (!isHidden) return;
    isHidden = false;
    waBtn.classList.remove('wa-scroll-hidden');
    toggleBtn.classList.remove('wa-scroll-hidden');
    // إخفاء زر إعادة الإظهار المصغر
    if (miniToggle) miniToggle.classList.remove('visible');
  }

  // زر إعادة الإظهار المصغر
  if (miniToggle) {
    miniToggle.addEventListener('click', function (e) {
      e.stopPropagation();
      scrollDelta = 0;
      showFloatingElements();
    });
  }

  function onScroll() {
    if (!isMobile()) {
      if (isHidden) showFloatingElements();
      return;
    }

    var currentScrollY = window.scrollY;
    var scrollDirection = currentScrollY - lastScrollY;

    if (Math.abs(scrollDirection) < 3) {
      lastScrollY = currentScrollY;
      ticking = false;
      return;
    }

    if (scrollDirection > 0) {
      scrollDelta += scrollDirection;
      if (scrollDelta > scrollThreshold) {
        hideFloatingElements();
        if (widget.classList.contains('show')) {
          closeWidget();
        }
      }
    } else {
      scrollDelta = 0;
      showFloatingElements();
    }

    if (currentScrollY <= 10) {
      scrollDelta = 0;
      showFloatingElements();
    }

    lastScrollY = currentScrollY;
    ticking = false;
  }

  window.addEventListener('scroll', function () {
    if (!ticking) {
      requestAnimationFrame(onScroll);
      ticking = true;
    }
  }, { passive: true });
});


document.addEventListener('DOMContentLoaded', function () {
  // البحث عن قسم الوسوم (tags)
  const tagsSection = document.querySelector('.nova-main-content .mb-3');

  if (tagsSection && !document.querySelector('.product-features-boxes')) {
    // إنشاء حاوية المزايا
    const featuresContainer = document.createElement('div');
    featuresContainer.className = 'product-features-boxes';
    featuresContainer.style.cssText = `
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px !important;
      margin: 20px 0 !important;
      width: 100% !important;
    `;

    // البيانات للصناديق الثلاثة
    const features = [
      {
        icon: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#007b82" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          <path d="M8 10h.01M12 10h.01M16 10h.01" stroke="#007b82" stroke-width="3" stroke-linecap="round"></path>
        </svg>`,
        title: 'الدعم الفني'
      },
      {
        icon: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#007b82" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
          <path d="M9 12l2 2 4-4" stroke="#007b82" stroke-width="2.5"></path>
        </svg>`,
        title: 'ضمان الاشتراك'
      },
      {
        icon: `<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#007b82" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
        </svg>`,
        title: 'أفضل الأسعار'
      }
    ];

    // إنشاء كل صندوق
    features.forEach((feature, index) => {
      const box = document.createElement('div');
      box.className = `feature-box feature-box-${index + 1}`;
      box.style.cssText = `
        background: linear-gradient(135deg, rgba(0, 123, 130, 0.06) 0%, rgba(0, 92, 99, 0.03) 100%) !important;
        border: 1.5px solid rgba(0, 123, 130, 0.2) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: right !important;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        position: relative !important;
        overflow: hidden !important;
        min-height: 58px !important;
      `;

      box.innerHTML = `
        <div class="feature-icon" style="
          flex-shrink: 0;
          transform: scale(1);
          transition: transform 0.35s ease;
          filter: drop-shadow(0 3px 8px rgba(0, 123, 130, 0.25));
          display: flex;
          align-items: center;
          justify-content: center;
        ">
          ${feature.icon}
        </div>
        <div class="feature-content" style="
          flex: 1;
          text-align: right;
        ">
          <h3 style="
            color: #007b82 !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            margin: 0 !important;
            line-height: 1.3 !important;
            white-space: nowrap;
          ">${feature.title}</h3>
        </div>
      `;

      // تأثيرات Hover
      box.addEventListener('mouseenter', function () {
        this.style.transform = 'translateY(-3px)';
        this.style.boxShadow = '0 8px 20px rgba(0, 123, 130, 0.18)';
        this.style.borderColor = 'rgba(0, 123, 130, 0.4)';
        this.style.background = 'linear-gradient(135deg, rgba(0, 123, 130, 0.1) 0%, rgba(0, 92, 99, 0.05) 100%)';
        const icon = this.querySelector('.feature-icon');
        if (icon) icon.style.transform = 'scale(1.1) rotate(5deg)';
      });

      box.addEventListener('mouseleave', function () {
        this.style.transform = 'translateY(0)';
        this.style.boxShadow = 'none';
        this.style.borderColor = 'rgba(0, 123, 130, 0.2)';
        this.style.background = 'linear-gradient(135deg, rgba(0, 123, 130, 0.06) 0%, rgba(0, 92, 99, 0.03) 100%)';
        const icon = this.querySelector('.feature-icon');
        if (icon) icon.style.transform = 'scale(1) rotate(0deg)';
      });

      featuresContainer.appendChild(box);
    });

    // إدراج الصناديق مباشرة بعد قسم الوسوم
    tagsSection.after(featuresContainer);

    // ── ستايلات الموبايل لصناديق المزايا ──
    const featuresStyle = document.createElement('style');
    featuresStyle.textContent = `
      @media (max-width: 640px) {
        .product-features-boxes {
          grid-template-columns: 1fr !important;
          gap: 8px !important;
          margin: 14px 0 !important;
        }
        .product-features-boxes .feature-box {
          padding: 10px 12px !important;
          min-height: auto !important;
          gap: 8px !important;
          flex-direction: row !important;
        }
        .product-features-boxes .feature-icon svg {
          width: 24px !important;
          height: 24px !important;
        }
        .product-features-boxes .feature-content h3 {
          font-size: 13px !important;
          white-space: normal !important;
          word-break: keep-all !important;
        }
      }
      @media (min-width: 641px) and (max-width: 768px) {
        .product-features-boxes .feature-icon svg {
          width: 24px !important;
          height: 24px !important;
        }
        .product-features-boxes .feature-content h3 {
          font-size: 12px !important;
          white-space: normal !important;
        }
        .product-features-boxes .feature-box {
          padding: 8px 10px !important;
          min-height: auto !important;
          gap: 6px !important;
        }
      }
    `;
    document.head.appendChild(featuresStyle);
  }
});


document.addEventListener('DOMContentLoaded', function () {
  const heroSection = document.querySelector('.nova-video-text-photo .flex-1.text-center');

  if (heroSection) {
    // إضافة Styles مع !important
    const style = document.createElement('style');
    style.textContent = `
      @keyframes floatAnimation {
        0%, 100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-8px);
        }
      }
      
      .hero-search-input {
        background: #ffffff !important;
        background-color: #ffffff !important;
        text-align: right !important;
        direction: rtl !important;
      }
      
      .hero-search-input::placeholder {
        color: rgba(26, 35, 64, 0.45) !important;
        text-align: right !important;
      }
      
      .hero-search-container {
        animation: floatAnimation 3s ease-in-out infinite !important;
      }
    `;
    document.head.appendChild(style);

    // إنشاء مربع البحث
    const searchBox = document.createElement('div');
    searchBox.className = 'hero-search-container';
    searchBox.style.cssText = `
      margin-top: 40px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
    `;

    const searchForm = document.createElement('form');
    searchForm.action = '/search';
    searchForm.method = 'GET';
    searchForm.style.cssText = `
      position: relative;
      width: 100%;
    `;

    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.name = 'q';
    searchInput.className = 'hero-search-input';
    searchInput.placeholder = 'ابحث عن المنتجات، الباقات أو استخدم كلمات مفتاحية…';
    searchInput.setAttribute('dir', 'rtl');
    searchInput.style.cssText = `
      width: 100% !important;
      height: 65px !important;
      padding: 0 24px 0 70px !important;
      background: #ffffff !important;
      background-color: #ffffff !important;
      border: 2px solid rgba(0, 123, 130, 0.35) !important;
      border-radius: 16px !important;
      color: #1a2340 !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      outline: none !important;
      box-shadow: 0 6px 24px rgba(0, 123, 130, 0.12), 0 0 0 1px rgba(0, 123, 130, 0.08) inset !important;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      text-align: right !important;
      direction: rtl !important;
      line-height: 65px !important;
    `;

    searchInput.addEventListener('focus', function () {
      this.style.borderColor = 'rgba(0, 123, 130, 0.7)';
      this.style.boxShadow = '0 10px 32px rgba(0, 123, 130, 0.25), 0 0 0 1px rgba(0, 123, 130, 0.2) inset';
      searchBox.style.animation = 'none';
    });

    searchInput.addEventListener('blur', function () {
      this.style.borderColor = 'rgba(0, 123, 130, 0.35)';
      this.style.boxShadow = '0 6px 24px rgba(0, 123, 130, 0.12), 0 0 0 1px rgba(0, 123, 130, 0.08) inset';
      searchBox.style.animation = 'floatAnimation 3s ease-in-out infinite';
    });

    const searchButton = document.createElement('button');
    searchButton.type = 'submit';
    searchButton.innerHTML = `
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
      </svg>
    `;
    searchButton.style.cssText = `
      position: absolute !important;
      left: 10px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 48px !important;
      height: 48px !important;
      background: linear-gradient(135deg, #007b82 0%, #005c63 100%) !important;
      border: none !important;
      border-radius: 12px !important;
      color: #ffffff !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 6px 20px rgba(0, 123, 130, 0.4) !important;
      transition: all 0.2s ease !important;
      flex-shrink: 0 !important;
    `;

    searchButton.addEventListener('mouseenter', function () {
      this.style.boxShadow = '0 8px 24px rgba(0, 123, 130, 0.5)';
      this.style.filter = 'brightness(1.1)';
    });

    searchButton.addEventListener('mouseleave', function () {
      this.style.boxShadow = '0 6px 20px rgba(0, 123, 130, 0.4)';
      this.style.filter = 'brightness(1)';
    });

    searchButton.addEventListener('mousedown', function () {
      this.style.transform = 'translateY(-50%) scale(0.95)';
    });

    searchButton.addEventListener('mouseup', function () {
      this.style.transform = 'translateY(-50%) scale(1)';
    });

    // تجميع العناصر
    searchForm.appendChild(searchInput);
    searchForm.appendChild(searchButton);
    searchBox.appendChild(searchForm);

    // إضافة مربع البحث بعد الفقرة
    const paragraph = heroSection.querySelector('p');
    if (paragraph) {
      paragraph.after(searchBox);
    }

    // إخفاء الأزرار الأصلية
    const buttonsContainer = heroSection.querySelector('.flex.flex-col.sm\\:flex-row');
    if (buttonsContainer) {
      buttonsContainer.style.display = 'none';
    }
  }
});

document.addEventListener('DOMContentLoaded', function () {
  setTimeout(function () {

    // ── 0. إضافة ستايلات RTL لأزرار الخيارات ──────────────────────────
    const optionsRtlStyle = document.createElement('style');
    optionsRtlStyle.textContent = `
      /* ─── RTL لأزرار الخيارات ─── */
      .s-product-options-multiple-options-wrapper {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px !important;
        align-items: flex-start;
        direction: rtl !important;
      }

      .s-product-options-multiple-options-wrapper label {
        display: inline-flex !important;
        align-items: center;
        direction: rtl !important;
        text-align: right !important;
        gap: 8px;
      }

      .s-product-options-multiple-options-wrapper label > div,
      .s-product-options-multiple-options-wrapper label > span {
        direction: rtl !important;
        text-align: right !important;
        unicode-bidi: embed;
      }

      .s-product-options-multiple-options-wrapper input[type="checkbox"] {
        margin-left: 0 !important;
        margin-right: 8px !important;
        order: 1;
      }

      /* موبايل */
      @media (max-width: 640px) {
        .s-product-options-multiple-options-wrapper label {
          flex: 0 1 100%;
          justify-content: flex-start;
          direction: rtl !important;
          text-align: right !important;
          gap: 8px;
        }
      }
    `;
    document.head.appendChild(optionsRtlStyle);

    // ── 1. اختيار واحد فقط داخل كل مجموعة ──────────────────────────
    const checkboxWrappers = document.querySelectorAll('.s-product-options-multiple-options-wrapper');

    checkboxWrappers.forEach(function (wrapper) {
      const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          if (this.checked) {
            checkboxes.forEach(function (other) {
              if (other !== checkbox) other.checked = false;
            });
          }
        });
      });
    });

    // ── 2. ربط مجموعات "نوع الإشتراك" ببعض ─────────────────────────
    // الكلمات المفتاحية التي تحدد المجموعات المرتبطة
    const linkedKeywords = ['نوع الإشتراك', 'نوع الاشتراك', 'نوع الإشتراكات', 'نوع الاشتراكات'];

    // جمع المجموعات المرتبطة
    const allContainers = document.querySelectorAll('.s-product-options-option-container');
    const linkedContainers = [];

    allContainers.forEach(function (container) {
      const label = container.querySelector(
        '.s-product-options-option-label b, .s-product-options-option-label'
      );
      if (!label) return;

      const labelText = label.textContent.trim();
      const isLinked = linkedKeywords.some(function (keyword) {
        return labelText.includes(keyword);
      });

      if (isLinked) {
        linkedContainers.push(container);
      }
    });

    // جمع جميع checkboxes في المجموعات المرتبطة
    const linkedCheckboxes = [];
    linkedContainers.forEach(function (container) {
      const checkboxes = container.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(function (cb) {
        linkedCheckboxes.push(cb);
      });
    });

    // عند اختيار أي checkbox في المجموعات المرتبطة → إلغاء الباقي
    linkedCheckboxes.forEach(function (checkbox) {
      checkbox.addEventListener('change', function () {
        if (this.checked) {
          linkedCheckboxes.forEach(function (other) {
            if (other !== checkbox) other.checked = false;
          });
        }
      });
    });

  }, 300);
});



document.addEventListener('DOMContentLoaded', function () {
  // الانتظار حتى تحميل العنصر
  setTimeout(function () {
    // العثور على قسم المنتجات الأحدث
    const productsSection = document.getElementById('best-offers-2-slider');

    if (productsSection) {
      // إنشاء HTML الزر
      const viewAllButtonHTML = `
        <style>
          #view-all-products-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 35px;
            margin-bottom: 25px;
            padding: 0 15px;
          }
          
          #view-all-products-btn {
            background: #007b82;
            color: white;
            border: 2px solid transparent;
            padding: 14px 40px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0, 123, 130, 0.25);
          }
          
          #view-all-products-btn:hover {
            background: #005c63;
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 123, 130, 0.35);
          }
          
          #view-all-products-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 123, 130, 0.3);
          }
          
          #view-all-products-btn i {
            font-size: 18px;
            transition: transform 0.3s ease;
          }
          
          #view-all-products-btn:hover i {
            transform: translateX(3px);
          }
          
          @media (max-width: 768px) {
            #view-all-products-btn {
              padding: 12px 32px;
              font-size: 15px;
            }
            
            #view-all-products-btn i {
              font-size: 16px;
            }
            
            #view-all-products-container {
              margin-top: 25px;
              margin-bottom: 20px;
            }
          }
        </style>
        
        <div id="view-all-products-container">
          <a href="https://miftahdigital.store/Products/c106296050" id="view-all-products-btn">
            <span>عرض جميع المنتجات</span>
            <i class="sicon-keyboard_arrow_left"></i>
          </a>
        </div>
      `;

      // إضافة الزر بعد قسم المنتجات
      productsSection.insertAdjacentHTML('afterend', viewAllButtonHTML);
    }
  }, 500);
});


document.addEventListener('DOMContentLoaded', function () {
  // الانتظار حتى تحميل الصفحة
  setTimeout(function () {
    // إضافة الستايلات
    const style = document.createElement('style');
    style.textContent = `
      /* تصميم الـ checkboxes البسيط */
      .s-product-options-multiple-options-wrapper {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px !important;
        align-items: flex-start;
      }
      
      .s-product-options-multiple-options-wrapper label {
        display: inline-flex !important;
        align-items: center;
        padding: 8px 16px !important;
        margin: 0 !important;
        background: rgba(240, 245, 255, 0.95);
        border: 2px solid #d0d9e8;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        backdrop-filter: blur(5px);
        flex: 0 1 calc(50% - 5px);
        min-width: fit-content;
      }
      
      .s-product-options-multiple-options-wrapper label:nth-child(3) {
        flex: 0 1 100%;
      }
      
      .s-product-options-multiple-options-wrapper label:hover {
        border-color: #007b82;
        background: rgba(0, 123, 130, 0.06);
        transform: scale(1.03);
      }
      
      /* تصميم الـ checkbox نفسه */
      .s-product-options-multiple-options-wrapper input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid #b0bcd0;
        border-radius: 4px;
        margin-left: 8px;
        cursor: pointer;
        position: relative;
        transition: all 0.25s ease;
        flex-shrink: 0;
        background: transparent;
      }
      
      .s-product-options-multiple-options-wrapper input[type="checkbox"]:hover {
        border-color: #007b82;
      }
      
      /* عند التحديد */
      .s-product-options-multiple-options-wrapper input[type="checkbox"]:checked {
        background: #007b82;
        border-color: #007b82;
      }
      
      /* علامة الصح */
      .s-product-options-multiple-options-wrapper input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ffffff;
        font-size: 11px;
        font-weight: bold;
      }
      
      /* تصميم النص */
      .s-product-options-multiple-options-wrapper label > div {
        font-size: 14px;
        font-weight: 500;
        color: #1a2340;
        transition: color 0.25s ease;
        white-space: nowrap;
      }
      
      /* عند التحديد */
      .s-product-options-multiple-options-wrapper input[type="checkbox"]:checked ~ div {
        color: #007b82;
        font-weight: 600;
      }
      
      /* تصميم الـ label المحدد */
      .s-product-options-multiple-options-wrapper label:has(input:checked) {
        background: rgba(0, 123, 130, 0.08);
        border-color: #007b82;
        box-shadow: 0 0 12px rgba(0, 123, 130, 0.2);
      }
      
      /* للموبايل */
      @media (max-width: 640px) {
        .s-product-options-multiple-options-wrapper label {
          flex: 0 1 100%;
          padding: 10px 14px !important;
          justify-content: space-between;
        }
        
        .s-product-options-multiple-options-wrapper label > div {
          font-size: 13px;
        }
      }
    `;
    document.head.appendChild(style);

    // منطق اختيار واحد فقط
    const checkboxWrappers = document.querySelectorAll('.s-product-options-multiple-options-wrapper');

    checkboxWrappers.forEach(function (wrapper) {
      const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]');

      checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          if (this.checked) {
            // إلغاء تحديد باقي الـ checkboxes في نفس المجموعة
            checkboxes.forEach(function (otherCheckbox) {
              if (otherCheckbox !== checkbox) {
                otherCheckbox.checked = false;
              }
            });
          }
        });
      });
    });
  }, 600);
});


// إخفاء العنصر القديم فوراً قبل أي شيء
(function () {
  const hideStyle = document.createElement('style');
  hideStyle.id = 'temp-hide-description';
  hideStyle.textContent = `
    .product__description {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  `;
  document.head.appendChild(hideStyle);
})();

document.addEventListener('DOMContentLoaded', function () {
  // تنفيذ فوري بدون تأخير
  setTimeout(function () {
    // العثور على عنصر الوصف
    const descriptionContainer = document.querySelector('.product__description');

    if (descriptionContainer) {
      // إضافة الستايلات
      const style = document.createElement('style');
      style.textContent = `
        /* تصميم الصندوق بنفس أسلوب المرجع */
        .product__description {
          background: #ffffff !important;
          border: 1.5px solid rgba(0, 123, 130, 0.2) !important;
          border-radius: 12px !important;
          padding: 0 !important;
          margin-bottom: 20px !important;
          overflow: hidden !important;
          transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          opacity: 1 !important;
          pointer-events: all !important;
        }
        
        .product__description:hover {
          border-color: rgba(0, 123, 130, 0.35) !important;
        }
        
        /* عنوان الصندوق */
        .product-features-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 18px;
          cursor: pointer;
          transition: all 0.3s ease;
          user-select: none;
          border-bottom: 1.5px solid rgba(0, 123, 130, 0.15);
        }
        
        .product-features-header:hover {
          background: rgba(0, 123, 130, 0.05);
        }
        
        .product-features-title {
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 0;
          font-size: 17px;
          font-weight: 700;
          color: #007b82;
        }
        
        .product-features-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          background: rgba(0, 123, 130, 0.1);
          border-radius: 6px;
          font-size: 16px;
          color: #007b82;
        }
        
        .product-features-toggle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          transition: all 0.3s ease;
        }
        
        .product-features-toggle i {
          font-size: 16px;
          color: #007b82;
          transition: transform 0.3s ease;
        }
        
        .product-features-header.collapsed .product-features-toggle i {
          transform: rotate(-180deg);
        }
        
        /* معاينة النص */
        .product-features-preview {
          padding: 14px 18px;
          max-height: 80px;
          overflow: hidden;
          transition: max-height 0.4s ease, opacity 0.3s ease;
          position: relative;
        }
        
        .product-features-preview.hidden {
          max-height: 0;
          padding: 0 18px;
          opacity: 0;
        }
        
        .product-features-preview-text {
          color: rgba(68, 76, 94, 0.85);
          font-size: 14px;
          line-height: 1.7;
          text-align: right;
          margin: 0;
        }
        
        .product-features-preview::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 30px;
          background: linear-gradient(to bottom, transparent, rgba(0, 123, 130, 0.04));
          pointer-events: none;
        }
        
        /* محتوى الصندوق */
        .product-features-content {
          padding: 0;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s ease;
        }
        
        .product-features-content.expanded {
          max-height: 2000px;
          padding: 20px 18px;
        }
        
        /* تنسيق المحتوى */
        .article--main {
          max-height: none !important;
          line-height: 1.8 !important;
          direction: rtl;
          text-align: right;
        }
        
        .article--main h1,
        .article--main h2,
        .article--main h3 {
          color: #007b82 !important;
          margin-top: 20px;
          margin-bottom: 12px;
          font-weight: 700;
        }
        
        .article--main h1 {
          font-size: 19px;
          margin-top: 0;
        }
        
        .article--main h3 {
          font-size: 17px;
          margin-top: 24px;
        }
        
        .article--main p {
          color: #444c5e !important;
          margin-bottom: 14px;
          line-height: 1.9 !important;
          text-align: right;
        }
        
        .article--main ul {
          list-style: none;
          padding: 0;
          margin: 16px 0;
        }
        
        .article--main ul li {
          position: relative;
          padding-right: 28px;
          margin-bottom: 12px;
          color: #444c5e !important;
          line-height: 1.8;
          text-align: right;
        }
        
        .article--main ul li::before {
          content: '✓';
          position: absolute;
          right: 0;
          top: 2px;
          color: #007b82;
          font-weight: bold;
          font-size: 16px;
        }
        
        /* إخفاء الزر القديم */
        #btn-show-more {
          display: none !important;
        }
        
        /* للموبايل */
        @media (max-width: 640px) {
          .product-features-header {
            padding: 12px 16px;
          }
          
          .product-features-title {
            font-size: 16px;
            gap: 10px;
          }
          
          .product-features-icon {
            width: 26px;
            height: 26px;
            font-size: 15px;
          }
          
          .product-features-preview {
            padding: 12px 16px;
          }
          
          .product-features-content.expanded {
            padding: 18px 16px;
          }
          
          .article--main h1 {
            font-size: 17px;
          }
          
          .article--main h3 {
            font-size: 16px;
          }
        }
      `;
      document.head.appendChild(style);

      // الحصول على المحتوى الأصلي
      const article = descriptionContainer.querySelector('.article--main');
      let previewText = '';

      if (article) {
        // استخراج أول فقرتين للمعاينة
        const firstP = article.querySelector('p');
        if (firstP) {
          previewText = firstP.textContent.trim().substring(0, 120) + '...';
        }
      }

      // إنشاء العنوان
      const header = document.createElement('div');
      header.className = 'product-features-header collapsed';
      header.innerHTML = `
        <div class="product-features-title">
          <div class="product-features-icon">
            <i class="sicon-star"></i>
          </div>
          <span>مزايا المنتج</span>
        </div>
        <div class="product-features-toggle">
          <i class="sicon-keyboard_arrow_down"></i>
        </div>
      `;

      // إنشاء معاينة النص
      const preview = document.createElement('div');
      preview.className = 'product-features-preview';
      preview.innerHTML = `
        <p class="product-features-preview-text">${previewText}</p>
      `;

      // إنشاء محتوى الصندوق
      const content = document.createElement('div');
      content.className = 'product-features-content';

      // نقل المحتوى الأصلي
      if (article) {
        content.appendChild(article);
      }

      // مسح المحتوى القديم وإضافة الجديد
      descriptionContainer.innerHTML = '';
      descriptionContainer.appendChild(header);
      descriptionContainer.appendChild(preview);
      descriptionContainer.appendChild(content);

      // إضافة وظيفة الفتح والإغلاق
      header.addEventListener('click', function () {
        header.classList.toggle('collapsed');
        content.classList.toggle('expanded');
        preview.classList.toggle('hidden');
      });

      // إزالة ستايل الإخفاء المؤقت
      const tempHide = document.getElementById('temp-hide-description');
      if (tempHide) {
        tempHide.remove();
      }
    }
  }, 100); // تقليل التأخير إلى 100ms فقط
});





document.addEventListener('DOMContentLoaded', function () {

  var CART_URL              = '/cart';
  var REMOVE_ALERT_DURATION = 5000;
  var _removing             = false;

  // ════════════════════════════════════════
  // 1 — Toast إضافة المنتج (SweetAlert2)
  // ════════════════════════════════════════
  var swalObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (m) {
      m.addedNodes.forEach(function (node) {
        if (node.nodeType !== 1) return;
        var toast = node.classList && node.classList.contains('swal2-toast')
          ? node : node.querySelector && node.querySelector('.swal2-toast');
        if (!toast || toast.dataset.ci) return;
        toast.dataset.ci = '1';

        if (_removing) {
          setTimeout(function () {
            var c = toast.closest('.swal2-container');
            if (c) c.remove(); else toast.remove();
          }, 20);
          return;
        }

        setTimeout(function () { buildAddToast(toast); }, 60);
      });
    });
  });

  swalObserver.observe(document.body, { childList: true, subtree: true });

  function buildAddToast(toast) {
    var name = getProductName();

    var header = document.createElement('div');
    header.className = 'cart-toast-header';
    header.innerHTML =
      '<div class="cart-toast-icon--add">' +
        '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>' +
      '</div>' +
      '<div class="cart-toast-header-text">' +
        '<strong>تمت الإضافة إلى السلة ✓</strong>' +
        (name ? '<span class="cart-toast-product-name">' + name + '</span>' : '') +
      '</div>' +
      '<button class="cart-toast-close">&#x2715;</button>';

    var divider = document.createElement('div');
    divider.className = 'cart-toast-divider';

    var actions = document.createElement('div');
    actions.className = 'cart-toast-actions';
    actions.innerHTML =
      '<a href="' + CART_URL + '" class="cart-toast-btn cart-toast-btn-primary">' +
        '<svg viewBox="0 0 24 24">' +
          '<circle cx="9" cy="21" r="1"></circle>' +
          '<circle cx="20" cy="21" r="1"></circle>' +
          '<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>' +
        '</svg>' +
        'إتمام الطلب' +
      '</a>';

    var progress = toast.querySelector('.swal2-timer-progress-bar-container');
    toast.insertBefore(header,  progress || null);
    toast.insertBefore(divider, progress || null);
    toast.insertBefore(actions, progress || null);

    header.querySelector('.cart-toast-close').addEventListener('click', function () {
      var c = toast.closest('.swal2-container');
      if (c) c.remove(); else toast.remove();
    });
  }

  // ════════════════════════════════════════
  // 2 — اعتراض أزرار الحذف
  // ════════════════════════════════════════
  function interceptRemoveButtons() {
    var sel = [
      'button[class*="remove"]',
      'button[class*="delete"]',
      'a[class*="remove"]',
      '[class*="cart"] [class*="remove"]',
      '[class*="cart"] [class*="delete"]',
      '[data-remove]',
      '[data-delete]'
    ].join(',');

    document.querySelectorAll(sel).forEach(function (btn) {
      if (btn.dataset.ri) return;
      btn.dataset.ri = '1';

      btn.addEventListener('click', function () {
        _removing = true;

        // ── قراءة الاسم من عنصر المنتج في السلة ──
        var name = getCartItemName(btn);

        showRemoveAlert(name);

        setTimeout(function () { _removing = false; }, 4000);
      }, false);
    });
  }

  var domObserver = new MutationObserver(function () {
    setTimeout(interceptRemoveButtons, 300);
  });
  domObserver.observe(document.body, { childList: true, subtree: true });
  interceptRemoveButtons();

  // ════════════════════════════════════════
  // 3 — تنبيه الإزالة
  // ════════════════════════════════════════
  function showRemoveAlert(name) {
    var old = document.getElementById('crt-wrap');
    if (old) old.remove();

    var nameHTML = name
      ? '<span class="crt-name">' + name + '</span>'
      : '';

    var wrap = document.createElement('div');
    wrap.id  = 'crt-wrap';
    wrap.innerHTML =
      '<div id="crt-box">' +
        '<div class="crt-body">' +
          '<div class="crt-icon">' +
            '<svg viewBox="0 0 24 24">' +
              '<polyline points="3 6 5 6 21 6"></polyline>' +
              '<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>' +
              '<path d="M10 11v6M14 11v6"></path>' +
            '</svg>' +
          '</div>' +
          '<div class="crt-text">' +
            '<strong>تمت إزالة المنتج من السلة</strong>' +
            nameHTML +
            '<span class="crt-urgency">🔥 لا تفوّت هذا المنتج — الكميات محدودة!</span>' +
          '</div>' +
          '<button class="crt-close" id="crt-close-btn">&#x2715;</button>' +
        '</div>' +
        '<div class="crt-progress"><div class="crt-progress-bar" id="crt-bar"></div></div>' +
      '</div>';

    document.body.appendChild(wrap);

    setTimeout(function () {
      var bar = document.getElementById('crt-bar');
      if (bar) {
        bar.style.transition = 'width ' + (REMOVE_ALERT_DURATION / 1000) + 's linear';
        bar.style.width = '0%';
      }
    }, 50);

    document.getElementById('crt-close-btn').addEventListener('click', dismissAlert);
    setTimeout(dismissAlert, REMOVE_ALERT_DURATION);
  }

  function dismissAlert() {
    var w = document.getElementById('crt-wrap');
    if (!w) return;
    w.style.animation = 'crt-slideOut 0.3s ease forwards';
    setTimeout(function () { if (w && w.parentNode) w.remove(); }, 320);
  }

  // ════════════════════════════════════════
  // helpers
  // ════════════════════════════════════════

  // اسم المنتج في صفحة المنتج — من Salla config أولاً
  function getProductName() {
    // المحاولة 1: Salla config API
    try {
      if (window.salla && salla.config && typeof salla.config.get === 'function') {
        var n = salla.config.get('product.name') || salla.config.get('product')?.name;
        if (n && n.trim()) return truncate(n.trim());
      }
    } catch (e) {}

    // المحاولة 2: selectors خاصة بسلة
    var sallaSelectors = [
      '[class*="product__name"]',
      '[class*="product__title"]',
      '.s-product-name',
      '[data-product-name]',
      '[data-name]'
    ];
    for (var i = 0; i < sallaSelectors.length; i++) {
      var el = document.querySelector(sallaSelectors[i]);
      if (el) {
        var t = (el.dataset.productName || el.dataset.name || el.innerText || '').trim();
        if (t.length > 1) return truncate(t);
      }
    }

    // فشل → لا اسم
    return null;
  }

  // اسم المنتج من عنصر السلة عند الحذف
  function getCartItemName(btn) {
    var itemEl = btn.closest('[data-id]')
      || btn.closest('[class*="cart-item"]')
      || btn.closest('[class*="cart__item"]')
      || btn.closest('[class*="item"]')
      || btn.parentElement;

    if (!itemEl) return null;

    // selectors خاصة بسلة داخل عنصر المنتج
    var nameSelectors = [
      '[class*="product__name"]',
      '[class*="product-name"]',
      '[class*="item__name"]',
      '[class*="item-name"]',
      '[data-product-name]',
      '[data-name]',
      'h3', 'h4', 'p[class*="name"]', 'a[class*="name"]'
    ];

    for (var i = 0; i < nameSelectors.length; i++) {
      var el = itemEl.querySelector(nameSelectors[i]);
      if (el) {
        var t = (el.dataset.productName || el.dataset.name || el.innerText || '').trim();
        if (t.length > 1) return truncate(t);
      }
    }

    return null; // فشل → لا اسم
  }

  function truncate(str) {
    return str.length > 32 ? str.substring(0, 30) + '…' : str;
  }

});


document.addEventListener('DOMContentLoaded', function () {

  // ══════════════════════════════════════
  // فتح مودال تسجيل الدخول
  // ══════════════════════════════════════
  function openLoginModal() {
    try {
      if (window.salla && salla.event && typeof salla.event.dispatch === 'function') {
        salla.event.dispatch('login::open');
      } else {
        window.location.href = '/login';
      }
    } catch (e) {
      window.location.href = '/login';
    }
  }

  // ══════════════════════════════════════
  // تحسين فورم المستخدم المسجّل
  // ══════════════════════════════════════
  function enhanceLoggedInForm() {
    document.querySelectorAll('.s-comment-form-wrapper').forEach(function (wrapper) {
      if (wrapper.dataset.enhanced) return;
      wrapper.dataset.enhanced = '1';

      // ─ رأس الفورم ─
      var header = document.createElement('div');
      header.className = 'sc-form-header';
      header.innerHTML =
        '<div class="sc-form-header-icon">' +
          '<svg viewBox="0 0 24 24">' +
            '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>' +
          '</svg>' +
        '</div>' +
        '<div class="sc-form-header-text">' +
          '<strong>شارك تجربتك مع هذا المنتج</strong>' +
          '<span>رأيك يُساعد العملاء الآخرين على اتخاذ قرارهم بثقة</span>' +
        '</div>';

      // إدراج الرأس قبل الـ wrapper مباشرةً
      wrapper.parentNode.insertBefore(header, wrapper);

      // ─ label الـ textarea ─
      var content = wrapper.querySelector('.s-comment-form-content');
      var textarea = wrapper.querySelector('.s-comment-form-input');
      if (content && textarea) {
        var lbl = document.createElement('div');
        lbl.className = 'sc-textarea-label';
        lbl.innerHTML =
          '<svg viewBox="0 0 24 24">' +
            '<line x1="17" y1="10" x2="3" y2="10"></line>' +
            '<line x1="21" y1="6" x2="3" y2="6"></line>' +
            '<line x1="21" y1="14" x2="3" y2="14"></line>' +
            '<line x1="17" y1="18" x2="3" y2="18"></line>' +
          '</svg>' +
          'اكتب تعليقك أو سؤالك';
        content.insertBefore(lbl, textarea);

        // ─ عداد الأحرف ─
        var maxLen = parseInt(textarea.getAttribute('maxlength') || '500', 10);
        var counter = document.createElement('div');
        counter.className = 'sc-char-count';
        counter.textContent = '0 / ' + maxLen;
        content.appendChild(counter);

        textarea.addEventListener('input', function () {
          var len = textarea.value.length;
          counter.textContent = len + ' / ' + maxLen;
          counter.classList.remove('sc-char-warn', 'sc-char-limit');
          if (len >= maxLen)        counter.classList.add('sc-char-limit');
          else if (len >= maxLen * 0.8) counter.classList.add('sc-char-warn');
        });
      }

      // ─ نص تحفيزي في زر الإرسال ─
      var action = wrapper.querySelector('.s-comment-form-action');
      if (action) {
        var hint = document.createElement('div');
        hint.className = 'sc-action-hint';
        hint.innerHTML =
          '<svg viewBox="0 0 24 24">' +
            '<polyline points="20 6 9 17 4 12"></polyline>' +
          '</svg>' +
          'تعليقك يُنشر فور مراجعته';
        action.insertBefore(hint, action.firstChild);
      }
    });
  }

  // ══════════════════════════════════════
  // بطاقة الزائر
  // ══════════════════════════════════════
  function initGuestCommentCard() {
    document.querySelectorAll('salla-comment-form.hydrated').forEach(function (el) {
      if (el.querySelector('form')) {
        enhanceLoggedInForm();
        return;
      }
      if (el.dataset.guestInjected) return;
      el.dataset.guestInjected = '1';

      var card = document.createElement('div');
      card.className = 'sc-guest-card';
      card.innerHTML =
        '<div class="sc-guest-icon">' +
          '<svg viewBox="0 0 24 24">' +
            '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>' +
          '</svg>' +
        '</div>' +

        '<div class="sc-guest-text">' +
          '<strong>ما رأيك في هذا المنتج؟</strong>' +
          '<span>انضم لعملائنا وشارك تجربتك — تقييمك يبني ثقة المتجر</span>' +
          '<div class="sc-guest-stars">' +
            '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>' +
            '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>' +
            '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>' +
            '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>' +
            '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>' +
          '</div>' +
        '</div>' +

        '<button type="button" class="sc-guest-btn">' +
          '<svg viewBox="0 0 24 24">' +
            '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>' +
            '<polyline points="10 17 15 12 10 7"></polyline>' +
            '<line x1="15" y1="12" x2="3" y2="12"></line>' +
          '</svg>' +
          'سجّل دخولك وشارك رأيك' +
        '</button>';

      el.parentNode.insertBefore(card, el.nextSibling);

      card.querySelector('.sc-guest-btn').addEventListener('click', openLoginModal);
    });
  }

  // تشغيل أولي
  initGuestCommentCard();

  // مراقبة الـ DOM لحالة hydration متأخرة
  var obs = new MutationObserver(function () {
    initGuestCommentCard();
  });
  obs.observe(document.body, { childList: true, subtree: true });

});