/* 🐛 إصلاح: متغيرات زي color-primary و radius-pill و shadow-md و glow-medium و transition-base
   يلي كانت مستخدمة هون كانت غير معرّفة بأي مكان بكامل الموقع (لا هون ولا بـroot.css) — يعني
   الزر كان فعليًا شغال بألوان/أشكال غير محددة (initial)، بلا أي استجابة حقيقية للوضع الفاتح
   والغامق. استبدلتها بمتغيرات root.css الحقيقية (--accent, --bg-card, --text-primary,
   --border-color) يلي بتتغيّر فعليًا مع [data-theme]. + حجم مشترك أكبر (--float-btn-size)
   يستخدمه هالزر وزر واتساب الجديد تحت، عشان يضلوا نفس الحجم بالضبط بأي تعديل مستقبلي. */
:root { --float-btn-size: 72px; }

/* حاوية القائمة - تظهر فقط على الموبايل */
.floating-contact-wrapper {
    position: fixed;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* الزر الرئيسي بالأسفل والقائمة ترتفع لأعلى */
    /* 🐛 القائمة المنسدلة (#contactOptions) وهي مغلقة مخفية بـvisibility:hidden لا
       display:none (لأجل حركة الفتح السلسة) — يعني ضلت تحجز مساحتها بالتخطيط، وصندوق
       هالحاوية (شفاف، بلا خلفية) امتد لفوق واقعيًا وغطّى زر واتساب العائم فوقها (عنصر
       مستقل، حتى لو مش مرسوم شي هون بيمنع النقر يوصله). الحل: نلغي استقبال النقر عن
       الحاوية نفسها بالكامل، ونعيده بس للعناصر التفاعلية الحقيقية جواها تحت. */
    pointer-events: none;
}
.floating-contact-wrapper .contact-toggle-btn,
.floating-contact-wrapper .contact-item {
    pointer-events: auto;
}

/* توجيه الشاشة حسب اللغة */
.floating-contact-wrapper.pos-right {
    right: 20px;
    align-items: flex-start;
}
.floating-contact-wrapper.pos-left {
    left: 20px;
    align-items: flex-start;
}

/* الزر الرئيسي الدائري */
.contact-toggle-btn {
    width: var(--float-btn-size);
    height: var(--float-btn-size);
    border-radius: 50%;
    background-color: var(--accent);
    color: #161616;
    border: none;
    font-size: 1.8rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    outline: none;
}
.contact-toggle-btn:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 6px 24px rgba(0,0,0,0.32);
    transform: scale(1.05);
}

/* القائمة المنبثقة */
.contact-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* حالة الفتح */
.contact-options.show-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* الأزرار الفرعية (ألوان متناسقة مع الموقع) */
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* دعم الاتجاه للأزرار الفرعية (اليمين واليسار) */
.pos-right .contact-item {
    flex-direction: row;
}
.pos-left .contact-item {
    flex-direction: row-reverse;
}

.contact-item:hover {
    background-color: var(--accent);
    color: #161616;
    border-color: var(--accent);
}
.contact-item i {
    font-size: 1.2rem;
}

/* ==========================================================================
   🆕 زر واتساب عائم مستقل — نفس مبدأ الزر فوق (حجم/موقع/جانب حسب اللغة) بس دائم
   الظهور (بلا قائمة منسدلة)، بلون واتساب الرسمي الثابت (يقرأ صح بالوضعين الفاتح
   والغامق لأنه لون علامة تجارية ثابت فوق الصفحة، مو خلفية بطاقة تتبدل بالثيم).
   ========================================================================== */
.whatsapp-float-btn {
    position: fixed;
    bottom: calc(30px + var(--float-btn-size) + 20px);
    width: var(--float-btn-size);
    height: var(--float-btn-size);
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whatsapp-float-btn.pos-right { right: 20px; }
.whatsapp-float-btn.pos-left { left: 20px; }
.whatsapp-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 26px rgba(0,0,0,0.4);
    color: #fff;
}
.whatsapp-float-btn i { position: relative; z-index: 2; }

.whatsapp-float-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: 0.55;
    z-index: 1;
    /* 🐛 كانت بلا pointer-events:none — بما إنها بتتمدد بصريًا لحد 1.7x حجمها الأصلي عبر
       transform (والمتصفح بيحسب منطقة النقر على الشكل المتحوّل فعليًا)، كانت ممكن توصل
       لحدود زر "التواصل السريع" الملاصق تحتها وتخطف النقر منه. هي حلقة بصرية بس أصلاً،
       ما إلها داعي تستقبل أي تفاعل مطلقًا. */
    pointer-events: none;
    animation: whatsapp-float-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes whatsapp-float-pulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* بالوضع الغامق الظل أوضح شوي (خلفية غامقة عمومًا بتبلع الظل الخفيف) */
:root[data-theme="dark"] .whatsapp-float-btn,
:root[data-theme="dark"] .contact-toggle-btn {
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

/* 📱 بشاشات الموبايل: الأزرار العائمة (واتساب + التواصل السريع) أصغر حجماً
   وأقرب لحافة الشاشة السفلية — كانت كبيرة نسبياً وبعيدة عن الأسفل على شاشة صغيرة. */
@media (max-width: 767px) {
    :root { --float-btn-size: 54px; }
    .floating-contact-wrapper { bottom: 16px; }
    .whatsapp-float-btn { bottom: calc(16px + var(--float-btn-size) + 12px); font-size: 1.6rem; }
    .contact-toggle-btn { font-size: 1.4rem; }
}