/* assets/css/produto-page.css */
/* Estilos globais e animações para a Página do Produto 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: Módulo Loader Científico & 404 (Sinal Perdido) */
.magic-loader-core, .magic-404-core {
position: relative;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}

.loader-ring, .error-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
}

/* Anéis do Loader (Azul/Ciano/Roxo) */
.loader-ring-1 {
width: 100%; height: 100%;
border-top: 2px solid #22d3ee;
border-left: 2px solid #22d3ee;
animation: spinMagicLoader 2s linear infinite;
box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

.loader-ring-2 {
width: 80%; height: 80%;
border-bottom: 2px solid #a855f7;
border-right: 2px solid #a855f7;
animation: spinMagicLoaderReverse 1.5s linear infinite;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.loader-ring-3 {
width: 60%; height: 60%;
border-top: 2px solid #38bdf8;
border-bottom: 2px solid #38bdf8;
animation: spinMagicLoader 1s linear infinite;
}

.loader-icon {
font-size: 2rem;
color: #22d3ee;
text-shadow: 0 0 15px #22d3ee, 0 0 30px #a855f7;
}

/* Anéis do 404 (Vermelho/Rosa) */
.error-ring-1 {
width: 100%; height: 100%;
border-top: 2px solid #f43f5e;
border-bottom: 2px solid #f43f5e;
animation: pulseErrorRing 2s ease-in-out infinite;
box-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
}

.error-ring-2 {
width: 75%; height: 75%;
border-left: 2px solid #ef4444;
border-right: 2px solid #ef4444;
animation: spinMagicLoaderReverse 3s linear infinite;
}

.error-icon {
font-size: 2.5rem;
color: #f43f5e;
text-shadow: 0 0 15px #f43f5e;
animation: glitchIcon 1.5s infinite;
}

@keyframes spinMagicLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinMagicLoaderReverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes pulseErrorRing { 0% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.5; } }
@keyframes glitchIcon {
0%, 100% { transform: translate(0); opacity: 1; }
20% { transform: translate(-2px, 2px); opacity: 0.8; }
40% { transform: translate(2px, -2px); opacity: 1; }
60% { transform: translate(-2px, -2px); opacity: 0.5; color: #fff; }
80% { transform: translate(2px, 2px); opacity: 1; color: #f43f5e; }
}

/* STREAMING_CHUNK:Estrutura dos Blocos 1 e 2 Unificados... */
.magic-block {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(51, 65, 85, 0.5);
border-radius: 1.5rem;
padding: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
height: 100%;
transition: all 0.5s ease;
}

@media (min-width: 1024px) {
.magic-block { padding: 2.5rem; }
}

.magic-block-1:hover {
border-color: rgba(6, 182, 212, 0.3);
box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
}

.magic-block-2:hover {
border-color: rgba(168, 85, 247, 0.3);
box-shadow: 0 0 30px rgba(168, 85, 247, 0.1);
}

/* STREAMING_CHUNK:Título Ajustado e Badges Mágicos... */
.magic-title {
font-size: 1.15rem;
font-weight: 900;
background-image: linear-gradient(to bottom right, #ffffff, #cffafe, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1.5rem;
text-align: center;
line-height: 1.25;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
@media (min-width: 1024px) {
.magic-title { font-size: 1.8rem; }
}

/* Base Badge Universal */
.magic-badge {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(6, 182, 212, 0.05));
border: 1px solid rgba(6, 182, 212, 0.4);
padding: 8px 20px;
font-size: 0.85rem;
font-weight: 700;
color: #cbd5e1;
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.1), 0 4px 10px rgba(0,0,0,0.2);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.magic-badge-left { border-radius: 0 16px 0 16px; }
.magic-badge-right { border-radius: 16px 0 16px 0; }

.magic-badge i {
color: #22d3ee;
text-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
transition: all 0.4s ease;
}
.magic-badge:hover {
border-color: rgba(6, 182, 212, 0.8);
color: #ffffff;
box-shadow: inset 0 0 15px rgba(6, 182, 212, 0.2), 0 6px 15px rgba(6, 182, 212, 0.3);
transform: translateY(-3px) scale(1.02);
}
.magic-badge:hover i { transform: scale(1.2) rotate(15deg); }

/* STREAMING_CHUNK:Terminal Mágico / Console Effect Totalmente Corrigido... */
.magic-console-screen {
background: #0a0a0a;
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 8px;
padding: 24px;
font-family: 'Courier New', Courier, monospace;
box-shadow: inset 0 0 30px rgba(74, 222, 128, 0.05), 0 10px 25px rgba(0,0,0,0.5);
margin: 2rem auto 0 auto;
width: 100%;
max-width: 600px;
position: relative;
overflow: hidden;
text-align: left !important;
}

.magic-console-screen::before {
content: " ";
display: block;
position: absolute;
inset: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 4px;
pointer-events: none;
opacity: 0.5;
}

.magic-console-header {
color: #fbbf24 !important;
font-size: 0.95rem;
margin-bottom: 16px;
border-bottom: 1px dashed rgba(250, 204, 21, 0.3);
padding-bottom: 8px;
font-weight: 700;
text-align: center;
text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.magic-console-line {
display: grid !important;
grid-template-columns: min-content 1fr !important;
align-items: start !important;
gap: 14px !important;
font-size: 1.15rem !important;
line-height: 1.5 !important;
margin-bottom: 12px !important;
width: 100% !important;
}

.magic-console-arrow {
color: #38bdf8 !important;
font-weight: 900 !important;
text-shadow: 0 0 5px rgba(56, 189, 248, 0.6) !important;
white-space: nowrap !important;
padding-top: 2px;
}

.magic-text-glow {
color: #ffffff !important;
font-weight: bold !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.2) !important;
word-break: break-word !important;
text-align: left !important;
}

/* STREAMING_CHUNK:Ajustes de Responsividade do Terminal Mágico... */
@media (max-width: 640px) {
.magic-console-screen {
padding: 16px;
}
.magic-console-header {
font-size: 0.85rem !important;
margin-bottom: 12px;
}
.magic-console-line {
font-size: 1rem !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
}

/* STREAMING_CHUNK:Preview Original... */
.produto-preview-pure {
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
object-fit: contain;
max-width: 100%;
display: block;
}

#produto-preview-container {
line-height: 0;
font-size: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}

#produto-preview-container img,
#produto-preview-container > div {
display: block;
line-height: 0;
vertical-align: bottom;
margin: 0; padding: 0;
width: 100%; height: auto;
}

/* STREAMING_CHUNK:Layout de botões Proporcional e Lado a Lado... */
.seo-btn {
width: 100%;
padding: 12px 20px;
border-radius: 12px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ffffff !important;
position: relative;
overflow: hidden;
text-align: center;
}

@media (min-width: 640px) { .seo-btn { font-size: 0.85rem; padding: 14px 24px; } }

.seo-btn i { font-size: 1.15rem; transition: 0.4s; }

/* Botões Linha 1 */
.seo-btn-demo { background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.3); }
.seo-btn-demo i { color: #f97316; }
.seo-btn-demo:hover { background: #f97316; box-shadow: 0 0 15px rgba(249, 115, 22, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-demo:hover i { color: #ffffff; }

.seo-btn-download { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.seo-btn-download i { color: #4ade80; }
.seo-btn-download:hover { background: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-download:hover i { color: #ffffff; }

.seo-btn-favorite { background: rgba(250, 204, 21, 0.1); border: 1px solid rgba(250, 204, 21, 0.3); }
.seo-btn-favorite i { color: #facc15; }
.seo-btn-favorite:hover { background: #facc15; box-shadow: 0 0 15px rgba(250, 204, 21, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-favorite:hover i { color: #ffffff; }
.seo-btn-favorite.active { background: #facc15; border-color: #facc15; color: #ffffff !important; box-shadow: 0 0 15px rgba(250,204,21,0.4); }
.seo-btn-favorite.active i { color: #ffffff; }

.seo-btn-premium { background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(217,119,6,0.2) 100%); border: 1px solid rgba(245,158,11,0.4); color: #ffffff !important; }
.seo-btn-premium:hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-color: #fbbf24; box-shadow: 0 10px 25px -5px rgba(245,158,11,0.5); transform: scale(1.05) translateY(-2px); }
.seo-btn-premium:hover i { color: #ffffff !important; }

/* Botões Linha 2 (Novos) */
.seo-btn-video {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.25) 100%);
border: 1px solid rgba(239, 68, 68, 0.5);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
animation: pulse-magic-red 2.5s infinite ease-in-out;
}
.seo-btn-video i { color: #f87171; text-shadow: 0 0 8px rgba(248, 113, 113, 0.8); }
.seo-btn-video:hover {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border-color: #fca5a5;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
transform: scale(1.05) translateY(-2px);
animation: none;
}
.seo-btn-video:hover i { color: #ffffff; text-shadow: none; }

@keyframes pulse-magic-red {
0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }
100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
}

.seo-btn-comments { background: rgba(14, 165, 233, 0.1); border: 1px solid rgba(14, 165, 233, 0.3); }
.seo-btn-comments i { color: #38bdf8; }
.seo-btn-comments:hover { background: #0ea5e9; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-comments:hover i { color: #ffffff; }

.seo-btn-donate { background: rgba(236, 72, 153, 0.1); border: 1px solid rgba(236, 72, 153, 0.3); }
.seo-btn-donate i { color: #ec4899; }
.seo-btn-donate:hover { background: #ec4899; box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-donate:hover i { color: #ffffff; }

/* Botões Linha 3 */
.seo-btn-font { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); }
.seo-btn-font i { color: #3b82f6; }
.seo-btn-font:hover { background: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-font:hover i { color: #ffffff; }

.seo-btn-audio { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); }
.seo-btn-audio i { color: #a855f7; }
.seo-btn-audio:hover { background: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-audio:hover i { color: #ffffff; }

.seo-btn-reorder { background: rgba(217, 70, 239, 0.1); border: 1px solid rgba(217, 70, 239, 0.3); }
.seo-btn-reorder i { color: #d946ef; }
.seo-btn-reorder:hover { background: #d946ef; box-shadow: 0 0 15px rgba(217, 70, 239, 0.4); transform: scale(1.05) translateY(-2px); }
.seo-btn-reorder:hover i { color: #ffffff; }

/* STREAMING_CHUNK:Scrollbar e Correções Finais da Descrição... */
#text-magic-content-produto::-webkit-scrollbar { width: 6px; }
#text-magic-content-produto::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); border-radius: 4px; }
#text-magic-content-produto::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.3); border-radius: 4px; }
#text-magic-content-produto::-webkit-scrollbar-thumb:hover { background: rgba(6, 182, 212, 0.6); }

#text-magic-content-produto img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1rem 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}