/* InfyStore Validation Styles */
/* Tailwind-compatible validation styling */

/* Error state styling for input fields */
.validation-error {
    @apply border-red-500 ring-2 ring-red-200;
}

.validation-error:focus {
    @apply border-red-500 ring-2 ring-red-300;
}

/* Valid state styling */
.validation-valid {
    @apply border-green-500 ring-1 ring-green-200;
}

.validation-valid:focus {
    @apply border-green-500 ring-2 ring-green-300;
}

/* Error message animations */
.validation-error-message {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form validation summary styling */
.validation-summary-errors {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4;
}

.validation-summary-errors ul {
    @apply list-disc list-inside space-y-1;
}

.validation-summary-errors li {
    @apply text-sm;
}

/* Field-level validation styling */
.field-validation-error {
    @apply text-red-500 text-sm mt-1 block;
}

.field-validation-valid {
    @apply text-green-500 text-sm mt-1 block;
}

/* Loading state for async validation */
.validation-loading {
    @apply opacity-50 pointer-events-none;
}

.validation-loading::after {
    content: '';
    @apply absolute inset-0 bg-gray-100 bg-opacity-50 flex items-center justify-center;
}

/* Accessibility improvements */
.validation-error:focus {
    @apply outline-none;
}

.validation-error[aria-invalid="true"] {
    @apply border-red-500;
}

/* Custom validation icons */
.validation-error-icon {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-red-500;
}

.validation-valid-icon {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-green-500;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .validation-error-message {
        @apply text-xs;
    }
    
    .validation-summary-errors {
        @apply text-xs px-3 py-2;
    }
}