/**
 * DigiPay Payment Gateway Styles
 */

/* WooCommerce Blocks styling for DigiPay */
.digipay-payment-form {
    padding: 20px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    border: 1px solid #e0e0e0 !important;
}

.digipay-field-group {
    margin-bottom: 20px !important;
}

.digipay-field-row {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.digipay-field-half {
    flex: 1 !important;
}

.digipay-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 14px !important;
}

.digipay-required {
    color: #e74c3c !important;
    margin-left: 3px !important;
}

.digipay-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

.digipay-input:focus {
    outline: none !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1) !important;
}

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

.digipay-error {
    color: #e74c3c !important;
    font-size: 13px !important;
    margin-top: 5px !important;
    display: block !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .digipay-field-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .digipay-field-half {
        margin-bottom: 20px !important;
    }
}

/* Form row styling */
.wc-block-digipay-fields .form-row {
    margin-bottom: 1rem;
}

.wc-block-digipay-fields .form-row:last-child {
    margin-bottom: 0;
}

/* Label styling */
.wc-block-digipay-fields label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.wc-block-digipay-fields .required {
    color: #e74c3c;
    font-weight: bold;
}

/* Input field styling */
.wc-block-digipay-fields input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.wc-block-digipay-fields input[type="text"]:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

/* Flex layout for expiry and CVC */
.wc-block-digipay-fields .form-row.expiry-cvc-row {
    display: flex;
    gap: 1rem;
}

.wc-block-digipay-fields .form-row.expiry-cvc-row > div {
    flex: 1;
}

/* Classic checkout compatibility */
#payment .payment_methods .payment_box .wc-credit-card-form {
    background: transparent;
    border: none;
    padding: 0;
}

#payment .payment_methods .payment_box .wc-credit-card-form .form-row {
    margin-bottom: 1rem;
}

#payment .payment_methods .payment_box .wc-credit-card-form .form-row-first,
#payment .payment_methods .payment_box .wc-credit-card-form .form-row-last {
    width: 48%;
    float: left;
}

#payment .payment_methods .payment_box .wc-credit-card-form .form-row-last {
    float: right;
}

#payment .payment_methods .payment_box .wc-credit-card-form .clear {
    clear: both;
}

#payment .payment_methods .payment_box .wc-credit-card-form label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

#payment .payment_methods .payment_box .wc-credit-card-form input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

#payment .payment_methods .payment_box .wc-credit-card-form input[type="text"]:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
    .wc-block-digipay-fields .form-row.expiry-cvc-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #payment .payment_methods .payment_box .wc-credit-card-form .form-row-first,
    #payment .payment_methods .payment_box .wc-credit-card-form .form-row-last {
        width: 100%;
        float: none;
        margin-bottom: 1rem;
    }
}

/* Error styling */
.wc-block-digipay-fields .woocommerce-error,
.wc-block-digipay-fields .woocommerce-message {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 4px;
}

.wc-block-digipay-fields .woocommerce-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.wc-block-digipay-fields .woocommerce-message {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

/* Loading state */
.digipay-processing {
    opacity: 0.6;
    pointer-events: none;
}

.digipay-processing .form-row input {
    background-color: #f5f5f5;
}

/* Card type detection */
.digipay-card-type {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.digipay-card-type.visa {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCA0MCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2NyAyNS4wMDAxSDEzLjMzM1Y4LjMzMzM0SDE2LjY2N1YyNS4wMDAxWiIgZmlsbD0iIzAwMDA5OSIvPgo8cGF0aCBkPSJNMTYuNjY3IDI1LjAwMDFIMTMuMzMzVjguMzMzMzRIMTYuNjY3VjI1LjAwMDFaIiBmaWxsPSIjMDAwMDk5Ii8+CjxwYXRoIGQ9Ik0yNi42NjcgMTYuNjY2N0gyMy4zMzNWMTQuMTY2N0gyNi42NjdWMTYuNjY2N1oiIGZpbGw9IiMwMDAwOTkiLz4KPHBhdGggZD0iTTIzLjMzMyAyNS4wMDAxSDI2LjY2N1Y4LjMzMzM0SDIzLjMzM1YyNS4wMDAxWiIgZmlsbD0iIzAwMDA5OSIvPgo8cGF0aCBkPSJNMzYuNjY3IDI1LjAwMDFIMzMuMzMzVjguMzMzMzRIMzYuNjY3VjI1LjAwMDFaIiBmaWxsPSIjMDAwMDk5Ii8+CjxwYXRoIGQ9Ik0zMy4zMzMgMjUuMDAwMUgzNi42NjdWOC4zMzMzNEgzMy4zMzNWMjUuMDAwMVoiIGZpbGw9IiMwMDAwOTkiLz4KPC9zdmc+');
}

.digipay-card-type.mastercard {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCA0MCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTYuNjY3IiBjeT0iMTIuNSIgcj0iOC4zMzMzIiBmaWxsPSIjRkY5ODAwIi8+CjxjaXJjbGUgY3g9IjIzLjMzMyIgY3k9IjEyLjUiIHI9IjguMzMzMyIgZmlsbD0iI0YwMEQwMCIvPgo8cGF0aCBkPSJNMjAgMTIuNUMyMCAxNi42NDIxIDE2LjY0MjEgMjAgMTIuNSAyMEM4LjM1NzkxIDIwIDUgMTYuNjQyMSA1IDEyLjVDNSA4LjM1NzkxIDguMzU3OTEgNSAxMi41IDVDMTYuNjQyMSA1IDIwIDguMzU3OTEgMjAgMTIuNVoiIGZpbGw9IiMwMDAwOTkiLz4KPC9zdmc+');
}

.digipay-card-type.amex {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCA0MCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2NyAyNS4wMDAxSDEzLjMzM1Y4LjMzMzM0SDE2LjY2N1YyNS4wMDAxWiIgZmlsbD0iIzAwMDA5OSIvPgo8cGF0aCBkPSJNMjYuNjY3IDI1LjAwMDFIMjMuMzMzVjguMzMzMzRIMjYuNjY3VjI1LjAwMDFaIiBmaWxsPSIjMDAwMDk5Ii8+CjxwYXRoIGQ9Ik0zNi42NjcgMjUuMDAwMUgzMy4zMzNWOC4zMzMzNEgzNi42NjdWMjUuMDAwMVoiIGZpbGw9IiMwMDAwOTkiLz4KPC9zdmc+');
}

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

.digipay-success:before {
    content: "✓ ";
    font-weight: bold;
}

/* Security notice */
.digipay-security-notice {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

.digipay-security-notice:before {
    content: "🔒 ";
    margin-right: 5px;
}