/**
 * KADI - Hover Effects CSS
 * APENAS mudança de fundo da section no hover dos cards
 * NOVO: Cada card aplica uma cor diferente na section!
 * Cards permanecem INALTERADOS visualmente
 * 
 * @package Kadi
 * @version 3.1.0 - Cores configuráveis
 */

/* ========================================= */
/* 🎨 CONFIGURAÇÃO DE CORES - ALTERE AQUI! */
/* ========================================= */
:root {
    /* Card 1 - Azul */
    --kadi-card1-cor1: #3B82F6;
    --kadi-card1-cor2: #1E40AF;
    
    /* Card 2 - Verde */
    --kadi-card2-cor1: #10B981;
    --kadi-card2-cor2: #047857;
    
    /* Card 3 - Roxo */
    --kadi-card3-cor1: #8B5CF6;
    --kadi-card3-cor2: #5B21B6;
    
    /* Card 4 - Laranja */
    --kadi-card4-cor1: #F97316;
    --kadi-card4-cor2: #ffffff;
    
    /* Card 5+ - Rosa */
    --kadi-card5-cor1: #ffffff;
    --kadi-card5-cor2: #ffffff;
    
    /* Cores dos temas (compatibilidade) */
    --kadi-theme-blue: #667EEA;
    --kadi-theme-green: #22C55E;
    --kadi-theme-purple: #A855F7;
    --kadi-theme-warm: #FB923C;
    --kadi-theme-neutral: #9CA3AF;
    
    /* Fundo padrão */
    --kadi-fundo-padrao: #F8FAFC;
    --kadi-debug-border: #007CBA;
}

/* ========================================= */
/* 📱 CONFIGURAÇÕES RESPONSIVAS */
/* ========================================= */
:root {
    /* Opacidades para desktop */
    --kadi-opacity-desktop-strong: 0.12;
    --kadi-opacity-desktop-light: 0.08;
    --kadi-opacity-desktop-before-strong: 0.05;
    --kadi-opacity-desktop-before-light: 0.03;
    --kadi-opacity-desktop-shadow: 0.1;
    
    /* Opacidades para mobile (mais suaves) */
    --kadi-opacity-mobile-strong: 0.08;
    --kadi-opacity-mobile-light: 0.05;
}

/* ========================================= */
/* 🔧 ESTILOS PRINCIPAIS */
/* ========================================= */

/* Section hover states - smooth transition */
.vtex-render__container-id-shelf,
section[data-id*="shelf"],
.elementor-section,
.jet-listing-grid,
.elementor-widget-jet-listing-grid {
    transition: background-color 0.3s ease, background-image 0.3s ease;
}

/* Hover effect APENAS na section - fundo muda com cores diferentes por card */
.kadi-hover-active,
.fundo_bg,
.fundo_bg-card-1,
.fundo_bg-card-2,
.fundo_bg-card-3,
.fundo_bg-card-4,
.fundo_bg-card-5 {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card 1 - Azul */
.fundo_bg-card-1 {
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card1-cor1) r g b / var(--kadi-opacity-desktop-strong)), 
        rgba(from var(--kadi-card1-cor2) r g b / var(--kadi-opacity-desktop-light))
    ) !important;
}

.fundo_bg-card-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card1-cor1) r g b / var(--kadi-opacity-desktop-before-strong)), 
        rgba(from var(--kadi-card1-cor2) r g b / var(--kadi-opacity-desktop-before-light))
    );
    box-shadow: inset 0 0 50px rgba(from var(--kadi-card1-cor1) r g b / var(--kadi-opacity-desktop-shadow));
    pointer-events: none;
    opacity: 0;
    animation: fadeInBlue 0.4s ease forwards;
}

/* Card 2 - Verde */
.fundo_bg-card-2 {
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card2-cor1) r g b / var(--kadi-opacity-desktop-strong)), 
        rgba(from var(--kadi-card2-cor2) r g b / var(--kadi-opacity-desktop-light))
    ) !important;
}

.fundo_bg-card-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card2-cor1) r g b / var(--kadi-opacity-desktop-before-strong)), 
        rgba(from var(--kadi-card2-cor2) r g b / var(--kadi-opacity-desktop-before-light))
    );
    box-shadow: inset 0 0 50px rgba(from var(--kadi-card2-cor1) r g b / var(--kadi-opacity-desktop-shadow));
    pointer-events: none;
    opacity: 0;
    animation: fadeInGreen 0.4s ease forwards;
}

/* Card 3 - Roxo */
.fundo_bg-card-3 {
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card3-cor1) r g b / var(--kadi-opacity-desktop-strong)), 
        rgba(from var(--kadi-card3-cor2) r g b / var(--kadi-opacity-desktop-light))
    ) !important;
}

