/* ESTILOS EXCLUSIVOS DO MÓDULO DE DOAÇÃO (MUNDO BLITER) */

/* --- TELA MANIFESTO --- */
.gpl-donate-manifesto {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 5px;
}

/* === NOVO: ÍCONE "A NOVA ERA DO MUNDO BLITER" MÁGICO === */
.gpl-icon-nova-era {
display: inline-block;
color: #38bdf8;
font-size: 2.2rem;
margin-bottom: 12px;
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.8));
animation: novaEraMagicGlow 2s ease-in-out infinite alternate;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gpl-icon-nova-era:hover {
transform: scale(1.2) rotate(10deg);
}
@keyframes novaEraMagicGlow {
0% { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)) drop-shadow(0 0 0px #ec4899); transform: translateY(0px); }
100% { filter: drop-shadow(0 0 20px rgba(56, 189, 248, 1)) drop-shadow(0 0 15px #ec4899); transform: translateY(-3px); }
}

/* Avatar de Doação Modificado com Brilho Científico (Borda Azul Mantida) */
.gpl-donate-avatar {
width: 80px;
height: 80px;
background: rgba(31, 41, 55, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #38bdf8; /* Azul tecnológico mantido */
position: relative;
margin-bottom: 20px;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.4), inset 0 0 15px rgba(236, 72, 153, 0.2);
}

.avatar-glow {
position: absolute;
inset: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56,189,248,0.3) 0%, rgba(236,72,153,0.1) 70%);
animation: donatePulse 3s infinite ease-in-out;
z-index: -1;
}

/* Ícone de Doação Amiga com Sombra Mágica Rosa */
.gpl-magic-icon {
font-size: 2.3rem;
color: #ec4899; /* Rosa Mágico */
filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
animation: scientificGlow 2s ease-in-out infinite alternate;
}

@keyframes scientificGlow {
0% { filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.6)) drop-shadow(0 0 0px #38bdf8); transform: scale(1); }
100% { filter: drop-shadow(0 0 20px rgba(236, 72, 153, 1)) drop-shadow(0 0 15px #38bdf8); transform: scale(1.1); }
}

@keyframes donatePulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.3); opacity: 0.3; }
}

.gpl-donate-title {
font-size: 1.8rem;
font-weight: 900;
color: #ffffff;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.gpl-donate-text {
font-size: 1.05rem;
line-height: 1.7;
color: #d1d5db;
margin-bottom: 25px;
text-align: justify;
text-align-last: center;
}

