/* Flatpickr Custom Styling */
.flatpickr-calendar {
    border-radius: 0; /* Eckiges Layout wie gewünscht */
    border: 1px solid #d4a574;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flatpickr-months {
    background: #f8f6f3;
    border-bottom: 1px solid #d4a574;
}

.flatpickr-month {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500; /* Medium weight for better readability */
    font-size: 14px;
}

.flatpickr-current-month {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    pointer-events: none; /* Keep dropdowns disabled, but allow navigation arrows */
    cursor: default;
    font-family: Arial, Helvetica, sans-serif;
}

/* Enable navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    pointer-events: auto !important; /* Enable month navigation */
    display: block !important; /* Ensure arrows are visible */
    cursor: pointer !important; /* Show clickable cursor */
}

/* Style navigation arrows consistently */
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #b8956a !important; /* Match theme colors */
}

.flatpickr-current-month .cur-year {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
}

.flatpickr-weekdays {
    background: #f8f6f3;
}

.flatpickr-weekday {
    color: #666;
    font-weight: 600;
}

.flatpickr-day {
    color: #333;
    border-radius: 0 !important; /* Eckige Tage für Konsistenz */
}

.flatpickr-day:hover {
    background: #f0ead6;
    border-color: #d4a574;
    border-radius: 0 !important; /* Eckiger Hover-Effekt */
}

.flatpickr-day.selected {
    background: #b8956a !important; /* Button-Farbe für Konsistenz */
    border-color: #b8956a !important;
    color: white !important;
    border-radius: 0 !important; /* Eckige Auswahl statt Kreis */
}

.flatpickr-day.selected:hover {
    background: #a08555 !important; /* Dunklere Variante beim Hover */
    border-color: #a08555 !important;
    color: white !important;
    border-radius: 0 !important; /* Eckiger Selected-Hover */
}

.flatpickr-day.today {
    border-color: #b8956a !important; /* Button-Farbe für Today-Markierung */
    color: #b8956a !important;
    background: transparent !important;
    border-radius: 0 !important; /* Eckige Today-Markierung */
}

.flatpickr-day.inRange {
    background: #f0ead6 !important; /* Helle Variante für Range */
    border-radius: 0 !important; /* Eckiger Range-Bereich */
}

.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #b8956a !important; /* Button-Farbe für Range-Enden */
    color: white !important;
    border-radius: 0 !important; /* Eckige Range-Enden */
}

.flatpickr-day.disabled {
    color: #ccc;
}

/* Price Color Coding */
.pf-inline-calendar .flatpickr-day.pf-price-cheap {
    background-color: #d4edda !important; /* Light green */
    border-color: #28a745 !important;
}

.pf-inline-calendar .flatpickr-day.pf-price-cheap:hover {
    background-color: #c3e6cb !important; /* Slightly darker green on hover */
}

.pf-inline-calendar .flatpickr-day.pf-price-medium {
    background-color: #fff3cd !important; /* Light yellow */
    border-color: #ffc107 !important;
}

.pf-inline-calendar .flatpickr-day.pf-price-medium:hover {
    background-color: #ffeaa7 !important; /* Slightly darker yellow on hover */
}

.pf-inline-calendar .flatpickr-day.pf-price-expensive {
    background-color: #f8d7da !important; /* Light red */
    border-color: #dc3545 !important;
}

.pf-inline-calendar .flatpickr-day.pf-price-expensive:hover {
    background-color: #f5c6cb !important; /* Slightly darker red on hover */
}

/* Price Labels - Responsive Absolute Positioning */
.flatpickr-day {
    position: relative !important; /* Enable absolute positioning for price labels */
}

.pf-day-price {
    position: absolute;
    bottom: 2px; /* Always 2px from bottom edge */
    left: 50%;
    transform: translateX(-50%); /* Perfect horizontal centering */
    font-size: 9px;
    font-weight: 500;
    color: #666;
    line-height: 1; /* Reset line-height for absolute positioning */
    font-family: Arial, Helvetica, sans-serif;
    z-index: 10; /* Ensure price appears above background */
    pointer-events: none; /* Don't interfere with day clicking */
}

/* Ensure price colors work with selected states */
.pf-inline-calendar .flatpickr-day.selected.pf-price-cheap,
.pf-inline-calendar .flatpickr-day.selected.pf-price-medium,
.pf-inline-calendar .flatpickr-day.selected.pf-price-expensive {
    background: #b8956a !important; /* Keep selection color priority */
    border-color: #b8956a !important;
    color: white !important;
}

.pf-inline-calendar .flatpickr-day.selected .pf-day-price {
    color: white !important; /* White price text on selected days */
}

/* Range styling with price colors */
.pf-inline-calendar .flatpickr-day.inRange.pf-price-cheap {
    background-color: #e8f5e8 !important; /* Very light green for range */
}

