/* assets/css/produto-page.css /
/ Estilos para a nova página SEO de produtos (Estilo Mágico Científico) */

/* STREAMING_CHUNK:Configurando animações base e fade-in... */
.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* STREAMING_CHUNK:Estilizando o efeito de digitação do Terminal... /
/ Efeito de digitação (Cursor piscando) */
#bliter-typing-text + span {
animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

/* STREAMING_CHUNK:Adicionando interações mágicas nas colunas... /
/ Brilhos e Sombras Mágicas (Hover nas colunas) */
#magic-col-1 > div,
#magic-col-2 > div,
#magic-col-3 > div {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
will-change: transform, box-shadow;
}

#magic-col-1 > div:hover,
#magic-col-2 > div:hover,
#magic-col-3 > div:hover {
transform: translateY(-4px);
}

/* Coluna 1: Visual (Cyan Glow) */
#magic-col-1 > div:hover {
box-shadow: 0 15px 35px -5px rgba(6, 182, 212, 0.25);
border-color: rgba(6, 182, 212, 0.4);
}

/* Coluna 2: Informações (Indigo/Purple Glow) */
#magic-col-2 > div:hover {
box-shadow: 0 15px 35px -5px rgba(99, 102, 241, 0.2);
border-color: rgba(99, 102, 241, 0.3);
}

/* Coluna 3: Ações (Gold/Emerald Glow dependendo do status) */
#magic-col-3 > div:hover {
box-shadow: 0 15px 40px -10px rgba(251, 191, 36, 0.15);
border-color: rgba(251, 191, 36, 0.3);
}

/* STREAMING_CHUNK:Animando ícones de status... /
/ Animação flutuante para os ícones de status (Gratuito / Premium) */
.fa-gift, .fa-crown {
animation: magic-float 3s ease-in-out infinite;
display: inline-block;
}

@keyframes magic-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.1); filter: brightness(1.2); }
}

/* STREAMING_CHUNK:Estilizando scrollbar da descrição... /
/ Scrollbar customizado para textos longos na descrição */
#seo-product-description::-webkit-scrollbar {
width: 6px;
}
#seo-product-description::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.3);
border-radius: 4px;
}
#seo-product-description::-webkit-scrollbar-thumb {
background: rgba(6, 182, 212, 0.3);
border-radius: 4px;
}
#seo-product-description::-webkit-scrollbar-thumb:hover {
background: rgba(6, 182, 212, 0.6);
}

/* Fix para garantir que imagens da descrição não quebrem o layout */
#seo-product-description img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1rem 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}