/**
 * Flatpickr Airbnb-Style Theme — v3
 * Brand green accent: #059669 (--color-primary)
 *
 * RULE: ONLY override visual properties (colors, backgrounds, shadows, fonts,
 *       border-radius, opacity). NEVER touch Flatpickr layout properties
 *       (width, height, max-width, flex-basis, display, position, line-height).
 */

/* ============================================
   1. Desktop Flatpickr — Container
   ============================================ */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* ============================================
   2. Month header — smaller font
   ============================================ */
.flatpickr-current-month {
    font-size: 110% !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month select,
.flatpickr-current-month input.cur-year {
    font-size: 100% !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* ============================================
   3. Navigation arrows — aligned, compact hover circle
   ============================================ */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 5px !important;
    border-radius: 50% !important;
    transition: background 0.2s ease !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #f3f4f6 !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #374151 !important;
}

/* ============================================
   4. Separator line between month header and weekday row
   ============================================ */
.flatpickr-weekdays {
    border-top: 1px solid #e5e7eb !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
}

/* ============================================
   5. Weekday headers — bolder
   ============================================ */
.flatpickr-weekday {
    font-size: 90% !important;
    font-weight: 700 !important;
    color: #4b5563 !important;
}

/* ============================================
   5. Day container
   ============================================ */
.flatpickr-days {
    border: none !important;
}

/* ============================================
   6. Day cells — colors & border-radius ONLY
      DO NOT change: width, height, max-width,
      flex-basis, display, position, line-height
   ============================================ */
.flatpickr-day {
    color: #1f2937 !important;
    border: 1px solid transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.flatpickr-day:hover {
    background: #f0fdf4 !important;
    border-color: #f0fdf4 !important;
}

/* Today */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    border-color: #059669 !important;
    background: transparent !important;
    color: #059669 !important;
    font-weight: 600 !important;
}

.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange):hover {
    background: #f0fdf4 !important;
}

/* Selected */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #047857 !important;
    border-color: #047857 !important;
}

/* Range in-between */
.flatpickr-day.inRange {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: transparent !important;
    -webkit-box-shadow: -5px 0 0 rgba(5,150,105,0.1), 5px 0 0 rgba(5,150,105,0.1) !important;
    box-shadow: -5px 0 0 rgba(5,150,105,0.1), 5px 0 0 rgba(5,150,105,0.1) !important;
    color: #059669 !important;
}

.flatpickr-day.inRange:hover {
    background: rgba(5, 150, 105, 0.18) !important;
}

/* Disabled / past */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #d1d5db !important;
    opacity: 0.4 !important;
    text-decoration: line-through !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

/* Prev/next month ghost days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d5db !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: transparent !important;
    border-color: transparent !important;
}

/* ============================================
   7. Hotel Inline Calendar — price sub-labels
   ============================================ */
.flatpickr-calendar.inline {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
}

.flatpickr-calendar .pcal-day-sub {
    font-size: 11px !important;
    color: #6b7280 !important;
}

.flatpickr-day.pcal-day-available .pcal-day-sub {
    color: #059669 !important;
}

.flatpickr-day.pcal-day-blockout {
    color: #d1d5db !important;
    text-decoration: line-through !important;
    opacity: 0.5 !important;
}

.flatpickr-day.pcal-day-blockout .pcal-day-sub {
    color: #d1d5db !important;
}

.flatpickr-day.pcal-day-special .pcal-day-sub {
    color: #f59e0b !important;
    font-weight: 600 !important;
}

/* Hotel inline selected */
.flatpickr-calendar.inline .flatpickr-day.selected,
.flatpickr-calendar.inline .flatpickr-day.startRange,
.flatpickr-calendar.inline .flatpickr-day.endRange {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}

.flatpickr-calendar.inline .flatpickr-day.selected .pcal-day-sub,
.flatpickr-calendar.inline .flatpickr-day.startRange .pcal-day-sub,
.flatpickr-calendar.inline .flatpickr-day.endRange .pcal-day-sub {
    color: rgba(255, 255, 255, 0.85) !important;
}

.flatpickr-calendar.inline .flatpickr-day.inRange {
    background: rgba(5, 150, 105, 0.1) !important;
}

.flatpickr-calendar.inline .flatpickr-day.inRange .pcal-day-sub {
    color: #059669 !important;
}

/* ============================================
   8. Legacy daterangepicker Overrides
   ============================================ */
.daterangepicker {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.daterangepicker::before,
.daterangepicker::after {
    display: none !important;
}

.daterangepicker .month,
.daterangepicker th.month {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.daterangepicker th.dow {
    font-weight: 600 !important;
    color: #6b7280 !important;
}

.daterangepicker td {
    color: #1f2937 !important;
    transition: background 0.15s ease !important;
}

.daterangepicker td:hover {
    background: #f0fdf4 !important;
}

.daterangepicker td.today:not(.active) {
    background: transparent !important;
    color: #059669 !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px #059669 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: #059669 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.daterangepicker td.in-range {
    background: rgba(5, 150, 105, 0.1) !important;
    color: #059669 !important;
}

.daterangepicker td.off,
.daterangepicker td.off:hover,
.daterangepicker td.disabled,
.daterangepicker td.disabled:hover {
    color: #d1d5db !important;
    opacity: 0.5 !important;
    background: transparent !important;
}

.daterangepicker .prev:hover,
.daterangepicker .next:hover {
    background: #f3f4f6 !important;
}

.daterangepicker .drp-buttons .btn-primary,
.daterangepicker .drp-buttons .applyBtn {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}

.daterangepicker .drp-buttons .btn-primary:hover,
.daterangepicker .drp-buttons .applyBtn:hover {
    background: #047857 !important;
    border-color: #047857 !important;
}

.daterangepicker .ranges li.active {
    background: #059669 !important;
    color: #fff !important;
}