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

/* Custom Components */
@layer components {
    .date-picker-container {
        @apply bg-white rounded-lg shadow-lg p-4 border border-gray-200 transition-all duration-300;
    }

    .date-picker-header {
        @apply flex justify-between items-center mb-4;
    }

    .month-nav {
        @apply w-8 h-8 flex items-center justify-center rounded-full bg-primary-500 text-white 
               hover:bg-primary-600 transition-transform duration-200 hover:scale-110;
    }

    .calendar-grid {
        @apply grid grid-cols-7 gap-1;
    }

    .weekday-header {
        @apply text-sm font-medium text-gray-500 text-center py-2;
    }

    .calendar-day {
        @apply w-10 h-10 flex items-center justify-center rounded-full text-sm 
               transition-all duration-200 cursor-pointer hover:bg-primary-50;
    }

    .calendar-day.selected {
        @apply bg-primary-500 text-white hover:bg-primary-600;
    }

    .calendar-day.disabled {
        @apply opacity-50 cursor-not-allowed bg-gray-100 hover:bg-gray-100;
    }

    .calendar-day.today {
        @apply border-2 border-primary-500;
    }

    .time-slot-card {
        @apply relative overflow-hidden rounded-lg border-2 border-gray-200 p-4 transition-all duration-300
               hover:border-primary-500 hover:shadow-md hover:-translate-y-1;
    }

    .time-slot-card.selected {
        @apply border-primary-500 bg-primary-50;
    }

    .btn-check:checked + .time-slot-card {
        @apply border-primary-500 bg-primary-50;
        animation: selected 0.3s ease-in-out;
    }
}

/* Animations */
@keyframes selected {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="file"] {
    @apply transition-all duration-200;
}

input[type="text"]:focus,
input[type="email"]:focus {
    @apply ring-2 ring-primary-500 ring-opacity-50;
}

.checkbox-wrapper {
    @apply relative inline-flex items-center cursor-pointer;
}

.checkbox-input {
    @apply sr-only;
}

.checkbox-label {
    @apply ml-2 text-sm font-medium text-gray-700 select-none;
}