.gpl-donate-text p { margin-bottom: 12px; }
.gpl-donate-text strong { color: #38bdf8; text-shadow: 0 0 5px rgba(56, 189, 248, 0.3); }
.gpl-donate-text em { color: #facc15; font-style: normal; font-weight: bold; }

.gpl-donate-highlight {
background: rgba(236, 72, 153, 0.1);
border-left: 4px solid #ec4899;
padding: 15px 20px;
border-radius: 0 12px 12px 0;
color: #ffffff;
font-style: italic;
font-size: 1.1rem;
position: relative;
text-align: left;
box-shadow: 0 0 15px rgba(236, 72, 153, 0.1);
}

.gpl-donate-highlight i {
position: absolute;
top: -10px;
left: 10px;
font-size: 2rem;
color: rgba(236, 72, 153, 0.3);
}

/* Texto Amarelo Solicitado */
.gpl-text-yellow {
color: #facc15;
text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
font-weight: 900;
}

/* --- BOTÕES DO RODAPÉ DO MANIFESTO --- */
.gpl-donate-footer-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
margin-top: 5px;
}
/* Transição suave adicionada para o Zoom */
.gpl-donate-footer-buttons .gpl-btn {
flex: 1;
min-width: 140px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Botão PIX Direto */
.gpl-btn-pix { background: rgba(50, 188, 173, 0.1); border: 1px solid rgba(50, 188, 173, 0.3); color: #ffffff !important; }
.gpl-btn-pix i { color: #32bcad; transition: 0.3s; font-size: 1.1rem; }
.gpl-btn-pix:hover { background: #32bcad; border-color: #32bcad; box-shadow: 0 0 15px rgba(50, 188, 173, 0.5); transform: scale(1.05) translateY(-2px); z-index: 10; }
.gpl-btn-pix:hover i { color: #ffffff; }

/* Botão Café */
.gpl-btn-coffee { background: rgba(253, 186, 116, 0.1); border: 1px solid rgba(253, 186, 116, 0.3); color: #ffffff !important; }
.gpl-btn-coffee i { color: #fdba74; transition: 0.3s; font-size: 1.1rem; }
.gpl-btn-coffee:hover { background: #fdba74; border-color: #fdba74; box-shadow: 0 0 15px rgba(253, 186, 116, 0.5); transform: scale(1.05) translateY(-2px); z-index: 10; }
.gpl-btn-coffee:hover i { color: #111827; }

/* Botão PoloPag */
.gpl-btn-polopag { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); color: #ffffff !important; }
.gpl-btn-polopag i { color: #a855f7; transition: 0.3s; font-size: 1.1rem; }
.gpl-btn-polopag:hover { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); transform: scale(1.05) translateY(-2px); z-index: 10; }
.gpl-btn-polopag:hover i { color: #ffffff; }

/* --- BOTÃO LARGURA AUTOMÁTICA (Ex: Voltar ao menu) --- */
.gpl-btn-auto-width {
flex: none !important;
padding-left: 24px !important;
padding-right: 24px !important;
margin: 0 auto;
}

/* TELA DE CARREGAMENTO PIX FAKE */
.gpl-pix-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
text-align: center;
}

.gpl-pix-loading-ring {
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid rgba(50, 188, 173, 0.1);
border-top-color: #32bcad;
animation: pixSpin 1s linear infinite;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gpl-pix-loading-ring i {
animation: pixReverseSpin 1s linear infinite;
font-size: 2.5rem;
color: #32bcad;
text-shadow: 0 0 10px rgba(50, 188, 173, 0.5);
}

@keyframes pixSpin { 100% { transform: rotate(360deg); } }
@keyframes pixReverseSpin { 100% { transform: rotate(-360deg); } }

/* TELA DO PIX FINAL */
.gpl-pix-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

/* Título com Sombra Verde e Fonte Branca */
.gpl-pix-title {
font-size: 1.6rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 5px;
text-shadow: 0 0 12px rgba(16, 185, 129, 0.8), 0 0 24px rgba(16, 185, 129, 0.4);
}
.gpl-pix-desc { color: #9ca3af; font-size: 0.95rem; margin-bottom: 25px; }

.gpl-pix-qr-box {
background: #ffffff;
padding: 15px;
border-radius: 16px;
border: 4px solid #32bcad;
box-shadow: 0 0 25px rgba(50, 188, 173, 0.2);
position: relative;
overflow: hidden;
margin-bottom: 25px;
}
.gpl-pix-qr-img { width: 220px; height: 220px; object-fit: cover; display: block; }

/* Efeito Lazer Escaneando o QR Code */
.gpl-pix-qr-scanner {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #ec4899;
box-shadow: 0 0 10px #ec4899, 0 0 20px #ec4899;
animation: scanQr 3s infinite ease-in-out;
}
@keyframes scanQr {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}

.gpl-pix-info {
background: rgba(31, 41, 55, 0.6);
border: 1px solid #374151;
border-radius: 12px;
padding: 15px;
width: 100%;
margin-bottom: 20px;
text-align: left;
}
.gpl-pix-info div { font-size: 0.95rem; color: #e5e7eb; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.gpl-pix-info div:last-child { margin-bottom: 0; }
.gpl-pix-info i { color: #38bdf8; width: 20px; text-align: center; }

.gpl-pix-copy-box { width: 100%; text-align: left; }
.gpl-pix-copy-box label { font-size: 0.85rem; color: #9ca3af; font-weight: bold; display: block; margin-bottom: 8px; text-transform: uppercase; }

.gpl-pix-input-wrapper { display: flex; gap: 10px; width: 100%; }

/* Input Branco */
.gpl-pix-input-wrapper input {
flex-grow: 1;
background: #111827;
border: 1px solid #4b5563;
color: #ffffff; /* Texto Branco Puro */
border-radius: 8px;
padding: 12px 15px;
font-size: 0.95rem;
font-weight: bold;
outline: none;
letter-spacing: 0.5px;
}

/* Botão Verde */
.gpl-pix-btn-copy {
width: 48px;
background: rgba(50, 188, 173, 0.1);
border: 1px solid rgba(50, 188, 173, 0.3);
color: #32bcad;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s;
}
.gpl-pix-btn-copy:hover {
background: #32bcad;
color: #ffffff;
box-shadow: 0 0 10px rgba(50, 188, 173, 0.4);
}

/* === MEDIA QUERIES (MOBILE) - AJUSTES PROFISSIONAIS === */
@media (max-width: 640px) {
    /* Diminui levemente o título no mobile */
    .gpl-donate-title {
        font-size: 1.4rem;
    }

    /* Coloca os 3 botões exatamente na mesma linha (design de App/Tabs) */
    .gpl-donate-footer-buttons {
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: space-between;
    }

    .gpl-donate-footer-buttons .gpl-btn {
        min-width: 0; /* Remove a largura mínima que causava a quebra de linha */
        flex: 1; /* Faz os 3 botões dividirem o espaço igualmente */
        padding: 10px 4px !important; /* Reduz padding lateral para caber */
        display: flex;
        flex-direction: column; /* Coloca o ícone acima do texto (padrão mobile profissa) */
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .gpl-donate-footer-buttons .gpl-btn i {
        margin: 0;
        font-size: 1.3rem; /* Aumenta um pouco o ícone para compensar */
    }

    .gpl-donate-footer-buttons .gpl-btn span {
        font-size: 0.7rem; /* Reduz a fonte do texto interno do botão */
        text-align: center;
        line-height: 1.1;
        white-space: normal; /* Permite leve quebra se a tela for extremamente apertada */
        display: block !important;
    }
    
    /* Para o botão voltar do PIX manter-se horizontal no mobile */
    .gpl-btn-auto-width {
        flex-direction: row !important;
    }
    .gpl-btn-auto-width span {
        display: inline-block !important;
    }
}