/* Estilos gerais do SPO Gateway */
.payment_method_spo_gateway img {
    max-height: 25px;
    vertical-align: middle;
    margin-right: 10px;
}

.spo-payment-instructions {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Ocultar campos quando PIX selecionado */
body.spo-pix-selected .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

body.spo-pix-selected #billing_first_name_field,
body.spo-pix-selected #billing_last_name_field,
body.spo-pix-selected #billing_email_field,
body.spo-pix-selected #billing_phone_field {
    display: block !important;
}

/* Container de pagamento */
#spo-payment-container {
    margin: 20px 0;
}

.spo-loading {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #666;
}

/* Wrapper principal */
.spo-payment-wrapper {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Header do pagamento */
.spo-payment-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.spo-payment-header h3 {
    margin: 0 0 20px;
    font-size: 24px;
    color: #333;
}

.spo-verification-info,
.spo-amount-info {
    display: inline-block;
    margin: 0 15px;
    font-size: 16px;
}

.spo-verification-info .label,
.spo-amount-info .label {
    color: #666;
    margin-right: 10px;
}

.spo-verification-code {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: #2271b1;
    background: #f0f8ff;
    padding: 5px 15px;
    border-radius: 4px;
    display: inline-block;
}

.spo-amount {
    font-size: 20px;
    font-weight: bold;
    color: #4CAF50;
}

/* Seção do QR Code */
.spo-qrcode-section {
    margin: 30px 0;
}

.spo-qrcode-image {
    text-align: center;
    margin-bottom: 25px;
}

.spo-qrcode-image img {
    max-width: 250px;
    height: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
}

/* Copy section */
.spo-qrcode-copy {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
}

.spo-qrcode-copy label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
}

.spo-copy-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

#spo-qrcode-text {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
    resize: none;
    height: 80px;
    background: #fff;
}

#spo-copy-btn {
    padding: 12px 25px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s;
    white-space: nowrap;
}

#spo-copy-btn:hover {
    background: #1e5e99;
}

/* Footer do pagamento */
.spo-payment-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spo-countdown {
    font-size: 16px;
}

.spo-countdown span:first-child {
    color: #666;
    margin-right: 10px;
}

#spo-countdown-timer {
    font-size: 24px;
    font-weight: bold;
    color: #2271b1;
    font-family: 'Courier New', monospace;
}

/* Status do pagamento */
.spo-payment-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spo-status-text {
    font-size: 16px;
    color: #666;
}

/* Spinner animado */
.spo-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2271b1;
    border-radius: 50%;
    animation: spo-spin 1s linear infinite;
}

@keyframes spo-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success icon */
.spo-success-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #4CAF50;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
}

/* Estados do pagamento */
.spo-payment-wrapper.payment-success {
    border-color: #4CAF50;
}

.spo-payment-wrapper.payment-success .spo-payment-header {
    border-bottom-color: #4CAF50;
}

.spo-payment-wrapper.payment-success .spo-status-text {
    color: #4CAF50;
    font-weight: bold;
}

.spo-payment-wrapper.payment-expired {
    border-color: #f44336;
}

.spo-payment-wrapper.payment-expired .spo-status-text {
    color: #f44336;
}

.spo-payment-wrapper.payment-expired #spo-countdown-timer {
    color: #f44336;
}

/* Responsividade */
@media (max-width: 768px) {
    .spo-payment-wrapper {
        padding: 20px;
    }
    
    .spo-payment-header h3 {
        font-size: 20px;
    }
    
    .spo-verification-info,
    .spo-amount-info {
        display: block;
        margin: 10px 0;
    }
    
    .spo-copy-wrapper {
        flex-direction: column;
    }
    
    #spo-copy-btn {
        width: 100%;
    }
    
    .spo-payment-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    body.spo-pix-selected .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Ajustes para o checkout */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_spo_gateway {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_spo_gateway label {
    font-weight: 600;
}

/* Erro styling */
.woocommerce-error {
    background: #f44336;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
}



/* Checkout Direto - Esconder elementos desnecessários */
.logged-in.woocommerce-order-received .woocommerce-order-overview,
.logged-in.woocommerce-order-received .woocommerce-customer-details,
.logged-in.woocommerce-order-received .woocommerce-order-details {
    display: none;
}

.direct-checkout .spo-pix-payment-page {
    max-width: 600px;
    margin: 0 auto;
}

.direct-checkout #spo-payment-container {
    margin-top: 0;
}

/* Modal - já está no PHP mas adicionar aqui também para referência */
.spo-checkout-modal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mensagem de redirecionamento */
.spo-redirect-message {
    color: #4CAF50;
    font-size: 18px;
    margin-top: 20px;
    padding: 20px;
    background: #f0f8ff;
    border-radius: 5px;
}

/* Ajustes para telas menores */
@media (max-width: 480px) {
    .spo-checkout-buttons {
        flex-direction: column;
    }
    
    .spo-checkout-buttons button {
        width: 100%;
    }
}