/**
 * EuPaymentz Gateway Frontend Styles
 */

/* Test mode notice */
.eupaymentz-test-notice {
    background: #f0f0f1;
    padding: 10px 15px;
    border-left: 4px solid #2271b1;
    margin: 15px 0;
    font-weight: 500;
}

/* Credit card form */
#wc-eupaymentz-cc-form {
    padding: 15px 0;
}

#wc-eupaymentz-cc-form .form-row {
    margin: 0 0 15px;
}

#wc-eupaymentz-cc-form input[type="tel"] {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

#wc-eupaymentz-cc-form input[type="tel"]:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Card number formatting */
.wc-credit-card-form-card-number {
    letter-spacing: 0.05em;
}

/* Expiry field */
.wc-credit-card-form-card-expiry {
    letter-spacing: 0.1em;
}

/* CVC field */
.wc-credit-card-form-card-cvc {
    text-align: center;
    letter-spacing: 0.1em;
}

/* Error styling */
.woocommerce-error .eupaymentz-error {
    display: block;
    margin: 5px 0;
}

/* Loading overlay */
.woocommerce-checkout .blockUI.blockOverlay::before {
    height: 1em;
    width: 1em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.5em;
    margin-top: -0.5em;
    content: "";
    animation: spin 1s ease-in-out infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E") center center;
    background-size: cover;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive styles */
@media screen and (max-width: 768px) {
    #wc-eupaymentz-cc-form .form-row-first,
    #wc-eupaymentz-cc-form .form-row-last {
        width: 100%;
        float: none;
    }
    
    .wc-credit-card-form-card-cvc {
        width: 100% !important;
    }
}

/* Card brand icons (optional enhancement) */
.eupaymentz-card-icons {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.eupaymentz-card-icon {
    width: 40px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.eupaymentz-card-icon.active {
    opacity: 1;
}

/* Hosted mode message */
.eupaymentz-hosted-message {
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin: 15px 0;
}

.eupaymentz-hosted-message p {
    margin: 0;
    line-height: 1.6;
}

/* Processing message */
.eupaymentz-processing {
    text-align: center;
    padding: 20px;
}

.eupaymentz-processing .spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2271b1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}