/* Custom styles for Form.io components with Tailwind */
@layer components {
    /* Form.io customization */
    .formio-component {
        @apply mb-5;
    }
    
    .formio-component label {
        @apply font-semibold text-gray-700 mb-2 block;
    }
    
    .formio-component input,
    .formio-component select,
    .formio-component textarea {
        @apply rounded border border-gray-300 px-3 py-2 text-base w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    }
    
    .btn-wizard-nav-cancel {
        @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
    }
    
    .btn-wizard-nav-submit,
    .btn-primary {
        @apply bg-primary text-white px-8 py-3 rounded-full text-base cursor-pointer transition-all duration-300 hover:bg-indigo-600 hover:shadow-lg transform hover:-translate-y-0.5;
    }
    
    .formio-errors {
        @apply text-red-600 text-sm mt-1;
    }
    
    .wizard-page {
        @apply min-h-[400px];
    }
}