/**
 * Mobile Calendar Booking Engine - Enhanced Styles
 * Professional dialog datepicker and search bar styling
 */

/* Search Bar Container Hover Effects */
.mcbe-searchbar-container .mcbe-date-input:hover {
    transform: translateY(-1px);
}

.mcbe-searchbar-container .mcbe-date-input:active {
    transform: translateY(0);
}

/* Dialog Datepicker Styles */
.flatpickr-calendar {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    border: none !important;
}

.flatpickr-calendar.open {
    z-index: 99999 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--mcbe-primary-color, #4f46e5) !important;
    border-color: var(--mcbe-primary-color, #4f46e5) !important;
}

.flatpickr-day:hover {
    background: var(--mcbe-primary-color, #4f46e5) !important;
    opacity: 0.8;
    border-color: var(--mcbe-primary-color, #4f46e5) !important;
}

.flatpickr-months .flatpickr-month {
    /* No background or color - transparent */
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--mcbe-primary-color, #4f46e5) !important;
}

.flatpickr-weekday {
    color: var(--mcbe-primary-color, #4f46e5) !important;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 0 !important;
    margin: 10px !important;
}

/* Button Animations */
.mcbe-search-button,
.mc-booking-engine-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mcbe-search-button:active,
.mc-booking-engine-button:active {
    transform: translateY(0) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mcbe-searchbar-container {
        flex-direction: column !important;
    }
    
    .mcbe-date-field {
        min-width: 100% !important;
    }
    
    .mcbe-search-button {
        min-width: 100% !important;
    }
}

/* Loading State */
.mcbe-search-button.loading,
.mc-booking-engine-button.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.mcbe-search-button.loading::after,
.mc-booking-engine-button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: mcbe-spinner 0.6s linear infinite;
}

@keyframes mcbe-spinner {
    to { transform: rotate(360deg); }
}

/* Focus States for Accessibility */
.mcbe-date-input:focus-within {
    outline: 2px solid var(--mcbe-primary-color, #4f46e5);
    outline-offset: 2px;
}

.mcbe-search-button:focus,
.mc-booking-engine-button:focus {
    outline: 2px solid var(--mcbe-primary-color, #4f46e5);
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
.mcbe-date-input,
.mcbe-search-button,
.mc-booking-engine-button {
    will-change: transform;
}

/* Base styles for Elementor booking button - allow full customization */
.mcbe-booking-button.mc-booking-engine {
    /* Reset default button styles */
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    
    /* Default styles (can be overridden by Elementor) */
    background-color: #2271b1;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
}

.mcbe-booking-button.mc-booking-engine:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.mcbe-booking-button.mc-booking-engine:active {
    transform: translateY(0);
}