@tailwind base;
@tailwind components;
@tailwind utilities;

.fullscreen-form-modal {
    @apply opacity-0 invisible transition-all duration-300 ease-in-out;
}

.fullscreen-form-modal.active {
    @apply opacity-100 visible;
}

@keyframes slideIn {
    from {
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.fullscreen-form-modal.active .fullscreen-form-container {
    animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fullscreen-form-content input[type="email"],
.fullscreen-form-content input[type="text"],
.fullscreen-form-content input[type="tel"],
.fullscreen-form-content textarea,
.fullscreen-form-content select {
    @apply w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-base transition-all duration-200 bg-white;
}

.fullscreen-form-content input[type="email"]:focus,
.fullscreen-form-content input[type="text"]:focus,
.fullscreen-form-content input[type="tel"]:focus,
.fullscreen-form-content textarea:focus,
.fullscreen-form-content select:focus {
    @apply outline-none border-blue-500 ring-4 ring-blue-100;
}

.fullscreen-form-content button[type="submit"],
.fullscreen-form-content input[type="submit"] {
    @apply w-full px-6 py-3.5 bg-blue-600 text-white rounded-lg text-base font-semibold cursor-pointer transition-all duration-300 shadow-md hover:bg-blue-700 hover:-translate-y-0.5 hover:shadow-xl;
}

.fullscreen-form-content label {
    @apply block mb-2 font-medium text-gray-700;
}

.fullscreen-form-content .sib-form__declaration {
    @apply mt-4 pt-4 border-t border-gray-200 text-xs text-gray-500 leading-relaxed;
}