/* =============================================================================
   Vacation Availability — Calendar Stylesheet
   "Studio booking tool" redesign (2.4.0). Palette (available/booked/today) and
   button chrome colours are CSS custom properties set from plugin settings;
   card chrome, day-cell tint formulas, and spacing follow the design handoff
   pixel-for-pixel. Day-number/date text always uses JetBrains Mono — that's a
   fixed design constant, independent of the admin-configurable --vbo-avc-font-family.
   ============================================================================= */

/* ---- Theme isolation ----
 * Host themes commonly apply generic margin/padding to bare div/span/button/ul
 * elements (block-spacing utilities, typography resets, etc.), and because
 * WordPress loads the active theme's stylesheet AFTER plugin styles, an
 * equal-specificity theme rule wins the cascade and bleeds into this widget
 * (extra gaps, unexpected wrapping). Zero everything out here with !important,
 * then every rule below that needs non-zero spacing re-asserts it with
 * !important too, so this widget's layout never depends on the host theme. */
.vbo-avc-calendar-wrapper,
.vbo-avc-calendar-wrapper *,
.vbo-avc-calendar-wrapper *::before,
.vbo-avc-calendar-wrapper *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Alignment (vacation-ui-web 1.4.0): themes often centre headings/paragraphs. The card is
   left-aligned and text blocks inherit it; intended centring (month titles, the stacked
   header below 480, the empty state) is set per component. */
.vbo-avc-calendar-wrapper {
    text-align: left;
}
.vbo-avc-calendar-wrapper :is(h1, h2, h3, h4, h5, h6, p):not(.vbo-avc-avail-empty) {
    text-align: inherit !important;
}

/* ---- Wrapper / card ---- */
.vbo-avc-calendar-wrapper {
    /* Falls back to the theme's inherited font unless an admin override is set */
    font-family: var(--vbo-avc-font-family, inherit);
    /* --vbo-avc-card-max-width: admin "Kaartbreedte" setting (JS-set from
       data-card-max-width). 'none' (0/unlimited) just removes the cap —
       width:100% below still bounds the card to its actual parent, so this
       can never make the card wider than the theme's own container. */
    max-width: var(--vbo-avc-card-max-width, 900px) !important;
    width: 100% !important;
    /* Positioning context for the loading overlay. .vbo-avc-overlay is
       position:absolute; inset:0, and it's a SIBLING of .vbo-avc-months-container
       (it has to be — loadMonths() replaces the container's innerHTML, which
       would destroy an overlay nested inside it). Without a positioned ancestor
       here the overlay anchors to the nearest positioned element up the theme
       tree (often the viewport), so inset:0 stretched the 75%-white "Loading…"
       cover across the WHOLE PAGE instead of just this card. Anchoring it to the
       wrapper confines it to the calendar. */
    position: relative !important;
    margin: 0 auto 1.5em !important;
    background: #ffffff !important;
    border: 1px solid #e6e8ec !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05) !important;
    padding: 28px 32px !important;
    /* Container-query context: breakpoints fire on THIS element's width,
       not the viewport — works correctly inside sidebars and narrow columns. */
    container-type: inline-size;
    container-name: vbo-avc-cal;
}
.vbo-avc-calendar-wrapper[data-density="compact"] {
    padding: 20px 24px !important;
}
/* "Kaartrand tonen" (show_card_border) off: the card blends into the page —
   no border/shadow/background/radius. Only the frame goes; spacing/padding
   is untouched since that's about breathing room, not the "boundary" itself. */
