/* * MedLookup – RX Status Badge & Tooltip Styles * * The tooltip (#ml-rx-tooltip) is appended directly to by JS, * so it uses fixed positioning and sits above all page content. * Badge colours are applied inline by JS — these rules handle layout, * animation, and the shared tooltip panel only. */ /* ── Badge wrapper elements ─────────────────────────────────────────────── */ .ml-rx-status, .ml-rx-status-latam { display: inline-block; line-height: 1; } /* ── Tooltip panel — fixed to viewport, appended to ──────────────── */ #ml-rx-tooltip { position: absolute; /* absolute so scroll offset is respected */ z-index: 99999; /* above everything including Elementor popups */ width: 260px; background: #1a2e2d; color: #f0f8f7; border-radius: 8px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); font-size: 0.8rem; line-height: 1.55; font-weight: 400; text-align: left; white-space: normal; pointer-events: none; /* Hidden by default */ opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } /* Visible state */ #ml-rx-tooltip.ml-tooltip--visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; } /* Arrow — points up toward badge (tooltip is below) */ #ml-rx-tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #1a2e2d; } /* Arrow — points down when tooltip flips above badge */ #ml-rx-tooltip.ml-tooltip--above::before { top: auto; bottom: -6px; border-bottom: none; border-top: 7px solid #1a2e2d; } /* ── Tooltip content ────────────────────────────────────────────────────── */ .ml-tooltip-body { display: block; margin-bottom: 8px; color: #d8eeec; } .ml-tooltip-link { display: inline-block; color: #4db5ad; font-weight: 600; font-size: 0.78rem; text-decoration: none; border-bottom: 1px solid rgba(77,181,173,0.4); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .ml-tooltip-link:hover { color: #80ccc7; border-bottom-color: rgba(128,204,199,0.6); } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media ( max-width: 480px ) { #ml-rx-tooltip { width: 220px; font-size: 0.76rem; padding: 10px 12px; } .ml-badge { font-size: 0.76rem !important; padding: 3px 8px !important; } }