/* ═══════════════════════════════════════════════════════════ RAYKA TOOLTIP — موتور مبتنی بر body tooltip در ساخته می‌شود → همیشه بالاترین لایه، بدون بریده‌شدن، جهت هوشمند، کاملاً رسپانسیو. هیچ ::before/::after روی المان‌ها نیست (پس تداخل صفر). ═══════════════════════════════════════════════════════════ */ .tooltip { display: inline-block; } /* ─── بدنه tooltip (در body) ─── */ .rayka-tt { --tt-bg: #292524; --tt-color: #FAFAF9; --tt-size: 0.75rem; --arrow-x: 50%; --arrow-y: 50%; position: fixed; top: 0; left: 0; z-index: 2147483647; padding: 7px 12px; background: var(--tt-bg); color: var(--tt-color); font-family: 'Vazirmatn', -apple-system, sans-serif; font-size: var(--tt-size); font-weight: 600; line-height: 1.5; white-space: nowrap; border-radius: 9px; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(249, 115, 22, 0.22); pointer-events: none; opacity: 0; transform: scale(0.92); transition: opacity 0.14s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: calc(100vw - 16px); } .rayka-tt.is-visible { opacity: 1; transform: scale(1); } .rayka-tt[data-dir="top"] { transform-origin: bottom center; } .rayka-tt[data-dir="bottom"] { transform-origin: top center; } .rayka-tt[data-dir="left"] { transform-origin: center right; } .rayka-tt[data-dir="right"] { transform-origin: center left; } /* ─── فلش (همیشه دقیق روی المان) ─── */ .rayka-tt::after { content: ''; position: absolute; border: 6px solid transparent; } .rayka-tt[data-dir="top"]::after { top: 100%; left: var(--arrow-x); transform: translateX(-50%); border-top-color: var(--tt-bg); } .rayka-tt[data-dir="bottom"]::after { bottom: 100%; left: var(--arrow-x); transform: translateX(-50%); border-bottom-color: var(--tt-bg); } .rayka-tt[data-dir="left"]::after { left: 100%; top: var(--arrow-y); transform: translateY(-50%); border-left-color: var(--tt-bg); } .rayka-tt[data-dir="right"]::after { right: 100%; top: var(--arrow-y); transform: translateY(-50%); border-right-color: var(--tt-bg); } /* ─── رنگ‌ها ─── */ .rayka-tt.tooltip-primary { --tt-bg: #F97316; } .rayka-tt.tooltip-success { --tt-bg: #10B981; } .rayka-tt.tooltip-danger { --tt-bg: #DC2626; } .rayka-tt.tooltip-warning { --tt-bg: #F59E0B; --tt-color: #1C1917; } .rayka-tt.tooltip-info { --tt-bg: #0EA5E9; } /* ─── اندازه‌ها ─── */ .rayka-tt.tooltip-sm { --tt-size: 0.6875rem; padding: 5px 9px; } .rayka-tt.tooltip-lg { --tt-size: 0.875rem; padding: 9px 15px; } /* ─── چندخطی ─── */ .rayka-tt.tooltip-multiline { white-space: normal; width: max-content; max-width: 240px; text-align: center; } @media (prefers-reduced-motion: reduce) { .rayka-tt { transition: opacity 0.1s ease !important; transform: none !important; } }