/* * 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; } } /* Stacked / side-by-side state is expressed by two classes the JS toggles directly on the calendar element: .daterange-stacked-mode — single-month vertical layout (property-details pickers below lg, mobile viewport, etc.) .daterange-side-by-side — 2 months side-by-side (added to the inner months container; kept here for backward compat). We DELIBERATELY do NOT use `:has()` here: Samsung Internet + pre-Chrome-105 silently drop `:has()` rules, and that's exactly the browsers most likely to show up on QA tablets. Class-based selectors work everywhere. */ /* When stacked, hide the desktop 2-month top header (2 × min-w-48 ≈ 400px, overflows the 340px modal calendar) and force-show the mobile single-month header instead. The Tailwind `md:flex` / `md:hidden` gates fire on viewport width; that's the wrong signal for stacked-vs-side-by-side. */ [data-daterange-calendar].daterange-stacked-mode div.hidden.md\:flex { display: none !important; } [data-daterange-calendar].daterange-stacked-mode div.md\:hidden { display: block !important; } /* When side-by-side is active, calendar hugs its actual content width. Content varies by viewport because cell size does: - viewport <1024: 32px cells + 4px gaps → grid 248 per month → total 520 content + 32 padding = 552 - viewport ≥1024: 40px cells + 8px gaps → grid 328 per month → total 680 content + 32 padding = 712 A fixed 720 cap works at ≥1024 but leaves ~200px dead space at 800–1023 (tablet portrait). `max-content` sizes the calendar to whatever the grids actually need at that viewport, so no whitespace on either end at any breakpoint. Overrides home-date-range-picker.js's inline width (760) and any absolute-positioning stretch. */ /* Two selectors: - `:has(...)` catches EVERY side-by-side calendar in modern browsers, including home-page-hero pickers managed by home-date-range-picker.js (which doesn't toggle the class on the calendar element itself, only on the container). - `.daterange-side-by-side` on the calendar catches search/property-details pickers even on browsers without :has() support (Samsung Internet, older Chrome), because my JS toggles it explicitly. Modern browsers use whichever matches first; older browsers fall back to the class-based rule (still complete coverage where JS ran). */ [data-daterange-calendar]:has([data-daterange-months-container].daterange-side-by-side), [data-daterange-calendar].daterange-side-by-side { width: max-content !important; min-width: 0 !important; max-width: none !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; height: 28px; min-height: 28px; 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; } /* Unavailable — opt-in via data-block-unavailable on the container. * Mirrors the inline-calendar style (public/assets/css/inline-calendar.css * `.ibc-day.unavailable`): dim the cell to 0.45 opacity, paint a translucent * white overlay via ::before to fade it further, and render a literal "/" * slash via ::after as the strike-through. Same visual language across both * calendars so guests don't see two different "unavailable" styles on the * same page. */ [data-daterange-day].unavailable { opacity: 0.45; cursor: default; position: relative; pointer-events: none; } [data-daterange-day].unavailable::before { content: ""; position: absolute; inset: 0; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.6); pointer-events: none; } [data-daterange-day].unavailable::after { content: "/"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #8b8b8b; pointer-events: none; } [data-daterange-day].unavailable:hover { background-color: transparent !important; } /* Checkout-only — a date whose own night is booked but which is still a valid * CHECKOUT (departure) for the current check-in, because every night up to it is * free. Rendered as clearly selectable (full opacity, pointer, faint gold tint + * ring), NOT struck through like .unavailable, so guests can book the last * available night before a booked block. Set by date-range-picker.js only while a * check-in is chosen and awaiting checkout. (client/QA 2026-07-28) */ [data-daterange-day].checkout-only { opacity: 1; cursor: pointer; position: relative; color: #4C5159; background-color: #FBF7EF; box-shadow: inset 0 0 0 1px #E4D3B3; } [data-daterange-day].checkout-only:hover { background-color: #F5F0E8; } [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; justify-content: center !important; } /* Side-by-side: months hug their content instead of stretching to fill the calendar box. Default Tailwind `flex-1` on each month wrapper stretches them to half the (min-width: 720px) box; the fixed 7×40px grid then `justify-content: center`s itself inside each half, producing ~100–150px of dead space BETWEEN the two months on wide screens. Overriding the child sizing to `flex: 0 0 auto` collapses each wrapper to the grid's natural width so only the 24px `gap` above sits between the months. Client 2026-07-14: "if we show the months left and right can we reduce the marked space a bit?". Only fires when the JS toggles the side-by-side class, so stacked-mobile layout is untouched. */ [data-daterange-months-container].daterange-side-by-side > div { flex: 0 0 auto !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; } } /* Short viewports (landscape phones) — override the tablet+ block above. A landscape phone (iPhone 14 = 852x393, iPhone SE = 667x375, typical Android = 800x360) matches min-width:640px and therefore inherits max-height:none — but the calendar is ~500-600px tall, and the JS positioner uses `translate(-50%, -50%)` on `top:50%`, so the top (month labels + weekday header row) clips ABOVE the viewport and only the middle date rows remain visible. Also collapses cells to a compact fixed size. The base [data-daterange-day] rule uses `aspect-ratio: 1` on `grid-template-columns: repeat(7, 1fr)`, so cells become SQUARE at the container width divided by 7. On a landscape phone the container is capped at 720px, so cells inflate to ~103×103px and 6 rows push the calendar body to ~600px — larger than the viewport itself. Fixed 36×32 keeps the whole calendar under ~300px so the trip-plan modal + calendar both fit above the fold. 500px chosen so landscape phones match while landscape tablets (iPad Mini = 744h, iPad Pro = 834h+) — which have room for the full calendar — do not. */ @media (max-height: 500px) { [data-daterange-calendar].daterange-modal-picker { max-height: 90vh !important; overflow-y: auto !important; } [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, 36px) !important; justify-content: center; gap: 0.25rem !important; } [data-daterange-calendar].daterange-modal-picker [data-daterange-day] { width: 36px !important; height: 32px !important; min-width: 36px !important; min-height: 32px !important; aspect-ratio: auto !important; font-size: 0.75rem !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; height: 28px; min-height: 28px !important; font-size: 0.875rem !important; } }