.fundo_bg-card-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card3-cor1) r g b / var(--kadi-opacity-desktop-before-strong)), 
        rgba(from var(--kadi-card3-cor2) r g b / var(--kadi-opacity-desktop-before-light))
    );
    box-shadow: inset 0 0 50px rgba(from var(--kadi-card3-cor1) r g b / var(--kadi-opacity-desktop-shadow));
    pointer-events: none;
    opacity: 0;
    animation: fadeInPurple 0.4s ease forwards;
}

/* Card 4 - Laranja */
.fundo_bg-card-4 {
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card4-cor1) r g b / var(--kadi-opacity-desktop-strong)), 
        rgba(from var(--kadi-card4-cor2) r g b / var(--kadi-opacity-desktop-light))
    ) !important;
}

.fundo_bg-card-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card4-cor1) r g b / var(--kadi-opacity-desktop-before-strong)), 
        rgba(from var(--kadi-card4-cor2) r g b / var(--kadi-opacity-desktop-before-light))
    );
    box-shadow: inset 0 0 50px rgba(from var(--kadi-card4-cor1) r g b / var(--kadi-opacity-desktop-shadow));
    pointer-events: none;
    opacity: 0;
    animation: fadeInOrange 0.4s ease forwards;
}

/* Card 5+ - Rosa */
.fundo_bg-card-5 {
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card5-cor1) r g b / var(--kadi-opacity-desktop-strong)), 
        rgba(from var(--kadi-card5-cor2) r g b / var(--kadi-opacity-desktop-light))
    ) !important;
}

.fundo_bg-card-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(from var(--kadi-card5-cor1) r g b / var(--kadi-opacity-desktop-before-strong)), 
        rgba(from var(--kadi-card5-cor2) r g b / var(--kadi-opacity-desktop-before-light))
    );
    box-shadow: inset 0 0 50px rgba(from var(--kadi-card5-cor1) r g b / var(--kadi-opacity-desktop-shadow));
    pointer-events: none;
    opacity: 0;
    animation: fadeInPink 0.4s ease forwards;
}

/* Fallback para fundo_bg original */
.fundo_bg {
    background-color: rgba(from var(--kadi-fundo-padrao) r g b / 0.6) !important;
}

.fundo_bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(from var(--kadi-card1-cor1) r g b / 0.02);
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

/* Cards - APENAS cursor pointer, SEM efeitos visuais */
.jet-listing-grid__item,
.elementor-widget-jet-listing-grid .jet-listing-item,
.jet-listing .jet-listing-item,
[class*="listing-grid"] [class*="item"] {
    cursor: pointer;
}

/* ========================================= */
/* 🎬 ANIMAÇÕES */
/* ========================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInBlue {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInGreen {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInPurple {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInOrange {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInPink {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================= */
/* 📱 RESPONSIVE ADJUSTMENTS */
/* ========================================= */

@media (max-width: 768px) {
    .kadi-hover-active,
    .fundo_bg {
        background-color: rgba(from var(--kadi-fundo-padrao) r g b / 0.4) !important;
    }
    
    /* Cores mais suaves no mobile usando as variáveis */
    .fundo_bg-card-1 {
        background: linear-gradient(135deg, 
            rgba(from var(--kadi-card1-cor1) r g b / var(--kadi-opacity-mobile-strong)), 
            rgba(from var(--kadi-card1-cor2) r g b / var(--kadi-opacity-mobile-light))
        ) !important;
    }
    
    .fundo_bg-card-2 {
        background: linear-gradient(135deg, 
            rgba(from var(--kadi-card2-cor1) r g b / var(--kadi-opacity-mobile-strong)), 
            rgba(from var(--kadi-card2-cor2) r g b / var(--kadi-opacity-mobile-light))
        ) !important;
    }
    
    .fundo_bg-card-3 {
        background: linear-gradient(135deg, 
            rgba(from var(--kadi-card3-cor1) r g b / var(--kadi-opacity-mobile-strong)), 
            rgba(from var(--kadi-card3-cor2) r g b / var(--kadi-opacity-mobile-light))
        ) !important;
    }
    
    .fundo_bg-card-4 {
        background: linear-gradient(135deg, 
            rgba(from var(--kadi-card4-cor1) r g b / var(--kadi-opacity-mobile-strong)), 
            rgba(from var(--kadi-card4-cor2) r g b / var(--kadi-opacity-mobile-light))
        ) !important;
    }
    
    .fundo_bg-card-5 {
        background: linear-gradient(135deg, 
            rgba(from var(--kadi-card5-cor1) r g b / var(--kadi-opacity-mobile-strong)), 
            rgba(from var(--kadi-card5-cor2) r g b / var(--kadi-opacity-mobile-light))
        ) !important;
    }
}

/* ========================================= */
/* 🎨 TEMAS ESPECÍFICOS (compatibilidade) */
/* ========================================= */

.kadi-hover-active.theme-blue {
    background-color: rgba(from var(--kadi-theme-blue) r g b / 0.05) !important;
}

