/* Custom Date-Time Picker Styles */

/* Main container styles */
.date-time-picker {
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.date-time-picker:hover {
    border-color: #93c5fd;
}

/* Focus styles for selectors */
.date-time-picker select:focus {
    outline: none;
}

/* Time option styles */
.time-option {
    transition: all 0.2s ease;
    height: 3.5rem;
    display: flex;
    align-items: center;
    margin: 0;
}

.time-option:hover {
    background-color: #f0f7ff;
    border-color: #93c5fd;
}

.time-option input[type="radio"] {
    cursor: pointer;
}

/* Selected state for time options */
.time-option.bg-blue-50 {
    box-shadow: 0 0 0 1px #60a5fa;
    margin: 0;
}

/* Error state */
.date-time-picker.border-red-500 {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.date-time-picker.border-red-500 select,
.date-time-picker.border-red-500 .time-option {
    border-color: #ef4444;
}

/* Animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.date-time-picker.border-red-500 {
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .date-time-picker {
        margin-bottom: 1.5rem;
    }
    
    .date-time-picker select,
    .date-time-picker .time-option {
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Make time options stack on very small screens */
    @media (max-width: 375px) {
        .time-selector .grid-cols-2 {
            grid-template-columns: 1fr;
        }
    }
    
    /* Add slightly more padding for better touch targets */
    .time-option {
        padding: 0.75rem;
    }
    
    /* Give more visual feedback when touched */
    .time-option:active {
        background-color: #e0f2fe;
        transform: scale(0.98);
    }
}