/* Container & Layout Responsive Styling - Extracted from responsive.css */

/* Large Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
    .pf-datepick-container {
        max-width: 90%;
        margin: 1rem auto;
    }
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    .pf-datepick-container {
        max-width: 95%;
        margin: 0.75rem auto;
    }
    
    .pf-datepick-fields {
        flex-direction: column;
        gap: 2px;
    }
    
    /* Responsive Design */
    .pf-booking-container {
        margin: 1rem;
        padding: 0 4rem; /* Increased padding for navigation buttons */
    }
    
    /* Ensure calendar is properly centered within container */
    .pf-booking-calendar {
        text-align: center;
        overflow: hidden; /* Prevent navigation button overflow issues */
    }
    
    .pf-calendar-widget {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .pf-date-selection {
        flex-direction: column;
        gap: 0.75rem; /* Reduced gap for mobile */
        padding: 1.25rem; /* Slightly less padding */
    }
    
    .pf-booking-datepicker {
        min-width: 250px;
    }
    
    /* Mobile-optimized date/price display fields */
    .pf-selected-dates {
        margin: 1rem -4rem; /* Negative margin to use full width */
        padding: 1.25rem; /* Reduced padding for mobile */
        border-radius: 0; /* Remove border radius for full-width look */
    }
    
    .pf-live-price {
        margin: 1rem -4rem; /* Negative margin to use full width */
        padding: 0; /* Let child elements handle padding */
    }
    
    .pf-price-success,
    .pf-price-loading,
    .pf-price-error {
        margin: 0; /* Remove default margins */
        border-radius: 0; /* Full-width appearance */
        padding: 1.25rem; /* Consistent mobile padding */
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .pf-datepick-container {
        max-width: 100%;
        margin: 0.5rem;
    }
    
    .pf-booking-container {
        padding: 0 4.5rem; /* Increased padding to prevent navigation overflow */
    }
    
    /* Mobile calendar centering fix */
    .pf-booking-calendar {
        position: relative;
        overflow: visible; /* Allow navigation buttons to be visible */
    }
    
    .pf-calendar-widget {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    /* Ensure Flatpickr calendar is properly centered */
    .pf-inline-calendar {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .pf-inline-calendar .flatpickr-calendar {
        margin: 0 auto !important;
        position: relative !important;
    }
    
    /* Optimize date selection for small screens */
    .pf-date-selection {
        gap: 0.5rem; /* Even tighter spacing on mobile */
        padding: 1rem; /* Less padding */
    }
    
    .pf-booking-datepicker {
        min-width: 200px;
        font-size: 14px;
    }
}

/* Very Small Screens (max-width: 360px) */
@media (max-width: 360px) {
    /* Additional breakpoint for very small devices */
    .pf-booking-container {
        padding: 0 4.5rem; /* Consistent with mobile breakpoint */
    }
    
    /* Very small screens - date/price fields */
    .pf-selected-dates {
        margin: 1rem -4.5rem; /* Match container padding */
        padding: 1rem; /* Even smaller padding on very small screens */
    }
    
    .pf-live-price {
        margin: 1rem -4.5rem; /* Match container padding */
    }
}