/**
 * WooCommerce Pincode Validator Styles
 * Version: 1.9
 * Author: Prateek Singh
 * Compatible with: Modal Checkout, CheckoutWC, Standard WooCommerce
 */

/* Loading Spinner */
.pincode-loader {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: pincode-spin 0.8s linear infinite;
    z-index: 10;
}

@keyframes pincode-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Inline Field Indicator */
.pincode-field-indicator {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #28a745;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    animation: indicator-slide-in 0.3s ease;
    pointer-events: none;
}

/* For fields with icons (Modal Checkout) */
.buy-now-form-group.has-icon .pincode-field-indicator,
.buy-now-form-group.has-icon .pincode-loader {
    right: 45px;
}

/* Hide indicator on select dropdown (state field) to prevent overlap with dropdown arrow */
.buy-now-form-group.no-label .pincode-field-indicator {
    display: none !important;
}

/* For CheckoutWC and standard checkout */
.form-row .pincode-field-indicator,
.cfw-input-wrap .pincode-field-indicator {
    right: 15px;
}

/* Move indicator left for select fields to avoid dropdown arrow collision */
.form-row select ~ .pincode-field-indicator,
.cfw-input-wrap select ~ .pincode-field-indicator {
    right: 45px;
}

@keyframes indicator-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Validating State - applies to all wrapper types */
.buy-now-form-group.pincode-validating,
.form-row.pincode-validating,
.cfw-input-wrap.pincode-validating {
    position: relative;
}

.buy-now-form-group.pincode-validating input,
.form-row.pincode-validating input,
.cfw-input-wrap.pincode-validating input {
    padding-right: 45px;
}

/* Valid State - applies to all wrapper types */
.buy-now-form-group.pincode-valid input,
.form-row.pincode-valid input,
.cfw-input-wrap.pincode-valid input {
    border-color: #28a745 !important;
}

.buy-now-form-group.pincode-valid label,
.form-row.pincode-valid label,
.cfw-input-wrap.pincode-valid label {
    color: #28a745 !important;
}

/* Invalid State - applies to all wrapper types */
.buy-now-form-group.pincode-invalid input,
.form-row.pincode-invalid input,
.cfw-input-wrap.pincode-invalid input {
    border-color: #dc3545 !important;
}

.buy-now-form-group.pincode-invalid label,
.form-row.pincode-invalid label,
.cfw-input-wrap.pincode-invalid label {
    color: #dc3545 !important;
}

/* Auto-filled Fields Highlight */
.pincode-auto-filled {
    background-color: #f0f8ff !important;
    transition: background-color 0.3s ease;
}

/* Notification - Centered (only for errors now) */
.pincode-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 9999999;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 15px;
    max-width: 90%;
    text-align: center;
    font-weight: 500;
}

.pincode-notification.show {
    opacity: 1;
}

.pincode-notification-success {
    border-left: 4px solid #28a745;
    color: #155724;
}

.pincode-notification-error {
    border-left: 4px solid #dc3545;
    color: #721c24;
}

.pincode-notification-info {
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pincode-notification {
        max-width: 85%;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .pincode-loader {
        right: 10px;
    }
    
    .pincode-field-indicator {
        right: 10px;
        font-size: 10px;
        padding: 2px 8px;
    }
    
    .buy-now-form-group.has-icon .pincode-field-indicator {
        right: 40px;
    }
}

/* Integration with Modal Checkout */
.buy-now-modal .buy-now-form-group.has-icon .pincode-loader {
    right: 45px; /* Adjust for icon */
}

/* Ensure proper z-index layering */
.buy-now-modal {
    z-index: 999998;
}

.pincode-notification {
    z-index: 9999999;
}

/* Smooth transitions for auto-filled fields */
#billing_city.pincode-auto-filled,
#billing_state.pincode-auto-filled {
    animation: highlight-autofill 1.5s ease;
}

@keyframes highlight-autofill {
    0% {
        background-color: #fff;
    }
    50% {
        background-color: #d4edda;
    }
    100% {
        background-color: #f0f8ff;
    }
}

/* Loading text animation - applies to all wrapper types */
.buy-now-form-group.pincode-validating label::after,
.form-row.pincode-validating label::after,
.cfw-input-wrap.pincode-validating label::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Success checkmark animation - applies to all wrapper types */
.buy-now-form-group.pincode-valid::after,
.form-row.pincode-valid::after,
.cfw-input-wrap.pincode-valid::after {
    content: '✓';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
    font-size: 20px;
    font-weight: bold;
    animation: checkmark-pop 0.3s ease;
}

@keyframes checkmark-pop {
    0% {
        transform: translateY(-50%) scale(0);
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

/* Adjust checkmark position for Modal Checkout with icons */
.buy-now-form-group.has-icon.pincode-valid::after {
    right: 45px;
}

/* Prevent layout shift during loading - applies to all wrapper types */
.buy-now-form-group,
.form-row,
.cfw-input-wrap {
    position: relative;
}

/* Focus state enhancement - applies to all wrapper types */
.buy-now-form-group input:focus.pincode-auto-filled,
.form-row input:focus.pincode-auto-filled,
.cfw-input-wrap input:focus.pincode-auto-filled {
    background-color: #e7f3ff !important;
}

/* Disabled state for auto-filled fields (optional) */
.pincode-auto-filled[readonly] {
    background-color: #e9ecef !important;
    cursor: not-allowed;
}