/* WooCommerce Credo Installment - Frontend Styles */

.credo-payment-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1a1a1a;
}

.credo-payment-label img {
    height: 28px;
    width: auto;
}

.credo-notice {
    background: #f0f7ff;
    border-left: 4px solid #005baa;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.credo-notice strong {
    color: #005baa;
}

.credo-redirect-info {
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 15px 0;
}

.credo-redirect-info .credo-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-top-color: #005baa;
    border-radius: 50%;
    animation: credo-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes credo-spin {
    to { transform: rotate(360deg); }
}

/* Checkout: highlight credo option */
#payment .payment_method_credo_installment label {
    font-weight: 500;
}

#payment .payment_method_credo_installment .payment_box {
    background: #f0f7ff;
}

/* Product page badge */
.credo-installment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f2ff;
    border: 1px solid #b3d0f5;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    color: #005baa;
    margin-top: 10px;
    font-weight: 500;
}