/* 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;
    }
}