.kadi-hover-active.theme-green {
    background-color: rgba(from var(--kadi-theme-green) r g b / 0.05) !important;
}

.kadi-hover-active.theme-purple {
    background-color: rgba(from var(--kadi-theme-purple) r g b / 0.05) !important;
}

.kadi-hover-active.theme-warm {
    background-color: rgba(from var(--kadi-theme-warm) r g b / 0.04) !important;
}

.kadi-hover-active.theme-neutral {
    background-color: rgba(from var(--kadi-theme-neutral) r g b / 0.04) !important;
}

/* ========================================= */
/* 🔧 Z-INDEX E POSICIONAMENTO */
/* ========================================= */

.kadi-hover-active,
.fundo_bg,
.fundo_bg-card-1,
.fundo_bg-card-2,
.fundo_bg-card-3,
.fundo_bg-card-4,
.fundo_bg-card-5 {
    z-index: 1;
}

.kadi-hover-active > *,
.fundo_bg > *,
.fundo_bg-card-1 > *,
.fundo_bg-card-2 > *,
.fundo_bg-card-3 > *,
.fundo_bg-card-4 > *,
.fundo_bg-card-5 > * {
    position: relative;
    z-index: 2;
}

/* ========================================= */
/* 🐛 DEBUG MODE */
/* ========================================= */

body[class*="kadi_debug"] .kadi-hover-active,
body[class*="kadi_debug"] .fundo_bg-card-1,
body[class*="kadi_debug"] .fundo_bg-card-2,
body[class*="kadi_debug"] .fundo_bg-card-3,
body[class*="kadi_debug"] .fundo_bg-card-4,
body[class*="kadi_debug"] .fundo_bg-card-5 {
    border: 2px dashed rgba(from var(--kadi-debug-border) r g b / 0.7);
}

/* Debug - cores específicas para identificação */
body[class*="kadi_debug"] .fundo_bg-card-1 {
    border-color: rgba(from var(--kadi-card1-cor1) r g b / 0.8) !important;
}

body[class*="kadi_debug"] .fundo_bg-card-2 {
    border-color: rgba(from var(--kadi-card2-cor1) r g b / 0.8) !important;
}

body[class*="kadi_debug"] .fundo_bg-card-3 {
    border-color: rgba(from var(--kadi-card3-cor1) r g b / 0.8) !important;
}

body[class*="kadi_debug"] .fundo_bg-card-4 {
    border-color: rgba(from var(--kadi-card4-cor1) r g b / 0.8) !important;
}

body[class*="kadi_debug"] .fundo_bg-card-5 {
    border-color: rgba(from var(--kadi-card5-cor1) r g b / 0.8) !important;
}

/* Indicador de número do card no debug */
body[class*="kadi_debug"] .fundo_bg-card-1::after { content: 'CARD 1 - AZUL'; }
body[class*="kadi_debug"] .fundo_bg-card-2::after { content: 'CARD 2 - VERDE'; }
body[class*="kadi_debug"] .fundo_bg-card-3::after { content: 'CARD 3 - ROXO'; }
body[class*="kadi_debug"] .fundo_bg-card-4::after { content: 'CARD 4 - LARANJA'; }
body[class*="kadi_debug"] .fundo_bg-card-5::after { content: 'CARD 5+ - ROSA'; }

body[class*="kadi_debug"] .fundo_bg-card-1::after,
body[class*="kadi_debug"] .fundo_bg-card-2::after,
body[class*="kadi_debug"] .fundo_bg-card-3::after,
body[class*="kadi_debug"] .fundo_bg-card-4::after,
body[class*="kadi_debug"] .fundo_bg-card-5::after {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
}

/* ========================================= */
/* 📝 INSTRUÇÕES DE USO */
/* ========================================= */

/*
🎨 COMO ALTERAR AS CORES:

1. Vá até a seção "CONFIGURAÇÃO DE CORES" no início do arquivo
2. Altere os valores das variáveis --kadi-card1-cor1, --kadi-card1-cor2, etc.
3. Use apenas códigos hexadecimais (#RRGGBB)

📌 EXEMPLOS DE PALETAS:

Paleta Oceano:
--kadi-card1-cor1: #0EA5E9; /* Azul céu */
--kadi-card1-cor2: #0369A1; /* Azul escuro */

Paleta Natureza:
--kadi-card2-cor1: #22C55E; /* Verde claro */
--kadi-card2-cor2: #15803D; /* Verde escuro */

Paleta Sunset:
--kadi-card4-cor1: #F59E0B; /* Amarelo */
--kadi-card4-cor2: #D97706; /* Laranja */

🔧 AJUSTE DE OPACIDADE:
- Para efeitos mais sutis: diminua os valores de --kadi-opacity-*
- Para efeitos mais intensos: aumente os valores
*/