/* ------------------------------------------------------------------ jQuery UI datepicker corrections — shared by the public site and the admin panel. jQuery UI appends a single #ui-datepicker-div to and positions it absolutely from the input's offset. Two consequences the base theme doesn't deal with: 1. It carries no z-index, so inside a Bootstrap modal (z-index 1055) it renders *behind* the dialog. The picker has opened, it just isn't visible — which reads as "the date picker doesn't open". This hits the admin booking editor (5 date fields in a modal) and the public "Book Now" modal. 2. Its width is a fixed 17em. On a phone that overflows the right edge of the screen, so the calendar is cut off or drags the page sideways. ------------------------------------------------------------------ */ /* Above Bootstrap's modal (1055) and any sticky header/overlay — including checkout.php's #insuranceModal / #termsModal, which are hardcoded to z-index:500000000000. That number exceeds the 32-bit signed range (2147483647) most browser engines actually use for z-index, so it gets silently clamped; 2147483647 is that ceiling, so nothing can render above it, and the datepicker (opened after the modal, so later in DOM order) wins any tie. */ #ui-datepicker-div.ui-datepicker { z-index: 2147483647 !important; } /* Paired with datepicker-fix.js's _checkOffset neutralisation: force the calendar back to document-relative positioning even when jQuery UI has set it to position:fixed for a field inside a Bootstrap modal, since the offset it calculates for the fixed case is wrong in that combination (see datepicker-fix.js for the full explanation). A page can't scroll while a Bootstrap modal is open, so there's no drift this loses by not tracking the viewport. */ #ui-datepicker-div.ui-datepicker { position: absolute !important; } /* Never let the calendar itself cause a horizontal scrollbar. */ #ui-datepicker-div.ui-datepicker { max-width: calc(100vw - 20px); box-sizing: border-box; } #ui-datepicker-div .ui-datepicker-calendar { width: 100%; table-layout: fixed; } /* Phones: override jQuery UI's inline left/width so the calendar stays on screen regardless of where the field sits, and give the day cells a finger-sized tap target. */ @media (max-width: 575.98px) { #ui-datepicker-div.ui-datepicker { width: auto !important; left: 10px !important; right: 10px !important; max-width: calc(100vw - 20px) !important; } #ui-datepicker-div .ui-datepicker-calendar th, #ui-datepicker-div .ui-datepicker-calendar td { padding: 0; } #ui-datepicker-div .ui-datepicker-calendar td a, #ui-datepicker-div .ui-datepicker-calendar td span { display: block; padding: 0.6em 0.2em; text-align: center; font-size: 15px; } /* The prev/next arrows are small and sit right against the edge. */ #ui-datepicker-div .ui-datepicker-header { padding: 0.4em 0; } #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { width: 2.2em; height: 2.2em; top: 0.35em; } /* Month/year selects wrap awkwardly at the default 49% each. */ #ui-datepicker-div .ui-datepicker-title select { font-size: 14px; padding: 2px; } } /* The month/year dropdowns (used by the date-of-birth picker) inherit the admin theme's select styling in places and end up unreadably tall. */ #ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month, #ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year { height: auto; line-height: normal; color: #333; }