/**
 * Flatpickr PCA - Consolidated Calendar Styles
 * 
 * Single source of truth for all Flatpickr styling.
 * All rules scoped under .pca-flatpickr wrapper class.
 * 
 * Layout: Flexbox
 * Mobile: Modal (centered with backdrop)
 * Shape: Circles for available/selected
 * 
 * @since 2026-02-03
 */

/* ==============================================
   DESIGN TOKENS
   ============================================== */
:root {
    /* Availability states */
    --fp-available-bg: #e8f5e9;
    --fp-available-text: #1b5e20;
    --fp-available-hover: #c8e6c9;
    --fp-available-border: #2e7d32;
    
    /* Selection */
    --fp-selected-bg: #2e7d32;
    --fp-selected-text: #fff;
    
    /* Today */
    --fp-today-border: #222;
    
    /* Disabled/Unavailable */
    --fp-disabled-text: #757575;
    --fp-disabled-strike: #d0d0d0;
    
    /* Calendar chrome */
    --fp-header-text: #222;
    --fp-weekday-text: #717171;
    --fp-day-text: #404848;
    --fp-day-hover-bg: #f5f5f5;
    --fp-border: #e0e0e0;
    --fp-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    --fp-bg: #fff;
}

/* ==============================================
   CALENDAR CONTAINER
   ============================================== */
.pca-flatpickr {
    background: var(--fp-bg);
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow: var(--fp-shadow);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 16px;
    z-index: 99999;
}

.pca-flatpickr.open {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* ==============================================
   MONTH HEADER
   ============================================== */
.pca-flatpickr .flatpickr-months {
    padding: 0 8px 12px 8px;
    position: relative;
}

.pca-flatpickr .flatpickr-current-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--fp-header-text);
}

.pca-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 16px;
    font-weight: 600;
    color: var(--fp-header-text);
    background: transparent;
}

.pca-flatpickr .flatpickr-current-month .numInputWrapper input {
    font-size: 16px;
    font-weight: 600;
    color: var(--fp-header-text);
}

/* ==============================================
   NAVIGATION ARROWS
   ============================================== */
.pca-flatpickr .flatpickr-prev-month,
.pca-flatpickr .flatpickr-next-month {
    color: var(--fp-header-text);
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    cursor: pointer;
    z-index: 10;
}

.pca-flatpickr .flatpickr-prev-month:hover,
.pca-flatpickr .flatpickr-next-month:hover {
    background-color: var(--fp-day-hover-bg);
}

.pca-flatpickr .flatpickr-prev-month svg,
.pca-flatpickr .flatpickr-next-month svg {
    fill: var(--fp-header-text);
    stroke: var(--fp-header-text);
}

/* ==============================================
   WEEKDAY HEADERS
   ============================================== */
.pca-flatpickr .flatpickr-weekday {
    font-size: 12px;
    font-weight: 500;
    color: var(--fp-weekday-text);
    text-transform: uppercase;
}

/* ==============================================
   DAY CONTAINER - FLEXBOX LAYOUT
   ============================================== */
.pca-flatpickr .flatpickr-days {
    width: 100%;
}

.pca-flatpickr .dayContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    min-width: 280px;
    max-width: 320px;
    margin: 0 auto;
}

/* ==============================================
   DAY CELLS - BASE STYLES
   ============================================== */
.pca-flatpickr .flatpickr-day {
    flex: 0 0 calc(100% / 7 - 2px);
    max-width: calc(100% / 7 - 2px);
    height: 38px;
    line-height: 38px;
    margin: 1px;
    color: var(--fp-day-text);
    font-weight: 400;
    font-size: 14px;
    border-radius: 50%;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
    box-sizing: border-box;
}

.pca-flatpickr .flatpickr-day:hover:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background-color: var(--fp-day-hover-bg);
}

/* ==============================================
   AVAILABLE DATES - GREEN CIRCLE
   ============================================== */
.pca-flatpickr .flatpickr-day.available-date:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background-color: var(--fp-available-bg);
    color: var(--fp-available-text);
    font-weight: 500;
}

