/* ===== زر "تواصل معنا": أيقونة واحدة فوق زرار "لفوق" — الضغط عليها يفتح تفاصيل التواصل =====
   بيتبني من js/contact-dock.js — body.mbk-dock-on = الزر شغال (زراير الشات والواتساب الأصلية بتستخبى)
   الكمبيوتر 48px على بعد 14px من الشمال — الموبايل 42px على بعد 8px (وزرار "لفوق" بنفس المقاس، آخر الملف)
   body.mbk-btt-on = زرار "لفوق" ظاهر (shop.php) → الأيقونة تطلع فوقه
   body.mbk-fab-chat / mbk-fab-wa = محادثة مفتوحة (shop-footer.php) → الأيقونة تبقى ✕ وتقفلها */

body.mbk-dock-on #pico-chatbot .pico-chat-button,
body.mbk-dock-on #whatsapp-widget .wa-chat-button,
body.mbk-dock-on #pico-chatbot .pico-welcome-bubble { display: none !important; }

#mbk-contact-dock {
    --mcd-text: #f8fafc;
    --mcd-muted: #94a3b8;
    --mcd-panel: rgba(11, 17, 32, .97);
    --mcd-line: rgba(148, 163, 184, .16);
    --mcd-hover: rgba(255, 255, 255, .06);
    position: fixed;
    left: 14px;
    bottom: 20px;
    z-index: 99995;
    width: 48px;
    height: 48px;
    font-family: inherit;
    direction: rtl;
    transition: bottom .35s cubic-bezier(.4, 0, .2, 1);
}
body.mbk-btt-on #mbk-contact-dock { bottom: 78px; }
#mbk-contact-dock button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* ----- الأيقونة ----- */
#mbk-contact-dock .mcd-fab {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #00d4ff 0%, #6366f1 100%);
    box-shadow: 0 8px 24px rgba(0, 212, 255, .35), 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3);
    cursor: pointer;
    animation: mcdPop .5s cubic-bezier(.34, 1.56, .64, 1) .4s backwards;
    transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
}
#mbk-contact-dock .mcd-fab:hover { transform: scale(1.07); box-shadow: 0 12px 30px rgba(0, 212, 255, .45), 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .3); }
#mbk-contact-dock .mcd-fab:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; }
#mbk-contact-dock .mcd-fab svg { position: absolute; width: 23px; height: 23px; fill: #fff; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease; }
#mbk-contact-dock .mcd-i-x { opacity: 0; transform: rotate(-90deg) scale(.5); }
#mbk-contact-dock.open .mcd-i-chat,
#mbk-contact-dock.has-win .mcd-i-chat { opacity: 0; transform: rotate(90deg) scale(.5); }
#mbk-contact-dock.open .mcd-i-x,
#mbk-contact-dock.has-win .mcd-i-x { opacity: 1; transform: none; }
#mbk-contact-dock.open .mcd-fab,
#mbk-contact-dock.has-win .mcd-fab { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15); }
#mbk-contact-dock .mcd-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #0b1324;
    transition: opacity .2s ease;
}
#mbk-contact-dock.open .mcd-dot,
#mbk-contact-dock.has-win .mcd-dot { opacity: 0; }
@keyframes mcdPop { from { transform: scale(0); opacity: 0; } }

/* ----- تفاصيل التواصل (بتطلع فوق الأيقونة) ----- */
#mbk-contact-dock .mcd-panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    width: 300px;
    padding: 8px;
    border-radius: 18px;
    background: var(--mcd-panel);
    border: 1px solid var(--mcd-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transform-origin: bottom left;
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .22s;
}
#mbk-contact-dock.open .mcd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

#mbk-contact-dock .mcd-panel-head { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--mcd-line); }
#mbk-contact-dock .mcd-panel-head b { font-size: 1rem; font-weight: 900; color: var(--mcd-text); }
#mbk-contact-dock .mcd-panel-head span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; font-weight: 600; color: var(--mcd-muted); }
#mbk-contact-dock .mcd-panel-head em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: #22c55e; font-weight: 800; white-space: nowrap; }
#mbk-contact-dock .mcd-panel-head em i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

#mbk-contact-dock .mcd-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--mcd-text);
    text-align: right;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: background .2s ease, border-color .2s ease, opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
#mbk-contact-dock.open .mcd-opt { opacity: 1; transform: none; }
#mbk-contact-dock.open .mcd-opt:nth-of-type(1) { transition-delay: 0s, 0s, .05s, .05s; }
#mbk-contact-dock.open .mcd-opt:nth-of-type(2) { transition-delay: 0s, 0s, .1s, .1s; }
#mbk-contact-dock .mcd-opt + .mcd-opt { margin-top: 4px; }
#mbk-contact-dock .mcd-opt:hover,
#mbk-contact-dock .mcd-opt:focus-visible { background: var(--mcd-hover); border-color: var(--mcd-line); outline: none; }

#mbk-contact-dock .mcd-opt-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
#mbk-contact-dock .mcd-opt-ico svg { width: 22px; height: 22px; fill: #fff; }
#mbk-contact-dock .mcd-opt-ico img { width: 100%; height: 100%; object-fit: cover; }
#mbk-contact-dock .mcd-bot .mcd-opt-ico { background: linear-gradient(135deg, #00d4ff 0%, #6366f1 100%); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); }
#mbk-contact-dock .mcd-wa .mcd-opt-ico { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); box-shadow: 0 6px 16px rgba(37, 211, 102, .3); }

