/* ‎Spark WhatsApp Customer Service‎ — أنماط زرّ الشريط العلوي والزر العائم.

   حلّ محلّ ‎widget.css‎ القديم، وأوّل ما حُذف منه سطره الأول:
       *,*::before,*::after{box-sizing:border-box}
   محدِّد شامل بلا أي نطاق، يُحمَّل في **كل** صفحة من صفحات المتجر ويغيّر نموذج الصندوق
   لكل عنصر فيها — بما في ذلك عناصر الثيم التي حُسبت مقاساتها على ‎content-box‎.
   أي ملف بلوجن لا يجوز أن يمسّ شيئاً خارج عناصره. */

/* ══════════════════════════════════════════════════════════════
   زر «خدمة العملاء» — الشريط العلوي، بجوار «تتبّع طلبك»
   ══════════════════════════════════════════════════════════════

   المقاسات مأخوذة حرفياً من ‎.track-order-link‎ في ‎order-tracking-button.css‎
   (حشوة 5×14، خطّ 12.5px، وزن 700، فجوة 6px، أيقونة 15px) حتى يتطابق الزرّان
   ارتفاعاً ووزناً بصرياً فيبدوان زوجاً لا عنصرين ملصقين.

   اللون ‎#25D366‎ هو أخضر واتساب الرسمي، والنصّ ‎#101010‎ لا أبيض:
   الأبيض على هذا الأخضر يعطي تبايناً 1.8:1 — أي نصّ يكاد لا يُقرأ ويسقط في كل
   معايير الوصولية. ‎#101010‎ يعطي 10.6:1، وهو أيضاً نفس نمط الزر المجاور
   (وردي فاتح + نصّ داكن) فيبقى الشريط متّسقاً. */

.wa-cs-header {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.wa-cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #25d366;
    color: #101010;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wa-cs-btn:hover,
.wa-cs-btn:focus {
    background: #1ebe5b;
    color: #101010;
    text-decoration: none;
}

.wa-cs-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wa-cs-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.wa-cs-caret {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.wa-cs-btn[aria-expanded="true"] .wa-cs-caret {
    transform: rotate(180deg);
}

/* ── القائمة المنسدلة (تظهر فقط عند وجود أكثر من موظّف) ───────────── */

/* المحاذاة **فيزيائية** (‎left‎) لا منطقية (‎inset-inline-start‎).

   ‎inset-inline-start: 0‎ في صفحة RTL تعني ‎right: 0‎، أي أن القائمة تُحاذي الحافة اليمنى
   للزر وتمتدّ يساراً. والزر يقع في أقصى **يسار** الشريط العلوي (قيس: ‎x=30‎)، فكانت
   قائمة بعرض 250px تخرج خارج الشاشة: ‎left=-79.6‎ — أي أن ثلث المحتوى غير قابل للوصول.
   المحاذاة من اليسار تُبقيها داخل الشاشة في الاتجاهين لأن الحاوية تبدأ من اليسار في كليهما. */
.wa-cs-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 10060; /* أعلى من ‎.header‎ (10050) وإلا انزلقت القائمة تحته */
    width: 250px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    text-align: start;
}

/* ‎[hidden]‎ وحده لا يكفي: أي قاعدة ‎display‎ لاحقة تتفوّق على نمط المتصفّح الافتراضي. */
.wa-cs-list[hidden] {
    display: none;
}

.wa-cs-list-head {
    padding: 4px 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 6px;
}

.wa-cs-list-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2937;
}

/* سمّاعة الدعم بجانب «تواصل معنا» */
.wa-cs-head-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #128c7e;
}

.wa-cs-list-sub {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 2px;
}

.wa-cs-agent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    transition: background-color .15s ease;
}

.wa-cs-agent:hover,
.wa-cs-agent:focus {
    background: #f0fdf4;
    color: #1f2937;
    text-decoration: none;
}

/* ── صورة الموظّف ────────────────────────────────────────────────
   الحرف الأول مرسوم في الحاوية نفسها والصورة تعلوه بـ‎position:absolute‎.
   فإن لم يُدخِل الأدمن رابطاً، أو سقط الرابط لاحقاً وحُذف الوسم، ظهر الحرف
   تلقائياً — بلا أي حالة «صورة مكسورة» وبلا ملف صورة افتراضية يجب شحنه. */
.wa-cs-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #d8f3e3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-cs-avatar-initial {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #0e6b52; /* على ‎#d8f3e3‎ يعطي 6.1:1 */
    user-select: none;
}

