/**
 * Plan Tooltip Styles
 * CSP-compliant: External CSS file
 * Used by cart-detail.html for plan information tooltips
 */

/* Base tooltip styles - uses position: fixed to escape overflow:hidden */
.plan-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

/* Arrow pointer */
.plan-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    z-index: -1;
}

/* Arrow - mobile (top) */
.plan-tooltip-arrow.arrow-top {
    top: -6px;
    left: 24px;
    border-left: 1px solid #d1d5db;
    border-top: 1px solid #d1d5db;
}

/* Arrow - desktop (left) */
.plan-tooltip-arrow.arrow-left {
    top: auto;
    bottom: 16px;
    left: -6px;
    border-left: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

/* Arrow - right side */
.plan-tooltip-arrow.arrow-right {
    top: 16px;
    right: -6px;
    left: auto;
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

/* Arrow - bottom */
.plan-tooltip-arrow.arrow-bottom {
    bottom: -6px;
    top: auto;
    left: 24px;
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

/* Show on hover with animation */
.plan-tooltip.is-visible {
    display: block;
    animation: tooltipFadeIn 0.15s ease-out forwards;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}