#mbk-contact-dock .mcd-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
#mbk-contact-dock .mcd-opt-txt b { font-size: .92rem; font-weight: 800; }
#mbk-contact-dock .mcd-opt-txt small { font-size: .74rem; font-weight: 600; color: var(--mcd-muted); }
#mbk-contact-dock .mcd-wa.is-off .mcd-opt-txt small { color: #f59e0b; }
#mbk-contact-dock .mcd-opt-go { flex-shrink: 0; display: inline-flex; }
#mbk-contact-dock .mcd-opt-go svg { width: 18px; height: 18px; fill: #64748b; transition: transform .25s ease, fill .25s ease; }
#mbk-contact-dock .mcd-opt:hover .mcd-opt-go svg { transform: translateX(-3px); fill: var(--mcd-text); }

/* ----- الوضع الفاتح ----- */
html[data-theme="light"] #mbk-contact-dock {
    --mcd-text: #0f172a;
    --mcd-muted: #64748b;
    --mcd-panel: rgba(255, 255, 255, .98);
    --mcd-line: rgba(15, 23, 42, .09);
    --mcd-hover: #f1f5f9;
}
html[data-theme="light"] #mbk-contact-dock .mcd-fab { box-shadow: 0 8px 22px rgba(8, 145, 178, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
html[data-theme="light"] #mbk-contact-dock .mcd-dot { border-color: #fff; }
html[data-theme="light"] #mbk-contact-dock .mcd-panel { box-shadow: 0 24px 50px rgba(15, 23, 42, .18); }
html[data-theme="light"] #mbk-contact-dock .mcd-panel-head em { color: #059669; }
html[data-theme="light"] #mbk-contact-dock .mcd-opt-go svg { fill: #94a3b8; }
html[data-theme="light"] #mbk-contact-dock .mcd-wa.is-off .mcd-opt-txt small { color: #b45309; }

/* ----- الكمبيوتر والتابلت: نوافذ المحادثة تطلع فوق الأيقونة ----- */
@media (min-width: 769px) {
    html body.mbk-dock-on #pico-chatbot .pico-chat-window { left: 14px; right: auto; bottom: 80px; max-height: calc(100vh - 100px); }
    html body.mbk-dock-on.mbk-btt-on #pico-chatbot .pico-chat-window { bottom: 138px; max-height: calc(100vh - 158px); }
    html body.mbk-dock-on #whatsapp-widget .wa-chat-window { left: 14px; right: auto; bottom: 80px; transform-origin: bottom left; max-height: calc(100vh - 100px); }
    html body.mbk-dock-on.mbk-btt-on #whatsapp-widget .wa-chat-window { bottom: 138px; max-height: calc(100vh - 158px); }
}
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    #mbk-contact-dock .mcd-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #22c55e; animation: mcdPing 2.2s ease-out infinite; }
}
@keyframes mcdPing { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(2.2); opacity: 0; } }

/* ----- الموبايل: 42px على بعد 8px من الحافة (زي زرار "لفوق") ----- */
@media (max-width: 768px) {
    #mbk-contact-dock { left: 8px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
    body.mbk-btt-on #mbk-contact-dock { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    #mbk-contact-dock .mcd-fab svg { width: 21px; height: 21px; }
    #mbk-contact-dock .mcd-dot { width: 10px; height: 10px; }
    #mbk-contact-dock .mcd-panel { bottom: calc(100% + 12px); width: min(300px, calc(100vw - 16px)); }
    #mbk-contact-dock .mcd-opt-ico { width: 40px; height: 40px; }
    /* نافذة الواتساب فوق الأيقونة */
    html body.mbk-dock-on #whatsapp-widget .wa-chat-window { left: 8px; right: 8px; width: auto; max-width: 400px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 90px); transform-origin: bottom left; }
    html body.mbk-dock-on.mbk-btt-on #whatsapp-widget .wa-chat-window { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 142px); }
}
@media (min-width: 481px) and (max-width: 768px) {
    html body.mbk-dock-on #pico-chatbot .pico-chat-window { left: 8px; right: auto; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 90px); }
    html body.mbk-dock-on.mbk-btt-on #pico-chatbot .pico-chat-window { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 142px); }
}
/* ----- زرار "لفوق" (shop.php) بنفس مقاس ومحور أيقونة التواصل — بيعلى على chatbot.css وshop-page.css ----- */
@media (min-width: 769px) {
    html body .back-to-top { width: 48px !important; height: 48px !important; left: 14px !important; right: auto; bottom: 20px !important; font-size: 16px; }
}
@media (max-width: 768px) {
    html body .back-to-top { width: 42px !important; height: 42px !important; left: 8px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    #mbk-contact-dock .mcd-fab { animation: none; }
    #mbk-contact-dock .mcd-panel, #mbk-contact-dock .mcd-opt { transition: opacity .15s ease; transform: none; }
}
@media print { #mbk-contact-dock { display: none !important; } }