/**
 * Proposito Bank Checkout Styles
 */

/* Payment Form Styles */
#wc-proposito_bank-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

#wc-proposito_bank-form .form-row {
    margin-bottom: 15px;
}

#wc-proposito_bank-form .form-row label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #333;
}

#wc-proposito_bank-form .form-row .required {
    color: #e74c3c;
}

/* Card Input Fields */
#proposito-card-number,
#proposito-card-holder,
#proposito-card-expiry,
#proposito-card-cvc {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    transition: border-color 0.3s ease !important;
    background: #fff !important;
}

#proposito-card-number:focus,
#proposito-card-holder:focus,
#proposito-card-expiry:focus,
#proposito-card-cvc:focus {
    outline: none !important;
    border-color: #007cba !important;
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.1) !important;
}

/* Field Validation States */
.input-text.valid {
    border-color: #27ae60 !important;
}

.input-text.error {
    border-color: #e74c3c !important;
}

.woocommerce-invalid .input-text {
    border-color: #e74c3c !important;
}

/* Card Type Icons */
.card-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.form-row {
    position: relative;
}

.card-icon.card-visa {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzAwNTFBNSIvPgo8cGF0aCBkPSJNMTYuNzUgN0gxNC4yNUwxMi41IDE3SDE1TDE2Ljc1IDdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
}

.card-icon.card-mastercard {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iI0VCMDAxQiIvPgo8Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSI2IiBmaWxsPSIjRkY1RjAwIi8+CjxjaXJjbGUgY3g9IjI1IiBjeT0iMTIiIHI9IjYiIGZpbGw9IiNGRkY1RjAiLz4KPC9zdmc+Cg==');
}

.card-icon.card-amex {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzAwNkZDRiIvPgo8cGF0aCBkPSJNMTAgOEgxNUwxNyAxMkwxNSAxNkgxMEwxMiAxMkwxMCA4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
}

.card-icon.card-elo {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA0MCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iI0ZGRiIvPgo8cGF0aCBkPSJNMTAgMTBIMzBWMTRIMTBWMTBaIiBmaWxsPSIjMDA5NjM5Ii8+Cjx0ZXh0IHg9IjIwIiB5PSIxNiIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjgiIGZpbGw9IiMwMDk2MzkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVMTzwvdGV4dD4KPC9zdmc+Cg==');
}

/* Installments */
#proposito-installments {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    background: #fff !important;
}

.installment-info {
    margin-top: 5px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007cba;
}

.installment-info small {
    color: #666;
    font-size: 13px;
}

/* Test Mode Notice */
.proposito-test-mode {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Loading States */
.processing #wc-proposito_bank-form {
    opacity: 0.6;
    pointer-events: none;
}

.wc-credit-card-form .form-row.processing {
    position: relative;
}

.wc-credit-card-form .form-row.processing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Error Messages */
.woocommerce-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.woocommerce-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-error li {
    margin: 0;
    padding: 0;
}

/* Success Messages */
.woocommerce-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
    #wc-proposito_bank-form .form-row-first,
    #wc-proposito_bank-form .form-row-last {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    #proposito-card-number,
    #proposito-card-holder,
    #proposito-card-expiry,
    #proposito-card-cvc {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Admin Styles */
.proposito-admin-notice {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-left-width: 4px;
    border-left-color: #00a32a;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    margin: 5px 0 15px;
    padding: 1px 12px;
}

.proposito-admin-notice.notice-warning {
    border-left-color: #dba617;
}

.proposito-admin-notice.notice-error {
    border-left-color: #d63638;
}

/* Form Field Groups */
.wc-credit-card-form .form-row-wide {
    width: 100% !important;
}

.wc-credit-card-form .form-row-first {
    width: 48% !important;
    margin-right: 4% !important;
}

.wc-credit-card-form .form-row-last {
    width: 48% !important;
    margin-right: 0 !important;
}