/* ========================================================= */
/* MÓDULO DOS CARTÕES DE PRODUTOS E PAINEL CONFIG            */
/* ========================================================= */

.gpl-card {
background: #1f2937;
border: 2px solid #374151;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
}

.gpl-card:hover {
border-color: #10b981;
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15), 0 0 0 1px #10b981 inset;
transform: scale(0.97);
}

.gpl-card.active-card-gpl {
border-color: #10b981;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 0 0 1px #10b981 inset;
transform: scale(1);
z-index: 5;
}

.gpl-card-stage {
width: 100%;
position: relative;
overflow: hidden;
background: #111827;
display: flex;
align-items: center;
justify-content: center;
}

.gpl-card:hover .gpl-global-preview-stage img,
.gpl-card.active-details-gpl .gpl-global-preview-stage img {
transform: scale(1.08);
}

.gpl-badge-version-bottom {
position: absolute;
bottom: 10px;
left: 10px;
background: #111827;
backdrop-filter: blur(4px);
border: 1px solid #38bdf8;
color: #ffffff;
padding: calc(5px * var(--card-scale, 1)) calc(10px * var(--card-scale, 1));
border-radius: 8px;
font-size: calc(0.85rem * var(--card-scale, 1));
font-weight: bold;
z-index: 10;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.gpl-badge-version-bottom i { color: #facc15; transition: all 0.3s ease; font-size: calc(0.85rem * var(--card-scale, 1)); }

.gpl-card:hover .gpl-badge-version-bottom,
.gpl-badge-version-bottom:hover {
background: #111827;
border-color: #ec4899;
box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}
.gpl-card:hover .gpl-badge-version-bottom i,
.gpl-badge-version-bottom:hover i { color: #4ade80; }

.gpl-card-config-btn {
position: absolute;
top: 10px;
right: 10px;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(4px);
color: #9ca3af;
width: calc(34px * var(--card-scale, 1));
height: calc(34px * var(--card-scale, 1));
border-radius: 8px;
font-size: calc(1rem * var(--card-scale, 1));
z-index: 15;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #374151;
transition: all 0.3s ease;
cursor: pointer;
}
.gpl-card-config-btn i { transition: transform 0.4s ease; }

.gpl-card:hover .gpl-card-config-btn {
border-color: #8b5cf6;
color: #a78bfa;
box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}
.gpl-card-config-btn:hover {
background: #111827;
border-color: #d946ef;
color: #f0abfc;
box-shadow: 0 0 15px rgba(217, 70, 239, 0.5);
}
.gpl-card-config-btn:hover i { transform: rotate(90deg); }

.gpl-card-config-btn.active-config-gpl {
background: #111827;
border-color: #10b981;
color: #34d399;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}
.gpl-card-config-btn.active-config-gpl i { transform: rotate(180deg); color: #10b981; }

.gpl-card-hover-overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.25);
z-index: 4;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.gpl-card:hover .gpl-card-hover-overlay,
.gpl-card.active-details-gpl .gpl-card-hover-overlay { opacity: 1; }

.gpl-card-info {
padding: 16px;
flex-grow: 1;
display: flex;
flex-direction: column;
background: rgba(15, 23, 42, 0.9);
border-top: 2px solid #374151;
transition: border-top-color 0.4s ease;
}

.gpl-card:hover .gpl-card-info,
.gpl-card.active-card-gpl .gpl-card-info {
border-top-color: #10b981;
}

.gpl-card-title {
font-size: calc(1.1rem * var(--card-scale, 1));
font-weight: 700;
color: #f3f4f6;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
text-align: center;
transition: all 0.3s ease;
}

.gpl-card:hover .gpl-card-title,
.gpl-card.active-card-gpl .gpl-card-title {
color: #38bdf8;
text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* ========================================================= */
/* --- PAINEL DE CONFIGURAÇÕES (THUMBNAIL & BOTÕES NATIVOS)  */
/* ========================================================= */

.gpl-config-header-magic {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
width: 100%;
}

.gpl-config-mini-preview {
width: 70%;
max-width: 280px;
border-radius: 5px; 
border: 1px solid #8b5cf6; 
box-shadow: 0 0 25px rgba(139, 92, 246, 0.3);
margin-bottom: 16px;
overflow: hidden; 
}

.gpl-config-sci-title {
font-size: 1.35rem;
font-weight: 900;
color: #fff;
text-align: center;
margin: 0;
background: linear-gradient(90deg, #ffffff, #00fffa, #2eff00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
padding: 0 10px;
}

.gpl-config-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
padding: 4px;
}

.gpl-config-card {
position: relative;
display: flex;
align-items: center;
justify-content: center; /* Centralização do Ícone e Texto Ativada Aqui */
gap: 12px;
padding: 14px 16px;
background: rgba(31, 41, 55, 0.5);
border: 1px solid color-mix(in srgb, var(--card-color, #22d3ee) 25%, rgba(255, 255, 255, 0.15));
border-radius: 12px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gpl-config-card:hover {
background: color-mix(in srgb, var(--card-color, #22d3ee) 15%, rgba(15, 23, 42, 0.9));
border-color: var(--card-color, #22d3ee);
transform: translateY(-3px);
box-shadow: 0 6px 20px color-mix(in srgb, var(--card-color, #22d3ee) 30%, transparent);
}

.gpl-config-card-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--card-color, #fff);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}

.gpl-config-card-icon i {
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--card-color, #22d3ee) 50%, transparent));
}

.gpl-config-card:hover .gpl-config-card-icon {
transform: scale(1.15);
text-shadow: 0 0 12px var(--card-color, #22d3ee);
}

.gpl-config-card span {
color: #e5e7eb;
font-size: 0.95rem;
font-weight: 600;
z-index: 2;
transition: color 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.gpl-config-card:hover span {
color: #ffffff;
}

.gpl-config-card-borders {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}

.gpl-config-card:hover .gpl-config-card-borders {
opacity: 1;
}

.gpl-config-card.active-fav-magic {
border: 2px solid #facc15 !important;
background: rgba(250, 204, 21, 0.1) !important;
box-shadow: 0 0 20px rgba(250, 204, 21, 0.4), inset 0 0 10px rgba(250, 204, 21, 0.2) !important;
}
.gpl-config-card.active-fav-magic .gpl-config-card-icon i {
color: #facc15 !important;
filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.9));
transform: scale(1.15);
}

.gpl-btn-share-magic.is-magic-shared {
border: 2px solid #d946ef !important;
background: rgba(217, 70, 239, 0.15) !important;
box-shadow: 0 0 30px rgba(217, 70, 239, 0.8) !important;
color: #f0abfc !important;
transform: scale(0.95);
}
.gpl-btn-share-magic.is-magic-shared i {
color: #d946ef !important;
filter: drop-shadow(0 0 15px #d946ef);
animation: pulseShare 0.5s ease-in-out infinite alternate;
}

.gpl-config-card-full {
grid-column: 1 / -1;
width: fit-content;
margin: 0 auto;
min-width: 65%;
display: flex;
justify-content: center;
}

@media (max-width: 768px) {
.gpl-config-grid { gap: 10px; }
.gpl-config-card { padding: 12px 10px !important; }
.gpl-config-card span { font-size: 0.78rem !important; }
.gpl-config-card-icon i { font-size: 1.15rem !important; }
.gpl-config-card-full { min-width: 80%; }
.gpl-config-mini-preview { width: 85%; }
.gpl-config-sci-title { font-size: 1.15rem; }
}