/** * Flatpickr theming for the home hero search form — match EVD navy/gold. * The form chrome (.lw-home-hero__search .mphb_sc_search-form etc.) is * already styled in lightweight.css; this only skins the floating calendar. */ /* Calendar popup — dark glass to match the hero. * Width must be EXPLICIT (1 month = 308px, 2 months = 616px) because the * popup is appended at and otherwise inherits 100% width from the * parent flex form. */ .flatpickr-calendar { width: 308px !important; background: rgba(15, 30, 46, 0.96); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); color: #ffffff; } .flatpickr-calendar.multiMonth, .flatpickr-calendar.hasWeeks.multiMonth { width: 616px !important; } .flatpickr-calendar .flatpickr-rContainer, .flatpickr-calendar .flatpickr-days { width: auto !important; } .flatpickr-days { width: 100% !important; } .dayContainer { width: 308px !important; min-width: 308px !important; max-width: 308px !important; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: rgba(15, 30, 46, 0.96); } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { border-top-color: rgba(15, 30, 46, 0.96); } /* Month/year header */ .flatpickr-months, .flatpickr-months .flatpickr-month { background: transparent; color: #ffffff; fill: #ffffff; } .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: #ffffff; font-family: 'Marcellus', Georgia, serif; } .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #0e2545; color: #ffffff; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #ffffff; fill: #ffffff; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #cdb083; } /* Weekdays — same specificity bump as day cells so EVD palette wins over * Flatpickr's own .flatpickr-weekday rule. */ .flatpickr-calendar .flatpickr-weekdays { background: transparent !important; } .flatpickr-calendar .flatpickr-weekday, .flatpickr-calendar span.flatpickr-weekday { color: rgba(255, 255, 255, 0.85) !important; background: transparent !important; font-family: 'Jost', sans-serif; font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; } /* Day cells — extra-specific selector to beat Flatpickr's own rules. */ .flatpickr-calendar .flatpickr-day { color: #ffffff !important; border-radius: 6px; font-family: 'Jost', sans-serif; } .flatpickr-calendar .flatpickr-day:hover { background: rgba(205, 176, 131, 0.14); border-color: transparent; } .flatpickr-calendar .flatpickr-day.today { border-color: rgba(205, 176, 131, 0.55); color: #ffffff !important; } .flatpickr-calendar .flatpickr-day.today:hover { background: rgba(205, 176, 131, 0.22); } .flatpickr-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay, .flatpickr-calendar .flatpickr-day.notAllowed, .flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay { color: rgba(255, 255, 255, 0.45) !important; background: transparent; } .flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: #cdb083 !important; border-color: #cdb083 !important; color: #0a1a32 !important; font-weight: 600; } .flatpickr-day.inRange { background: rgba(205, 176, 131, 0.32) !important; border-color: transparent !important; box-shadow: -5px 0 0 rgba(205, 176, 131, 0.32), 5px 0 0 rgba(205, 176, 131, 0.32) !important; color: #ffffff !important; } /* Light theme override (data-pp-theme="light") — literal hex per the * var-remap trap. Same specificity pattern as dark theme. */ body[data-pp-theme="light"] .flatpickr-calendar { background: #ffffff !important; border-color: rgba(21, 40, 64, 0.12) !important; color: #152840 !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-current-month input.cur-year, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-current-month .cur-month, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-prev-month, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: #152840 !important; fill: #152840 !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: #ffffff; color: #152840; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-weekday, body[data-pp-theme="light"] .flatpickr-calendar span.flatpickr-weekday { color: #4a5666 !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.flatpickr-disabled, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.prevMonthDay, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.nextMonthDay, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.notAllowed { color: rgba(21, 40, 64, 0.30) !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.today { border-color: #836f53 !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day:hover { background: rgba(131, 111, 83, 0.10); } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.selected, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.startRange, body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.endRange { background: #836f53 !important; border-color: #836f53 !important; color: #ffffff !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.inRange { background: rgba(131, 111, 83, 0.32) !important; color: #152840 !important; box-shadow: -5px 0 0 rgba(131, 111, 83, 0.32), 5px 0 0 rgba(131, 111, 83, 0.32) !important; } /* Stepper input must stay readable (no native number-input spinners) */ .cs-home-search__count { -moz-appearance: textfield; text-align: center; width: 36px !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: inherit !important; font-weight: 500; } .cs-home-search__count::-webkit-inner-spin-button, .cs-home-search__count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Live hint inside the Flatpickr popup — updated as the user hovers/picks. * Sits beneath the day grid, full-width of the calendar. */ .flatpickr-calendar .cs-home-search__hint { margin: 8px 0 0; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); text-align: center; font-family: 'Jost', sans-serif; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.02em; min-height: 38px; display: flex; align-items: center; justify-content: center; } .flatpickr-calendar .cs-home-search__hint.is-error { color: #fbbf24; } .flatpickr-calendar .cs-home-search__hint.is-info { color: #cdb083; } .flatpickr-calendar .cs-home-search__hint.is-success { color: #8fd996; font-weight: 500; } body[data-pp-theme="light"] .flatpickr-calendar .cs-home-search__hint { border-top-color: rgba(21, 40, 64, 0.10); color: #44506b; } body[data-pp-theme="light"] .flatpickr-calendar .cs-home-search__hint.is-error { color: #b6420f; } body[data-pp-theme="light"] .flatpickr-calendar .cs-home-search__hint.is-info { color: #836f53; } body[data-pp-theme="light"] .flatpickr-calendar .cs-home-search__hint.is-success { color: #2d6b3c; } /* Hide the hint when it sits in its original form-relative position * (only visible inside the popup once Flatpickr's onReady moves it in). */ .cs-home-search__hint { display: none; } .flatpickr-calendar .cs-home-search__hint { display: flex; } /* Too-short day cells — greyed out + line-through, but still clickable. * Click triggers a reject + "too-short" hint in JS. */ .flatpickr-calendar .flatpickr-day.cs-day-too-short { color: rgba(251, 191, 36, 0.65) !important; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(251, 191, 36, 0.45); cursor: not-allowed; background: transparent !important; } .flatpickr-calendar .flatpickr-day.cs-day-too-short:hover { background: rgba(251, 191, 36, 0.08) !important; } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.cs-day-too-short { color: rgba(196, 97, 42, 0.70) !important; text-decoration-color: rgba(196, 97, 42, 0.50); } body[data-pp-theme="light"] .flatpickr-calendar .flatpickr-day.cs-day-too-short:hover { background: rgba(196, 97, 42, 0.08) !important; } .cs-home-search__date-row { display: inline-flex; align-items: center; gap: 8px; } .cs-home-search__date-icon { color: #cdb083; flex: 0 0 14px; } .cs-home-search__date { cursor: pointer; background: transparent !important; border: 0 !important; color: #ffffff !important; padding: 0 !important; font-family: 'Jost', sans-serif; font-size: 14px; min-height: 22px; width: 100%; } .cs-home-search__date::placeholder { color: rgba(255, 255, 255, 0.55); } /* The hero backdrop is always dark (hero image + navy overlay) regardless * of data-pp-theme, so trigger text stays white in both modes. */