/**
 * Tooltip Components
 *
 * Info tooltips and score tooltips
 *
 * @package MattressProtectorReviews
 * @version 1.0.0
 */

/* Info Icon & Tooltip - WCAG 2.5.5 Compliant (44x44px minimum) */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--gray-300);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    cursor: help;
    position: relative;
}

.info-icon:hover {
    background-color: var(--blue-600);
}

.info-icon:focus {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Smaller Info Icon for Pillar Score Items */
.pillar-score-item .info-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
    flex-shrink: 0;
}

.pillar-score-item .info-icon:hover {
    background-color: var(--blue-600);
}

/* Tooltip */
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 1rem;
    background-color: var(--gray-900);
    color: var(--white);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    width: 280px;
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-tooltip);  /* Fixed: Use proper z-index from design system */
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;  /* Fixed: Prevent tooltip from blocking interactions */
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-900);
}

.info-icon:hover .tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;  /* Allow interaction when visible */
}

/* Score Tooltip */
.score-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gray-900);
    color: var(--white);
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    white-space: pre-line;
    max-width: 240px;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: var(--z-tooltip);  /* Fixed: Use proper z-index from design system */
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-large);  /* Enhanced shadow for depth */
}

.score-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--gray-900);
}

.pillar-score:hover .score-tooltip,
.pillar-score-item:hover .score-tooltip,
.info-icon:hover .score-tooltip,
.pillar-score-item .info-icon:hover .tooltip,
.pillar-score-item .info-icon:hover .score-tooltip {
    opacity: 1;
    visibility: visible;
}