/**
 * CSS LINKS DE AVALIAÇÃO - HERO SLIDER
 * Sistema modular para adicionar links de avaliação no Hero Slider
 * Cores neutras (branco/transparente) que funcionam com qualquer identidade visual
 * 
 * HARMONIZAÇÃO DE CORES:
 * - Os ícones podem ser harmonizados via JavaScript (harmonizacao-cores.js)
 * - Adicionar classe 'harmonizado' aos botões para aplicar cor do cliente
 * - Exemplo: document.querySelector('.hero-avaliacao-btn').classList.add('harmonizado');
 * 
 * @author Sistema Multi-Cliente
 * @version 1.1
 * @since 17/09/2026
 */

/* ========================================
   CONTAINER DOS LINKS
   ======================================== */

.hero-avaliacao-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 100; /* Garante que fica acima do carrossel */
}

/* ========================================
   BOTÕES DE AVALIAÇÃO
   ======================================== */

.hero-avaliacao-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* MINIMALISTA: Menor (antes: 0.75rem) */
    padding: 0.625rem 1.25rem; /* MINIMALISTA: Menor (antes: 0.875rem 1.75rem) */
    background: rgba(255, 255, 255, 0.08); /* MINIMALISTA: Mais transparente (antes: 0.1) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.25); /* MINIMALISTA: Borda mais fina (antes: 2px / 0.3) */
    border-radius: 8px; /* MINIMALISTA: Mais discreto (antes: 12px) */
    color: rgba(255, 255, 255, 0.9); /* MINIMALISTA: Levemente transparente */
    text-decoration: none;
    font-size: 0.85rem; /* MINIMALISTA: Menor (antes: 0.95rem) */
    font-weight: 400; /* MINIMALISTA: Mais leve (antes: 500) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 101; /* Acima do container */
}

/* Hover nos botões - MINIMALISTA */
.hero-avaliacao-btn:hover {
    background: rgba(255, 255, 255, 0.15); /* Mais sutil (antes: 0.2) */
    border-color: rgba(255, 255, 255, 0.5); /* Mais sutil (antes: 0.7) */
    transform: translateY(-2px); /* Menos elevação (antes: -3px) */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* Mais sutil (antes: 0 8px 24px / 0.4) */
    text-decoration: none;
    color: white;
}

/* Classe para harmonização de cores (aplicada via JavaScript) */
.hero-avaliacao-btn.harmonizado > i:first-child {
    /* Cor do ícone será definida dinamicamente pelo harmonizacao-cores.js */
    filter: drop-shadow(0 0 4px currentColor);
}

.hero-avaliacao-btn.harmonizado:hover {
    /* Borda harmonizada no hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 
                0 0 20px rgba(255, 255, 255, 0.2);
}

/* Active state (ao clicar) */
.hero-avaliacao-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* ========================================
   ÍCONES
   ======================================== */

/* Ícone esquerdo - MINIMALISTA com cores sutis */
.hero-avaliacao-btn > i:first-child {
    font-size: 1.1rem; /* MINIMALISTA: Menor (antes: 1.25rem) */
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    /* Cor sutil harmonizada (será substituída por harmonizacao-cores.js) */
    color: rgba(255, 255, 255, 0.85); /* MINIMALISTA: Mais transparente */
}

/* Ícones coloridos - ELEGANTE (meio termo) */
.hero-avaliacao-btn > i.ti-clipboard {
    color: rgba(120, 180, 255, 0.95); /* Azul elegante - Pesquisa */
    filter: drop-shadow(0 0 3px rgba(120, 180, 255, 0.3)); /* Sombra sutil */
}

.hero-avaliacao-btn > i.ti-star {
    color: rgba(255, 200, 80, 0.95); /* Dourado elegante - Google */
    filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.3)); /* Sombra sutil */
}

/* Hover no ícone esquerdo - ELEGANTE (mantém cor) */
.hero-avaliacao-btn:hover > i:first-child {
    transform: scale(1.1); /* Leve aumento (antes: 1.15) */
}

/* Hover específico para ícones coloridos - ELEGANTE (mantém cor, leve brilho) */
.hero-avaliacao-btn:hover > i.ti-clipboard {
    color: rgba(120, 180, 255, 1); /* Azul sólido no hover */
    filter: brightness(1.15) drop-shadow(0 0 5px rgba(120, 180, 255, 0.5)); /* Leve brilho */
}

.hero-avaliacao-btn:hover > i.ti-star {
    color: rgba(255, 200, 80, 1); /* Dourado sólido no hover */
    filter: brightness(1.15) drop-shadow(0 0 5px rgba(255, 200, 80, 0.5)); /* Leve brilho */
}

/* Texto do botão - MINIMALISTA */
.hero-avaliacao-btn > span {
    font-size: 0.85rem; /* MINIMALISTA: Menor */
}

/* Seta direita - MINIMALISTA */
.hero-avaliacao-btn > i:last-child {
    font-size: 0.9rem; /* MINIMALISTA: Menor (antes: 1rem) */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    opacity: 0.7; /* MINIMALISTA: Mais discreto */
}

/* Hover na seta */
.hero-avaliacao-btn:hover > i:last-child {
    transform: translateX(4px);
}

/* ========================================
   EFEITO SHIMMER (BRILHO DESLIZANTE)
   ======================================== */

.hero-avaliacao-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.hero-avaliacao-btn:hover::before {
    left: 100%;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

/* Tablet (≤ 991px) */
@media (max-width: 991px) {
    .hero-avaliacao-links {
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .hero-avaliacao-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .hero-avaliacao-btn > span {
        font-size: 0.9rem;
    }
}

/* Mobile (≤ 576px) */
@media (max-width: 576px) {
    .hero-avaliacao-links {
        flex-direction: column;
        gap: 0.875rem;
        margin-top: 1.25rem;
        z-index: 150; /* Ainda mais alto em mobile */
    }
    
    .hero-avaliacao-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 0.875rem 1.25rem;
        font-size: 0.85rem;
        z-index: 151;
    }
    
    .hero-avaliacao-btn > span {
        font-size: 0.85rem;
    }
}

/* Small Mobile (≤ 360px) */
@media (max-width: 360px) {
    .hero-avaliacao-btn {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        gap: 0.5rem;
    }
    
    .hero-avaliacao-btn > span {
        font-size: 0.8rem;
    }
    
    .hero-avaliacao-btn > i:first-child {
        font-size: 1.1rem;
    }
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

/* Foco via teclado */
.hero-avaliacao-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Reduz animações se usuário preferir */
@media (prefers-reduced-motion: reduce) {
    .hero-avaliacao-btn,
    .hero-avaliacao-btn > i,
    .hero-avaliacao-btn::before {
        transition: none;
    }
}