/* PIX Payment - Clean override using casino's own theme variables */

.pix-payment-container {
    padding: 24px 20px !important;
    margin: 8px auto !important;
    max-width: 400px !important;
    background-color: var(--carteira_saldo_pix_background, var(--ci-gray-over, #0e1a3a)) !important;
    border-radius: 12px !important;
    border: 1px solid var(--carteira_saldo_pix_border_color, rgba(255,255,255,0.08)) !important;
    text-align: center !important;
}

/* QR Code - fundo branco, arredondado, centralizado */
.pix-payment-container img,
.pix-payment-container canvas {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px !important;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto 16px !important;
    display: block !important;
}

/* Texto do código PIX */
.text_pix {
    color: var(--carteira_saldo_pix_text_color, #8ec5fc) !important;
    font-size: 10px !important;
    font-family: monospace !important;
    word-break: break-all !important;
    background: rgba(255,255,255,0.04) !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px dashed rgba(255,255,255,0.1) !important;
    margin: 8px 0 !important;
    cursor: pointer !important;
    line-height: 1.6 !important;
    max-height: 70px !important;
    overflow: hidden !important;
}

/* Botões */
.pix-payment-container button,
.pix-payment-container .btn,
.pix-payment-container a[class*="btn"] {
    background: var(--ci-primary-color, #0073d6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    width: 100% !important;
    margin: 4px 0 !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
}

.pix-payment-container button:hover,
.pix-payment-container .btn:hover {
    opacity: 0.9 !important;
}

/* Textos gerais */
.pix-payment-container p,
.pix-payment-container label,
.pix-payment-container > span {
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
}

.pix-payment-container h1,
.pix-payment-container h2,
.pix-payment-container h3,
.pix-payment-container h4,
.pix-payment-container h5,
.pix-payment-container strong,
.pix-payment-container b {
    color: #ffffff !important;
}