/*
 * Hover notes on the Pro card's highlights (pages/pricing.blade.php, proCardNotes()).
 * NOT BUILT -- linked as-is from the page, like public/css/page-profile.css.
 *
 * Opens on hover, on keyboard focus and on tap (the <li> is focusable, and a tap focuses it), so
 * touch screens without hover still reach the note.
 */
.pv .pp-has-note { cursor: help; outline: none; }
.pv .pp-has-note:focus-visible { border-radius: 6px; box-shadow: 0 0 0 2px var(--pv-accent, #9b3cff); }

.pv .pp-note-i {
    display: inline-flex; vertical-align: -2px; margin-left: 6px;
    color: var(--pv-muted, #9a93ad); transition: color .15s;
}
.pv .pp-note-i svg { width: 14px; height: 14px; }
.pv .pp-has-note:hover .pp-note-i,
.pv .pp-has-note:focus .pp-note-i { color: var(--pv-accent-hi, #c48bff); }

.pv .pp-note {
    position: absolute; z-index: 30; left: 26px; right: 0; bottom: calc(100% + 8px);
    padding: 10px 12px; border-radius: 10px;
    background: #17121f; border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    color: #ece8f4; font-size: 13px; line-height: 1.45; font-weight: 500;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    pointer-events: none;
}
.pv .pp-has-note:hover .pp-note,
.pv .pp-has-note:focus .pp-note,
.pv .pp-has-note:focus-within .pp-note { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pv .pp-note { transition: none; transform: none; }
}