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

/* Custom styles */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.slide {
    @apply p-8 border border-gray-200 rounded-xl bg-white shadow-md transition-all duration-300 ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.slide:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.option {
    @apply flex items-start gap-4 p-6 mb-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all duration-200;
    min-height: 80px;
}

.option:hover {
    @apply bg-blue-50 border-blue-300;
    transform: translateY(-1px);
}

.option.selected {
    @apply bg-blue-100 border-blue-600;
}

.option-circle {
    @apply w-6 h-6 rounded-full border-2 border-gray-300 mt-1 flex-shrink-0;
    transition: all 0.2s ease;
}

.option.selected .option-circle {
    @apply border-blue-600 bg-blue-600;
}

button#prev-btn, button#next-btn, button#submit-btn {
    @apply px-5 py-3 font-medium rounded-xl transition-all hover:shadow-md;
}

button#prev-btn, button#next-btn {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
}

button#submit-btn {
    @apply bg-green-600 hover:bg-green-700 text-white;
}