/* Calendar Theme Variables - fallback values, overridden by widget options via inline <style> */
:root,
:host {
    --calendar-available-bg: #e4f4d9;
    --calendar-available-hover: #b7db9f;
    --calendar-unavailable-bg: #fdd2d2;
    --calendar-unavailable-text: #881616;
    --calendar-disabled-bg: #eeeeee;
    --calendar-disabled-text: #292929;
    --calendar-nav-hover-bg: #f8f8f8;
    --calendar-border-color: #efefef;
}

.dark {
    --calendar-available-bg: #3a4d2c;
    --calendar-available-hover: #4a6136;
    --calendar-unavailable-bg: #4d2c2c;
    --calendar-unavailable-text: #ff6b6b;
    --calendar-disabled-bg: #2a2a2a;
    --calendar-disabled-text: #9ca3af;
    --calendar-nav-hover-bg: #374151;
    --calendar-border-color: #4b5563;
}

.custom-calendar-container {
    font-family: sans-serif;
    position: relative;
    user-select: none;
    max-width: 1000px;
}

/* ============================================================ */
/* Header: discount offer + local time                           */
/* (matches WP plugin availability-calendar.css)                 */
/* ============================================================ */
.calendar-header-info {
    margin-bottom: 10px;
}

.discount-text-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
}

.discount-text-container .discount-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.discount-text-container .discount-icon svg {
    fill: #333;
}

.discount-text-container .discount-text {
    color: #333;
    margin-left: 5px;
    text-align: center;
    line-height: 24px;
}

/* Local time: rendered after the footer legend (#997), styled to match the
   footer's muted lines. Flex gap supplies the label/value spacing so it never
   depends on a trailing space in the stored translation. */
.local-time {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Dark theme (#691): the header banner and footer text are hardcoded
   #333/#666 for WP-plugin parity in light mode; flip them via the host theme
   marker (shadow mounts) or the .dark wrapper (booking-modal embeds). */
/* The .homelocal-prefixed variants below out-specify the later
   `.homelocal-availability-calendar-container .discount-text-container …`
   light rules (#333), which tie with or beat the bare `.dark` descendant
   forms. */
:host([data-hr-theme="dark"]) .discount-text-container .discount-text,
:host([data-hr-theme="dark"]) .calendar-footer-info,
:host([data-hr-theme="dark"]) .footer-legend-item,
.dark .discount-text-container .discount-text,
.dark .homelocal-availability-calendar-container .discount-text-container .discount-text,
.dark .calendar-footer-info,
.dark .footer-legend-item {
    color: var(--foreground, #fff);
}

:host([data-hr-theme="dark"]) .discount-text-container .discount-icon svg,
.dark .discount-text-container .discount-icon svg,
.dark .homelocal-availability-calendar-container .discount-text-container .discount-icon svg {
    fill: var(--foreground, #fff);
}

:host([data-hr-theme="dark"]) .footer-taxes-note,
.dark .footer-taxes-note,
:host([data-hr-theme="dark"]) .local-time,
.dark .local-time,
.dark .homelocal-availability-calendar-container .local-time {
    color: var(--muted-foreground, #b1b1b1);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Calendar body: wraps nav buttons + months slider */
.calendar-body {
    position: relative;
    isolation: isolate;
}

.nav-button {
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 7px;
    z-index: 1;
    border: 1px solid #999;
    background-color: transparent;
    color: #999;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-button:hover:not(:disabled) {
    color: #333;
    border-color: #333;
}

.month-header {
    text-align: center;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 12px;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 20px;
    border-bottom: 1px solid var(--calendar-border-color);
}

.weekday {
    padding: 8px 0;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1px;
    width: 100%;
}

/* #1548: the a11y tree needs `role="row"` between the grid and its cells, so
   each week is wrapped in a `display: contents` div — it generates no box, the
   42 day cells stay direct grid participants, and the layout is unchanged. The
   sizing rule has to reach through that wrapper as well as the flat form. */
.days-grid>.days-row {
    display: contents;
}

.days-grid>div,
.days-grid>.days-row>div {
    aspect-ratio: 1;
    min-height: 0;
}

/* The roving tabstop has to be visible when it is reached by keyboard. Scoped
   to :focus-visible so a click on a day never paints a ring. */
.days-grid .day-of-month:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
    border-radius: 2px;
}

.day.day-of-month {
    position: relative;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.day-of-month .date {
    position: relative;
    z-index: 1;
    font-size: min(0.9rem, 3vw);
    font-weight: 700;
    color: hsl(var(--foreground));
}

.day-of-month .price {
    position: relative;
    z-index: 1;
    font-size: min(0.75rem, 3vw);
    color: hsl(var(--muted-foreground));
}

.day-of-month.unavailable .price,
.day-of-month.disabled:not(.minstay-blocked) .price,
.day-of-month.checkin-blocked .price {
    display: none;
}

/* MIN-STAY WINDOW (#625): dates between the selected check-in and the earliest valid
   check-out. They stay grayed + not-allowed (the legend's "Restricted Dates Such As
   Minimum Stays"), but they ARE priced dates — keep the price visible so guests still
   see the nightly rate. The `.disabled .price` color rule above still applies. */

/* ============================================================================ */
/* DATE TYPE CSS - Using --hr_cal-* variables & WP-compatible class names      */
/* ============================================================================ */

/* UNAVAILABLE - Dates that don't exist in price data or are in the past */
.day-of-month.unavailable {
    background-color: var(--hr_cal-bg_unavailable);
}

.day-of-month.unavailable .date {
    font-weight: 600;
    color: var(--hr_cal-color_unavailable);
}

.day-of-month.unavailable .price {
    color: var(--hr_cal-price_color_unavailable);
}

/* DISABLED - Dates outside valid selection range after user selects start date */
.day-of-month.disabled {
    background-color: var(--hr_cal-bg_disabled);
    color: var(--hr_cal-color_disabled);
    cursor: not-allowed;
}

.day-of-month.disabled .date {
    color: var(--hr_cal-color_disabled);
}

.day-of-month.disabled .price {
    color: var(--hr_cal-price_color_disabled);
}

/* Diagonal strikethrough line on unavailable/disabled dates */
.day-of-month.disabled::after,
.day-of-month.unavailable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* SELECTABLE - Fully available dates (checkin + checkout + stay) */
.day-of-month.selectable {
    background-color: var(--hr_cal-bg_selectable);
}

.day-of-month.selectable .date {
    color: var(--hr_cal-color_selectable);
}

.day-of-month.selectable .price {
    color: var(--hr_cal-price_color_selectable);
}

/* CHECKIN-AVAILABLE (text colors for checkin-only days) */
.day-of-month.checkin-available:not(.checkout-available) .date {
    color: var(--hr_cal-color_checkin-available, var(--hr_cal-color_selectable));
}

.day-of-month.checkin-available:not(.checkout-available) .price {
    color: var(--hr_cal-price_color_checkin-available, var(--hr_cal-price_color_selectable));
}

/* CHECKOUT-AVAILABLE (text colors for checkout-only days) */
.day-of-month.checkout-available:not(.checkin-available) .date {
    color: var(--hr_cal-color_checkout-available, var(--hr_cal-color_selectable));
}

.day-of-month.checkout-available:not(.checkin-available) .price {
    color: var(--hr_cal-price_color_checkout-available, var(--hr_cal-price_color_selectable));
}

/* BLOCKED - Dates where check-in or check-out is not allowed */
.day-of-month.checkin-blocked {
    background-color: var(--hr_cal-bg_checkin-blocked);
}

.day-of-month.checkin-blocked .date {
    color: var(--hr_cal-color_checkin-blocked);
}

.day-of-month.checkin-blocked .price {
    color: var(--hr_cal-price_color_checkin-blocked);
}

.day-of-month.checkout-blocked {
    background-color: var(--hr_cal-bg_checkout-blocked);
}

.day-of-month.checkout-blocked .date {
    color: var(--hr_cal-color_checkout-blocked);
}

.day-of-month.checkout-blocked .price {
    color: var(--hr_cal-price_color_checkout-blocked);
}

/* BOOKED - Dates where check-in or check-out is booked */
.day-of-month.checkin-booked {
    background-color: var(--hr_cal-bg_checkin-booked);
}

.day-of-month.checkin-booked .date {
    color: var(--hr_cal-color_checkin-booked);
}

.day-of-month.checkin-booked .price {
    color: var(--hr_cal-price_color_checkin-booked);
}

.day-of-month.checkout-booked {
    background-color: var(--hr_cal-bg_checkout-booked);
}

.day-of-month.checkout-booked .date {
    color: var(--hr_cal-color_checkout-booked);
}

.day-of-month.checkout-booked .price {
    color: var(--hr_cal-price_color_checkout-booked);
}

/* TRAPPED - Both check-in and check-out are blocked */
.day-of-month.trapped {
    background-color: var(--hr_cal-bg_trapped);
}

.day-of-month.trapped .date {
    color: var(--hr_cal-color_trapped);
}

.day-of-month.trapped .price {
    color: var(--hr_cal-price_color_trapped);
}

/* PASSTHROUGH - Dates guests pass through but cannot check-in/check-out on */
.day-of-month.pass-through {
    background-color: var(--hr_cal-bg_pass-through);
}

.day-of-month.pass-through .date {
    color: var(--hr_cal-color_pass-through);
}

.day-of-month.pass-through .price {
    color: var(--hr_cal-price_color_pass-through);
}

/* SELECTED - Dates part of user's current date range selection */
.day-of-month.selected {
    background-color: var(--hr_cal-bg_selected);
}

.day-of-month.selected .date {
    color: var(--hr_cal-color_selected);
}

.day-of-month.selected .price {
    color: var(--hr_cal-price_color_selected);
}

.day-of-month.checkin {
    background-color: var(--hr_cal-bg_checkin);
}

.day-of-month.checkin .date {
    color: var(--hr_cal-color_checkin);
}

.day-of-month.checkin .price {
    color: var(--hr_cal-price_color_checkin);
}

.day-of-month.checkout {
    background-color: var(--hr_cal-bg_checkout);
}

.day-of-month.checkout .date {
    color: var(--hr_cal-color_checkout);
}

.day-of-month.checkout .price {
    color: var(--hr_cal-price_color_checkout);
}

/* HOVERED - Preview state when hovering over potential checkout dates */
.day-of-month.hover {
    background-color: var(--hr_cal-bg_hovered);
}

.day-of-month.hover .date {
    color: var(--hr_cal-color_hovered);
}

.day-of-month.hover .price {
    color: var(--hr_cal-price_color_hovered);
}

/* ============================================================================ */
/* END OF DATE TYPE CSS                                                         */
/* ============================================================================ */

/* Checkin-only diagonal: unavailable top-left, available bottom-right */
.day-of-month.checkin-available:not(.checkout-available)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right bottom, var(--hr_cal-bg_unavailable) 49.9%, var(--hr_cal-bg_selectable) 50.1%);
}

/* Checkout-only diagonal: available top-left, unavailable bottom-right */
.day-of-month.checkout-available:not(.checkin-available)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right bottom, var(--hr_cal-bg_selectable) 49.9%, var(--hr_cal-bg_unavailable) 50.1%);
}

/* Selected range end on checkout-only */
.day-of-month.range-end.checkout-available:not(.checkin-available)::before {
    background: linear-gradient(to right bottom, var(--hr_cal-bg_selected) 49.9%, var(--hr_cal-bg_unavailable) 50.1%);
}

/* Selected range end on fully selectable */
.day-of-month.range-end.selectable {
    background: linear-gradient(to right bottom, var(--hr_cal-bg_selected) 49.9%, var(--hr_cal-bg_selectable) 50.1%);
}

/* Selected range start on checkin-only */
.day-of-month.range-start.checkin-available:not(.checkout-available)::before {
    background: linear-gradient(to right bottom, var(--hr_cal-bg_unavailable) 49.9%, var(--hr_cal-bg_selected) 50.1%);
}

/* Ensure text is above diagonal pseudo-elements */
.day-of-month.checkin-available:not(.checkout-available) *,
.day-of-month.checkout-available:not(.checkin-available) * {
    position: relative;
    z-index: 1;
}

.tooltip {
    width: 200px;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s,
        visibility 0.2s;
    z-index: 1000;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid hsl(var(--border));
}

.tooltip:after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: hsl(var(--popover));
    border-right: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
}

.day-of-month:hover .tooltip {
    opacity: 100;
    visibility: visible;
}

.day-of-month.hover {
    background-color: var(--hr_cal-bg_hovered) !important;
}

.day-of-month.hover-range-end {
    position: relative;
    isolation: isolate;
}

.day-of-month.hover-range-end::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right bottom, var(--hr_cal-bg_hovered) 49.9%, transparent 50.1%);
    z-index: -9999;
}

