/* High Mourne House — MotoPress datepicker popup restyle. Relocated from wp-content/novamira-sandbox/hmh-booking-styles.php. The datepick popup is appended to , so it cannot be scoped inside a Bricks element; this stylesheet targets .datepick-popup only and is enqueued after MotoPress's own datepick CSS. */ .datepick-popup{background:#fff;border:1px solid var(--hmh-line,#DED9CC);border-radius:12px;box-shadow:0 20px 50px -24px rgba(31,42,34,.45);font-family:Figtree,system-ui,sans-serif;max-width:calc(100vw - 20px);z-index:100000} .datepick-popup .datepick-nav{border-radius:12px 12px 0 0} .datepick-popup .datepick-ctrl{border-radius:0 0 12px 12px} .datepick-popup .datepick{border:0;background:#fff;padding:4px} .datepick-popup .datepick-nav{background:var(--hmh-band,#ECE9E1)!important;color:var(--hmh-ink,#1F2A22)!important;border-bottom:1px solid var(--hmh-line,#DED9CC)} .datepick-popup .datepick-month-header{background:#fff!important;color:var(--hmh-ink,#1F2A22)!important;font-weight:600} .datepick-popup .datepick-ctrl{background:var(--hmh-band,#ECE9E1)!important;color:var(--hmh-ink,#1F2A22)!important;border-top:1px solid var(--hmh-line,#DED9CC)} .datepick-popup .datepick-cmd{color:var(--hmh-accent,#4C5F38)!important;font-weight:600;font-size:13px;background:transparent!important;border-radius:6px;padding:4px 8px} .datepick-popup a.datepick-cmd:hover{background:#fff!important;color:var(--hmh-accent-hover,#3C4C2B)!important} .datepick-popup .datepick-cmd.datepick-disabled{color:rgba(31,42,34,.3)!important;background:transparent!important} .datepick-popup .datepick th{color:var(--hmh-body,#4B554C);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em} .datepick-popup td a,.datepick-popup td span{border:0!important;border-radius:8px;padding:6px;font-size:14px} .datepick-popup td a.mphb-date-cell{color:var(--hmh-ink,#1F2A22);background:#fff} .datepick-popup td a.mphb-date-cell:hover{background:var(--hmh-band,#ECE9E1)!important;color:var(--hmh-accent,#4C5F38)!important} .datepick-popup td .datepick-selected,.datepick-popup td a.datepick-selected,.datepick-popup td.datepick-selected a,.datepick-popup td .mphb-check-in-date,.datepick-popup td .mphb-check-out-date{background:var(--hmh-accent,#4C5F38)!important;color:#fff!important} .datepick-popup td .mphb-in-selected-range,.datepick-popup td .datepick-highlight{background:#e0e5d6!important;color:var(--hmh-ink,#1F2A22)!important} .datepick-popup td .datepick-today{box-shadow:inset 0 0 0 1px var(--hmh-accent,#4C5F38)} .datepick-popup td span.mphb-date-cell,.datepick-popup td .mphb-unselectable-date,.datepick-popup td .mphb-past-date{color:rgba(31,42,34,.28)!important;background:transparent!important;cursor:default} .datepick-popup td .datepick-other-month{color:rgba(31,42,34,.18)!important} .datepick-popup select.datepick-month-year{background:#fff!important;color:var(--hmh-ink,#1F2A22)!important;border:1px solid var(--hmh-line,#DED9CC)!important;border-radius:6px;padding:3px 6px;font-family:Figtree,system-ui,sans-serif;font-weight:600;box-shadow:none!important;-webkit-appearance:menulist;appearance:menulist} .datepick-popup th,.datepick-popup .datepick th{background:transparent!important;color:var(--hmh-body,#4B554C)!important;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border:0!important} @media(max-width:600px){.datepick-popup{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:12px!important;transform:translateX(-50%);width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)}.datepick-popup .datepick.datepick-multi{width:100%!important;box-sizing:border-box}.datepick-popup .datepick-month-row,.datepick-popup .datepick-month{width:100%!important;float:none!important;box-sizing:border-box}.datepick-popup .datepick-month table{width:100%!important}.datepick-popup .datepick-nav .datepick-cmd,.datepick-popup .datepick-ctrl .datepick-cmd{width:auto!important;min-width:0!important}} /* Desktop (>600px): keep the two months SIDE BY SIDE so the popup stays short (~one calendar tall) and opens DOWNWARD from the field, instead of the stacked two-month layout whose height forced kbwood to flip it up over the hero. Mobile (<=600px) keeps its own stacked, full-width layout above. */ @media(min-width:601px){ .datepick-popup{width:auto!important;max-width:calc(100vw - 20px)} .datepick-popup .datepick.datepick-multi{width:auto!important} .datepick-popup .datepick-multi .datepick-month-row{display:flex!important;flex-wrap:nowrap!important;width:auto!important;white-space:nowrap} .datepick-popup .datepick-multi .datepick-month{float:none!important;display:inline-block!important;flex:0 0 auto!important;width:210px!important;vertical-align:top} .datepick-popup .datepick-multi .datepick-month+.datepick-month{margin-left:8px} .datepick-popup .datepick-multi .datepick-month table{width:100%!important} } /* HMH desktop height trim: shave the side-by-side popup height so it clears the space below the field and opens downward (was ~343px, target ~300px). */ @media(min-width:601px){ .datepick-popup .datepick td a,.datepick-popup .datepick td span{padding:2px 5px!important;font-size:13px!important;line-height:1.15!important} .datepick-popup .datepick th{padding:2px 4px!important} .datepick-popup .datepick-nav,.datepick-popup .datepick-ctrl{padding-top:5px!important;padding-bottom:5px!important} .datepick-popup .datepick-month-header{padding-top:4px!important;padding-bottom:4px!important} .datepick-popup .datepick{padding:2px!important} } /* Desktop (>600px): restore a more comfortable calendar size. The earlier height trims were only to force the popup downward; now the #find-dates anchor lands the field high with plenty of room below, so we can size the calendar up. This block comes last so it overrides the trims above. */ @media(min-width:601px){ .datepick-popup .datepick-multi .datepick-month{width:238px!important} .datepick-popup .datepick td a,.datepick-popup .datepick td span{padding:5px 6px!important;font-size:15px!important;line-height:1.2!important;border-radius:8px} .datepick-popup .datepick th{padding:6px 4px!important;font-size:12px!important} .datepick-popup .datepick-month-header{padding-top:6px!important;padding-bottom:6px!important;font-size:15px!important} .datepick-popup .datepick-nav,.datepick-popup .datepick-ctrl{padding-top:6px!important;padding-bottom:6px!important} .datepick-popup .datepick-cmd{font-size:14px!important} .datepick-popup .datepick{padding:6px!important} .datepick-popup select.datepick-month-year{font-size:14px!important;padding:4px 8px!important} } /* Reserve space below the availability section while the datepicker is open, so the downward popup does not overlap the Welcome section. Desktop only (on mobile the popup is position:fixed, outside document flow). Class toggled by hmh-datepicker-space.js; closed-state spacing is unchanged. */ @media(min-width:601px){ body.hmh-datepicker-open #brxe-sesec{padding-bottom:280px!important;} } /* Smooth the reserved-space change so the availability section eases open/closed instead of jumping when the datepicker toggles. The transition lives on the BASE #brxe-sesec so both the grow (open) and shrink (close) animate. Only padding-bottom is transitioned, so no MotoPress position calc is affected (the field above the padding never moves). Desktop only, matching the rule. */ @media(min-width:601px){ #brxe-sesec{transition:padding-bottom 600ms ease-in-out;} } /* Very subtle fade-in for the popup on open — opacity only, so it does not touch layout or the kbwood position calculation. */ .datepick-popup{animation:hmhDatepickIn 260ms ease-out;} @keyframes hmhDatepickIn{from{opacity:0}to{opacity:1}} /* Accessibility: users who prefer reduced motion get no animation (instant). */ @media(prefers-reduced-motion:reduce){ #brxe-sesec{transition:none!important;} .datepick-popup{animation:none!important;} }