/* * date-range-picker.css * * Styles for the site's date-range picker calendar (both the legacy * DateRangePicker singleton and the per-instance HomeDateRangePicker). * * Loaded globally from the layout so the calendar looks right * on every page — not just pages that directly @include the blade * component. The styles used to live in * FrontendSearch::components.date-range-picker via @push('styles'); * pulling them out to a dedicated stylesheet sidesteps @push/@stack * timing issues when the component is rendered via @once from the * global header. * * The modal-positioning block that used to live in * FrontendShared::components.create-trip-plan-modal was also moved * here so it's guaranteed to ship wherever the modal appears. */ /* ===== Tab Styles ===== */ [data-daterange-tab] { position: relative; border-bottom: 2px solid transparent; } [data-daterange-tab].active, [data-daterange-tab].border-b-2 { color: #0F1520 !important; font-weight: 500; } /* Active tab with bottom border indicator */ [data-daterange-tab].daterange-tab-active { border-bottom: 2px solid #0F1520 !important; color: #0F1520 !important; font-weight: 500; } /* * Calendar Dropdown Container - Positioning rules * Scoped to [data-daterange-container] > [data-daterange-calendar] so these * rules only apply when the calendar is a direct child of its container. * When home-date-range-picker.js moves the calendar to , these rules * won't match, allowing the JS inline styles to control positioning instead. */ /* Mobile (<640px): Fixed position centered on viewport */ [data-daterange-container] > [data-daterange-calendar] { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 2rem) !important; max-width: 400px !important; max-height: 85vh !important; overflow-y: auto !important; z-index: 9999 !important; } /* * Container width is calculated from the calendar grid layout: * - Stacked months (< 1024px): 7 cells × 40px + 6 gaps × 4px + 32px padding = 336px * - Side-by-side months (≥ 1024px): 2 × (7 × 40px + 6 × 8px) + 24px gap + 32px padding ≈ 712px */ /* Small screens (640px+): Still fixed, width fits single stacked month grid */ @media screen and (min-width: 640px) { [data-daterange-container] > [data-daterange-calendar] { width: calc(100vw - 4rem) !important; max-width: 340px !important; } } /* Tablet (768px+): Absolute positioning, width fits single stacked month grid */ @media screen and (min-width: 768px) { [data-daterange-container] > [data-daterange-calendar] { position: absolute !important; top: 100% !important; left: auto !important; right: 0 !important; transform: none !important; width: auto !important; max-width: calc(100vw - 2rem) !important; max-height: none !important; height: auto !important; } } /* When side-by-side layout is active, calendar needs more width */ /* Calculation: 2 months × (7 cells × 40px + 6 gaps × 8px) + 24px gap + 32px padding = ~712px */ [data-daterange-calendar]:has([data-daterange-months-container].daterange-side-by-side) { min-width: 720px !important; } /* ===== Day Headers Grid ===== */ [data-daterange-day-headers] { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 0.25rem !important; margin-bottom: 0.5rem !important; } /* ===== Calendar Grid Containers ===== */ [data-daterange-calendar-month1], [data-daterange-calendar-month2] { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 0.25rem !important; } /* ===== Date Cell Styles ===== */ [data-daterange-day] { width: 100%; aspect-ratio: 1; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; cursor: pointer; font-size: 0.75rem; font-weight: 500; color: #4C5159; transition: all 0.2s ease; /* Improve touch responsiveness on mobile */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* Desktop: Larger cells */ @media (min-width: 1024px) { [data-daterange-day-headers] { gap: 0.5rem !important; } [data-daterange-calendar-month1], [data-daterange-calendar-month2] { gap: 0.5rem !important; } [data-daterange-day] { min-width: 40px; min-height: 40px; font-size: 0.875rem; } } /* Large desktops: Cap cell size so calendar doesn't stretch too wide */ @media (min-width: 1280px) { [data-daterange-calendar-month1], [data-daterange-calendar-month2] { grid-template-columns: repeat(7, 40px) !important; justify-content: center; } [data-daterange-day-headers] { grid-template-columns: repeat(7, 40px) !important; justify-content: center; } } [data-daterange-day]:hover:not(.disabled):not(.selected):not(.in-range) { background-color: #F3F4F6; } [data-daterange-day].disabled { color: #D1D5DB; cursor: not-allowed; } [data-daterange-day].selected { background-color: #C9A772; color: #0F1520; font-weight: 600; } [data-daterange-day].in-range { background-color: #F5F0E8; color: #4C5159; } [data-daterange-day].checkin { background-color: #C9A772; color: #0F1520; font-weight: 600; border-radius: 0.5rem; } [data-daterange-day].checkout { background-color: #C9A772; color: #0F1520; font-weight: 600; border-radius: 0.5rem; } [data-daterange-day].checkin.checkout { border-radius: 0.5rem; } /* Empty cells */ [data-daterange-day].empty { cursor: default; visibility: hidden; } /* ===== Month Selection Grid Styles ===== */ [data-daterange-months-grid-1], [data-daterange-months-grid-2], [data-daterange-months-grid-3], [data-daterange-months-grid-1-mobile], [data-daterange-months-grid-2-mobile], [data-daterange-months-grid-3-mobile] { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem !important; } /* ===== Month Cell Styles ===== */ [data-daterange-month-cell] { padding: 5px 10px; text-align: center; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #4C5159; background-color: transparent; transition: all 0.2s ease; border: 1px solid lightgrey !important; } [data-daterange-month-cell]:hover:not(.disabled) { background-color: #F3F4F6; border-color: #E5E7EB; } [data-daterange-month-cell].disabled { color: #D1D5DB; background-color: transparent; cursor: not-allowed; } [data-daterange-month-cell].selected { background-color: #C9A772; color: #0F1520; font-weight: 600; border-color: #C9A772; } /* Responsive adjustments for months view */ @media (max-width: 1023px) { [data-daterange-tab-content="months"] .flex-col { gap: 1.5rem; } } /* Side-by-side layout when JS determines there's enough space */ [data-daterange-months-container].daterange-side-by-side { flex-direction: row !important; gap: 1.5rem !important; } /* Hide mobile month header when side-by-side */ [data-daterange-months-container].daterange-side-by-side .lg\:hidden { display: none !important; } /* ===== Trip-plan modal calendar ===== */ /* * The calendar inside the trip-plan modal is tagged with `daterange-modal-picker` * by home-date-range-picker.js's initInstance() before it's moved to . * Scoping on the class (instead of the `#create-trip-plan-modal` ancestor) * keeps the rules matching after the move-to-body, which is why pages like * /contact-us were rendering the calendar at HomeDateRangePicker's full 800px * width with loose cell spacing. * * Width declarations use `!important` to beat the inline width JS sets on the * calendar at positioning time. The cell-grid rules further down are scoped * through this class too so cells stay 40×40 on desktop regardless of * how wide the outer calendar panel ends up. */ /* Keep the legacy ancestor-scoped selectors as a fallback for the brief moment before the calendar is moved to body on the first click. */ #create-trip-plan-modal [data-daterange-calendar], [data-daterange-calendar].daterange-modal-picker { z-index: 9999 !important; } /* Mobile (<640px): centered, nearly-full viewport width */ @media (max-width: 639px) { [data-daterange-calendar].daterange-modal-picker { position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; margin: 0 !important; width: calc(100vw - 2rem) !important; max-width: 400px !important; max-height: 85vh !important; overflow-y: auto !important; } } /* Tablet+ (640px+): cap width so HomeDateRangePicker's inline 800–850px is clamped down. The outer calendar resolves to the smaller of: - the inline width JS picks (based on layout — stacked vs side-by-side) - this max-width cap Combined with `min-width: 720px` from the side-by-side rule above, the calendar ends up exactly 720px when two months are shown side-by-side, or naturally narrower when a single month is stacked. */ @media (min-width: 640px) { [data-daterange-calendar].daterange-modal-picker { max-width: 720px !important; max-height: none !important; overflow-y: visible !important; } } /* Cell-grid rules scoped to the modal calendar so desktop cells stay a tight 40×40 even when HomeDateRangePicker's inline width doesn't match. These use `!important` at each cascade step because HomeDateRangePicker targets wider calendars by default for its home-tab use case. */ @media (min-width: 1024px) { [data-daterange-calendar].daterange-modal-picker [data-daterange-calendar-month1], [data-daterange-calendar].daterange-modal-picker [data-daterange-calendar-month2], [data-daterange-calendar].daterange-modal-picker [data-daterange-day-headers] { grid-template-columns: repeat(7, 40px) !important; justify-content: center; gap: 0.5rem !important; } [data-daterange-calendar].daterange-modal-picker [data-daterange-day] { min-width: 40px !important; min-height: 40px !important; font-size: 0.875rem !important; } }