/* * Indicative currency conversion — display-only decorations. * * When a visitor picks a display currency, prices render in that currency with a * leading "≈" (approximately-equals) and a small info icon. Hovering / focusing * the icon reveals a tooltip (rendered to by currency-info.js so a card's * overflow never clips it) explaining that the actual charge is in the base * currency. No amount rendered here is what gets billed. */ /* Small info icon beside a converted price. */ .currency-info { display: inline-block; margin-left: 0.3rem; font-size: 0.62em; color: #9aa0a6; cursor: help; vertical-align: middle; position: relative; top: -0.15em; } /* Tooltip bubble — appended to , positioned by currency-info.js. */ .lc-currency-tooltip { position: fixed; z-index: 2000; display: none; max-width: 240px; padding: 6px 10px; background: #212529; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 1.35; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .lc-currency-tooltip.is-visible { opacity: 1; } /* Arrow — points down at the icon (default, tooltip above). */ .lc-currency-tooltip::after { content: ""; position: absolute; left: var(--lc-arrow-left, 50%); top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #212529; } /* When the tooltip is flipped below the icon, the arrow points up. */ .lc-currency-tooltip.lc-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #212529; }