.pca-flatpickr .flatpickr-day.available-date:not(.flatpickr-disabled):hover {
    background-color: var(--fp-available-hover);
    border-color: var(--fp-available-border);
}

/* ==============================================
   UNAVAILABLE/DISABLED DATES - STRIKETHROUGH
   ============================================== */
.pca-flatpickr .flatpickr-day.unavailable-date,
.pca-flatpickr .flatpickr-day.flatpickr-disabled {
    color: var(--fp-disabled-text);
    cursor: not-allowed;
    pointer-events: none;
    background-color: transparent;
}

.pca-flatpickr .flatpickr-day.unavailable-date::after,
.pca-flatpickr .flatpickr-day.flatpickr-disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 1.5px;
    background-color: var(--fp-disabled-strike);
    transform: translateY(-50%);
    pointer-events: none;
}

/* ==============================================
   SELECTED DATE - FOREST GREEN CIRCLE
   ============================================== */
.pca-flatpickr .flatpickr-day.selected,
.pca-flatpickr .flatpickr-day.selected.available-date,
.pca-flatpickr .flatpickr-day.selected:hover {
    background-color: var(--fp-selected-bg);
    color: var(--fp-selected-text);
    border-color: var(--fp-selected-bg);
    font-weight: 600;
}

/* ==============================================
   TODAY INDICATOR
   ============================================== */
.pca-flatpickr .flatpickr-day.today:not(.selected) {
    border: 1px solid var(--fp-today-border);
    font-weight: 600;
}

.pca-flatpickr .flatpickr-day.today.available-date:not(.selected) {
    border: 1px solid var(--fp-today-border);
}

/* ==============================================
   PREV/NEXT MONTH DAYS - HIDDEN BUT GRID-ALIGNED
   ============================================== */