.day-of-month.checkout-available:not(.checkin-available).hover-range-end::before {
    background: linear-gradient(to right bottom, var(--hr_cal-bg_hovered) 49.9%, var(--hr_cal-bg_unavailable) 50.1%);
    z-index: -9999;
}

.day-of-month.range-middle {
    background: var(--hr_cal-bg_selected);
}

.day-of-month.range-start {
    background: linear-gradient(to right bottom, var(--hr_cal-bg_selectable) 49.9%, var(--hr_cal-bg_selected) 50.1%);
}

/* Slider: all months rendered upfront, CSS transform slides the view */
.months-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    cursor: grab;
}

.months-container:active {
    cursor: grabbing;
}

.slider-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    transform: translateX(calc(var(--month-offset, 0) * -50%));
}

.slider-track>.month {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 0 12px;
}

@media (max-width: 639px) {
    .slider-track {
        transform: translateX(calc(var(--month-offset, 0) * -100%));
    }

    .slider-track>.month {
        flex: 0 0 100%;
    }
}



/* ============================================================ */
/* External CSS */
/* ============================================================ */

.homelocal-tip {
    top: 0;
    left: 0;
    z-index: 9999990;
    display: none;
    max-width: 200px;
    position: absolute;
    /* The tip renders OVER the calendar row above the hovered cell, so while it
       is up those dates are unreachable — it swallowed their hover and clicks.
       Let the pointer through the chrome; only the action button below opts
       back in.
       The tip's React onPointerEnter/onPointerLeave still fire, but ONLY for
       the button — not, as an earlier comment here claimed, because
       `pointerenter` bubbles (it does not). Enter/leave are dispatched to every
       ancestor of the hit target, and React synthesises its handlers from the
       delegated `pointerover`/`pointerout` pair, which do bubble. Anywhere else
       on the tip the hit target is the day cell BEHIND it, which is why leaving
       the button has to arm the same grace a day cell does (#1531) instead of
       hiding outright. */
    pointer-events: none;
}

/* A tip carrying a one-tap stay suggestion holds a full date range, not a short
   sentence — 200px is what made the button label overflow. This is what the
   `tip-actionable` marker (set in CalendarGrid when a suggestion exists) is for;
   it had no rule anywhere until now. */
.tip-actionable {
    max-width: 260px;
}

.homelocal-tip .tip-content {
    padding: 10px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    background-color: #333;
}

