/* Estilos específicos para a página de pagamento via Pix */
.pix-container {
    background-color: #1a1a1a; /* Um tom de cinza escuro para destacar no fundo preto */
    padding: 30px;
    border-radius: 15px;
    border: 3px solid rgb(95, 71, 84); /* Bordas roxas */
    box-shadow: 0 0 20px rgba(95, 71, 84, 0.7); /* Sombra roxa para destaque */
    width: 90%;
    max-width: 500px;
    text-align: center;
    margin: 40px auto;
}

.chave-pix {
    background-color: #333;
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-family: monospace; /* Fonte de código para a chave */
    word-break: break-all; /* Garante que a chave não quebre o layout */
    border: 1px solid rgb(11, 226, 190);
}

.qr-code {
    width: 180px;
    height: 180px;
    background-color: white; /* Simulação de um QR Code */
    border-radius: 10px;
    margin: 20px auto;
    display: block;
    /* Placeholder: você substituirá isso pela sua imagem real do QR Code */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #333;
}

.img-qr-code {
    /* Garante que a imagem preencha todo o espaço do container .qr-code */
    width: 95%;
    height: 95%;
    /* Garante que o QR Code seja exibido corretamente */
    object-fit: contain; 
}

/* O botão de confirmação tem que ser diferente do botão "cta-button" para dar o contraste */
#confirmar-button {
    background-color: #25d366; /* Verde do WhatsApp, já que é o próximo passo */
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 15px;
    margin-top: 20px;
    transition: background-color 0.3s;
}

#confirmar-button:hover {
    background-color: #128c7e;
}


/* Estilo para o link "Voltar à página inicial" */
#link-voltar {
    margin-top: 30px;
    padding: 20px 0 0 20px; /* Espaçamento no topo e à esquerda */
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

#link-voltar a {
    /* Cor do texto em branco para contraste */
    color: white; 
    text-decoration: none; /* Sem sublinhado padrão */
    font-size: 1.1rem;
    transition: color 0.3s;
}

#link-voltar a:hover {
    /* Efeito ao passar o mouse: a cor vibrante ciano */
    color: rgb(11, 226, 190);
}

#link-voltar i {
    /* A cor da seta será o roxo da sua marca */
    color: rgb(95, 71, 84);
    margin-right: 8px;
}

/* --- CONFIGURAÇÕES PARA TELAS MENORES (PAGAMENTO) --- */
@media (max-width: 480px) {
    .pix-container {
        width: 95%;
        padding: 15px;
        margin: 20px auto;
    }

    #preco-pix {
        font-size: 2rem !important;
    }

    .hero-text p {
        font-size: 1.4rem !important;
    }

    #confirmar-button {
        width: 100%;
        font-size: 1.1rem;
        padding: 15px 10px;
    }

    .chave-pix {
        font-size: 1rem;
    }
}