.ideology-tooltip-anchor.has-ideology-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.ideology-tooltip-card {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 10000;
    box-sizing: border-box;
    width: 220px;
    max-width: calc(100vw - 24px);
    padding: 12px;
    transform: translateX(-50%);
    border: 2px solid #999;
    background: var(--content-bg-color, #fff);
    color: var(--text-color, #000);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}

.ideology-tooltip-card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #999;
}

.ideology-tooltip-anchor:hover > .ideology-tooltip-card,
.ideology-tooltip-anchor:focus > .ideology-tooltip-card,
.ideology-tooltip-anchor:focus-visible > .ideology-tooltip-card {
    visibility: visible;
    opacity: 1;
}

.ideology-tooltip-image {
    display: block;
    width: 86px;
    height: 73px;
    margin: 0 auto 8px;
    object-fit: contain;
}

.ideology-tooltip-title {
    display: block;
    margin-bottom: 7px;
    text-align: center;
}

.ideology-tooltip-description {
    display: block;
    text-align: center;
}

body.dark-mode .ideology-tooltip-card {
    border-color: #666;
    background: #2a2a2a;
    color: #f0f0f0;
}

body.dark-mode .ideology-tooltip-card::after {
    border-top-color: #666;
}