.vbo-avc-calendar-wrapper[data-card-border="0"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Clearfix for float-based themes */
.vbo-avc-calendar-wrapper::after {
    content: '';
    display: table;
    clear: both;
}

/* ---- Header ---- */
.vbo-avc-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px !important;
}
.vbo-avc-title-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    min-width: 0;
}
.vbo-avc-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    /* Admin "Koptekstkleur" via the palette token (vacation-ui-web 1.1.0), set on the
       wrapper server-side (no flash) and refreshed from data-title-color by calendar.js. */
    color: var(--vbo-avc-title-color, #0f172a);
}
.vbo-avc-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
}
.vbo-avc-nav {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Segmented control: Calendar / List ---- */
.vbo-avc-segment {
    display: flex !important;
    align-items: stretch;
    height: 32px;
    box-sizing: border-box;
    background: #f1f4f8;
    border-radius: 9px;
    padding: 3px !important;
    gap: 2px;
}
.vbo-avc-seg-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 14px !important;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    transition: background .15s, color .15s, box-shadow .15s;
}
/* Firefox adds an invisible focus-ring padding inside <button> that survives
   a normal padding:0 reset and throws off vertical centering of the label. */
.vbo-avc-seg-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.vbo-avc-seg-btn:not(.vbo-avc-seg-active):hover {
    background: rgba(15,23,42,.05);
    color: #0f172a;
}
.vbo-avc-seg-btn.vbo-avc-seg-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(16,24,40,.08);
}

/* ---- Nav cluster: Prev / Today / Next ---- */
.vbo-avc-nav-cluster {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.vbo-avc-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit !important;
    border: none;
    background: none;
    padding: 0;
    line-height: 1 !important;
    transition: background .15s, color .15s, border-color .15s;
}
.vbo-avc-btn:disabled {
    cursor: not-allowed;
}
/* Firefox adds an invisible focus-ring padding inside <button> that survives
   a normal padding:0 reset and throws off vertical centering of the label. */
.vbo-avc-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.vbo-avc-btn-prev,
.vbo-avc-btn-next {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px;
    border: 1px solid #e6e8ec;
    background: #ffffff;
    color: #475569;
}
.vbo-avc-btn-prev:not(:disabled):hover,
.vbo-avc-btn-next:not(:disabled):hover {
    background: #f1f4f8;
    color: #0f172a;
}
.vbo-avc-btn-prev:disabled,
.vbo-avc-btn-next:disabled {
    background: #f8fafc;
    color: #cbd5e1;
    border-color: #eef1f5;
}

/* Today button — driven by the palette's "today" accent, not the generic
   enabled/hover/pressed button vars (spec ties it to the 3-value palette). */
