/* * HGG Forms - Sistema Universal de Tooltips 
 * Versão: 1.1.0 - FIX: Performance de Animação e Estados Dinâmicos
 */

:root {
    --hgg-primary: #4F46E5;
    --hgg-tooltip-bg: #1F2937;
    --hgg-text-white: #FFFFFF;
    --hgg-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --hgg-error-red: #ff4d4d;
}

.hgg-help-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.hgg-tooltip-box {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    justify-content: center; 
}

.hgg-info-icon {
    width: 18px;
    height: 18px;
    background-color: var(--hgg-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    transition: all var(--hgg-transition);
}

.hgg-tooltip-box:hover .hgg-info-icon {
    transform: scale(1.1);
    filter: brightness(1.1);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.hgg-tooltip-content {
    position: absolute;
    z-index: 10001; 
    width: 220px; 
    padding: 10px 14px;
    background-color: var(--hgg-tooltip-bg);
    color: var(--hgg-text-white);
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: all var(--hgg-transition);
    pointer-events: none;
    text-align: left;
    white-space: normal; 
    word-wrap: break-word;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .hgg-tooltip-content {
        width: 180px;
        font-size: 11px;
    }
}

.hgg-tooltip-content b {
    display: block;
    margin-bottom: 3px;
    color: #A5B4FC;
}

.hgg-tooltip-content::after {
    content: "";
    position: absolute;
    border-style: solid;
}

/* ORIENTAÇÃO: CIMA (TOP) */
.hgg-tooltip-top .hgg-tooltip-content {
    bottom: 150%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
}

.hgg-tooltip-top .hgg-tooltip-content::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-color: var(--hgg-tooltip-bg) transparent transparent transparent;
}

.hgg-tooltip-top.active .hgg-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ORIENTAÇÃO: DIREITA (RIGHT) */
.hgg-tooltip-right .hgg-tooltip-content {
    left: 105%;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
}

.hgg-tooltip-right .hgg-tooltip-content::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-color: transparent var(--hgg-tooltip-bg) transparent transparent;
}

.hgg-tooltip-right.active .hgg-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* SISTEMA DE VALIDAÇÃO */
@keyframes hgg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Classe de animação pura (chamada via JS) */
.hgg-shake {
    animation: hgg-shake 0.4s ease-in-out !important;
}

.hgg-input-invalid {
    border-color: var(--hgg-error-red) !important;
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.1) !important;
}

/* Estado de Erro no Botão */
.hgg-btn-error {
    background-color: var(--hgg-error-red) !important;
    border-color: var(--hgg-error-red) !important;
    color: white !important;
}

.hgg-tooltip-error .hgg-tooltip-content {
    background-color: var(--hgg-error-red);
}

.hgg-tooltip-error.hgg-tooltip-top .hgg-tooltip-content::after {
    border-color: var(--hgg-error-red) transparent transparent transparent;
}

.hgg-tooltip-error.hgg-tooltip-right .hgg-tooltip-content::after {
    border-color: transparent var(--hgg-error-red) transparent transparent;
}