/**
 * Pincode Auto-fill Styles
 */

/* Disabled select styling */
select.disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

select.disabled:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* Loading state for pincode input */
input.loading {
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

/* Success state for pincode input */
input.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Error state for pincode input */
input.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Pincode input specific styling */
input[name="pin_code"] {
    font-family: monospace;
    letter-spacing: 1px;
}

/* Auto-filled field indicators */
.auto-filled {
    position: relative;
}

.auto-filled::after {
    content: "✓ Auto-filled";
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 11px;
    color: #28a745;
    background-color: #d4edda;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* Notification styling */
.alert {
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auto-filled::after {
        font-size: 10px;
        top: -18px;
        padding: 1px 4px;
    }
}

/* Animation for loading state */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

input.loading {
    animation: pulse 1.5s infinite;
}

/* Focus states for better UX */
select:not(.disabled):focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

input[name="pin_code"]:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Hover effects for enabled selects */
select:not(.disabled):hover {
    border-color: #80bdff;
}

/* Disabled state hover */
select.disabled:hover {
    cursor: not-allowed;
    border-color: #ced4da;
}