/* Actionable tip (#1071): one-tap nearest-valid-stay button under the reason. */
.homelocal-tip .tip-apply-btn {
    /* The one part of the tip that must catch the pointer — see .homelocal-tip. */
    pointer-events: auto;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    /* The label is a full date range — "Select Dec 30, 2026 – Jan 2, 2027 · 3
       nights" is ~290px against the tip's 200px max-width, and longer in
       de-DE. With `nowrap` and no overflow handling it painted outside both the
       button and the tip. Wrap instead of clipping: the whole string is the
       affordance, an ellipsis would hide the dates it exists to show. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.homelocal-tip .tip-apply-btn:hover {
    background-color: #eee;
}

.homelocal-tip .tip-arrow {
    left: 50%;
    width: 16px;
    height: 16px;
    color: #333;
    margin-left: -8px;
    position: absolute;
}

.homelocal-tip .tip-arrow::before {
    left: 0;
    content: " ";
    position: absolute;
    border-color: transparent;
    border-top-color: transparent;
    border-style: solid;
}

.homelocal-tip[data-placement^=top] .tip-arrow {
    bottom: 0px;
}

.homelocal-tip[data-placement^=top] .tip-arrow::before {
    bottom: -8px;
    border-width: 8px 8px 0;
    border-bottom-color: initial;
    transform-origin: center top;
    border-top-color: #333;
}

.homelocal-tip[data-placement^=bottom] .tip-arrow {
    top: 0px;
}

.homelocal-tip[data-placement^=bottom] .tip-arrow::before {
    top: -8px;
    border-width: 0 8px 8px;
    border-top-color: initial;
    transform-origin: center bottom;
    border-bottom-color: #333;
}

.homelocal-availability-calendar-container .local-time {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    margin-bottom: 0;
}

.homelocal-availability-calendar-container .discount-text-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
}

.homelocal-availability-calendar-container .discount-text-container .discount-icon {
    width: 24px;
    height: 24px;
}

.homelocal-availability-calendar-container .discount-text-container .discount-icon svg {
    fill: #333;
}

.homelocal-availability-calendar-container .discount-text-container .discount-text {
    color: #333;
    margin-left: 5px;
    text-align: center;
    line-height: 24px;
}

.homelocal-availability-calendar {
    --homelocal-availability-calendar-color_selectable: #333;
    --homelocal-availability-calendar-bg_selectable: #e4f4d9;
    --homelocal-availability-calendar-price_color_selectable: #666;
    --homelocal-availability-calendar-color_passthrough: #999;
    --homelocal-availability-calendar-bg_passthrough: #eee;
    --homelocal-availability-calendar-price_color_passthrough: #999;
    --homelocal-availability-calendar-color_selected: #333;
    --homelocal-availability-calendar-bg_selected: #b7db9f;
    --homelocal-availability-calendar-price_color_selected: #666;
    --homelocal-availability-calendar-color_blocked: #999;
    --homelocal-availability-calendar-bg_blocked: #eee;
    --homelocal-availability-calendar-color_booked: #881616;
    --homelocal-availability-calendar-bg_booked: #fdd2d2;
    --homelocal-availability-calendar-color_disabled: #999;
    --homelocal-availability-calendar-bg_disabled: #eee;
    --homelocal-availability-calendar-color_unavailable: #999;
    --homelocal-availability-calendar-bg_unavailable: #eee;
    position: relative;
}

.homelocal-availability-calendar .next-btn,
.homelocal-availability-calendar .prev-btn {
    top: 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    color: #000;
    line-height: 1;
    position: absolute;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #ddd;
    background-color: #fff;
}

.homelocal-availability-calendar .next-btn:disabled,
.homelocal-availability-calendar .prev-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.homelocal-availability-calendar .next-btn:not(:disabled):hover,
.homelocal-availability-calendar .prev-btn:not(:disabled):hover {
    cursor: pointer;
    border-color: #aaa;
    background-color: #eee;
}

.homelocal-availability-calendar .next-btn {
    right: 5px;
}

.homelocal-availability-calendar .prev-btn {
    left: 5px;
}

.homelocal-availability-calendar .calendars .calendar {
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
}

.no-uikit>.homelocal-availability-calendar {
    overflow: hidden;
}

.no-uikit>.homelocal-availability-calendar .calendars {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -40px;
    will-change: transform;
    position: relative;
    touch-action: pan-y;
}

.no-uikit>.homelocal-availability-calendar .calendar {
    width: 100%;
    min-width: 100%;
    padding-left: 40px;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .no-uikit>.homelocal-availability-calendar .calendar {
        width: 50%;
        min-width: 50%;
    }
}

.homelocal-availability-calendar .calendar-heading {
    color: #000;
    padding: 10px 0;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    user-select: none;
}

.homelocal-availability-calendar .calendar-table {
    z-index: 2;
    position: relative;
}

.homelocal-availability-calendar .calendar-table .week-days,
.homelocal-availability-calendar .calendar-table .week {
    display: flex;
    flex-wrap: wrap;
}

.homelocal-availability-calendar .calendar-table .week-days>*,
.homelocal-availability-calendar .calendar-table .week>* {
    width: 14.2857142857%;
}

.homelocal-availability-calendar .week .day {
    min-height: 30px;
    line-height: 30px;
    position: relative;
}

.homelocal-availability-calendar .week .day.day-of-month {
    user-select: none;
    overflow: hidden;
    text-align: center;
    box-shadow: 1px 1px 0 0 #fff inset;
    color: var(--homelocal-availability-calendar-color_selectable);
}

.homelocal-availability-calendar .week .day.day-of-month::before,
.homelocal-availability-calendar .week .day.day-of-month::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    content: "";
    position: absolute;
}

.homelocal-availability-calendar .week .day.day-of-month::before,
.homelocal-availability-calendar .week .day.day-of-month::after {
    background-color: var(--homelocal-availability-calendar-bg_selectable);
}

.homelocal-availability-calendar .week .day.day-of-month:after {
    width: 100%;
    padding-bottom: calc(100% + 1px);
    transform: skewX(-45deg);
    transform-origin: 0 100%;
}

.homelocal-availability-calendar .week .day.day-of-month .date {
    z-index: 5;
    display: block;
    position: relative;
}

.homelocal-availability-calendar .week .day.day-of-month .price {
    left: 0;
    right: 0;
    top: 50%;
    z-index: 5;
    color: var(--homelocal-availability-calendar-price_color_selectable);
    display: block;
    line-height: 1;
    font-size: 11px;
    margin-top: 8px;
    position: absolute;
}

.homelocal-availability-calendar .week .day.day-of-month.checkin.selected .date,
.homelocal-availability-calendar .week .day.day-of-month.checkout.selected .date {
    font-weight: 600;
}

.homelocal-availability-calendar .week .day.day-of-month.selectable-last .price {
    display: none;
}

.homelocal-availability-calendar .week .day.day-of-month.disabled,
.homelocal-availability-calendar .week .day.day-of-month.unavailable {
    color: var(--homelocal-availability-calendar-color_unavailable);
}

.homelocal-availability-calendar .week .day.day-of-month.disabled .price,
.homelocal-availability-calendar .week .day.day-of-month.unavailable .price {
    display: none;
}

.homelocal-availability-calendar .week .day.day-of-month.disabled::before,
.homelocal-availability-calendar .week .day.day-of-month.unavailable::before {
    background-color: var(--homelocal-availability-calendar-bg_unavailable);
}

.homelocal-availability-calendar .week .day.day-of-month.disabled::after,
.homelocal-availability-calendar .week .day.day-of-month.unavailable::after {
    transform: none;
    transform-origin: 0 0;
    padding-bottom: 0;
    background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.selectable):not(.disabled):not(.selected).booked {
    color: var(--homelocal-availability-calendar-color_booked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.selectable):not(.disabled):not(.selected).booked .price {
    display: none;
}

.homelocal-availability-calendar .week .day.day-of-month:not(.selectable):not(.disabled):not(.selected).booked::before,
.homelocal-availability-calendar .week .day.day-of-month:not(.selectable):not(.disabled):not(.selected).booked::after {
    background-color: var(--homelocal-availability-calendar-bg_booked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through,
.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through-temp {
    color: var(--homelocal-availability-calendar-color_passthrough);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through .price,
.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through-temp .price {
    color: var(--homelocal-availability-calendar-price_color_passthrough);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through::before,
.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through::after,
.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through-temp::before,
.homelocal-availability-calendar .week .day.day-of-month:not(.disabled):not(.selected).pass-through-temp::after {
    background-color: var(--homelocal-availability-calendar-bg_passthrough);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkout-available:not(.checkin-available):before {
    background-color: var(--homelocal-availability-calendar-bg_selectable);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-blocked+.checkout-blocked:not(.disabled):not(.pass-through):not(.pass-through-temp):before {
    background-color: var(--homelocal-availability-calendar-bg_blocked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkout-blocked:not(.pass-through):not(.pass-through-temp):not(.checkin-available):before {
    background-color: var(--homelocal-availability-calendar-bg_blocked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkout-booked:before {
    background-color: var(--homelocal-availability-calendar-bg_booked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-available:after {
    background-color: var(--homelocal-availability-calendar-bg_selectable);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-blocked:not(.pass-through):not(.pass-through-temp):not(.selectable) {
    color: var(--homelocal-availability-calendar-color_blocked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-blocked:not(.pass-through):not(.pass-through-temp):not(.selectable):after {
    background-color: var(--homelocal-availability-calendar-bg_blocked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-blocked:not(.pass-through):not(.pass-through-temp):not(.selectable) .price {
    display: none;
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-booked {
    color: var(--homelocal-availability-calendar-color_booked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-booked:after {
    background-color: var(--homelocal-availability-calendar-bg_booked);
}

.homelocal-availability-calendar .week .day.day-of-month:not(.disabled).checkin-booked .price {
    display: none;
}

.homelocal-availability-calendar .week .day:not(.checkin-booked):not(.checkin-blocked):not(.unavailable):not(.disabled):not(.pass-through):not(.pass-through-temp) .date,
.homelocal-availability-calendar .week .day.selectable:not(.pass-through):not(.pass-through-temp) .date,
.homelocal-availability-calendar .week .day.selected .date {
    font-weight: 600;
}

.homelocal-availability-calendar .week .day.selectable .date {
    color: var(--homelocal-availability-calendar-color_selectable);
}

.homelocal-availability-calendar .week-days {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddddde;
}

.homelocal-availability-calendar .week-days .day-name {
    user-select: none;
    color: #555;
    font-weight: 600;
    text-align: center;
    padding: 20px 0 10px;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).day-of-month:hover {
    cursor: pointer;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).selected,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).hover {
    color: var(--homelocal-availability-calendar-color_selected) !important;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).selected .date,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).hover .date {
    font-weight: 600;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).selected .price,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).hover .price {
    color: var(--homelocal-availability-calendar-price_color_selected) !important;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).selected:not(.checkin)::before,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).selected:not(.checkout)::after,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).hover:not(.checkin)::before,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).hover:not(.checkout)::after {
    background: var(--homelocal-availability-calendar-bg_selected) !important;
}

.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).disabled:hover,
.homelocal-availability-calendar-container.calendar-picker .week .day:not(.disabled).booked:hover {
    cursor: not-allowed;
}

.homelocal-availability-calendar-container.calendar-picker.checkin-selected .week .day.day-of-month.checkin::before,
.homelocal-availability-calendar-container.calendar-picker.checkin-selected .week .day.day-of-month.selectable-last::after {
    background: var(--homelocal-availability-calendar-bg_disabled);
}

@media (max-width: 639px) {
    .homelocal-availability-calendar-modal {
        width: 100%;
        padding: 0 !important;
        z-index: 999999 !important;
    }

    .homelocal-availability-calendar-modal>.hk-modal-dialog {
        height: 100%;
        width: 100%;
        max-width: 100% !important;
    }

    .homelocal-availability-calendar-modal .next-btn,
    .homelocal-availability-calendar-modal .prev-btn {
        display: none;
    }
}

/* #1229: the loader is now a structural mirror of the real grid — it carries
   `.homelocal-availability-calendar-container` and the same month/footer
   wrappers, so the rules above already size it and it reserves the grid's exact
   height. The class is a marker only. The old block here (display:flex,
   margin-left:-30px, `.calendar` children at 50%) belonged to the free-form
   skeleton and actively fought the mirrored layout: it turned the container into
   a ROW flexbox, which collapsed `.calendar-body` to 328px, halved the square day
   cells and left the reservation 198px short. */

.day {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================================ */
/* Today marker */
/* ============================================================ */
.day-of-month.today .date {
    position: relative;
}

.day-of-month.today .date::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
    margin: 2px auto 0;
}

/* ============================================================ */
/* Skeleton loading animation */
/* ============================================================ */
.skeleton-pulse {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.dark .skeleton-pulse {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================================ */
/* Responsive: single month on mobile */
/* ============================================================ */
@media (max-width: 639px) {
    .months-container {
        grid-template-columns: 1fr !important;
    }

    /* #1229: the loader now mirrors the real container — its two months live in
       the same clipped `.slider-track`, so the second one is already off-screen
       below 640px (`flex: 0 0 100%`). No `.calendar` wrapper left to hide. */
}

/* ============================================================ */
/* Calendar heading (matches WP plugin) */
/* ============================================================ */
.calendar-heading {
    color: inherit;
    padding: 10px 0;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    user-select: none;
}

/* ============================================================ */
/* Footer info: instructions bar + color legend                  */
/* (matches WP plugin templates/property/calendar.php)           */
/* ============================================================ */
.calendar-footer-info {
    margin-top: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
}

/* Instructions bar: taxes note | swipe icon | clear dates */
.footer-instructions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.footer-taxes-note {
    font-size: 13px;
    color: #666;
}

.footer-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hr_cal-accent, #3b82f6);
    background: none;
    border: 1px solid var(--hr_cal-accent, #3b82f6);
    border-radius: 4px;
    cursor: pointer;
    /* The label is a full date range — "Select Dec 30, 2026 – Jan 2, 2027 · 3
       nights" is ~290px against the tip's 200px max-width, and longer in
       de-DE. With `nowrap` and no overflow handling it painted outside both the
       button and the tip. Wrap instead of clipping: the whole string is the
       affordance, an ellipsis would hide the dates it exists to show. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.footer-clear-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--hr_cal-accent, #3b82f6) 8%, transparent);
}

.footer-clear-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Color legend */
.footer-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #333;
}

.footer-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-legend-swatch--available {
    background-color: var(--hr_cal-bg_selectable);
}

.footer-legend-swatch--booked {
    background-color: var(--hr_cal-bg_checkin-booked, var(--hr_cal-bg_booked, #fdd2d2));
}

.footer-legend-swatch--unavailable {
    background-color: var(--hr_cal-bg_unavailable);
}
/* ----------------------------------------------------------------------------
 * Section heading (shared across content widgets)
 * Bold title on the left + horizontal divider line filling remaining width.
 * -------------------------------------------------------------------------- */

.hr-widget-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.hr-widget-section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

.hr-widget-section-line {
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 0.18;
  display: block;
}

@media (max-width: 640px) {
  .hr-widget-section-title { font-size: 1.25rem; }
  .hr-widget-section { gap: 1rem; margin-bottom: 1.5rem; }
}

/* ============================================================ */
/* Forced months-per-view (overrides responsive default)        */
/* ============================================================ */
.months-container.months-per-view-single .slider-track {
    transform: translateX(calc(var(--month-offset, 0) * -100%));
}

.months-container.months-per-view-single .slider-track>.month {
    flex: 0 0 100%;
}

.months-container.months-per-view-double .slider-track {
    transform: translateX(calc(var(--month-offset, 0) * -50%));
}

.months-container.months-per-view-double .slider-track>.month {
    flex: 0 0 50%;
}

/* ============================================================ */
/* Modal display mode                                            */
/* ============================================================ */
.hr-calendar-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 16px;
}

.hr-calendar-modal {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.homerunner-calendar-container.dark .hr-calendar-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

.hr-calendar-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}

.hr-calendar-modal-close:hover {
    opacity: 1;
}

/* ----------------------------------------------------------------------------
 * Dark FIRST-PAINT (#900) — CSS mirror of the `.dark`-keyed rules above.
 *
 * The `.dark`-keyed rules above only fire once the runtime resolves the theme
 * and stamps `.dark` on the container — too late to paint dark at parse. These
 * append-only siblings reuse the EXACT same declarations (identical hex/tokens)
 * under the shadow-host markers so an `auto` widget on a dark OS paints dark AT
 * PARSE:
 *   - `:host([data-hr-theme="dark"])` — the runtime marker (explicit dark +
 *     post-hydration auto), plus the mirrored elevated host. The host marker
 *     covers the whole shadow tree, so the per-container `.dark` scoping
 *     (`.dark` on the container, `.homerunner-calendar-container.dark`)
 *     collapses to one `:host()` prefix.
 *   - inside `@media (prefers-color-scheme: dark)`,
 *     `:host([data-hr-scheme="auto"]:not([data-hr-theme]))` — a server-stamped
 *     auto widget with NO theme marker, painting dark with no JS/cookie; the
 *     `:not([data-hr-theme])` (kept INSIDE `:host(...)`) drops this block the
 *     instant the runtime stamps the marker at hydration, handing off to the
 *     `[data-hr-theme="dark"]` block above. Tokens like `--foreground` /
 *     `--muted-foreground` already flip under these same host selectors in
 *     styles/common.css.
 * The rules above are left untouched; light rendering is byte-identical.
 * The three header/footer rules (discount text, icon svg, taxes note) already
 * carry `:host([data-hr-theme="dark"])` inline, so only their `@media` auto
 * variant is added here.
 * -------------------------------------------------------------------------- */

:host([data-hr-theme="dark"]) {
    --calendar-available-bg: #3a4d2c;
    --calendar-available-hover: #4a6136;
    --calendar-unavailable-bg: #4d2c2c;
    --calendar-unavailable-text: #ff6b6b;
    --calendar-disabled-bg: #2a2a2a;
    --calendar-disabled-text: #9ca3af;
    --calendar-nav-hover-bg: #374151;
    --calendar-border-color: #4b5563;
}

:host([data-hr-theme="dark"]) .skeleton-pulse {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

:host([data-hr-theme="dark"]) .hr-calendar-modal {
    background: #1a1a1a;
    color: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
    :host([data-hr-scheme="auto"]:not([data-hr-theme])) {
        --calendar-available-bg: #3a4d2c;
        --calendar-available-hover: #4a6136;
        --calendar-unavailable-bg: #4d2c2c;
        --calendar-unavailable-text: #ff6b6b;
        --calendar-disabled-bg: #2a2a2a;
        --calendar-disabled-text: #9ca3af;
        --calendar-nav-hover-bg: #374151;
        --calendar-border-color: #4b5563;
    }

    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .discount-text-container .discount-text,
    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .calendar-footer-info,
    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .footer-legend-item {
        color: var(--foreground, #fff);
    }

    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .discount-text-container .discount-icon svg {
        fill: var(--foreground, #fff);
    }

    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .footer-taxes-note {
        color: var(--muted-foreground, #b1b1b1);
    }

    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .skeleton-pulse {
        background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }

    :host([data-hr-scheme="auto"]:not([data-hr-theme])) .hr-calendar-modal {
        background: #1a1a1a;
        color: #e0e0e0;
    }
}
/* ==========================================================================
   Booking Widget Styles
   Class names preserved from homerunner-wp-plugin/assets/js/booking-widget.js
   ========================================================================== */

/* Shared price-breakdown rows (#1064 Wave 3) — same import pattern as
   explorer.css → property-card. */

/**
 * Price Breakdown — shared styles for the row model + views in
 * common/price-breakdown/ (#1064 Wave 3). Ported from homerunner-toolkit
 * assets/css/inline-price-breakdown.css (class prefix hrtk-ipb → hr-pb).
 *
 * The breakdown renders inside three different widgets (booking sidebar,
 * checkout sidebar, confirmation card), so the component deliberately sets NO
 * font-family and NO colour: it inherits both and must read as part of its
 * host on any theme. Every hairline and tint is mixed off currentColor with
 * color-mix(in srgb, currentColor N%, transparent) — the same rule renders a
 * correct hairline on white, cream and charcoal without knowing the palette.
 * (Browsers without color-mix fall back to no border, which degrades to a
 * plain unruled list rather than a wrong-coloured one.)
 *
 * All three disclosures (accordion panel, grouped-tax cluster, per-fee
 * explanations) animate with the grid-template-rows 0fr -> 1fr technique and
 * NO JS measurement: the row model rebuilds on every quote change (dates,
 * coupon, rate-plan switch), and a measured pixel height would be stale the
 * moment it did. The WP module drove explanations with jQuery slideToggle;
 * the React port gives them the same grid treatment as the other two.
 *
 * The dashboard widgets render in a shadow root, so unlike the toolkit
 * original there is no specificity armor and no page-builder button kit to
 * outrank — single-class rules are safe.
 */

.hr-pb,
.hr-pb *,
.hr-pb *::before,
.hr-pb *::after {
	box-sizing: border-box;
}

.hr-pb {
	margin: 10px 0;
	font-size: 14px;
	line-height: 1.5;
	/* Figures must form a true column: with proportional digits a 1 is
	   narrower than a 7 and the amounts wobble row to row. */
	font-variant-numeric: tabular-nums;
}

.hr-pb-heading {
	font-weight: 700;
	margin-bottom: 6px;
}

/* ------------------------------------------------------------------ *
 * Accordion toggle
 * ------------------------------------------------------------------ */

.hr-pb-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	/* 44px is the touch target, not the visual height — the chrome stays
	   transparent, so the extra height reads as breathing room. */
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.hr-pb-toggle:hover,
.hr-pb-toggle:focus {
	background: none;
	color: inherit;
	box-shadow: none;
}

.hr-pb-toggle-label {
	min-width: 0;
}

/* The total rides on the toggle so collapsing the panel never hides the
   number. It is laid out in BOTH states and only faded/nudged out when the
   panel is open (where the same figure is already visible in the rows) —
   keeping it in flow means the label never jumps sideways as it appears. */

.hr-pb-toggle-total {
	margin-left: auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition:
		opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-pb--open .hr-pb-toggle-total {
	opacity: 0;
	transform: translateY(-4px);
}

/* A real <span>, not a ::after — an element can be given aria-hidden, and
   the markup emits one. */

.hr-pb-chevron {
	display: block;
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* The nudges re-centre the glyph: a rotated square's visual centre sits
	   off the box centre, in opposite directions for the two states. */
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-pb--open .hr-pb-chevron {
	transform: translateY(2px) rotate(-135deg);
}

/* ------------------------------------------------------------------ *
 * Accordion panel
 * ------------------------------------------------------------------ */

/* Scoped to --accordion on purpose: in `visible` style there is no toggle to
   reopen a collapsed panel, so an unmodified clip must stay at its natural
   auto height. */

.hr-pb--accordion .hr-pb-clip {
	display: grid;
	grid-template-rows: 0fr;
	/* The GRID CONTAINER clips too, not just the item: a 0fr track is zero
	   tall, but the item's own padding is not collapsed by the track. */
	overflow: hidden;
	transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-pb--accordion.hr-pb--open .hr-pb-clip {
	grid-template-rows: 1fr;
}

/* The grid item does the clipping; min-height:0 is what lets a 0fr row
   actually reach zero. The `overflow: hidden` is scoped to the accordion for
   the same reason `.hr-pb-clip` above is: unconditionally it clipped the
   :focus-visible ring off the last row's disclosure buttons on every surface,
   and only the 0fr track needs it. */

.hr-pb-body {
	min-height: 0;
}

.hr-pb--accordion .hr-pb-body {
	overflow: hidden;
}

/* visibility, NOT just the clip: a clip alone only hides the explanation and
   tax-disclosure buttons visually — they stay tabbable and screen-readable
   inside a panel whose toggle reports aria-expanded="false", a literal
   keyboard trap. visibility:hidden restores that, and unlike display:none it
   still animates: the flip to hidden is delayed by the collapse duration so
   the panel is fully shut before the content leaves the tree, while opening
   un-hides it immediately (transition-delay:0 below). */

.hr-pb--accordion .hr-pb-body {
	padding-top: 2px;
	padding-bottom: 4px;
	visibility: hidden;
	transition: visibility 0s linear 0.28s;
}

.hr-pb--accordion.hr-pb--open .hr-pb-body {
	visibility: visible;
	transition-delay: 0s;
}

/* ------------------------------------------------------------------ *
 * Rows
 * ------------------------------------------------------------------ */

.hr-pb-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.hr-pb-label {
	min-width: 0;
	opacity: 0.8;
}

.hr-pb-amount {
	flex: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Subtotal-weight row (the grouped-tax cluster header): a hairline above it
   separates the cluster it sums from the lines before, and full-weight text
   marks it as a total rather than another charge. */

.hr-pb-row--sub {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.hr-pb-row--sub > .hr-pb-label,
.hr-pb-row--sub > .hr-pb-amount {
	opacity: 1;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Grouped taxes — nested disclosure
 * ------------------------------------------------------------------ */

.hr-pb-tax-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* Padding grows the hit area; the equal negative margin keeps the row
	   metrics identical to a plain-text subtotal label. */
	margin: -4px 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	font: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.hr-pb-tax-toggle:hover,
.hr-pb-tax-toggle:focus {
	background: none;
	color: inherit;
	box-shadow: none;
}

.hr-pb-tax-caret {
	display: block;
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.65;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-pb-tax-toggle[aria-expanded="true"] .hr-pb-tax-caret {
	transform: translateY(1px) rotate(-135deg);
}

/* Same 0fr -> 1fr technique as the main panel, keyed off the data-open
   attribute the view flips (the state lives next to aria-expanded, not on
   the root, so two breakdowns on one page can't share it by accident). */

.hr-pb-taxes {
	display: grid;
	grid-template-rows: 0fr;
	/* Container-level clip, same reason as the accordion's: the item below
	   carries padding AND a border-left, neither of which a 0fr track
	   collapses. */
	overflow: hidden;
	transition: grid-template-rows 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-pb-taxes[data-open="true"] {
	grid-template-rows: 1fr;
}

/* The unclassed inner wrapper is the grid item: it carries the clip and the
   indent rule. visibility mirrors the accordion body — the nested tax lines
   carry their own explanation buttons, and a collapsed disclosure must keep
   them out of the tab order to match the aria-expanded="false" its toggle
   reports. */

.hr-pb-taxes > div {
	min-height: 0;
	overflow: hidden;
	margin-left: 2px;
	padding: 2px 0;
	border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	visibility: hidden;
	transition: visibility 0s linear 0.24s;
}

/* `inherit`, NOT `visible`: the disclosures nest and their open states are
   stored independently, so "tax cluster open inside a closed accordion" is a
   reachable, persisted state. An explicit `visible` would win against the
   `hidden` the accordion body sets and put the nested rows back in the tab
   order under a toggle reporting aria-expanded="false". Inheriting defers to
   the accordion in that case while still resolving to visible whenever the
   panel is open. */

.hr-pb-taxes[data-open="true"] > div {
	visibility: inherit;
	transition-delay: 0s;
}

/* Nested lines read as evidence for the subtotal, not as peers of it:
   indented, a touch smaller, and dimmer than a top-level row. */

.hr-pb-taxes .hr-pb-row {
	padding: 2px 0 2px 12px;
	font-size: 0.92em;
}

.hr-pb-taxes .hr-pb-label,
.hr-pb-taxes .hr-pb-amount {
	opacity: 0.65;
}

/* ------------------------------------------------------------------ *
 * Per-fee explanations
 * ------------------------------------------------------------------ */

.hr-pb-exp-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 0 6px;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: 1;
	cursor: pointer;
	font: inherit;
	color: inherit;
	display: inline-flex;
	vertical-align: baseline;
}

.hr-pb-exp-toggle:hover,
.hr-pb-exp-toggle:focus {
	background: none;
	color: inherit;
	box-shadow: none;
}

.hr-pb-exp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	opacity: 0.6;
}

.hr-pb-exp-toggle:hover .hr-pb-exp-icon,
.hr-pb-exp-toggle:focus .hr-pb-exp-icon,
.hr-pb-exp-toggle[aria-expanded="true"] .hr-pb-exp-icon {
	opacity: 1;
}

/* The WP module slideToggled explanations with jQuery; here they get the
   same grid clip as the other disclosures, driven by data-open. The inner
   div is the grid item (clip + visibility, mirroring .hr-pb-taxes > div). */

.hr-pb-explanation {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 12px;
	opacity: 0.7;
	max-width: 42em;
}

.hr-pb-explanation[data-open="true"] {
	grid-template-rows: 1fr;
}

.hr-pb-explanation > div {
	min-height: 0;
	overflow: hidden;
	padding: 0 0 4px;
	visibility: hidden;
	transition: visibility 0s linear 0.18s;
}

.hr-pb-explanation[data-open="true"] > div {
	visibility: inherit;
	transition-delay: 0s;
}

/* ------------------------------------------------------------------ *
 * Focus
 * ------------------------------------------------------------------ */

/* outline:none is only ever paired with the :focus-visible ring below, so
   keyboard focus is never suppressed — the pair exists so a mouse click on
   the accordion doesn't leave a ring behind. currentColor keeps the ring
   legible on whatever the host theme painted underneath. */

.hr-pb-toggle:focus,
.hr-pb-tax-toggle:focus,
.hr-pb-exp-toggle:focus {
	outline: none;
}

.hr-pb-toggle:focus-visible,
.hr-pb-tax-toggle:focus-visible,
.hr-pb-exp-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

/* ------------------------------------------------------------------ *
 * Motion
 * ------------------------------------------------------------------ */

/* Every disclosure still opens and closes — only the tween goes away. The
   grid items are listed for their visibility transition: with no collapse to
   wait out, the delayed flip to hidden would only leave content
   tabbable-but-invisible for the duration it no longer takes. */

@media (prefers-reduced-motion: reduce) {
	.hr-pb-toggle-total,
	.hr-pb-chevron,
	.hr-pb-tax-caret,
	.hr-pb--accordion .hr-pb-clip,
	.hr-pb--accordion .hr-pb-body,
	.hr-pb-taxes,
	.hr-pb-taxes > div,
	.hr-pb-explanation,
	.hr-pb-explanation > div {
		transition: none;
	}
}

/* ---------- UIKit utility classes (hk-*) ---------- */

.homerunner-booking-container .hk-flex { display: flex; }

.homerunner-booking-container .hk-flex-middle { align-items: center; }

.homerunner-booking-container .hk-flex-between { justify-content: space-between; }

.homerunner-booking-container .hk-flex-center { justify-content: center; }

.homerunner-booking-container .hk-flex-auto { flex: auto; }

.homerunner-booking-container .hk-flex-none { flex: none; }

.homerunner-booking-container .hk-flex-inline { display: inline-flex; }

.homerunner-booking-container .hk-text-bold { font-weight: 700; }

.homerunner-booking-container .hk-text-small { font-size: 0.875em; }

.homerunner-booking-container .hk-text-right { text-align: right; }

.homerunner-booking-container .hk-text-danger { color: #f0506e; }

.homerunner-booking-container .hk-margin-small { margin-top: 0.5rem; }

.homerunner-booking-container .hk-margin-small-left { margin-left: 0.5rem; }

.homerunner-booking-container .hk-margin-top { margin-top: 1rem; }

.homerunner-booking-container .hk-link-reset { text-decoration: none; color: inherit; }

.homerunner-booking-container .hk-button-text { cursor: pointer; background: none; border: none; padding: 0; font: inherit; }

.homerunner-booking-container .hk-background-muted { background-color: #f8f8f8; }

.homerunner-booking-container .hk-radio { margin-right: 0.5rem; }

/* ---------- Alerts ---------- */

.homerunner-booking-container .hk-alert {
  padding: 0.625rem 0.875rem;
  border-radius: 4px;
  margin: 0.5rem 0;
  font-size: 0.8125em;
  line-height: 1.4;
}

.homerunner-booking-container .hk-alert-primary { background-color: #e3f2fd; color: #1565c0; }

.homerunner-booking-container .hk-alert-warning { background-color: #fff3e0; color: #e65100; }

.homerunner-booking-container .hk-alert-success { background-color: #e8f5e9; color: #2e7d32; }

.homerunner-booking-container .hk-alert-danger { background-color: #ffebee; color: #c62828; }

/* ---------- Main widget ---------- */

.homelocal-booking-widget {
  /* Matches WP: .homelocal-booking-widget */
}

.homelocal-booking-widget-body {
  padding: 1.25rem;
}

/* ---------- Rent unit (price per night) ---------- */

.homerunner-booking-container .rent-unit {
  margin-bottom: 0.125rem;
}

.homerunner-booking-container .rent-amount {
  font-weight: 700;
  font-size: 1.375em;
}

.homerunner-booking-container .rent-after-date { /* inherits rent-amount */ }

.homerunner-booking-container .rent-deleted {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.25rem;
  font-size: 0.875em;
}

/* ---------- Total nights / minimum stay ---------- */

.homerunner-booking-container .total-nights {
  font-size: 0.8125em;
  color: #666;
  margin-bottom: 0.875rem;
}

/* ---------- Form labels ---------- */

.homerunner-booking-container .hk-form-label {
  display: block;
  font-weight: 700;
  font-size: 0.875em;
  margin-bottom: 0.25rem;
}

/* ---------- Form inputs ---------- */

.homerunner-booking-container .booking-date-inputs {
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.homerunner-booking-container .booking-date-field {
  flex: 1;
}

.homerunner-booking-container .booking-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875em;
  background: #fff;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.homerunner-booking-container .booking-input:focus {
  border-color: #999;
}

.homerunner-booking-container .booking-input::placeholder {
  color: #999;
}

/* ---------- Guests field (collapsed picker button inside the field group) ---------- */

.homerunner-booking-container .guests-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.45rem 0.6rem;
}

/* ---------- Loaders ---------- */

.homerunner-booking-container .widget-loader,
.homerunner-booking-container .price-loader {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.homerunner-booking-container .booking-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #eee;
  border-top-color: #999;
  border-radius: 50%;
  animation: booking-spin 0.6s linear infinite;
}

@keyframes booking-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Quote notice ---------- */

.homerunner-booking-container .quote-notice {
  margin: 0.5rem 0;
}

/* ---------- Booking overview ---------- */

.homerunner-booking-container .homelocal-booking-overview {
  margin: 0.75rem 0;
  padding: 0.75rem 0;
  border-top: 1px solid #eee;
}

.homerunner-booking-container .total-price-label {
  color: #666;
  font-size: 0.9375em;
}

.homerunner-booking-container .total-price {
  font-size: 1.125em;
}

.homerunner-booking-container .total-rent { /* for sticky price display */ }

/* ---------- Price details button ---------- */

.homerunner-booking-container .price-details-button-container {
  margin-top: 0.375rem;
}

.homerunner-booking-container .price-details-modal-button {
  font-size: 0.8125em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
}

.homerunner-booking-container .price-details-modal-button:hover {
  text-decoration: underline;
}

/* ---------- Rate plans ---------- */

.homerunner-booking-container .rateplans {
  margin: 0.75rem 0;
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
}

.homerunner-booking-container .rateplan {
  cursor: pointer;
  padding: 0.375rem 0;
}

/* ---------- Coupon ---------- */

.homerunner-booking-container .coupon-row {
  /* margin: 0.5rem 0;
  padding-top: 0.5rem; */
}

.homerunner-booking-container .coupon-input-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.homerunner-booking-container .coupon-apply-btn {
  padding: 0.5rem 0.875rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 0.8125em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.homerunner-booking-container .coupon-apply-btn:hover:not(:disabled) {
  background: #eee;
}

.homerunner-booking-container .coupon-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.homerunner-booking-container .coupon-apply-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.homerunner-booking-container .coupon-apply-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: #666;
  border-radius: 50%;
  animation: booking-spin 0.6s linear infinite;
}

.homerunner-booking-container .coupon-notice {
  margin-top: 0.375rem;
}

/* ---------- Checkout button ---------- */

.homerunner-booking-container .checkout-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  background-color: #f59e0c;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: opacity 0.2s;
}

.homerunner-booking-container .checkout-button:hover:not(:disabled) {
  opacity: 0.9;
}

.homerunner-booking-container .checkout-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Modal overlay ---------- */

.booking-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.booking-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 90vw;
  /* #919: dvh tracks the mobile browser's collapsing toolbars, so the box
     never extends under them (the old 90vh hid the Total row on iOS Safari);
     the vh line stays as the fallback for browsers without dvh. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  min-width: 320px;
}

.booking-modal-content--narrow {
  max-width: 480px;
  width: 100%;
}

.booking-modal-close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  /* #919: a 44px hit target (was a ~32px glyph box); the × itself is unchanged */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  line-height: 1;
  z-index: 1;
}

.booking-modal-close:hover {
  color: #333;
}

/* ---------- Price details table ---------- */

.homerunner-booking-container .price-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
}

.homerunner-booking-container .price-details-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eee;
}

.homerunner-booking-container .price-details-table tr:last-child td {
  border-bottom: none;
}

/* ---------- Dark mode ---------- */

.homerunner-booking-container.dark .homelocal-booking-widget-body {
  color: #e0e0e0;
}

.homerunner-booking-container.dark .booking-input {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

.homerunner-booking-container.dark .booking-input::placeholder {
  color: #888;
}

.homerunner-booking-container.dark .total-nights {
  color: #aaa;
}

.homerunner-booking-container.dark .total-price-label {
  color: #aaa;
}

.homerunner-booking-container.dark .homelocal-booking-overview,
.homerunner-booking-container.dark .rateplans {
  border-top-color: #444;
}

.homerunner-booking-container.dark .hk-background-muted {
  background-color: #2a2a2a;
}

.homerunner-booking-container.dark .coupon-apply-btn {
  background: #333;
  border-color: #444;
  color: #e0e0e0;
}

.homerunner-booking-container.dark .booking-modal-content {
  background: #1a1a1a;
  color: #e0e0e0;
}

.homerunner-booking-container.dark .price-details-table td {
  border-bottom-color: #333;
}

/* ---------- Static selected dates (datepicker hidden) ---------- */

.homerunner-booking-container .booking-static-dates .booking-static-date {
  display: block;
  padding: 8px 0;
  font-weight: 600;
}

/* ---------- Floating booking bar (#604, WP sticky-widget parity) ----------
   Fixed to the viewport bottom on mobile, replacing the in-page widget.
   z-index sits above the elevated dialog host (99999) so host-page chrome
   can't cover it. The bar is UNMOUNTED while any of the widget's modals is
   open (BookingForm, #919) — it never overlays the calendar. (An earlier
   note here claimed WP keeps its bar over the calendar; WP's calendar modal
   is z 9999990 against the bar's 999999, so it does not.) */

.homerunner-booking-container .booking-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* #919: clear the home indicator on notched phones under viewport-fit=cover.
     StickyBar measures its rendered height, so the body padding-bottom
     compensation follows automatically. Inert where the inset is 0. */
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.homerunner-booking-container .booking-sticky-bar-left {
  min-width: 0;
}

/* No-dates state: "Starting at $X / night" — whole line bold like WP .rent-unit */

.homerunner-booking-container .booking-sticky-bar-rent {
  font-weight: 700;
}

.homerunner-booking-container .booking-sticky-bar-sub {
  font-size: 0.8125em;
  color: #666;
}

.homerunner-booking-container .booking-sticky-bar-error {
  font-size: 0.8125em;
  color: #f0506e;
}

/* Quoted state: "$X / night • $Y total (i)" — tappable when price details on */

.homerunner-booking-container .booking-sticky-bar-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: pre-wrap;
  font-weight: 700;
  background: none;
  border: none;
  padding: 0;
  min-height: 24px; /* #919: WCAG 2.5.8 minimum target; the bar keeps its look */
  font-family: inherit;
  font-size: 1em;
  color: inherit;
  text-align: left;
}

.homerunner-booking-container button.booking-sticky-bar-price {
  cursor: pointer;
}

.homerunner-booking-container .booking-sticky-bar-info-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

/* Tappable date range: "MMM d - MMM d" + calendar-pencil icon, reopens the calendar */

.homerunner-booking-container .booking-sticky-bar-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px 0 0;
  min-height: 24px; /* #919: WCAG 2.5.8 minimum target */
  font-family: inherit;
  font-size: 0.875em;
  color: inherit;
  cursor: pointer;
}

/* Quote-loading skeleton (WP line-200x24.svg: 190x20 rounded shimmer) */

.homerunner-booking-container .booking-sticky-bar-skeleton {
  width: 190px;
  max-width: 60vw;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(90deg, #f3f3f3 25%, #ecebeb 50%, #f3f3f3 75%);
  background-size: 200% 100%;
  animation: booking-bar-shimmer 2s linear infinite;
}

@keyframes booking-bar-shimmer {
  to { background-position: -200% 0; }
}

.homerunner-booking-container .booking-sticky-bar-button {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 20px;
  font-size: clamp(14px, 2.6vw, 18px);
  white-space: nowrap;
}

.homerunner-booking-container.dark .booking-sticky-bar {
  background: #1a1a1a;
  color: #e0e0e0;
}

.homerunner-booking-container.dark .booking-sticky-bar-sub {
  color: #aaa;
}

.homerunner-booking-container.dark .booking-sticky-bar-skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* ---------- Per-bedroom price hint (WP bedroom_price parity) ---------- */

.homerunner-booking-container .rent-bedroom-sep {
  color: #999;
}

.homerunner-booking-container .bedroom-price-text {
  font-size: 0.875rem;
  color: var(--hr-accent, #f59e0c);
  font-weight: 600;
}

/* Calendar modal chrome — WP plugin parity (#602) */

.booking-calendar-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.booking-calendar-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid #eee;
}

.booking-calendar-clear-btn {
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  color: inherit;
}

.booking-calendar-close-btn {
  background: transparent;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

.booking-calendar-close-btn:hover {
  border-color: #999;
}

/* ---------- Widget modal (full form opened from the floating bar, #604) ---------- */

.booking-widget-modal {
  width: 100%;
  max-width: 420px;
}

.booking-widget-modal .homelocal-booking-widget-body {
  padding: 0.25rem 0 0;
}

.booking-modal-content.dark {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* ---------- Mobile calendar modal (#604, WP breakpoints) ----------
   WP destroys the month slider below 768px (availability-calendar.js
   calendarSliderInit): months stack vertically in a scrollable body with the
   header/footer pinned (the WP dialog is flex-column at every width). */

@media (max-width: 767px) {
  .booking-calendar-modal {
    /* WP dialog is hk-width-2xlarge (750px, shrinking with the viewport) */
    width: min(750px, calc(100vw - 30px)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .booking-calendar-modal .booking-calendar-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .booking-calendar-modal .booking-calendar-modal-footer {
    flex: 0 0 auto;
  }
  .booking-calendar-modal .nav-button {
    display: none;
  }
  .booking-calendar-modal .slider-track {
    flex-direction: column;
    transform: none !important;
    transition: none;
  }
  .booking-calendar-modal .slider-track > .month {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 0 8px;
  }
  .booking-calendar-modal .months-container {
    touch-action: auto;
    cursor: default;
  }
}

/* WP goes full-screen below 640px (availability-calendar.css @max-width:639px:
   modal width 100%, padding 0, dialog height/width 100%). The floating bar is
   unmounted while this sheet is open (BookingForm, #919). */

@media (max-width: 639px) {
  .hr-dialog-wrapper:has(> .booking-calendar-modal) {
    padding: 0 !important;
  }
  .booking-calendar-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    /* #919: .booking-modal-content is content-box, so 100dvh plus its 1.5rem
       padding overflowed the viewport by 48px (header off the top, footer
       flush with the bottom edge). Border-box makes the sheet exactly the
       viewport, with the paddings below inside it. */
    box-sizing: border-box;
    border-radius: 0;
    /* #919: under viewport-fit=cover a full-screen sheet otherwise puts the
       header under the status bar and the footer under the home indicator.
       1.5rem is .booking-modal-content's own padding; inert where insets are 0. */
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    /* the scale-in enter transform would leave visible gaps at full screen */
    transform: none !important;
  }
}

/* ---------- Mobile pass (#919) ---------- */

/* Pre-hydration twin of useIsMobile (same 959px — MOBILE_MEDIA_QUERY, pinned
   by a test): the SSR HTML always carries the inline card because useIsMobile
   seeds false, so without this a phone painted the full desktop card and then
   deleted it when the effect flipped to the floating bar. After hydration the
   card is unmounted below the breakpoint anyway, so the rule is a no-op there;
   the widget-modal form (no .bk-card) is never matched. Scoped to the marker
   BookingWidgetContent stamps only when sticky.enabled is on. */

@media (max-width: 959px) {
  .homerunner-booking-container[data-hr-sticky="on"] > .homelocal-booking-widget.bk-card {
    display: none;
  }
}

/* The calendar modal's Clear Dates / Close were 12px text with 8px padding —
   below any touch-target minimum on the one surface that is finger-only. */

.booking-calendar-modal-footer button {
  min-height: 44px;
}

/* The quote-loading shimmer is a decorative infinite animation. */

@media (prefers-reduced-motion: reduce) {
  .homerunner-booking-container .booking-sticky-bar-skeleton {
    animation: none;
  }
}

/* ==========================================================================
   Dark theme (#691) — the modal close button is hardcoded #666/#333 for
   light mode above and had no dark counterpart (the muted labels already
   have .homerunner-booking-container.dark rules). Light values untouched.
   ========================================================================== */

:host([data-hr-theme="dark"]) .booking-modal-close,
.dark .booking-modal-close {
    color: var(--muted-foreground, #b1b1b1);
}

:host([data-hr-theme="dark"]) .booking-modal-close:hover,
.dark .booking-modal-close:hover {
    color: var(--foreground, #fff);
}

/* ==========================================================================
   New-gen card (#823, BK-card mock): chrome, header pill, joined dates,
   guest steppers, under-CTA note
   ========================================================================== */

/* No overflow clipping: the guests panel overlays past the card's bottom edge. */

.homelocal-booking-widget.bk-card {
  background: #fff;
  border: 1px solid #e6e6e2;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(20, 24, 18, 0.07), 0 10px 26px rgba(20, 24, 18, 0.07);
}

.homerunner-booking-container.dark .homelocal-booking-widget.bk-card {
  background: #1e1e1e;
  border-color: #3a3a3a;
}

/* Header: price left, stay pill right */

.homerunner-booking-container .bk-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.homerunner-booking-container .bk-price-unit {
  color: #6b7570;
  font-size: 0.82em;
}

.homerunner-booking-container.dark .bk-price-unit {
  color: #aaa;
}

.homerunner-booking-container .bk-pill {
  flex-shrink: 0;
  font-size: 0.68em;
  font-weight: 600;
  background: #f2f4f0;
  color: #3c4540;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}

.homerunner-booking-container.dark .bk-pill {
  background: #2a2a2a;
  color: #ccc;
}

/* Field group: dates + guests share one border (#823 round 2) */

.homerunner-booking-container .bk-field-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.homerunner-booking-container .bk-field-group {
  border: 1px solid #d9dcd6;
  border-radius: 10px;
  overflow: hidden;
}

.homerunner-booking-container .bk-dates + .bk-guests-field {
  border-top: 1px solid #d9dcd6;
}

/* Dates: joined two-cell grid with a centre divider */

.homerunner-booking-container .booking-date-inputs.bk-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 0;
}

.homerunner-booking-container .bk-dates .booking-date-field {
  padding: 0.45rem 0.6rem;
}

.homerunner-booking-container .bk-dates .booking-date-field + .booking-date-field {
  border-left: 1px solid #d9dcd6;
}

.homerunner-booking-container .bk-lbl {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7570;
  margin-bottom: 0.1rem;
}

.homerunner-booking-container.dark .bk-lbl {
  color: #999;
}

.homerunner-booking-container .bk-dates .booking-input {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: 0.84em;
}

/* Joined cells drop the input border, which was the only focus affordance
   (.booking-input clears the UA outline) — restore a visible keyboard ring. */

.homerunner-booking-container .bk-dates .booking-input:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 3px;
}

.homerunner-booking-container.dark .bk-dates .booking-input:focus-visible {
  outline-color: #fff;
}

.homerunner-booking-container.dark .bk-field-group {
  border-color: #444;
}

.homerunner-booking-container.dark .bk-dates + .bk-guests-field {
  border-top-color: #444;
}

.homerunner-booking-container.dark .bk-dates .booking-date-field + .booking-date-field {
  border-left-color: #444;
}

.homerunner-booking-container.dark .bk-dates .booking-input {
  background: transparent;
}

/* Guest stepper lines inside .guests-row */

.homerunner-booking-container .bk-guest-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
}

.homerunner-booking-container .bk-guest-line + .bk-guest-line {
  border-top: 1px solid #eceeea;
}

.homerunner-booking-container .bk-guest-label {
  margin-bottom: 0;
  font-size: 0.875em;
}

.homerunner-booking-container .bk-stepper {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.homerunner-booking-container .bk-stepper-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #c9cec7;
  background: #fff;
  font-size: 0.95em;
  line-height: 1;
  color: #3c4540;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.homerunner-booking-container .bk-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* At a real per-property pets ceiling (#1230 follow-up): the Increase button
   stays clickable (toolkit parity, guest-picker.js CSS-class-only disabled)
   so an attempted increment can surface the at-cap note; styled to read as
   disabled anyway. */

.homerunner-booking-container .bk-stepper-btn-at-max {
  opacity: 0.4;
}

.homerunner-booking-container .bk-stepper-value {
  min-width: 1.2em;
  text-align: center;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.homerunner-booking-container.dark .bk-guest-line + .bk-guest-line {
  border-top-color: #333;
}

.homerunner-booking-container.dark .bk-stepper-btn {
  background: #2a2a2a;
  border-color: #555;
  color: #e0e0e0;
}

/* Discount note under the CTA */

.homerunner-booking-container .bk-note {
  text-align: center;
  color: #6b7570;
  font-size: 0.72em;
  margin: 0.55rem 0 0;
}

.homerunner-booking-container.dark .bk-note {
  color: #999;
}

/* Collapsed guests field content + expanding panel (#823 round 2) */

.homerunner-booking-container .bk-guests-field-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.homerunner-booking-container .bk-guests-summary {
  font-size: 0.84em;
}

.homerunner-booking-container .bk-chevron {
  flex-shrink: 0;
  color: #6b7570;
  transition: transform 0.15s;
}

.homerunner-booking-container .bk-chevron-open {
  transform: rotate(180deg);
}

.homerunner-booking-container.dark .bk-chevron {
  color: #999;
}

.homerunner-booking-container .bk-guest-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #d9dcd6;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(20, 24, 18, 0.14);
  padding: 0.5rem 0.9rem 0.75rem;
}

.homerunner-booking-container.dark .bk-guest-panel {
  background: #1e1e1e;
  border-color: #444;
}

.homerunner-booking-container .bk-guest-panel .bk-guest-line {
  padding: 0.55rem 0;
}

.homerunner-booking-container .bk-guest-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.homerunner-booking-container .bk-guest-hint {
  font-size: 0.75em;
  color: #6b7570;
}

.homerunner-booking-container.dark .bk-guest-hint {
  color: #999;
}

/* Pet notice under the Pets row (#1230; toolkit .hrtk-gp-pet-notice) */

.homerunner-booking-container .bk-guest-pet-notice {
  font-size: 0.8em;
  color: #6b7570;
  background: #f5f6f4;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0 0;
}

.homerunner-booking-container.dark .bk-guest-pet-notice {
  color: #bbb;
  background: #2a2a2a;
}

/* At-cap note (#1230 follow-up; toolkit .hrtk-gp-tooltip, guest-picker.js) —
   a transient, distinct note from the always-visible fee notice above.
   Fade timing mirrors the toolkit's fadeIn/fadeOut(150); the 3s hold is the
   JS-driven visibility window (BookingForm.tsx showPetsCapNotice). */

.homerunner-booking-container .bk-guest-pets-cap-note {
  font-size: 0.8em;
  color: #6b7570;
  background: #f5f6f4;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0 0;
  animation: bk-guest-pets-cap-note-fade 0.15s ease-in;
}

@keyframes bk-guest-pets-cap-note-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.homerunner-booking-container.dark .bk-guest-pets-cap-note {
  color: #bbb;
  background: #2a2a2a;
}

.homerunner-booking-container .bk-guest-max-note {
  font-size: 0.75em;
  color: #6b7570;
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid #eceeea;
}

.homerunner-booking-container.dark .bk-guest-max-note {
  color: #999;
  border-top-color: #333;
}

.homerunner-booking-container .bk-guest-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.homerunner-booking-container .bk-guest-close {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  padding: 0.2rem 0.2rem;
}

/* ==========================================================================
   Dark FIRST-PAINT (#900) — CSS mirror of the `.dark`-keyed rules above.

   The `.dark`-keyed rules above only fire once the runtime resolves the theme
   and stamps `.dark` on the container — too late to paint dark at parse. Worse,
   these are HEAVY rules: most carry HARDCODED light-authored hex (#2a2a2a /
   #e0e0e0 / #444 / …), so at first paint on a dark surface the light values
   would flash. These append-only siblings reuse the EXACT same declarations
   (hex verbatim) under the shadow-host markers, so an `auto` widget on a dark
   OS paints dark AT PARSE:
     - `:host([data-hr-theme="dark"])` — the runtime marker (explicit dark +
       post-hydration auto), plus the mirrored elevated-dialog host. Since the
       host marker covers the whole shadow tree, the per-container `.dark`
       scoping (`.homerunner-booking-container` / `.booking-modal-content`)
       collapses to one prefix.
     - inside `@media (prefers-color-scheme: dark)`,
       `:host([data-hr-scheme="auto"]:not([data-hr-theme]))` — a server-stamped
       auto widget with NO theme marker, painting dark with no JS/cookie; the
       `:not([data-hr-theme])` (kept INSIDE `:host(...)`) drops this block the
       instant the runtime stamps the marker at hydration, handing off to the
       block above.
   The `.dark` rules above are left untouched; light rendering is unchanged.
   The `.booking-modal-close` pair already ships a `:host([data-hr-theme="dark"])`
   variant (the #691 block above), so only its `@media` auto variant is added.
   ========================================================================== */

:host([data-hr-theme="dark"]) .homelocal-booking-widget-body {
  color: #e0e0e0;
}

:host([data-hr-theme="dark"]) .booking-input {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}

:host([data-hr-theme="dark"]) .booking-input::placeholder {
  color: #888;
}

:host([data-hr-theme="dark"]) .total-nights,
:host([data-hr-theme="dark"]) .total-price-label,
:host([data-hr-theme="dark"]) .booking-sticky-bar-sub,
:host([data-hr-theme="dark"]) .bk-price-unit {
  color: #aaa;
}

:host([data-hr-theme="dark"]) .homelocal-booking-overview,
:host([data-hr-theme="dark"]) .rateplans {
  border-top-color: #444;
}

:host([data-hr-theme="dark"]) .hk-background-muted {
  background-color: #2a2a2a;
}

:host([data-hr-theme="dark"]) .coupon-apply-btn {
  background: #333;
  border-color: #444;
  color: #e0e0e0;
}

:host([data-hr-theme="dark"]) .booking-modal-content,
:host([data-hr-theme="dark"]) .booking-sticky-bar {
  background: #1a1a1a;
  color: #e0e0e0;
}

:host([data-hr-theme="dark"]) .price-details-table td {
  border-bottom-color: #333;
}

:host([data-hr-theme="dark"]) .booking-sticky-bar-skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

:host([data-hr-theme="dark"]) .homelocal-booking-widget.bk-card {
  background: #1e1e1e;
  border-color: #3a3a3a;
}

:host([data-hr-theme="dark"]) .bk-pill {
  background: #2a2a2a;
  color: #ccc;
}

:host([data-hr-theme="dark"]) .bk-lbl,
:host([data-hr-theme="dark"]) .bk-note,
:host([data-hr-theme="dark"]) .bk-chevron,
:host([data-hr-theme="dark"]) .bk-guest-hint {
  color: #999;
}

:host([data-hr-theme="dark"]) .bk-dates .booking-input:focus-visible {
  outline-color: #fff;
}

:host([data-hr-theme="dark"]) .bk-field-group {
  border-color: #444;
}

:host([data-hr-theme="dark"]) .bk-dates + .bk-guests-field {
  border-top-color: #444;
}

:host([data-hr-theme="dark"]) .bk-dates .booking-date-field + .booking-date-field {
  border-left-color: #444;
}

:host([data-hr-theme="dark"]) .bk-dates .booking-input {
  background: transparent;
}

:host([data-hr-theme="dark"]) .bk-guest-line + .bk-guest-line {
  border-top-color: #333;
}

:host([data-hr-theme="dark"]) .bk-stepper-btn {
  background: #2a2a2a;
  border-color: #555;
  color: #e0e0e0;
}

:host([data-hr-theme="dark"]) .bk-guest-panel {
  background: #1e1e1e;
  border-color: #444;
}

:host([data-hr-theme="dark"]) .bk-guest-max-note {
  color: #999;
  border-top-color: #333;
}

:host([data-hr-theme="dark"]) .bk-guest-pet-notice {
  color: #bbb;
  background: #2a2a2a;
}

:host([data-hr-theme="dark"]) .bk-guest-pets-cap-note {
  color: #bbb;
  background: #2a2a2a;
}

@media (prefers-color-scheme: dark) {
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .homelocal-booking-widget-body {
    color: #e0e0e0;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-input::placeholder {
    color: #888;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .total-nights,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .total-price-label,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-sticky-bar-sub,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-price-unit {
    color: #aaa;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .homelocal-booking-overview,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .rateplans {
    border-top-color: #444;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .hk-background-muted {
    background-color: #2a2a2a;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .coupon-apply-btn {
    background: #333;
    border-color: #444;
    color: #e0e0e0;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-modal-content,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-sticky-bar {
    background: #1a1a1a;
    color: #e0e0e0;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .price-details-table td {
    border-bottom-color: #333;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-sticky-bar-skeleton {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .homelocal-booking-widget.bk-card {
    background: #1e1e1e;
    border-color: #3a3a3a;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-pill {
    background: #2a2a2a;
    color: #ccc;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-lbl,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-note,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-chevron,
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-guest-hint {
    color: #999;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-dates .booking-input:focus-visible {
    outline-color: #fff;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-field-group {
    border-color: #444;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-dates + .bk-guests-field {
    border-top-color: #444;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-dates .booking-date-field + .booking-date-field {
    border-left-color: #444;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-dates .booking-input {
    background: transparent;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-guest-line + .bk-guest-line {
    border-top-color: #333;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-stepper-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-guest-panel {
    background: #1e1e1e;
    border-color: #444;
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .bk-guest-max-note {
    color: #999;
    border-top-color: #333;
  }
  /* #691 close button — @media auto variant only (the
     :host([data-hr-theme="dark"]) variant already ships in the #691 block). */
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-modal-close {
    color: var(--muted-foreground, #b1b1b1);
  }
  :host([data-hr-scheme="auto"]:not([data-hr-theme])) .booking-modal-close:hover {
    color: var(--foreground, #fff);
  }
}