.wa-cs-avatar-img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* صورة غير مربّعة تُقصّ بدل أن تُشوَّه */
    border-radius: 50%;
}

.wa-cs-agent-info {
    min-width: 0; /* بدونها لا ينكمش الاسم الطويل داخل ‎flex‎ فيتمدّد الصندوق */
    flex: 1 1 auto;
}

.wa-cs-agent-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-cs-agent-role {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-cs-agent-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #128c7e; /* لا ‎#25D366‎: أخضر واتساب على أبيض = 1.9:1 */
    margin-top: 3px;
}

/* نقطة «متصل» — تومض بحلقة تتمدّد حولها.

   الأداء: الحركة على ‎transform‎ و‎opacity‎ **فقط**، وهما الخاصيّتان الوحيدتان اللتان
   يعالجهما المتصفّح على المُركِّب (GPU) بلا إعادة تخطيط ولا إعادة رسم — بعكس تحريك
   ‎width/height‎ أو ‎box-shadow‎ الذي يُعيد الرسم في كل إطار.

   وأهمّ من ذلك: الحلقة داخل ‎.wa-cs-list‎ وهي ‎display:none‎ ما لم تُفتح القائمة،
   والمتصفّح لا يشغّل حركة عنصر غير مُصيَّر أصلاً — فالتكلفة على الصفحات العادية **صفر**،
   والومض يعمل فقط في الثواني التي تكون فيها القائمة مفتوحة أمام العميل. */

.wa-cs-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25d366;
    flex-shrink: 0;
}

.wa-cs-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    animation: wa-cs-pulse 1.8s ease-out infinite;
    will-change: transform, opacity;
}

@keyframes wa-cs-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* من يطلب تقليل الحركة (إعداد نظام لأسباب صحّية) لا تومض عنده */
@media (prefers-reduced-motion: reduce) {
    .wa-cs-dot::after {
        animation: none;
    }
}

/* ── الاتصال المباشر — أسفل الموظّفين خلف خطّ فاصل ───────────────── */

.wa-cs-call {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 9px 10px 4px;
    border-top: 1px solid #eceef0; /* الخطّ الفاصل */
    color: #1f2937;
    text-decoration: none;
}

.wa-cs-call:hover,
.wa-cs-call:focus {
    color: #128c7e;
    text-decoration: none;
}

.wa-cs-call-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1a5fb4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-cs-call-icon svg {
    width: 15px;
    height: 15px;
}

.wa-cs-call-text {
    min-width: 0;
}

.wa-cs-call-label {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
}

.wa-cs-call-number {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: inherit;
}

@media (max-width: 768px) {
    .wa-cs-btn {
        padding: 4px 11px;
        font-size: 11.5px;
    }

    .wa-cs-icon {
        width: 13px;
        height: 13px;
    }

    .wa-cs-list {
        width: 220px;
    }
}

@media print {
    .wa-cs-header {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   الزر العائم — اختياري، مُطفأ افتراضياً
   ══════════════════════════════════════════════════════════════ */

/* المواضع فيزيائية عمداً: إعداد لوحة التحكم مكتوب «يسار / يمين»، وفي صفحة RTL كانت
   ‎inset-inline-start‎ تعني اليمين — أي أن اختيار «يسار» كان يضع الزر يميناً. */
.wa-float {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: auto;
    z-index: 9999;
}

.wa-float.wa-float-right {
    left: auto;
    right: 24px;
}

.wa-float.wa-float-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.wa-float-btn {
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
    transition: transform .2s ease, box-shadow .2s ease;
}

.wa-float-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .6);
}

.wa-float-btn svg {
    width: 28px;
    height: 28px;
}

.wa-float-panel {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: auto;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    overflow: hidden;
    text-align: start;
}

.wa-float.wa-float-right .wa-float-panel {
    left: auto;
    right: 0;
}

.wa-float-panel[hidden] {
    display: none;
}

.wa-float-head {
    background: #128c7e;
    color: #fff;
    padding: 13px 14px;
}

.wa-float-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 700;
}

/* رأس اللوحة العائمة أخضر داكن، فالسمّاعة تُلوَّن أبيض لا أخضر */
.wa-float-head .wa-cs-head-icon {
    color: #fff;
}

.wa-float-sub {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .88);
    margin-top: 2px;
}

.wa-float-agents {
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .wa-float {
        bottom: 80px; /* فوق زر «أضف للسلة» الثابت في صفحة المنتج */
    }

    .wa-float-btn {
        width: 52px;
        height: 52px;
    }
}

@media print {
    .wa-float {
        display: none !important;
    }
}