.vbo-avc-btn-today {
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 8px;
    border: 1px solid var(--vbo-avc-color-today, #2563eb);
    background: #ffffff;
    color: var(--vbo-avc-color-today, #2563eb);
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
/* On today, the button is disabled (nothing to navigate to) — but that should
   read as "this IS today", not as a generically greyed-out disabled control.
   A solid fill in the today accent, not just a faint tint, is what actually
   emphasises "the calendar is set to today" at a glance. */
.vbo-avc-btn-today.vbo-avc-btn-active,
.vbo-avc-btn-today:disabled {
    background: var(--vbo-avc-color-today, #2563eb);
    border-color: var(--vbo-avc-color-today, #2563eb);
    color: #ffffff;
    opacity: 1;
    cursor: default;
}
.vbo-avc-today-icon {
    display: block;
    height: 18px;
    width: auto;
    pointer-events: none;
}

/* SVG inside buttons inherits current colour */
.vbo-avc-btn svg {
    display: block;
    pointer-events: none;
}

/* ---- Months container ---- */
/*
 * Flex, not grid: JS already requests exactly as many month cards as the
 * container will show (1, 2 or 3 — see the @container breakpoints below), so
 * no column-count CSS is needed here. flex-basis 0 + flex-grow makes the
 * months share the row equally when unconstrained (matching the old
 * repeat(N,1fr) grid), but each month is still capped by its own max-width
 * (--vbo-avc-max-cal-width, from the "Max. kalenderbreedte" setting). When that
 * cap kicks in, flex-grow simply stops growing each month past its cap
 * instead of leaving it stretched across a now-oversized grid track — the
 * leftover row width becomes free space that `justify-content: center`
 * distributes around the (now free-standing) group, with `gap` staying at
 * its declared value rather than widening to fill the leftover space.
 */
.vbo-avc-months-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    width: 100%;
    position: relative; /* positioning context for in-grid absolute children
                           (holiday markers/tooltips). NOT the loading overlay —
                           that's a sibling and anchors to .vbo-avc-calendar-wrapper. */
    overflow-x: clip;
    /* A holiday "glow" marker on a cell in the FIRST column of the leftmost
       month — or the LAST column of the rightmost month — bleeds ~10px past the
       container edge and was being sliced off flat on its outer side (interior
       glows are fine: the 28px inter-month gap gives them room). The horizontal
       clip has to stay (it anchors tooltip alignment and stops a stray-wide
       child from scrolling the page), and overflow-clip-margin does NOT help
       here — it's ignored when one axis is clip and the other visible.
       Instead, push the clip boundary (the padding box) 12px outward on each
       side with padding, then cancel that with an equal negative margin so the
       months stay exactly where they were. box-sizing: content-box is required
       — with border-box the padding would eat 24px of the months' own width
       instead of bleeding outward. The freed glow lands in the card's 24–32px
       side padding.
       !important is mandatory here: the theme-isolation reset at the top of
       this file zeroes margin/padding and forces border-box on every element
       inside .vbo-avc-calendar-wrapper with !important, so a plain declaration is
       silently wiped (this is the file's stated convention — re-assert any
       non-zero spacing with !important). */
    box-sizing: content-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-months-container {
    gap: 20px;
}
.vbo-avc-loading,
.vbo-avc-error {
    color: #999;
    font-style: italic;
    padding: 8px 0 !important;
}
.vbo-avc-error { color: #c62828; }

/* ---- Single month ---- */
.vbo-avc-month {
    flex: 1 1 0% !important;
    min-width: 0;
    box-sizing: border-box;
    /* Honour the max-width per calendar setting (set via JS CSS variable) */
    max-width: var(--vbo-avc-max-cal-width, none);
}
.vbo-avc-month-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 7-column grid ---- */
.vbo-avc-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px;
    width: 100%;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-grid {
    gap: 3px;
}

/* ---- Cells ---- */
.vbo-avc-cell {
    aspect-ratio: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
    box-sizing: border-box;
    min-height: 0;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-cell {
    border-radius: 5px;
    font-size: 11px;
}
.vbo-avc-cell-header {
    font-family: inherit;
    font-weight: 700;
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    aspect-ratio: unset;
    padding: 2px 0 !important;
    background: transparent;
    border: none;
}
.vbo-avc-cell-empty { background: transparent; border-color: transparent; visibility: hidden; }

.vbo-avc-day-num {
    position: relative;
    z-index: 2;
    pointer-events: none;
    font-weight: 600;
}

/* Bold changeover days when setting enabled */
.vbo-avc-changeover .vbo-avc-day-num {
    font-weight: var(--vbo-avc-changeover-weight, 600);
}

/* ---- State colours — color-mix tint formulas from the design tokens ---- */
.vbo-avc-state-available {
    background: color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white);
}
.vbo-avc-state-available .vbo-avc-day-num {
    color: var(--vbo-avc-day-number-color-available, #0b7b56);
}
.vbo-avc-state-booked,
.vbo-avc-state-checkinout {
    background: color-mix(in srgb, var(--vbo-avc-color-booked, #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white);
}
.vbo-avc-state-booked .vbo-avc-day-num,
.vbo-avc-state-checkinout .vbo-avc-day-num {
    color: var(--vbo-avc-day-number-color-booked, #aa372f);
}

/* Past days override state colours — higher specificity, no !important */
.vbo-avc-cell.vbo-avc-state-past {
    background: #f8fafc;
    border-color: #f1f5f9;
}
.vbo-avc-state-past .vbo-avc-day-num {
    color: #cbd5e1;
}

/* Skeleton day cell — shown by calendar.js (avcBuildMonth skeleton mode) while
   the availability data is still loading, so the month grids occupy their final
   height immediately (no layout shift) and the visitor sees the structure right
   away. Neutral on purpose: nothing here should imply availability until the real
   state colours replace it as the loading overlay lifts. */
.vbo-avc-cell.vbo-avc-state-loading {
    background: color-mix(in srgb, var(--vbo-avc-color-day-outline, #e6e8ec) 30%, white);
    border-color: var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-state-loading .vbo-avc-day-num {
    color: #cbd5e1;
}

/* Today ring — palette "today" accent, layered on top of whatever state */
.vbo-avc-today {
    box-shadow: inset 0 0 0 2px var(--vbo-avc-color-today, #2563eb);
}
.vbo-avc-today .vbo-avc-day-num {
    font-weight: 800;
}
/* Today as a dot under the number instead of the ring (admin "Markering vandaag" = dot,
   data-today-marker on the wrapper). Same dot as the booking widget. */
.vbo-avc-calendar-wrapper[data-today-marker="dot"] .vbo-avc-today {
    box-shadow: none;
}
.vbo-avc-calendar-wrapper[data-today-marker="dot"] .vbo-avc-today::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vbo-avc-color-today, #2563eb);
    pointer-events: none;
}
.vbo-avc-calendar-wrapper[data-density="compact"][data-today-marker="dot"] .vbo-avc-today::after {
    bottom: 2px;
    width: 3px;
    height: 3px;
}

/* ---- Diagonal split: check-in (available → booked) ---- */
.vbo-avc-state-checkin {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white) 50%,
        color-mix(in srgb, var(--vbo-avc-color-booked,    #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white) 50%
    );
}
/* Always the lighter of the two number colours, not the "booked" one specifically —
   the number can sit over either half of the diagonal split, and a colour picked by
   state alone can land on the darker half and become unreadable. See calendar.js
   (avcRelLuminance) for how the lighter colour is chosen. */
.vbo-avc-state-checkin .vbo-avc-day-num {
    color: var(--vbo-avc-day-number-color-changeover, #0b7b56);
}

/* ---- Diagonal split: check-out (booked → available) ---- */
.vbo-avc-state-checkout {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vbo-avc-color-booked,    #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white) 50%,
        color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white) 50%
    );
}
.vbo-avc-state-checkout .vbo-avc-day-num {
    color: var(--vbo-avc-day-number-color-changeover, #0b7b56);
}

/* ---- Holiday marker & tooltip ---- */
/*
 * Holiday cells get an extra unclipped outer wrapper so the marker/tooltip can
 * protrude above the cell / float over neighbouring cells — .vbo-avc-cell itself
 * uses overflow:hidden (needed to clip the diagonal check-in/check-out
 * gradient to its rounded corners), so anything rendered as ITS child gets cut
 * off instead of protruding. The wrap takes over the grid-item sizing
 * (aspect-ratio) that .vbo-avc-cell normally provides; the inner .vbo-avc-cell just
 * fills it at 100%/100% and keeps all of its existing clipped/rounded styling.
 */
.vbo-avc-cell-wrap {
    aspect-ratio: 1;
    position: relative;
    min-height: 0;
}
.vbo-avc-cell-wrap .vbo-avc-cell {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
/* Holiday cells are focusable (tabindex="0" in Calendar.php) and clickable
   (see calendar.js) so the tooltip is reachable via keyboard and touch, not
   just mouse hover. Only show a ring for actual keyboard focus, not for a
   mouse click landing on it. */
.vbo-avc-cell-wrap.vbo-avc-holiday {
    cursor: pointer;
    outline: none;
}
.vbo-avc-cell-wrap.vbo-avc-holiday:focus-visible {
    outline: 2px solid var(--vbo-avc-color-holiday, #f59e0b);
    outline-offset: 1px;
    border-radius: 7px;
}

.vbo-avc-holiday-marker {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 9px;
    z-index: 3;
    pointer-events: none;
    background: var(--vbo-avc-color-holiday, #f59e0b);
    filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .18));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.vbo-avc-calendar-wrapper[data-holiday-marker-style="tab"] .vbo-avc-holiday-marker {
    top: -4px;
    width: 16px;
    height: 7px;
    border-radius: 3px 3px 0 0;
    clip-path: none;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-holiday-marker {
    width: 10px;
    height: 7px;
}

/* Glow — a subtle alternative to the ribbon/tab: no protruding shape, just a
   soft tinted halo sitting behind the cell (z-index below .vbo-avc-cell, set
   above), reaching exactly half the grid gap outward on every side so it
   never touches a neighbouring cell's own halo. */
.vbo-avc-calendar-wrapper[data-holiday-marker-style="glow"] .vbo-avc-holiday-marker {
    inset: -2px; /* half of the 4px comfortable .vbo-avc-grid gap */
    transform: none;
    width: auto;
    height: auto;
    z-index: 1;
    border-radius: 10px;
    background: color-mix(in srgb, var(--vbo-avc-color-holiday, #f59e0b) 16%, transparent);
    box-shadow: 0 0 7px 1px color-mix(in srgb, var(--vbo-avc-color-holiday, #f59e0b) 30%, transparent);
    filter: none;
    clip-path: none;
}
.vbo-avc-calendar-wrapper[data-density="compact"][data-holiday-marker-style="glow"] .vbo-avc-holiday-marker {
    inset: -1.5px; /* half of the 3px compact .vbo-avc-grid gap */
    border-radius: 8px;
}

/* Custom hover/focus tooltip — not the browser's native title tooltip */
.vbo-avc-holiday-tip {
    display: none;
    align-items: center;
    gap: 6px;
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .08);
    white-space: nowrap;
    pointer-events: none;
}
.vbo-avc-holiday-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 #e6e8ec);
}
.vbo-avc-cell-wrap.vbo-avc-holiday:hover .vbo-avc-holiday-tip,
.vbo-avc-cell-wrap.vbo-avc-holiday:focus-within .vbo-avc-holiday-tip,
.vbo-avc-cell-wrap.vbo-avc-holiday.vbo-avc-tip-shown .vbo-avc-holiday-tip {
    display: flex;
}
.vbo-avc-calendar-wrapper[data-holiday-show-name="0"] .vbo-avc-holiday-tip {
    display: none !important;
}
.vbo-avc-holiday-tip-icon {
    color: var(--vbo-avc-color-holiday, #f59e0b);
    flex-shrink: 0;
}
.vbo-avc-holiday-tip-name {
    font-family: var(--vbo-avc-font-family, inherit);
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

/* Flip below the cell (first calendar row) — JS toggles this class */
.vbo-avc-holiday-tip.vbo-avc-tip-below {
    bottom: auto;
    top: calc(100% + 8px);
}
.vbo-avc-holiday-tip.vbo-avc-tip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ffffff;
}
/* Align left/right instead of centered — JS toggles these when centered
   would overflow past the calendar card's edge */
.vbo-avc-holiday-tip.vbo-avc-tip-align-left {
    left: 0;
    transform: none;
}
.vbo-avc-holiday-tip.vbo-avc-tip-align-left::after {
    left: 14px;
    transform: none;
}
.vbo-avc-holiday-tip.vbo-avc-tip-align-right {
    left: auto;
    right: 0;
    transform: none;
}
.vbo-avc-holiday-tip.vbo-avc-tip-align-right::after {
    left: auto;
    right: 14px;
    transform: none;
}

/* ---- Legend ---- */
/*
 * Base: 1 column (mobile-first, 4 rows).
 * @container queries promote to 2 cols then 4 cols matching calendar breakpoints.
 */
.vbo-avc-legend {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px 14px;
    margin-top: 16px !important;
    padding-top: 13px !important;
    border-top: 1px solid #eef1f5;
    font-size: 11.5px;
    width: 100%;
    box-sizing: border-box;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-legend {
    gap: 4px 11px;
    margin-top: 11px !important;
    padding-top: 9px !important;
    font-size: 11px;
}
.vbo-avc-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
    white-space: nowrap;
    min-width: 0;
    font-weight: 600;
    color: #64748b;
    position: relative; /* tooltip anchor, icon-only mode below */
}

/* Icon-only tooltip — only ever shown below the narrow @container breakpoint
   (see the max-width:479px block further down), where .vbo-avc-legend-label is
   hidden and the swatch alone has to carry the meaning. Kept display:none
   here with no !important specifically so that narrow-mode block can turn it
   on with plain specificity, no fighting required. */
.vbo-avc-legend-tip {
    display: none;
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .08);
    white-space: nowrap;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}
.vbo-avc-legend-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 1px 0 #e6e8ec);
}
.vbo-avc-legend-tip.vbo-avc-tip-align-left {
    left: 0;
    transform: none;
}
.vbo-avc-legend-tip.vbo-avc-tip-align-left::after {
    left: 14px;
    transform: none;
}
.vbo-avc-legend-tip.vbo-avc-tip-align-right {
    left: auto;
    right: 0;
    transform: none;
}
.vbo-avc-legend-tip.vbo-avc-tip-align-right::after {
    left: auto;
    right: 14px;
    transform: none;
}

.vbo-avc-swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    border-radius: 3px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.vbo-avc-calendar-wrapper[data-density="compact"] .vbo-avc-swatch {
    width: 13.5px;
    height: 13.5px;
    min-width: 13.5px;
}
/* Border is a fixed, visible neutral (the day-outline colour) rather than a
   tint of the swatch's own fill — a color-mix()-derived border can wash out
   to near-invisible against a white card when the fill itself is very light
   (low bg-tint intensity, or an admin colour close to white). */
.vbo-avc-swatch-available {
    background: color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white);
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-swatch-booked {
    background: color-mix(in srgb, var(--vbo-avc-color-booked, #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white);
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-swatch-split {
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-swatch-split::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--s1, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white) 50%,
        color-mix(in srgb, var(--s2, #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white) 50%
    );
}
/* Preset changeover swatches (vacation-ui-web 1.1.0) — the same 135° split as the
   DayCell, coloured straight from the palette (no per-swatch JS):
   -checkin  = available → booked (a booking starts: "Beschikbaar tot"),
   -checkout = booked → available (a booking ends:   "Beschikbaar vanaf"). */
.vbo-avc-swatch-checkin,
.vbo-avc-swatch-checkout {
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-swatch-checkin {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white) 50%,
        color-mix(in srgb, var(--vbo-avc-color-booked,    #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white) 50%
    );
}
.vbo-avc-swatch-checkout {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--vbo-avc-color-booked,    #e2493f) var(--vbo-avc-bg-tint-pct, 12%), white) 50%,
        color-mix(in srgb, var(--vbo-avc-color-available, #0ea472) var(--vbo-avc-bg-tint-pct, 12%), white) 50%
    );
}
.vbo-avc-swatch-holiday {
    background: color-mix(in srgb, var(--vbo-avc-color-holiday, #f59e0b) 12%, white);
    border: 1px solid var(--vbo-avc-color-day-outline, #e6e8ec);
}
.vbo-avc-swatch-holiday::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    background: var(--vbo-avc-color-holiday, #f59e0b);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.vbo-avc-calendar-wrapper[data-holiday-marker-style="tab"] .vbo-avc-swatch-holiday::after {
    top: -2px;
    width: 7px;
    height: 3px;
    border-radius: 2px 2px 0 0;
    clip-path: none;
}
.vbo-avc-calendar-wrapper[data-holiday-marker-style="glow"] .vbo-avc-swatch-holiday::after {
    content: none;
}
.vbo-avc-calendar-wrapper[data-holiday-marker-style="glow"] .vbo-avc-swatch-holiday {
    /* box-shadow paints outside the swatch's own overflow:hidden clip (that
       only clips content/pseudo-elements, not the box's own shadow) */
    box-shadow: 0 0 5px 1px color-mix(in srgb, var(--vbo-avc-color-holiday, #f59e0b) 35%, transparent);
}

/* ---- Months container height lock ---- */
/*
 * min-height is set by JS after first render to lock the height.
 * This prevents layout shift when content is being fetched.
 */

/* ---- Loading overlay ---- */
.vbo-avc-overlay {
    display: none !important;
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    pointer-events: none;
}
.vbo-avc-overlay--visible {
    display: flex !important;
}
.vbo-avc-overlay-text {
    font-size: 12.5px;
    color: #64748b;
    font-style: italic;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px !important;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* =============================================================================
   Container queries — all breakpoints fire on the WRAPPER's own width,
   not the viewport. This guarantees correct behaviour inside sidebars,
   narrow widget areas, and any theme that constrains the content column.

   Only the legend needs a breakpoint rule here — the month count itself is
   already exactly right without one, since JS's getMonthCount() requests only
   as many .vbo-avc-month cards as should be shown at the current width (see
   ".vbo-avc-months-container" above: a flex row of N items sharing space equally
   needs no column-count CSS of its own).

   Breakpoints (match JS getMonthCount thresholds exactly — phone/tablet/pc):
     < 480px  → 1 month  |  legend: 1 column  (4 rows)
     480–767px → 2 months |  legend: 2 columns (2 rows)
     ≥ 768px  → 3 months  |  legend: 4 columns (1 row)
   ============================================================================= */

/* ── 2-month layout (tablet) ── */
@container vbo-avc-cal (min-width: 480px) {
    .vbo-avc-legend {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 3-month layout (pc / desktop) ── */
@container vbo-avc-cal (min-width: 768px) {
    .vbo-avc-legend {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ── Narrow: header stacks, cells shrink (phone) ── */
@container vbo-avc-cal (max-width: 479px) {
    .vbo-avc-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-align: center;
    }
    .vbo-avc-title-stack {
        align-items: center;
    }
    .vbo-avc-nav {
        width: 100%;
        justify-content: center;
    }
    .vbo-avc-cell {
        font-size: 11px;
    }

    /* Icon-only legend: not enough width here for icon+text without wrapping
       to several full-width rows, which costs more vertical space than the
       calendar grid itself. Swatches alone, in one compact row, with the
       label moved into a tap/hover-revealed tooltip (see .vbo-avc-legend-tip
       above) instead of being permanently visible. */
    .vbo-avc-legend {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .vbo-avc-legend-label {
        display: none;
    }
    .vbo-avc-legend-item {
        cursor: pointer;
        outline: none;
    }
    .vbo-avc-legend-item:focus-visible {
        outline: 2px solid var(--vbo-avc-color-today, #2563eb);
        outline-offset: 2px;
        border-radius: 4px;
    }
    .vbo-avc-legend-item:hover .vbo-avc-legend-tip,
    .vbo-avc-legend-item:focus-within .vbo-avc-legend-tip,
    .vbo-avc-legend-item.vbo-avc-tip-shown .vbo-avc-legend-tip {
        display: block;
    }
}


/* =============================================================================
   Availability list view
   ============================================================================= */

/*
 * .vbo-avc-view-hidden moves the element off-screen but keeps it in the DOM.
 * Used for the list container when calendar is active and vice versa.
 */
.vbo-avc-view-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
 * The shared viewport container wraps both the months-container and the
 * list-container. Its height is locked to the rendered calendar height
 * (set via JS min-height) so switching views causes zero layout shift.
 */
.vbo-avc-viewport {
    position: relative;
    width: 100%;
}

.vbo-avc-list-container {
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
.vbo-avc-avail-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}
.vbo-avc-avail-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 12px 14px !important;
    border-radius: 10px;
    border: 1px solid #eef1f5;
    background: #fbfcfd;
    font-size: 13px;
}
.vbo-avc-avail-dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vbo-avc-avail-label {
    font-weight: 700;
    color: #0f172a;
    min-width: 56px;
}
.vbo-avc-avail-dates {
    color: #64748b;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.vbo-avc-avail-nights {
    margin-left: auto !important;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px !important;
    border-radius: 999px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--vbo-avc-pill-color, #64748b) 12%, white);
    color: color-mix(in srgb, var(--vbo-avc-pill-color, #64748b) 75%, black);
}
.vbo-avc-avail-empty {
    font-size: 13px;
    color: #94a3b8;
    padding: 20px 0 !important;
    text-align: center;
}