/*
* WK Booking — frontend styles for the inline availability calendar.
*
* Scoped under .wk-booking so theme styles win where reasonable. Uses CSS
* custom properties for the accent so the booking module can be re-themed
* without touching this file.
*/
.wk-booking {
--wk-accent: #5e7d51;
--wk-accent-strong: #46603c;
--wk-text: #232323;
--wk-muted: #8a8a8a;
--wk-day-bg: #ffffff;
--wk-day-border: #e7e4dc;
--wk-day-hover-bg: rgba(94, 125, 81, 0.12); /* legacy fallback */
--wk-day-hover-bg: color-mix(in srgb, var(--wk-accent) 12%, transparent);
--wk-day-booked-bg: #ededed;
--wk-day-booked-fg: #b3b3b3;
--wk-skeleton-bg: #efece6;
--wk-radius: 10px;
--wk-radius-pill: 999px;
color: var(--wk-text);
font-family: inherit;
margin: 1.5rem 0;
max-width: 760px;
}
/* The modal and dropdown are portaled to at runtime to escape
* Elementor / page-builder stacking contexts. They keep the `wk-booking`
* class so the existing `.wk-booking .flatpickr-*` rules still match
* descendants and the CSS variables above resolve. The `--portal`
* modifier neutralises layout properties from `.wk-booking` that were
* scoped to the in-flow card (max-width caps the modal off-center,
* margin pushes the dropdown around). */
.wk-booking.wk-booking--portal {
margin: 0;
max-width: none;
}
.wk-booking__header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 0.75rem;
}
.wk-booking__name {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
.wk-booking__from {
margin: 0;
color: var(--wk-muted);
font-size: 1rem;
min-height: 1.4em;
}
.wk-booking__from strong {
color: var(--wk-text);
font-weight: 700;
}
.wk-booking__from-skel {
display: inline-block;
width: 9em;
height: 1em;
vertical-align: middle;
background: var(--wk-skeleton-bg);
border-radius: var(--wk-radius-pill);
animation: wk-booking-pulse 1.6s ease-in-out infinite;
}
.wk-booking__calendar {
position: relative;
min-height: 320px;
/* Tiny horizontal breathing room. Day cells use flex-basis: calc(100% / 7);
* with the 1px border + sub-pixel rounding the rightmost (Sunday) column
* can land 1–2px past the container content edge, and on hover the
* cell scales by 4% (~2px each side). Without this padding both end up
* visually clipped. 4px is enough to absorb both — auto-width block,
* so it doesn't widen the calendar past its parent's max-width. */
padding: 0 4px;
}
.wk-booking__skeleton {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.wk-booking__skeleton {
grid-template-columns: 1fr 1fr;
}
}
.wk-booking__skeleton-month {
height: 280px;
border-radius: var(--wk-radius);
background: var(--wk-skeleton-bg);
animation: wk-booking-pulse 1.6s ease-in-out infinite;
}
@keyframes wk-booking-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.wk-booking__status {
text-align: center;
margin: 0.75rem 0 0;
color: var(--wk-muted);
font-size: 0.95rem;
}
.wk-booking[data-wk-state="ready"] .wk-booking__skeleton,
.wk-booking[data-wk-state="ready"] .wk-booking__status,
.wk-booking[data-wk-state="ready"] .wk-booking__from-skel {
display: none;
}
.wk-booking[data-wk-state="error"] .wk-booking__skeleton,
.wk-booking[data-wk-state="error"] .wk-booking__from-skel {
display: none;
}
/* ---------- Defensive form-element reset (Elementor / page builders) ----------
*
* Elementor's kit-class rule paints every on the site:
*
* .elementor-kit-NNNN input:not([type="button"]):not([type="submit"]),
* .elementor-kit-NNNN textarea,
* .elementor-kit-NNNN .elementor-field-textual {
* background-color: #EFEFEF;
* padding: 16px 25px;
* ...
* }
*
* That rule's specificity is (0,3,1), matching ours. Worse: it hits
* Flatpickr's INTERNAL inputs — the .cur-year field in the month header
* (showing as a grey bar with cropped year), and the anchor .flatpickr-input
* (which becomes visible if a theme forces display on inputs). Identical
* traps exist in other page builders (Divi, Beaver, GeneratePress kits).
*
* Reset every input within our widget back to a neutral state. !important is
* justified here as a tightly scoped widget-internal defence — site-level
* accent customisation still flows through the CSS variables above. */
.wk-booking input,
.wk-booking input.cur-year,
.wk-booking input.flatpickr-input,
.wk-booking input.flatpickr-mobile {
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--wk-text) !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
}
/* Flatpickr's anchor input is created by us as so the
* UA stylesheet hides it; but a theme that does `input { display: block }`
* would force it back into the layout. Same for the rare .flatpickr-mobile
* input (only used for native pickers in popover mode, but defensive). */
.wk-booking input.flatpickr-input,
.wk-booking input.flatpickr-mobile {
display: none !important;
}
/* ---------- Flatpickr inline calendar overrides ---------- */
.wk-booking .flatpickr-calendar {
box-shadow: none;
background: transparent;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
.wk-booking .flatpickr-calendar.inline {
display: block;
position: static;
}
/* ---------- Month-nav row ----------
*
* Defensive transparency: a host theme's input/nav/header styling tends to
* bleed into the Flatpickr month strip and paint the prev/next bar grey.
* !important here is intentional and tightly scoped — we are explicitly
* overriding theme rules inside our own widget. Hover/focus colours below
* deliberately re-apply the accent tint without !important so site-level
* accent overrides via CSS variables still work.
*
* monthSelectorType: 'static' (set in booking.js) replaces the default
*