.pf-inline-calendar .flatpickr-day.inRange.pf-price-medium {
    background-color: #fffbf0 !important; /* Very light yellow for range */
}

.pf-inline-calendar .flatpickr-day.inRange.pf-price-expensive {
    background-color: #fdf2f2 !important; /* Very light red for range */
}

/* Direct Override for Flatpickr Inline Calendar */
.flatpickr-calendar.inline {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important; /* Let Flatpickr determine natural width */
    max-width: none !important; /* Remove width constraints */
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid #d4a574 !important;
}

/* Mobile-specific calendar scaling ONLY for [pf_datepicker] widget */
@media (max-width: 768px) {
    /* Target only the small datepicker widget - leave booking form calendar at full size */
    .pf-datepick-container .flatpickr-calendar.inline {
        margin: 0 auto !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.85) !important;
        transform-origin: center top !important;
        width: fit-content !important;
    }
    
    /* Large booking form calendar stays at original size */
    .pf-booking-container .flatpickr-calendar.inline {
        margin: 0 auto !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: fit-content !important;
    }
    
    /* Scaled styling ONLY for datepicker widget */
    .pf-datepick-container .flatpickr-months {
        position: relative !important;
        z-index: 10 !important;
        padding: 0.4rem 0 !important;
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 45px !important;
    }
    
    .pf-datepick-container .flatpickr-current-month {
        text-align: center !important;
        width: 100% !important;
        padding: 0.2rem 0 !important;
        display: block !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    /* Center month/year text and adjust font size for datepicker */
    .pf-datepick-container .flatpickr-current-month .flatpickr-monthDropdown-months,
    .pf-datepick-container .flatpickr-current-month .cur-year {
        display: inline-block !important;
        text-align: center !important;
        margin: 0 !important;
        width: auto !important;
        font-size: 13px !important;
    }
    
    /* Re-enable navigation arrows for datepicker since calendar is scaled */
    .pf-datepick-container .flatpickr-prev-month,
    .pf-datepick-container .flatpickr-next-month {
        display: block !important;
        visibility: visible !important;
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
        font-size: 14px !important;
    }
    
    .pf-datepick-container .flatpickr-month {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Scale down weekday headers for datepicker */
    .pf-datepick-container .flatpickr-weekdays {
        font-size: 11px !important;
    }
    
    .pf-datepick-container .flatpickr-weekday {
        height: 35px !important;
        line-height: 35px !important;
    }
    
    /* Scale down calendar days for datepicker */
    .pf-datepick-container .flatpickr-day {
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
        font-size: 12px !important;
    }
    
    /* Adjust price labels for smaller datepicker calendar */
    .pf-datepick-container .pf-day-price {
        font-size: 8px !important;
        bottom: 1px !important;
    }
    
    /* BOOKING FORM: Keep original size and hide navigation arrows */
    .pf-booking-container .flatpickr-months {
        position: relative !important;
        z-index: 10 !important;
        padding: 0.5rem 0 !important;
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 50px !important;
    }
    
    .pf-booking-container .flatpickr-current-month {
        text-align: center !important;
        width: 100% !important;
        padding: 0.25rem 0 !important;
        display: block !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    .pf-booking-container .flatpickr-current-month .flatpickr-monthDropdown-months,
    .pf-booking-container .flatpickr-current-month .cur-year {
        display: inline-block !important;
        text-align: center !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    /* Hide navigation arrows for booking form (uses external navigation) */
    .pf-booking-container .flatpickr-prev-month,
    .pf-booking-container .flatpickr-next-month {
        display: none !important;
    }
    
    .pf-booking-container .flatpickr-month {
        display: block !important;
        visibility: visible !important;
    }
}

/* Extra small screens - more aggressive scaling ONLY for datepicker */
@media (max-width: 480px) {
    .pf-datepick-container .flatpickr-calendar.inline {
        transform: translateX(-50%) scale(0.75) !important;
    }
    
    /* Further scale down navigation arrows for very small screens - datepicker only */
    .pf-datepick-container .flatpickr-prev-month,
    .pf-datepick-container .flatpickr-next-month {
        width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
    }
    
    /* Smaller calendar elements - datepicker only */
    .pf-datepick-container .flatpickr-day {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 11px !important;
    }
    
    .pf-datepick-container .flatpickr-weekday {
        height: 32px !important;
        line-height: 32px !important;
    }
    
    /* Even smaller price labels - datepicker only */
    .pf-datepick-container .pf-day-price {
        font-size: 7px !important;
    }
}

/* Landscape phones - moderate scaling ONLY for datepicker */
@media (max-width: 640px) and (orientation: landscape) {
    .pf-datepick-container .flatpickr-calendar.inline {
        transform: translateX(-50%) scale(0.9) !important;
    }
}