/* ======= SISTEMA TOOLTIP UNIVERSALE - WAREHOUSE THEME ======= */

/* Tooltip base - funziona con qualsiasi termine */
.ps-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    font-weight: bold;
    border-bottom: 1px dotted;
    z-index: 1;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Contenitore del testo tooltip */
.ps-tooltip .ps-tooltiptext {
    visibility: hidden;
    max-width: 90vw; /* evita scroll orizzontale */
    background-color: #2c3e50;
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    padding: 14px;
    position: absolute;
    z-index: 99999;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%); /* centratura fluida */
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    pointer-events: none;
    word-wrap: break-word;
    font-weight: normal;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Freccia del tooltip */
.ps-tooltip .ps-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* centrata */
    border-width: 8px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}

/* Effetto hover */
.ps-tooltip:hover .ps-tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

.ps-tooltip:hover {
    transform: translateY(-1px);
}

/* ======= CATEGORIE DI TOOLTIP (OPZIONALI) ======= */

/* Piante ed estratti vegetali - Verde */
.ps-tooltip.plant {
    color: #27ae60;
    border-color: #27ae60;
}

.ps-tooltip.plant .ps-tooltiptext {
    background-color: #27ae60;
    border-color: rgba(255,255,255,0.2);
}

.ps-tooltip.plant .ps-tooltiptext::after {
    border-color: #27ae60 transparent transparent transparent;
}

/* Vitamine e minerali - Arancione */
.ps-tooltip.vitamin {
    color: #e67e22;
    border-color: #e67e22;
}

.ps-tooltip.vitamin .ps-tooltiptext {
    background-color: #e67e22;
    border-color: rgba(255,255,255,0.2);
}

.ps-tooltip.vitamin .ps-tooltiptext::after {
    border-color: #e67e22 transparent transparent transparent;
}

/* Benefici e azioni - Blu */
.ps-tooltip.benefit {
    color: #3498db;
    border-color: #3498db;
}

.ps-tooltip.benefit .ps-tooltiptext {
    background-color: #3498db;
    border-color: rgba(255,255,255,0.2);
}

.ps-tooltip.benefit .ps-tooltiptext::after {
    border-color: #3498db transparent transparent transparent;
}

/* Termini tecnici - Viola */
.ps-tooltip.technical {
    color: #9b59b6;
    border-color: #9b59b6;
}

.ps-tooltip.technical .ps-tooltiptext {
    background-color: #9b59b6;
    border-color: rgba(255,255,255,0.2);
}

.ps-tooltip.technical .ps-tooltiptext::after {
    border-color: #9b59b6 transparent transparent transparent;
}

/* Ingredienti generici - Grigio scuro */
.ps-tooltip.ingredient {
    color: #34495e;
    border-color: #34495e;
}

.ps-tooltip.ingredient .ps-tooltiptext {
    background-color: #34495e;
    border-color: rgba(255,255,255,0.2);
}

.ps-tooltip.ingredient .ps-tooltiptext::after {
    border-color: #34495e transparent transparent transparent;
}

/* Senza categoria - Verde scuro di default */
.ps-tooltip:not(.plant):not(.vitamin):not(.benefit):not(.technical):not(.ingredient) {
    color: #2c5530;
    border-color: #2c5530;
}

/* ======= RESPONSIVE DESIGN ======= */

/* Tablet */
@media (max-width: 768px) {
    .ps-tooltip .ps-tooltiptext {
        font-size: 13px;
        padding: 12px;
        bottom: 120%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ps-tooltip .ps-tooltiptext {
        font-size: 12px;
        padding: 10px;
        bottom: 110%;
    }

    .ps-tooltip .ps-tooltiptext::after {
        border-width: 6px;
    }
}

/* Mobile molto piccoli */
@media (max-width: 320px) {
    .ps-tooltip .ps-tooltiptext {
        font-size: 11px;
        padding: 8px;
    }
}

/* ======= COMPATIBILITÀ WAREHOUSE THEME ======= */

/* Override degli stili specifici del tema Warehouse */
.product-description .ps-tooltip,
.product-details .ps-tooltip,
.warehouse-product-content .ps-tooltip,
.cms-content .ps-tooltip,
.page-content .ps-tooltip {
    text-decoration: none !important;
}

/* Compatibilità con liste e tabelle */
ul .ps-tooltip,
ol .ps-tooltip,
table .ps-tooltip {
    display: inline;
}

/* Fix per contenitori specifici Warehouse */
.warehouse-product-tabs .ps-tooltip .ps-tooltiptext,
.product-miniature .ps-tooltip .ps-tooltiptext {
    z-index: 999999;
}

/* Assicura che i tooltip non interferiscano con il layout */
.ps-tooltip * {
    box-sizing: border-box;
}

/* Evita conflitti con altri elementi hover del tema */
.ps-tooltip:hover:not(.ps-tooltip *) {
    z-index: 99999;
}

/* ======= ACCESSIBILITÀ ======= */

/* Per screen reader */
.ps-tooltip[aria-describedby] {
    cursor: help;
}

/* Focus per navigazione da tastiera */
.ps-tooltip:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.ps-tooltip:focus .ps-tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-8px);
}

/* ======= PERFORMANCE E ANIMAZIONI ======= */

/* Ottimizzazione GPU */
.ps-tooltip .ps-tooltiptext {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* Riduce repaint durante le animazioni */
.ps-tooltip:hover .ps-tooltiptext {
    transform: translateX(-50%) translateY(-8px) translateZ(0);
}

/* ======= FINE SISTEMA TOOLTIP UNIVERSALE ======= */