/* File: css/ccavenue-payment.css */

/* Container for the payment button and spinner */
.ccavenue-payment-container {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;
}

/* Spinner styling */
.spinner {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 110%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-top: 3px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Adjust spinner positioning on small screens */
@media only screen and (max-width: 768px) {
    .spinner {
        left: 105%; /* Slightly adjust to prevent overflow */
    }
}

/* Button disabled state */
button#ccavenue-pay-now[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button styling enhancements */
button#ccavenue-pay-now {
    transition: background-color 0.3s ease, color 0.3s ease;
}

button#ccavenue-pay-now:hover:not([disabled]) {
    background-color: #0053ba;
    color: #ffffff;
}