/* ============================================================
* MotoPress Hotel Booking — Compact + theme-proof calendar skin
* ------------------------------------------------------------
* Covers ALL three render contexts the plugin emits:
*
* 1. [mphb_availability_calendar] inline widget
* -> .mphb_sc_availability_calendar-wrapper .mphb-calendar
*
* 2. [mphb_availability] booking-form check-in / check-out
* inputs (these inputs themselves are styled in the wrapper,
* but the actual calendar opens as a global popup)
* -> .mphb_sc_booking_form-wrapper
*
* 3. The kbwood popup datepicker that opens from any
* check-in / check-out input on the page. Appended to
* , so it lives OUTSIDE every shortcode wrapper.
* -> .datepick-popup.mphb-datepick-popup
*
* The Booklium theme (css/hotel-booking.css) paints non-selectable
* `` cells with color #ebebec on a #fafafa stripe pattern —
* effectively invisible on white. Combined with an Airbnb-imported
* booking that puts e.g. Jul 1-6 in `.mphb-booked-date`, that whole
* range looks "missing" to the visitor. These rules force visible
* contrast on every blocked / past / unavailable state.
*
* Every rule uses !important because:
* - the kbwood vendor sheet uses !important on key selectors,
* - the host theme is loaded after the plugin CSS,
* - this stylesheet is enqueued at priority 20 (after both),
* so we get to win the cascade reliably.
* ============================================================ */
/* ---- Shared design tokens, scoped per render context ---- */
.mphb_sc_availability_calendar-wrapper,
.mphb_sc_booking_form-wrapper,
.datepick-popup.mphb-datepick-popup,
.datepick-popup .mphb-datepick-popup {
--mphbc-cell-min-height: 28px;
--mphbc-cell-radius: 6px;
--mphbc-cell-font-size: 13px;
--mphbc-cell-gap: 2px;
--mphbc-available-bg: #efab03;
--mphbc-available-fg: #ffffff;
--mphbc-selected-bg: #b87f00;
--mphbc-selected-fg: #ffffff;
--mphbc-blocked-bg: #ececec;
--mphbc-blocked-fg: #6e6e6e;
--mphbc-extra-bg: #f7f7f7;
--mphbc-extra-fg: #b6b6b6;
--mphbc-default-bg: #ffffff;
--mphbc-default-fg: #2a2a2a;
--mphbc-x-color: rgba(196, 52, 52, 0.85);
--mphbc-header-bg: #fffaf0;
--mphbc-header-fg: #1a1a1a;
--mphbc-border: #f0e3c2;
}
/* Availability calendar inline widget */
.mphb_sc_availability_calendar-wrapper {
--mphbc-cell-min-height: 0;
--mphbc-cell-font-size: 14px;
--mphbc-cell-gap: 3px;
--mphbc-available-bg: #efab03;
--mphbc-available-fg: #ffffff;
--mphbc-selected-bg: #c99200;
--mphbc-selected-fg: #ffffff;
--mphbc-blocked-bg: #000000;
--mphbc-blocked-fg: #ffffff;
--mphbc-extra-bg: #1a1a1a;
--mphbc-extra-fg: rgba(255, 255, 255, 0.45);
}
/* ============================================================
* Section A — Common rules that apply in EVERY context.
* Each rule is duplicated for the three wrappers so the
* selectors keep their high-specificity prefix. This is
* verbose but bulletproof against the host theme.
* ============================================================ */
/* ---- Outer datepick container ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick,
.datepick-popup.mphb-datepick-popup .datepick,
.datepick-popup.mphb-datepick-popup.datepick {
background: #ffffff !important;
border: 1px solid var(--mphbc-border) !important;
border-radius: 8px !important;
padding: 8px !important;
font-size: var(--mphbc-cell-font-size) !important;
width: auto !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ---- Multi-month layout: CSS grid replaces vendor float ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-row,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month-row,
.datepick-popup.mphb-datepick-popup .datepick-month-row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 16px !important;
clear: both !important;
width: 100% !important;
flex-wrap: wrap !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month,
.datepick-popup.mphb-datepick-popup .datepick-month {
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: hidden !important;
text-align: center !important;
box-sizing: border-box !important;
font-size: var(--mphbc-cell-font-size) !important;
}
/* ---- Month header (Month + Year title) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-header,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month-header,
.datepick-popup.mphb-datepick-popup .datepick-month-header {
background: var(--mphbc-header-bg) !important;
color: var(--mphbc-header-fg) !important;
font-weight: 600 !important;
font-size: 13px !important;
height: auto !important;
padding: 8px 6px !important;
border-radius: 6px !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.2 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-header select,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month-header select,
.datepick-popup.mphb-datepick-popup .datepick-month-header select {
background: transparent !important;
color: inherit !important;
font-weight: 600 !important;
font-size: 13px !important;
height: auto !important;
max-width: none !important;
padding: 0 4px !important;
}
/* ---- Calendar table: fixed layout so all 7 columns + 6 rows fit ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month table,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month table,
.datepick-popup.mphb-datepick-popup .datepick-month table {
width: 100% !important;
height: auto !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: var(--mphbc-cell-gap) !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month thead,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month thead,
.datepick-popup.mphb-datepick-popup .datepick-month thead {
display: table-header-group !important;
visibility: visible !important;
opacity: 1 !important;
border: 0 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month tbody,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month tbody,
.datepick-popup.mphb-datepick-popup .datepick-month tbody {
display: table-row-group !important;
visibility: visible !important;
opacity: 1 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month tbody tr,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month tbody tr,
.datepick-popup.mphb-datepick-popup .datepick-month tbody tr {
display: table-row !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
}
/* ---- Day-of-week column headers ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month th,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month th,
.datepick-popup.mphb-datepick-popup .datepick-month th {
background: transparent !important;
color: #666 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
border: 0 !important;
padding: 4px 0 6px !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month th a,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month th span,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month th a,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month th span,
.datepick-popup.mphb-datepick-popup .datepick-month th a,
.datepick-popup.mphb-datepick-popup .datepick-month th span {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
}
/* ---- The day cells (| wrappers) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td,
.datepick-popup.mphb-datepick-popup .datepick-month td {
display: table-cell !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
max-height: none !important;
width: auto !important;
text-align: center !important;
vertical-align: middle !important;
}
/* ---- The actual date pill: for selectable, for not ----
* IMPORTANT: this wipes the theme's fixed 32x32 box and the
* near-invisible #ebebec text + #fafafa stripe pattern that
* was making booked dates "disappear".
*/
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span,
.datepick-popup.mphb-datepick-popup .datepick-month td > a,
.datepick-popup.mphb-datepick-popup .datepick-month td > span {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: var(--mphbc-cell-min-height) !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: var(--mphbc-default-bg) !important;
background-image: none !important;
color: var(--mphbc-default-fg) !important;
font-size: var(--mphbc-cell-font-size) !important;
font-weight: 500 !important;
line-height: 1 !important;
border: 0 !important;
border-radius: var(--mphbc-cell-radius) !important;
text-decoration: none !important;
position: relative !important;
overflow: visible !important;
}
/* ---- Available / selectable date ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-selectable-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-available-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-selectable-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-available-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-available-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-selectable-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-available-date {
background: var(--mphbc-available-bg) !important;
background-image: none !important;
color: var(--mphbc-available-fg) !important;
cursor: pointer !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date:hover,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-selectable-date:hover,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date:hover,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-selectable-date:hover,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-available-date:hover,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-selectable-date:hover {
background: var(--mphbc-selected-bg) !important;
color: var(--mphbc-selected-fg) !important;
}
/* ---- Selected date(s) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-selected-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-selected-date--check-in,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-selected-date--check-out,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.datepick-selected,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.datepick-highlight,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-selected-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.datepick-selected,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.datepick-highlight,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-selected-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.datepick-selected,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.datepick-highlight,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-check-in-date {
background: var(--mphbc-selected-bg) !important;
background-image: none !important;
color: var(--mphbc-selected-fg) !important;
border-color: var(--mphbc-selected-bg) !important;
}
/* ============================================================
* Section B — High-contrast override for blocked / past / booked
* dates. This is the part that fixes "1-7 are not loading":
* Booklium paints these in #ebebec on #fafafa stripes, which is
* invisible on white. We force a solid grey background and a
* dark grey number so the day is ALWAYS legible.
* ============================================================ */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-past-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-past-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-booked-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-booked-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-not-available-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-not-available-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-unselectable-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-unselectable-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-not-check-in-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-not-check-in-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-not-check-out-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-not-check-out-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-earlier-min-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-earlier-min-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-later-max-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-later-max-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-earlier-check-in-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-earlier-check-in-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-past-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-past-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-booked-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-booked-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-not-available-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-not-available-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-unselectable-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-unselectable-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-past-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-past-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-booked-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-booked-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-not-available-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-not-available-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-mark-as-unavailable,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-mark-as-unavailable,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-unselectable-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-unselectable-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-earlier-min-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-earlier-min-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-later-max-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-later-max-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-earlier-check-in-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-earlier-check-in-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-not-check-in-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-not-check-in-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-not-check-out-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-not-check-out-date {
background: var(--mphbc-blocked-bg) !important;
background-image: none !important;
color: var(--mphbc-blocked-fg) !important;
border: 0 !important;
opacity: 1 !important;
cursor: not-allowed !important;
text-decoration: none !important;
}
/* Unavailable dates rely solely on the grey background + muted text for clarity.
No X overlay is drawn — the grey cell is sufficient and keeps the calendar clean. */
/* ---- "Extra" days from previous / next month (filler cells) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-extra-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-extra-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.datepick-other-month,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.datepick-other-month,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.mphb-extra-date,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span.mphb-extra-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.mphb-extra-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.mphb-extra-date,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.datepick-other-month,
.datepick-popup.mphb-datepick-popup .datepick-month td > span.datepick-other-month {
background: var(--mphbc-extra-bg) !important;
background-image: none !important;
color: var(--mphbc-extra-fg) !important;
}
/* ---- Today indicator ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.datepick-today,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a.datepick-today,
.datepick-popup.mphb-datepick-popup .datepick-month td > a.datepick-today {
box-shadow: inset 0 0 0 2px var(--mphbc-selected-bg) !important;
}
/* ---- Price tag inside a cell (when display_price="true") ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td .mphb-date-cell__price,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td .mphb-date-cell__price,
.datepick-popup.mphb-datepick-popup .datepick-month td .mphb-date-cell__price {
display: block !important;
font-size: 9px !important;
line-height: 1.2 !important;
margin: 1px 0 0 !important;
padding: 0 !important;
color: inherit !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ---- Top nav (prev / today / next) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-nav,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-nav,
.datepick-popup.mphb-datepick-popup .datepick-nav {
width: 100% !important;
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: var(--mphbc-header-bg) !important;
color: var(--mphbc-header-fg) !important;
border-radius: 6px !important;
padding: 4px 8px !important;
margin-bottom: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-nav a,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-nav a,
.datepick-popup.mphb-datepick-popup .datepick-nav a {
background: transparent !important;
color: var(--mphbc-selected-bg) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
height: auto !important;
line-height: 1.4 !important;
text-decoration: none !important;
float: none !important;
width: auto !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-nav a:hover,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-nav a:hover,
.datepick-popup.mphb-datepick-popup .datepick-nav a:hover {
background: rgba(184, 127, 0, 0.08) !important;
color: var(--mphbc-selected-bg) !important;
}
/* ---- Bottom status bar (selected dates / clear link) ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-ctrl,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-ctrl,
.datepick-popup.mphb-datepick-popup .datepick-ctrl {
margin: 8px 0 0 !important;
background: transparent !important;
color: #555 !important;
font-weight: 500 !important;
font-size: 12px !important;
padding: 4px 0 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-ctrl a,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-ctrl a,
.datepick-popup.mphb-datepick-popup .datepick-ctrl a {
color: var(--mphbc-selected-bg) !important;
background: transparent !important;
padding: 2px 6px !important;
font-size: 12px !important;
}
/* ---- Loading overlay ---- */
.mphb_sc_availability_calendar-wrapper .mphb-calendar.mphb-loading .datepick,
.mphb_sc_booking_form-wrapper .mphb-calendar.mphb-loading .datepick,
.datepick-popup.mphb-datepick-popup.mphb-loading {
min-height: 200px;
}
/* ============================================================
* Section C — Responsive: tighten on small screens.
* ============================================================ */
@media (max-width: 480px) {
.mphb_sc_availability_calendar-wrapper,
.mphb_sc_booking_form-wrapper,
.datepick-popup.mphb-datepick-popup,
.datepick-popup .mphb-datepick-popup {
--mphbc-cell-min-height: 26px;
--mphbc-cell-font-size: 12px;
--mphbc-cell-gap: 1px;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-row,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month-row,
.datepick-popup.mphb-datepick-popup .datepick-month-row,
.datepick-popup .mphb-datepick-popup .datepick-month-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month th,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month th,
.datepick-popup.mphb-datepick-popup .datepick-month th,
.datepick-popup .mphb-datepick-popup .datepick-month th {
font-size: 10px !important;
padding: 3px 0 4px !important;
}
}
/* ============================================================
* Section D — Correct popup selectors.
*
* kbwood datepick creates:
* div.datepick-popup ← kbwood's own wrapper (position: absolute)
* └── div.datepick ← the calendar, gets .mphb-datepick-popup
* .mphb-datepick-popup
* .mphb-datepicker-slate-blue
*
* All Section A/B rules used ".datepick-popup.mphb-datepick-popup" (both
* classes on the SAME element) which never matches this two-element
* structure. Section D re-states every critical rule with the correct
* descendant selector so the popup actually receives the overrides.
* ============================================================ */
/* CSS variable scope — must sit on the datepick element itself */
.datepick-popup .mphb-datepick-popup {
--mphbc-cell-min-height: 28px;
--mphbc-cell-radius: 6px;
--mphbc-cell-font-size: 13px;
--mphbc-cell-gap: 2px;
--mphbc-available-bg: #efab03;
--mphbc-available-fg: #ffffff;
--mphbc-selected-bg: #b87f00;
--mphbc-selected-fg: #ffffff;
--mphbc-blocked-bg: #ececec;
--mphbc-blocked-fg: #6e6e6e;
--mphbc-extra-bg: #f7f7f7;
--mphbc-extra-fg: #b6b6b6;
--mphbc-default-bg: #ffffff;
--mphbc-default-fg: #2a2a2a;
--mphbc-header-bg: #fffaf0;
--mphbc-header-fg: #1a1a1a;
--mphbc-border: #f0e3c2;
}
/* Outer datepick box: auto width so both months always have room */
.datepick-popup .mphb-datepick-popup.datepick {
background: #ffffff !important;
border: 1px solid var(--mphbc-border) !important;
border-radius: 8px !important;
padding: 8px !important;
font-size: var(--mphbc-cell-font-size) !important;
width: auto !important;
min-width: 500px !important;
max-width: calc(100vw - 24px) !important;
box-sizing: border-box !important;
}
/* Month row: CSS grid so both months sit side-by-side with equal space */
.datepick-popup .mphb-datepick-popup .datepick-month-row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
gap: 12px !important;
clear: both !important;
width: 100% !important;
}
/* Individual month: float cleared, no overflow clipping */
.datepick-popup .mphb-datepick-popup .datepick-month {
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
text-align: center !important;
box-sizing: border-box !important;
font-size: var(--mphbc-cell-font-size) !important;
}
/* Month header */
.datepick-popup .mphb-datepick-popup .datepick-month-header {
background: var(--mphbc-header-bg) !important;
color: var(--mphbc-header-fg) !important;
font-weight: 600 !important;
font-size: 13px !important;
height: auto !important;
padding: 8px 6px !important;
border-radius: 6px !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.2 !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month-header select {
background: transparent !important;
color: inherit !important;
font-weight: 600 !important;
font-size: 13px !important;
height: auto !important;
max-width: none !important;
padding: 0 4px !important;
}
/* Table: fixed layout guarantees all 7 columns fit */
.datepick-popup .mphb-datepick-popup .datepick-month table {
width: 100% !important;
height: auto !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: var(--mphbc-cell-gap) !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month thead {
display: table-header-group !important;
visibility: visible !important;
opacity: 1 !important;
border: 0 !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month tbody {
display: table-row-group !important;
visibility: visible !important;
opacity: 1 !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month tbody tr {
display: table-row !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
}
/* Day-of-week headers */
.datepick-popup .mphb-datepick-popup .datepick-month th {
background: transparent !important;
color: #666 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
border: 0 !important;
padding: 4px 0 6px !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month th a,
.datepick-popup .mphb-datepick-popup .datepick-month th span {
background: transparent !important;
color: inherit !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1.2 !important;
}
/* Date cells ( | ) */
.datepick-popup .mphb-datepick-popup .datepick-month td {
display: table-cell !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
max-height: none !important;
width: auto !important;
text-align: center !important;
vertical-align: middle !important;
overflow: visible !important;
}
/* Date pill — selectable, non-selectable */
.datepick-popup .mphb-datepick-popup .datepick-month td > a,
.datepick-popup .mphb-datepick-popup .datepick-month td > span {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: var(--mphbc-cell-min-height) !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
background: var(--mphbc-default-bg) !important;
background-image: none !important;
color: var(--mphbc-default-fg) !important;
font-size: var(--mphbc-cell-font-size) !important;
font-weight: 500 !important;
line-height: 1 !important;
border: 0 !important;
border-radius: var(--mphbc-cell-radius) !important;
text-decoration: none !important;
position: relative !important;
overflow: visible !important;
}
/* Available / selectable */
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-available-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-selectable-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-available-date {
background: var(--mphbc-available-bg) !important;
background-image: none !important;
color: var(--mphbc-available-fg) !important;
cursor: pointer !important;
}
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-available-date:hover,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-selectable-date:hover {
background: var(--mphbc-selected-bg) !important;
color: var(--mphbc-selected-fg) !important;
}
/* Selected / highlighted */
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-selected-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.datepick-selected,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.datepick-highlight,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-check-in-date {
background: var(--mphbc-selected-bg) !important;
background-image: none !important;
color: var(--mphbc-selected-fg) !important;
}
/* Blocked / unselectable — grey pill, no X marks, strikethrough cancelled */
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-past-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-past-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-booked-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-booked-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-not-available-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-not-available-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-mark-as-unavailable,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-mark-as-unavailable,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-unselectable-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-unselectable-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-earlier-min-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-earlier-min-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-later-max-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-later-max-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-earlier-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-earlier-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-not-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-not-check-in-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-not-check-out-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-not-check-out-date {
background: var(--mphbc-blocked-bg) !important;
background-image: none !important;
color: var(--mphbc-blocked-fg) !important;
border: 0 !important;
opacity: 1 !important;
cursor: not-allowed !important;
text-decoration: none !important;
}
/* Extra / other-month filler cells */
.datepick-popup .mphb-datepick-popup .datepick-month td > a.mphb-extra-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.mphb-extra-date,
.datepick-popup .mphb-datepick-popup .datepick-month td > a.datepick-other-month,
.datepick-popup .mphb-datepick-popup .datepick-month td > span.datepick-other-month {
background: var(--mphbc-extra-bg) !important;
background-image: none !important;
color: var(--mphbc-extra-fg) !important;
}
/* Today ring */
.datepick-popup .mphb-datepick-popup .datepick-month td > a.datepick-today {
box-shadow: inset 0 0 0 2px var(--mphbc-selected-bg) !important;
}
/* Nav bar */
.datepick-popup .mphb-datepick-popup .datepick-nav {
width: 100% !important;
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: var(--mphbc-header-bg) !important;
color: var(--mphbc-header-fg) !important;
border-radius: 6px !important;
padding: 4px 8px !important;
margin-bottom: 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.datepick-popup .mphb-datepick-popup .datepick-nav a {
background: transparent !important;
color: var(--mphbc-selected-bg) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
height: auto !important;
line-height: 1.4 !important;
text-decoration: none !important;
float: none !important;
width: auto !important;
}
.datepick-popup .mphb-datepick-popup .datepick-nav a:hover {
background: rgba(184, 127, 0, 0.08) !important;
}
/* Control bar (Clear / Close) */
.datepick-popup .mphb-datepick-popup .datepick-ctrl {
margin: 8px 0 0 !important;
background: transparent !important;
color: #555 !important;
font-weight: 500 !important;
font-size: 12px !important;
padding: 4px 0 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.datepick-popup .mphb-datepick-popup .datepick-ctrl a {
color: var(--mphbc-selected-bg) !important;
background: transparent !important;
padding: 2px 6px !important;
font-size: 12px !important;
}
/* Also suppress the slate-blue theme's line-through on min/max-stay dates
in both the popup and the booking-form inline calendar */
.datepick-popup .mphb-datepick-popup .datepick-month td > a,
.datepick-popup .mphb-datepick-popup .datepick-month td > span,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > a,
.mphb_sc_booking_form-wrapper .mphb-calendar .datepick-month td > span {
text-decoration: none !important;
}
/* ============================================================
* Section E — Availability calendar widget ([mphb_availability_calendar])
* Square day cells, stacked date + price, brand colors, no X overlay.
* ============================================================ */
/* Strip every background pattern on availability calendar day cells */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td a,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td span,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td a *,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td span * {
background-image: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
padding: 3px 1px !important;
border-radius: 4px !important;
font-size: var(--mphbc-cell-font-size) !important;
font-weight: 700 !important;
overflow: hidden !important;
background-image: none !important;
}
/* Kill diagonal split lines from mphb.css partial-day gradients + theme stripe overlays */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a::before,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span::before,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a[class*="mphb-date-check"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span[class*="mphb-date-check"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a[class*="mphb-mark-as-unavailable"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span[class*="mphb-mark-as-unavailable"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a[class*="mphb-out-of-season"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span[class*="mphb-out-of-season"] {
background-image: none !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td .mphb-date-cell__price {
display: block !important;
font-size: 7px !important;
font-weight: 500 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: 100% !important;
letter-spacing: -0.02em !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td .mphb-date-cell__price span {
display: inline !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
}
/* Remove the stretched red X overlay — use solid black/white blocked cells instead */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-past-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-past-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-booked-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-booked-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-not-available-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-not-available-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-unselectable-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-unselectable-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-earlier-min-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-earlier-min-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-later-max-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-later-max-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-earlier-check-in-date::after,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-earlier-check-in-date::after {
content: none !important;
display: none !important;
background: none !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-past-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-past-date {
opacity: 0.55 !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick {
border-radius: 10px !important;
padding: 10px !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-header {
background: #efab03 !important;
color: #ffffff !important;
border-radius: 6px !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month-header select {
color: #ffffff !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-nav {
background: #f7f7f7 !important;
color: #1a1a1a !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-nav a {
color: #efab03 !important;
}
/* Flatten gradient/partial-day styles — solid yellow or black only */
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a[class*="mphb-out-of-season"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span[class*="mphb-out-of-season"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-not-stay-in-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-not-stay-in-date {
background: var(--mphbc-blocked-bg) !important;
background-image: none !important;
color: var(--mphbc-blocked-fg) !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-available-date,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date[class*="mphb-mark-as-unavailable"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-available-date[class*="mphb-mark-as-unavailable"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-available-date[class*="mphb-date-check"],
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-available-date[class*="mphb-date-check"] {
background: var(--mphbc-available-bg) !important;
background-image: none !important;
color: var(--mphbc-available-fg) !important;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable--check-in,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable--check-in,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > a.mphb-mark-as-unavailable--check-out,
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td > span.mphb-mark-as-unavailable--check-out {
background: var(--mphbc-blocked-bg) !important;
background-image: none !important;
color: var(--mphbc-blocked-fg) !important;
}
@media (max-width: 480px) {
.mphb_sc_availability_calendar-wrapper {
--mphbc-cell-font-size: 13px;
--mphbc-cell-gap: 2px;
}
.mphb_sc_availability_calendar-wrapper .mphb-calendar .datepick-month td .mphb-date-cell__price {
font-size: 6px !important;
}
}
|