/* تسمية احترافية لأي زرار أو أيقونة عليها title بدل التسمية الرمادي بتاعة المتصفح (طلب المالك 2026-10-28) —
   نفس شكل تسمية القائمة الجانبية في لوحة التحكم. فوق العنصر وسهم ناحيته، ولو مفيش مكان فوق بتنزل تحته.
   الشغل في js/pro-tip.js (الكمبيوتر بس). بيتحمّل في صفحات المتجر (includes/shop-footer.php) والرئيسية ولوحة التحكم (admin/includes/sidebar.php). */
.pro-tip {
    display: block; box-sizing: border-box; margin: 0;
    position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none; opacity: 0; transform: translateY(4px);
    width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 7px 12px; border-radius: 9px;
    background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.12); color: #f1f5f9;
    font-family: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.5; text-align: center; white-space: pre-line; overflow-wrap: anywhere;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: opacity 0.15s ease, transform 0.15s ease;
}
.pro-tip.pro-tip-below { transform: translateY(-4px); }
.pro-tip.pro-tip-on { opacity: 1; transform: none; }
.pro-tip::after {
    content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: #0b1220;
    border-right: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); transform: rotate(45deg);
}
.pro-tip.pro-tip-below::after { bottom: auto; top: -5px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* الوضع الفاتح في المتجر: بالونة بيضا بخط غامق بدل الغامقة */
html[data-theme="light"] .pro-tip { background: #ffffff; border-color: #e2e8f0; color: #0f172a; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .pro-tip::after { background: #ffffff; border-color: #e2e8f0; }

@media (prefers-reduced-motion: reduce) {
    .pro-tip { transition: none; }
}