.pca-flatpickr .flatpickr-day.prevMonthDay {
    color: transparent;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.pca-flatpickr .flatpickr-day.nextMonthDay {
    visibility: hidden;
    cursor: default;
    pointer-events: none;
}

/* No strikethrough on prev/next month days */
.pca-flatpickr .flatpickr-day.prevMonthDay::after,
.pca-flatpickr .flatpickr-day.nextMonthDay::after {
    display: none;
}

/* ==============================================
   ACCESSIBILITY - FOCUS STATES (WCAG 2.4.7)
   ============================================== */
.pca-flatpickr .flatpickr-day:focus-visible {
    outline: 2px solid var(--fp-today-border);
    outline-offset: 2px;
    z-index: 1;
}

.pca-flatpickr .flatpickr-prev-month:focus-visible,
.pca-flatpickr .flatpickr-next-month:focus-visible {
    outline: 2px solid var(--fp-today-border);
    outline-offset: 2px;
}

/* ==============================================
   ARIA LIVE REGION - SCREEN READER ONLY
   ============================================== */
.pca-flatpickr .pca-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==============================================
   LOADING STATE
   ============================================== */
.pca-flatpickr.loading {
    opacity: 0.6;
    position: relative;
}

.pca-flatpickr.loading::after {
    content: 'Loading availability...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    font-size: 14px;
    color: #333;
    pointer-events: none;
}

/* Navigation arrows stay clickable during loading */
.pca-flatpickr.loading .flatpickr-prev-month,
.pca-flatpickr.loading .flatpickr-next-month {
    pointer-events: auto;
    z-index: 1001;
}

/* ==============================================
   FORM DATE SEARCH LOADING STATE
   ============================================== */
.form-date-search.loading-availability {
    opacity: 0.6;
    position: relative;
}

.form-date-search.loading-availability .date-picker-button,
.form-date-search.loading-availability input[type="text"] {
    pointer-events: none;
}

.form-date-search.loading-availability::after {
    content: 'Loading availability...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    font-size: 14px;
    color: #333;
    pointer-events: none;
}

/* ==============================================
   DESKTOP - FLOATING OVERLAY
   ============================================== */
@media (min-width: 769px) {
    .pca-flatpickr {
        position: absolute;
        z-index: 99999;
    }
}

/* Mobile backdrop removed — booking widget covers full viewport */
.pca-flatpickr-backdrop {
    display: none;
}

/* ==============================================
   MOBILE - CENTERED MODAL WITH BACKDROP
   ============================================== */
@media (max-width: 768px) {
    .pca-flatpickr {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 99999 !important;
        max-width: 320px;
        width: calc(100% - 32px);
    }
    
    /* Touch-friendly day cells - Apple's 44px minimum */
    .pca-flatpickr .flatpickr-day {
        min-height: 44px;
        font-size: 15px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Touch-friendly navigation */
    .pca-flatpickr .flatpickr-prev-month,
    .pca-flatpickr .flatpickr-next-month {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Prevent double-tap zoom */
    .pca-flatpickr {
        touch-action: manipulation;
    }
}

/* ==============================================
   REDUCED MOTION - WCAG 2.3.3
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    .pca-flatpickr,
    .pca-flatpickr .flatpickr-day,
    .pca-flatpickr .flatpickr-prev-month,
    .pca-flatpickr .flatpickr-next-month {
        transition: none;
    }
}

/* ==============================================
   ANIMATION
   ============================================== */
@keyframes pca-flatpickr-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 768px) {
    .pca-flatpickr.open {
        animation: pca-flatpickr-fade-in 0.2s ease-out;
    }
}

/* ==============================================
   TOM SELECT STYLES (BOOKING WIDGET)
   Keep these for compatibility with booking widget
   ============================================== */
.booking-widget-instant {
    position: relative;
}

.booking-widget-instant .ts-dropdown {
    z-index: 1056;
    max-height: 320px;
    overflow-y: auto;
    border-radius: .375rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.booking-widget-instant .ts-dropdown.ts-up {
    top: auto;
    bottom: 100%;
    margin-bottom: .25rem;
}

.booking-widget-instant .collapse,
.booking-widget-instant .section-content {
    overflow: visible;
}

.booking-widget-instant .ts-control {
    min-height: 42px;
    padding: .375rem .75rem;
    border-radius: .375rem;
}

.booking-widget-instant #pickup-time + .ts-wrapper .ts-control {
    background-color: #fff;
    border: 1px solid #ced4da;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.booking-widget-instant #pickup-time + .ts-wrapper .ts-control:focus-within {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.booking-widget-instant .ts-dropdown .option {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f8f9fa;
}

.booking-widget-instant .ts-dropdown .option:last-child {
    border-bottom: none;
}

.booking-widget-instant .ts-dropdown .option:hover,
.booking-widget-instant .ts-dropdown .option.active {
    background-color: #f8f9fa;
    color: #212529;
}

.booking-widget-instant .toggle-chevron {
    transition: transform 0.3s ease-in-out;
}

/* ==============================================
   LEGACY COMPATIBILITY
   Support for existing selectors during migration
   ============================================== */

/* Support traveler-flatpickr class used in some places */
.traveler-flatpickr.has-availability {
    z-index: 9999;
}

/* Support #tour-date-calendar ID */
#tour-date-calendar {
    z-index: 99999;
    pointer-events: auto;
}

#tour-date-calendar .flatpickr-prev-month,
#tour-date-calendar .flatpickr-next-month {
    pointer-events: auto;
    z-index: 10001;
    cursor: pointer;
}

/* ==============================================
   AVAILABILITY LEGEND
   Color key below day grid
   ============================================== */
.flatpickr-availability-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 8px 6px;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
}

.flatpickr-availability-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #717171;
    white-space: nowrap;
}

.flatpickr-availability-legend .legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.flatpickr-availability-legend .legend-available .legend-swatch {
    background-color: #e8f5e9;
    border: 1.5px solid #2e7d32;
}

.flatpickr-availability-legend .legend-unavailable .legend-swatch {
    background-color: #f5f5f5;
    border: 1.5px solid #d0d0d0;
    position: relative;
}

.flatpickr-availability-legend .legend-unavailable .legend-swatch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    right: 1px;
    height: 1.5px;
    background: #d0d0d0;
    transform: translateY(-50%);
}

.flatpickr-availability-legend .legend-selected .legend-swatch {
    background-color: #2e7d32;
    border: 1.5px solid #2e7d32;
}