/* =========================================================================
   Liquid Glass: nav capsule + menu drawer                     (2026-09-12)
   -------------------------------------------------------------------------
   Apple describes Liquid Glass as combining "the optical properties of glass
   with a sense of fluidity" (HIG: Materials; Adopting Liquid Glass). A plain
   backdrop blur gives you frost, not glass. The difference is four things,
   and this file adds all four:

     1. EDGE LENSING. Real glass is thicker at its curved rim, so light
        compresses and brightens there. A uniform blur has no rim. We add a
        masked ring with its own, stronger backdrop-filter so the edge reads
        as denser glass than the middle. This is the single biggest tell.
     2. SPECULAR HIGHLIGHT. A directional sheen where light strikes the
        surface, concentrated at the top edge and upper-left corner, blended
        with screen so it lifts rather than whitens.
     3. CORRECT LIGHT PHYSICS. Light comes from above: the top rim catches a
        highlight and the bottom rim falls into shadow. The previous version
        put a white highlight on BOTH rims, which reads as a flat sticker.
     4. FLUIDITY. Apple's material "comes to life when a person interacts".
        Spring easing, a slight scale on open, and a press response.

   Apple also requires this to degrade: people can reduce transparency,
   increase contrast, or reduce motion, and the material must respond. The
   accessibility block at the bottom does that.

   NOT DONE, on purpose: true refraction via an SVG feDisplacementMap
   (kube.io technique). It produces genuine light-bending, but SVG filters in
   backdrop-filter are Chrome-only, and the displacement map must be
   regenerated at the element's exact pixel size, which a responsive
   full-width nav bar changes constantly. Every iPhone browser is WebKit, so
   the audience most likely to recognise Liquid Glass would see none of it
   while we carried the fragility. The CSS below works everywhere.
   ========================================================================= */

:root {
    --lg-blur: 20px;
    --lg-sat: 190%;
    --lg-bright: 1.07;
    /* spring-ish curve; Apple's material settles rather than stops */
    --lg-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- 1. Glass body ----------------------------------------------------- */
/* Four stops instead of two: light rolls across a curved surface rather than
   sitting flat across a pane. */
#main-header,
.vri-fullscreen-nav {
    /* NB: do NOT set position here. Both are position:fixed, which already
       establishes a containing block for the ::before/::after layers; adding
       position:relative drops the header out of fixed flow and pushes the
       whole page down. */
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.26) 0%,
        rgba(255, 255, 255, 0.13) 34%,
        rgba(255, 255, 255, 0.09) 62%,
        rgba(255, 255, 255, 0.19) 100%
    ) !important;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    /* Light from above: top rim lit, bottom rim in shadow, plus a real float. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 1px 0 0 rgba(255, 255, 255, 0.26),
        inset -1px 0 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(8, 38, 58, 0.13),
        inset 0 -14px 22px -18px rgba(8, 38, 58, 0.30),
        0 2px 6px rgba(0, 30, 50, 0.07),
        0 12px 38px rgba(0, 30, 50, 0.16) !important;
}

/* ---- 2. Specular highlight --------------------------------------------- */
#main-header::before,
.vri-fullscreen-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(125% 85% at 16% -12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 20%);
    mix-blend-mode: screen;
}

/* ---- 3. Edge lens ------------------------------------------------------ */
/* A ring at the rim carrying its own stronger backdrop-filter, so the border
   region refracts more than the centre. The mask trick shows only the ring:
   the padding-box is excluded from the border-box. */
#main-header::after,
.vri-fullscreen-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 7px;
    -webkit-backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* keep real content above the two effect layers */
#main-header > *,
.vri-fullscreen-nav > * { position: relative; z-index: 1; }

/* ---- 4. Scrolled state ------------------------------------------------- */
/* This is the state people actually spend most of their time looking at, and
   it was carrying more than double the veil of the top-of-page state (0.56 vs
   0.26), which read as "frosted" rather than glass. Most page content behind
   the scrolled capsule is white anyway, where a heavy veil buys nothing: over
   white, blur is invisible and only the veil shows. Kept a modest lift for
   legibility over imagery and let the blur do the rest. */
/* Apple's regular variant "blurs and adjusts the luminosity of background
   content" as content passes beneath. More body, not just more blur. */
#main-header.et-fixed-header {
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.19) 34%,
        rgba(255, 255, 255, 0.14) 62%,
        rgba(255, 255, 255, 0.25) 100%
    ) !important;
    -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.10) !important;
    backdrop-filter: blur(26px) saturate(200%) brightness(1.10) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
}

/* ---- 5. Fluidity ------------------------------------------------------- */
.vri-fullscreen-nav {
    transition:
        transform 0.52s var(--lg-spring),
        opacity 0.30s ease !important;
}
/* the drawer settles into place rather than stopping dead */
.vri-fullscreen-nav.vri-nav-open { transform: translateX(0) !important; }

/* Controls respond to touch the way the material does */
#main-header .vri-header__menu-btn,
#main-header .vri-nav__fav,
#main-header .vri-nav__account,
#main-header .vri-nav__cart,
#main-header .vri-nav__cta,
.vri-fullscreen-nav__menu a {
    transition: transform 0.22s var(--lg-spring), background-color 0.22s ease;
}
#main-header .vri-header__menu-btn:active,
#main-header .vri-nav__fav:active,
#main-header .vri-nav__account:active,
#main-header .vri-nav__cart:active,
#main-header .vri-nav__cta:active,
.vri-fullscreen-nav__menu a:active { transform: scale(0.94); }

/* ---- 6. Accessibility: the material must adapt ------------------------- */
@media (prefers-reduced-transparency: reduce) {
    #main-header,
    #main-header.et-fixed-header,
    .vri-fullscreen-nav {
        background: rgba(245, 249, 252, 0.99) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: rgba(0, 58, 87, 0.16) !important;
    }
    #main-header::before, #main-header::after,
    .vri-fullscreen-nav::before, .vri-fullscreen-nav::after { display: none; }
}
@media (prefers-contrast: more) {
    #main-header,
    #main-header.et-fixed-header,
    .vri-fullscreen-nav {
        background: rgba(248, 251, 253, 0.97) !important;
        border-color: rgba(0, 58, 87, 0.34) !important;
    }
    #main-header::before, .vri-fullscreen-nav::before { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .vri-fullscreen-nav { transition: transform 0.001s linear !important; }
    #main-header .vri-header__menu-btn:active,
    #main-header .vri-nav__cta:active,
    .vri-fullscreen-nav__menu a:active { transform: none; }
}

/* ---- 7. No backdrop-filter at all -------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #main-header,
    #main-header.et-fixed-header,
    .vri-fullscreen-nav { background: rgba(245, 249, 252, 0.97) !important; }
    #main-header::after, .vri-fullscreen-nav::after { display: none; }
}

/* ---- 8. True refraction (Chromium) ------------------------------------- */
/* liquid-glass.js generates an SVG displacement map encoding how light bends
   through a convex-squircle bezel, and sets --lg-filter on the element. Where
   that runs, the rim genuinely displaces the content behind it instead of
   only brightening it, and the CSS edge ring stands down so the two don't
   double up. Everything here is scoped to .n9-lg-refract, which the script
   only adds once it has verified support and built the maps. */
.n9-lg-refract #main-header {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(9px) saturate(185%) brightness(1.06) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(9px) saturate(185%) brightness(1.06) !important;
}
.n9-lg-refract #main-header.et-fixed-header {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(195%) brightness(1.09) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(195%) brightness(1.09) !important;
}
.n9-lg-refract .vri-fullscreen-nav {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(190%) brightness(1.07) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(190%) brightness(1.07) !important;
}
/* the displacement map now draws the lens, so retire the CSS ring */
.n9-lg-refract #main-header::after,
.n9-lg-refract .vri-fullscreen-nav::after { display: none; }
/* and ease off the painted sheen, since the bezel provides its own */
.n9-lg-refract #main-header::before,
.n9-lg-refract .vri-fullscreen-nav::before { opacity: 0.72; }

/* ---- 9. Drawer: same glass as the capsule ------------------------------ */
/* The drawer was carrying a 0.66 white veil against the capsule's 0.26, so it
   read as a different, milkier material. It holds a column of navy links, so
   it does need protecting - but Apple's regular variant works by "adjusting
   the luminosity of background content to maintain legibility", not by
   painting white over it. So the veil now matches the capsule and the work is
   done by brightness(1.34): the backdrop is lifted toward white, which keeps
   dark text readable while hue, shape and detail all survive. Blur sits a
   little higher than the capsule because this surface carries more text. */
.vri-fullscreen-nav {
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.16) 34%,
        rgba(255, 255, 255, 0.12) 62%,
        rgba(255, 255, 255, 0.22) 100%
    ) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
    backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
}
.n9-lg-refract .vri-fullscreen-nav {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
}

/* ---- 10. Concentric corners ------------------------------------------- */
/* House rule: outer radius = inner radius + (padding / 2).
   Measured on the live capsule: the BOOK NOW pill is 42px tall, so its
   effective radius is 21px, and it clears the capsule edge by 27px
   vertically (25px horizontally). 21 + 27/2 = 34.5, so the capsule wants a
   34px radius — it was sitting at 24px, which read as slightly pinched
   against the pill inside it.
   This also widens the Liquid Glass lip for free: liquid-glass.js reads the
   painted radius and the bezel can never exceed it, so a rounder capsule is
   a wider, more convincing lens. */
#main-header { border-radius: 34px !important; }

/* The drawer's own nesting: its inner padding is 24px and its menu rows sit
   at 10px, so 10 + 24/2 = 22. Rounded to the token scale it stays at 24,
   which already satisfies the rule within a pixel. */

/* ---- 11. Hero search bar ----------------------------------------------- */
/* Same material as the capsule and drawer. It was still on the original
   recipe: a flat 135deg two-stop veil, blur 14, and a white highlight on BOTH
   rims (which is what makes glass read as a flat sticker).
   Its geometry already satisfies the nesting rule and is left alone:
   outer 48 = inner 44 + 8/2. Because liquid-glass.js reads the painted
   radius, that generous 48px pill also gives this the widest lens of the
   three surfaces. Selectors are scoped through .vri-hero__search to outrank
   the plugin's inline <style>, which loads after this file. */
.vri-hero__search .vri-search-bar {
    position: relative;
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.26) 0%,
        rgba(255, 255, 255, 0.13) 34%,
        rgba(255, 255, 255, 0.09) 62%,
        rgba(255, 255, 255, 0.19) 100%
    ) !important;
    -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(1.10) !important;
    backdrop-filter: blur(18px) saturate(185%) brightness(1.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 1px 0 0 rgba(255, 255, 255, 0.26),
        inset -1px 0 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(8, 38, 58, 0.13),
        inset 0 -14px 22px -18px rgba(8, 38, 58, 0.30),
        0 2px 6px rgba(0, 30, 50, 0.07),
        0 12px 38px rgba(0, 30, 50, 0.16) !important;
}
.n9-lg-refract .vri-hero__search .vri-search-bar {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(185%) brightness(1.10) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(185%) brightness(1.10) !important;
}
/* specular sheen */
.vri-hero__search .vri-search-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(125% 85% at 16% -12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 20%);
    mix-blend-mode: screen;
}
.n9-lg-refract .vri-hero__search .vri-search-bar::before { opacity: 0.72; }
.vri-hero__search .vri-search-bar > * { position: relative; z-index: 1; }
/* The inner row is the content layer, not a second sheet of glass: keep it a
   whisper so the outer pill stays the only glass edge. */
.vri-hero__search .vri-search-bar__inner {
    background: linear-gradient(152deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)) !important;
}

/* ---- 12. Search bar: white content, same glass as everything else ------ */
/* First attempt here swapped the white veil for a dark one (rgba(4,26,42,.38)
   + brightness 0.92) so the white labels would read. It worked, and it looked
   wrong: a dark pane in a family of light ones.
   Measured instead of guessed. Sampling the pane every ~6.5s across the whole
   66s Waterford-web.mp4 loop, with the CAPSULE material on the bar:

       frame  0.0s  rgb( 63, 97, 88)   white text 6.86:1
       frame 26.3s  rgb( 58,109,137)   white text 5.63:1
       frame 39.4s  rgb( 78,120,149)   white text 4.72:1   <- worst
       frame 52.6s  rgb( 58, 94, 90)   white text 7.17:1

   The video under the bar is dark the whole way through, so the ordinary
   light capsule glass already lands white text at 4.72:1 at its worst, over
   WCAG AA's 4.5. The dark veil was buying contrast we were not short of and
   costing the material family. So section 11's capsule glass stands as-is and
   this section only colours the content. The text-shadow is the backstop for
   the brightest frames, so it is a touch stronger than before. */
.vri-hero__search .vri-sb-field,
.vri-hero__search .vri-date-btn,
.vri-hero__search .vri-date-text,
.vri-hero__search .vri-sb-select,
.vri-hero__search .n9-sel__btn,
.vri-hero__search .vri-sb-icon i {
    color: #fff !important;
}
.vri-hero__search .vri-sb-icon i { opacity: 0.95; }
.vri-hero__search .vri-date-text,
.vri-hero__search .n9-sel__label,
.vri-hero__search .vri-sb-label { text-shadow: 0 1px 3px rgba(0, 20, 34, 0.55); }
.vri-hero__search .vri-sb-icon i { filter: drop-shadow(0 1px 2px rgba(0, 20, 34, 0.45)); }
/* Safety net: no field label may ever run into its neighbour. A flex cell
   defaults to min-width:auto, so it refuses to shrink below its text and
   pushes into the next field instead of truncating - the same flexbox default
   that made the month cards ragged. min-width:0 lets the cell shrink so the
   ellipsis can actually engage. */
.vri-hero__search .vri-sb-field { min-width: 0; }
.vri-hero__search .vri-date-btn { max-width: 100%; }
.vri-hero__search .vri-date-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* the divider between fields, read against white content */
.vri-hero__search .vri-sb-field + .vri-sb-field { border-left-color: rgba(255, 255, 255, 0.28) !important; }

/* ---- 13. Custom select (replaces the native popup) --------------------- */
/* `appearance: none` styles the closed control but the OPEN list is drawn by
   the OS and cannot be reached with CSS, so vri-select.js swaps it for a real
   listbox. The native <select> stays for form submission. */
.n9-sel { position: relative; display: inline-flex; align-items: center; }
.n9-sel__native {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0; pointer-events: none; opacity: 0;
}
.n9-sel__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer; line-height: 1.2;
}
.n9-sel__caret {
    width: 9px; height: 9px; flex: none; margin-top: 1px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0.75; transition: transform 0.2s var(--lg-spring, ease);
}
.n9-sel__btn[aria-expanded="true"] .n9-sel__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.n9-sel__panel {
    position: fixed;
    z-index: 100000;
    padding: 8px;
    border-radius: 20px;          /* rows are 12px + 8px padding /2 = 16... see below */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(152deg, rgba(255,255,255,0.88), rgba(255,255,255,0.80)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.06);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(8, 38, 58, 0.10),
        0 18px 48px rgba(0, 30, 50, 0.26);
    opacity: 0; transform: translateY(-6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.22s var(--lg-spring, ease);
}
.n9-sel__panel.is-open { opacity: 1; transform: none; }
/* concentric: rows 12px + panel padding 8/2 = 16 -> panel 16px. Using 20px
   here would break the rule, so the panel is 16. */
.n9-sel__panel { border-radius: 16px; }
.n9-sel__opt {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px; border-radius: 12px;
    font-size: 15px; color: #003A57; cursor: pointer; outline: none;
    font-family: var(--vri-font-body, inherit);
}
.n9-sel__opt:hover, .n9-sel__opt:focus-visible { background: rgba(0, 130, 164, 0.12); }
.n9-sel__opt:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 130, 164, 0.55); }
.n9-sel__opt.is-on { background: #003A57; color: #fff; font-weight: 600; }
.n9-sel__opt.is-on::after { content: '✓'; font-size: 13px; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
    .n9-sel__panel { transition: none; }
    .n9-sel__caret { transition: none; }
}

/* ---- 14. /property-search filters bar ---------------------------------- */
/* The fourth glass surface, and the last one still on the 2026-08 recipe:
   a flat 135deg two-stop veil, blur 18, and a white highlight on BOTH rims,
   which is what makes glass read as a flat sticker. It now carries the same
   material as the capsule, drawer and hero search bar.

   It also stopped being sticky (owner request 2026-09-11): the bar sat pinned
   under the floating header for the whole scroll, so the results never had the
   full window. It is a normal in-flow block now. `position: relative` is
   correct and necessary here — unlike #main-header and .vri-fullscreen-nav,
   this element is NOT fixed, so it needs its own containing block for the
   ::before / ::after effect layers.

   Nesting: the controls inside are 40px-tall pills, so their effective radius
   is 20px, and the bar pads them by 16px. House rule outer = inner +
   padding/2 gives 20 + 8 = 28px. The two tighter breakpoints keep the rule:
   14px padding -> 27px, 12px padding -> 26px. Padding lives here rather than
   in the plugin's inline CSS so the radius and the padding it is derived from
   can never drift apart.

   Selectors carry !important because the plugin prints its CSS in an inline
   <style> inside the body, i.e. after this file. */
.vri-results-sticky-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.26) 0%,
        rgba(255, 255, 255, 0.13) 34%,
        rgba(255, 255, 255, 0.09) 62%,
        rgba(255, 255, 255, 0.19) 100%
    ) !important;
    -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(1.10) !important;
    backdrop-filter: blur(18px) saturate(185%) brightness(1.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 1px 0 0 rgba(255, 255, 255, 0.26),
        inset -1px 0 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(8, 38, 58, 0.13),
        inset 0 -14px 22px -18px rgba(8, 38, 58, 0.30),
        0 2px 6px rgba(0, 30, 50, 0.07),
        0 12px 38px rgba(0, 30, 50, 0.16) !important;
}
@media (max-width: 768px) {
    .vri-results-sticky-header { padding: 14px !important; border-radius: 27px !important; }
}
@media (max-width: 480px) {
    .vri-results-sticky-header { padding: 12px !important; border-radius: 26px !important; }
}
/* specular highlight */
.vri-results-sticky-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(125% 85% at 16% -12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 20%);
    mix-blend-mode: screen;
}
/* edge lens */
.vri-results-sticky-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 7px;
    -webkit-backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.vri-results-sticky-header > * { position: relative; z-index: 1; }
/* refraction pass: the displacement map draws the lens, so retire the ring */
.n9-lg-refract .vri-results-sticky-header {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(185%) brightness(1.10) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(10px) saturate(185%) brightness(1.10) !important;
}
.n9-lg-refract .vri-results-sticky-header::after { display: none; }
.n9-lg-refract .vri-results-sticky-header::before { opacity: 0.72; }
/* Controls respond to touch like the rest of the material */
.vri-results-sticky-header .vri-filter-icon-btn,
.vri-results-sticky-header .vri-filter-btn,
.vri-results-sticky-header .vri-date-btn {
    transition: transform 0.22s var(--lg-spring), background-color 0.22s ease, border-color 0.2s;
}
.vri-results-sticky-header .vri-filter-icon-btn:active,
.vri-results-sticky-header .vri-filter-btn:active,
.vri-results-sticky-header .vri-date-btn:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
    .vri-results-sticky-header .vri-filter-icon-btn:active,
    .vri-results-sticky-header .vri-filter-btn:active,
    .vri-results-sticky-header .vri-date-btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .vri-results-sticky-header {
        background: rgba(245, 249, 252, 0.99) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: rgba(0, 58, 87, 0.16) !important;
    }
    .vri-results-sticky-header::before,
    .vri-results-sticky-header::after { display: none; }
}
@media (prefers-contrast: more) {
    .vri-results-sticky-header {
        background: rgba(248, 251, 253, 0.97) !important;
        border-color: rgba(0, 58, 87, 0.34) !important;
    }
    .vri-results-sticky-header::before { opacity: 0.35; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vri-results-sticky-header { background: rgba(245, 249, 252, 0.97) !important; }
    .vri-results-sticky-header::after { display: none; }
}

/* vri-select.js now also replaces the native popups on this page (guests in
   the bar, sort in the subheader). The custom button is an unstyled <button>
   by design, so each host has to dress it as whatever it replaced: here, the
   same pills and the same small sort control as before. */
.vri-filter-field .n9-sel { display: inline-flex; }
.vri-filter-field .n9-sel__btn {
    height: 40px;
    min-width: 104px;
    padding: 0 14px 0 36px;
    justify-content: space-between;
    border: 1px solid rgba(0, 58, 87, 0.14);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    color: var(--vri-primary, #003A57);
}
.vri-filter-field .n9-sel__btn:hover { border-color: rgba(0, 58, 87, 0.24); }
.vri-filter-field .n9-sel__btn:focus-visible {
    outline: none;
    border-color: var(--vri-secondary, #26719a);
    box-shadow: 0 0 0 3px rgba(62, 143, 187, 0.25);
}
.vri-sort-wrap .n9-sel__btn {
    gap: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(0, 58, 87, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    color: var(--vri-primary, #003A57);
}
.vri-sort-wrap .n9-sel__btn:hover { border-color: rgba(0, 58, 87, 0.24); }
.vri-sort-wrap .n9-sel__btn:focus-visible {
    outline: none;
    border-color: var(--vri-secondary, #26719a);
    box-shadow: 0 0 0 3px rgba(62, 143, 187, 0.25);
}


/* ---- 15. Chat bubble popups -------------------------------------------- */
/* The chat panel and its menu were still on the ORIGINAL frosted recipe: a
   flat 135deg two-stop veil at 0.64/0.48 (the milkiest surface on the site),
   a white rim on ALL four sides, and no bottom shadow - the "flat sticker"
   look. Brought onto the shared material.

   REGULAR variant, matching the drawer rather than the capsule: Apple names
   "popovers" alongside alerts and sidebars as the case for regular, and these
   carry a column of navy text (messages, menu labels, form fields). As with
   the drawer, legibility comes from brightness(1.34) lifting the backdrop
   rather than from painting white over it - dark text needs a LIFTED
   backdrop, not a dimmed one.

   Geometry already satisfies the nesting rule, so radii are left alone:
     panel  24 = message bubble 14 + thread padding 16/2 = 22, on the scale
     menu   20 - its rows are full-bleed (no padding, no row radius), so the
            rule has nothing to nest and 20 stands.

   NB: both are position:fixed, which already establishes a containing block
   for ::before/::after - do NOT add position here (see the #main-header bug).

   Selectors carry !important to outrank the plugin's inline <style>, which
   is printed at wp_footer and so lands after this file. */
.vri-cb-panel {
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.16) 34%,
        rgba(255, 255, 255, 0.12) 62%,
        rgba(255, 255, 255, 0.22) 100%
    ) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
    backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 1px 0 0 rgba(255, 255, 255, 0.26),
        inset -1px 0 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(8, 38, 58, 0.13),
        inset 0 -14px 22px -18px rgba(8, 38, 58, 0.30),
        0 2px 6px rgba(0, 30, 50, 0.07),
        0 12px 38px rgba(0, 30, 50, 0.16) !important;
}
/* Desktop only: below 601px the menu is deliberately an OPAQUE white bottom
   sheet (the plugin sets background:#fff + backdrop-filter:none there), which
   is the right call for a thumb-reachable sheet. Leave it alone. */
@media (min-width: 601px) {
    .vri-cb-menu {
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.16) 34%,
        rgba(255, 255, 255, 0.12) 62%,
        rgba(255, 255, 255, 0.22) 100%
    ) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
    backdrop-filter: blur(22px) saturate(180%) brightness(1.34) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 1px 0 0 rgba(255, 255, 255, 0.26),
        inset -1px 0 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(8, 38, 58, 0.13),
        inset 0 -14px 22px -18px rgba(8, 38, 58, 0.30),
        0 2px 6px rgba(0, 30, 50, 0.07),
        0 12px 38px rgba(0, 30, 50, 0.16) !important;
    }
}

/* specular sheen */
.vri-cb-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(125% 85% at 16% -12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 20%);
    mix-blend-mode: screen;
}
@media (min-width: 601px) {
    .vri-cb-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(125% 85% at 16% -12%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 20%);
    mix-blend-mode: screen;
    }
}

/* edge lens (stands down where real refraction runs) */
.vri-cb-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 7px;
    -webkit-backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
@media (min-width: 601px) {
    .vri-cb-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    padding: 7px;
    -webkit-backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    backdrop-filter: blur(1px) brightness(1.20) saturate(210%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    }
}

/* keep real content above the two effect layers. Both are flex containers,
   but absolutely-positioned children are out of flex flow, so the pseudo
   layers never become flex items. */
.vri-cb-panel > *,
.vri-cb-menu > * { position: relative; z-index: 1; }

/* The picker cards are the content layer, not a second sheet of glass: at
   0.72 white over a 1.34-lifted backdrop they read as milky tiles stacked on
   glass. Dropped to a whisper so the popup rim is the only glass edge. */
.vri-cb-pick {
    background: linear-gradient(152deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
}

/* true refraction (Chromium) */
.n9-lg-refract .vri-cb-panel {
    -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
    backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
}
@media (min-width: 601px) {
    .n9-lg-refract .vri-cb-menu {
        -webkit-backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
        backdrop-filter: var(--lg-filter, blur(0px)) blur(12px) saturate(180%) brightness(1.34) !important;
    }
}
.n9-lg-refract .vri-cb-panel::after,
.n9-lg-refract .vri-cb-menu::after { display: none; }
.n9-lg-refract .vri-cb-panel::before,
.n9-lg-refract .vri-cb-menu::before { opacity: 0.72; }

/* accessibility, same contract as every other surface */
@media (prefers-reduced-transparency: reduce) {
    .vri-cb-panel,
    .vri-cb-menu {
        background: rgba(245, 249, 252, 0.99) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: rgba(0, 58, 87, 0.16) !important;
    }
    .vri-cb-panel::before, .vri-cb-panel::after,
    .vri-cb-menu::before, .vri-cb-menu::after { display: none; }
}
@media (prefers-contrast: more) {
    .vri-cb-panel,
    .vri-cb-menu {
        background: rgba(248, 251, 253, 0.97) !important;
        border-color: rgba(0, 58, 87, 0.34) !important;
    }
    .vri-cb-panel::before, .vri-cb-menu::before { opacity: 0.35; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vri-cb-panel,
    .vri-cb-menu { background: rgba(245, 249, 252, 0.97) !important; }
    .vri-cb-panel::after, .vri-cb-menu::after { display: none; }
}


/* ---- 16. Hero date picker ---------------------------------------------- */
/* Two problems, both visible in the same screenshot.

   BEHAVIOUR: the portal is position:fixed and was positioned exactly once, on
   open. Only the mobile branch of position() registered a listener, so on
   desktop any scroll left the calendar hanging in the middle of the viewport
   while the search bar slid away underneath it. Fixed in the plugin's
   position(): it now tracks the anchor on scroll/resize and dismisses once the
   field leaves the viewport.

   MATERIAL: it was the last surface on the ORIGINAL frosted recipe - flat
   135deg two-stop veil, brightness 1.08, white rim on BOTH rims. At 1.08 a
   dense grid of small navy numbers cannot hold up over a busy backdrop, which
   is why a pink building behind it bled straight through the pane and the
   past days all but vanished. Now on the REGULAR variant, same as the drawer
   and the chat popup: the lift comes from brightness(1.34) rather than white
   paint, which is what keeps hue and shape behind it alive while still
   carrying dark text.

   Radius stays 24 rather than copying Airbnb's larger pill: day cells are 12
   and the body padding is 20, so 12 + 20/2 = 22, which rounds to 24 on the
   token scale. Same house rule, our own correct answer.

   Scoped through .vri-cal-portal to outrank the plugin's inline <style>. */
.vri-cal-portal .vri-cal {
    position: relative;
    /* The THICK member of the family, and measured rather than judged by eye.
       Navy numerals sampled against the live pane over the hero video and the
       painted quay houses below it:

           veil 0.28 / brightness 1.34   median 2.98:1   darkest 10%  2.28:1
           veil 0.52 / brightness 1.22   median 4.64:1   darkest 10%  3.90:1
           veil 0.66 / brightness 1.14   median 5.76:1   darkest 10%  4.99:1  <-
           veil 0.78 / brightness 1.08   median 7.32:1   darkest 10%  6.68:1

       The drawer/chat recipe (0.28 + brightness 1.34) landed at 2.28:1 at the
       dark end, half of WCAG AA. That recipe is right for a column of large
       links; it cannot carry sixty 14px numerals over moving video. 0.66 is
       the first step that clears AA (4.5:1) across the WHOLE pane, and it is
       still visibly glass - the backdrop reads as a soft colour wash instead
       of competing detail. The 0.78 step buys contrast we do not need and
       loses the material.
       Same 152deg four-stop veil, same rim physics, same specular as every
       other surface: this is the thick variant of one material, not a
       different one. */
    background: linear-gradient(
        152deg,
        rgba(255, 255, 255, 0.66) 0%,
        rgba(255, 255, 255, 0.56) 34%,
        rgba(255, 255, 255, 0.52) 62%,
        rgba(255, 255, 255, 0.62) 100%
    ) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.14) !important;
    backdrop-filter: blur(28px) saturate(180%) brightness(1.14) !important;
    /* RIM. The family's rim is a white hairline plus white inset highlights on
       three sides - correct on a thin, near-transparent pane over dark video,
       where the lit edge IS the glass. On this thick, light pane the same
       treatment has nothing to sit against: white on near-white stops reading
       as an edge and smears into a pale halo, which is why the container
       looked wrong while the grid inside it looked fine.
       A light surface defines its edge the other way round: a faint navy
       hairline for the boundary, one restrained top sheen, and the float
       carried by the drop shadow rather than by glow. */
    border: 1px solid rgba(0, 58, 87, 0.10) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(8, 38, 58, 0.05),
        0 1px 3px rgba(0, 30, 50, 0.06),
        0 20px 52px rgba(0, 30, 50, 0.26) !important;
}
/* Deliberately NOT a liquid-glass.js refraction target. The calendar is built
   fresh on every open and re-rendered on every month change, so an init-time
   query can never hold a reference to it and --lg-filter would never be set.
   It runs the CSS optics path instead - the same one every WebKit browser
   gets - with the edge ring below doing the rim work. */
.vri-cal-portal .vri-cal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 80% at 18% -10%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 16%);
    mix-blend-mode: screen;
}
/* No edge-lens ring here. On the thin surfaces that ring IS the lens: a 7px
   band at brightness(1.20) refracting harder than the centre. Over a pane this
   opaque there is nothing left behind it to bend, so it only painted a bright
   7px frame - the wrong border. The hairline above does the job instead. */
.vri-cal-portal .vri-cal > * { position: relative; z-index: 1; }

/* --- Two-month layout --------------------------------------------------- */
/* A stay usually straddles a month boundary, so showing one month meant
   paging back and forth just to place the check-out. Two grids side by side
   is the standard answer and the range now reads in one glance. */
.vri-cal-portal .vri-cal--duo { width: 744px !important; }
.vri-cal-portal .vri-cal__months {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}
.vri-cal-portal .vri-cal--duo .vri-cal__months { grid-template-columns: 1fr 1fr; }

/* Arrows sit at the outer edges on the month-title line, so the two titles
   stay optically centred over their own grids. The header is a zero-height
   overlay rather than its own bar - a divider here cut the panel in half. */
.vri-cal-portal .vri-cal__header {
    position: relative;
    height: 0;
    padding: 0 !important;
    border-bottom: 0 !important;
    z-index: 2;
}
.vri-cal-portal .vri-cal__nav-btn {
    position: absolute;
    top: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.34) !important;
    border-radius: 50% !important;
    color: #003A57;
    font-size: 19px;
    line-height: 1;
    transition: background 0.18s var(--lg-spring, ease), transform 0.18s var(--lg-spring, ease);
}
.vri-cal-portal .vri-cal__nav-btn:hover { background: rgba(255, 255, 255, 0.62) !important; }
.vri-cal-portal .vri-cal__nav-btn:active { transform: scale(0.94); }
.vri-cal-portal .vri-cal__nav-btn[data-dir="prev"] { left: 14px; }
.vri-cal-portal .vri-cal__nav-btn[data-dir="next"] { right: 14px; }

.vri-cal-portal .vri-cal__body { padding: 14px 20px 4px !important; }
.vri-cal-portal .vri-cal__month {
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #003A57;
    margin: 0 0 12px;
}
.vri-cal-portal .vri-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.vri-cal-portal .vri-cal__weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(0, 58, 87, 0.72);
}

/* --- Day cells, retuned for the thick pane ------------------------------
   The cells were built for the old near-transparent pane: a translucent white
   tile with a white border and an inset white highlight, so each day would
   "whisper its bounds" against dark video. On the light pane that vocabulary
   inverts - white on white is invisible, and the navy range tint plus a
   per-cell border turned a selected range into a row of separate grey boxes
   instead of one band.
   So: no per-cell chrome, one continuous band, solid endpoints. The grid gap
   goes to zero because a gap breaks the band into dashes. */
.vri-cal-portal .vri-cal__days { gap: 0 !important; }
.vri-cal-portal .vri-cal__day {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 44px !important;
    font-weight: 600 !important;
    color: #003A57;
}
.vri-cal-portal .vri-cal__day:hover:not([disabled]):not(.vri-cal__day--pad) {
    background: rgba(0, 58, 87, 0.09) !important;
    border-radius: 10px !important;
}

/* The range itself: one continuous band in the brand blue rather than a navy
   wash, which went muddy against the pane. Square so consecutive days join. */
.vri-cal-portal .vri-cal__day--range,
.vri-cal-portal .vri-cal__day--hover {
    background: rgba(0, 108, 157, 0.14) !important;
    border-radius: 0 !important;
    color: #003A57 !important;
}

/* Endpoints stay the solid contrast anchor, rounded so the band reads as
   starting and ending on them. */
.vri-cal-portal .vri-cal__day--checkin,
.vri-cal-portal .vri-cal__day--checkout {
    background: #003A57 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Past days simply recede - no fill, they are not a state you can act on. */
.vri-cal-portal .vri-cal__day--past {
    color: rgba(0, 58, 87, 0.30) !important;
    background: transparent !important;
    opacity: 1 !important;
}
/* Booked/blocked days DO need to stay visible: on a 12-room hotel "which
   nights are gone" is information the guest is actively reading for. A soft
   navy wash reads as blocked without turning into the grey slab the old
   rgba(94,116,128,.26) became on a light pane. */
.vri-cal-portal .vri-cal__day--unavailable,
.vri-cal-portal .vri-cal__day--closed,
.vri-cal-portal .vri-cal__day--turnover {
    background: rgba(0, 58, 87, 0.08) !important;
    color: rgba(0, 58, 87, 0.34) !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Turnover slashes carry real meaning (someone out, or in, that day), so the
   diagonals are re-declared after the blanket transparent above. */
.vri-cal-portal .vri-cal__day--checkout-end {
    background: linear-gradient(to bottom right, rgba(0, 58, 87, 0.14) 50%, transparent 50%) !important;
    color: #003A57 !important;
}
.vri-cal-portal .vri-cal__day--checkin-start {
    background: linear-gradient(to bottom right, transparent 50%, rgba(0, 58, 87, 0.14) 50%) !important;
}

/* Footer + flexible chips: more air, so the chip row reads as its own band. */
.vri-cal-portal .vri-cal__footer {
    border-top: 1px solid rgba(0, 58, 87, 0.10) !important;
    padding: 12px 20px !important;
    font-weight: 600;
    color: rgba(0, 58, 87, 0.72) !important;
}
.vri-cal-portal .vri-cal__flex { padding: 0 18px 16px !important; gap: 8px !important; }
.vri-cal-portal .vri-cal__flex-chip {
    padding: 9px 16px !important;
    font-size: 13px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(0, 58, 87, 0.16) !important;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s var(--lg-spring, ease);
}
.vri-cal-portal .vri-cal__flex-chip:active { transform: scale(0.95); }
.vri-cal-portal .vri-cal__flex-chip--on {
    background: #003A57 !important;
    border-color: #003A57 !important;
    color: #fff !important;
}

/* --- Flexible tab ------------------------------------------------------ */
/* A flexible search asks for a SHAPE of trip (a weekend, a week, a month) in
   one or more target months, instead of a window. Segmented control on top so
   the two modes are obviously alternatives rather than extra filters. */
.vri-cal-portal .vri-cal__tabs {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 16px auto 2px;
    padding: 3px;
    width: fit-content;
    background: rgba(0, 58, 87, 0.07);
    border-radius: 9999px;
}
.vri-cal-portal .vri-cal__tab {
    border: 0;
    background: transparent;
    color: rgba(0, 58, 87, 0.70);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 26px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.vri-cal-portal .vri-cal__tab--on {
    background: #fff;
    color: #003A57;
    box-shadow: 0 1px 3px rgba(0, 30, 50, 0.14);
}

.vri-cal-portal .vri-cal__flexpane { padding: 6px 20px 18px; }
.vri-cal-portal .vri-cal__flexq {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #003A57;
    margin: 20px 0 12px;
}
.vri-cal-portal .vri-cal__stays {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.vri-cal-portal .vri-cal__stay {
    border: 1px solid rgba(0, 58, 87, 0.18);
    background: rgba(255, 255, 255, 0.55);
    color: #003A57;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s var(--lg-spring, ease);
}
.vri-cal-portal .vri-cal__stay:hover { background: rgba(255, 255, 255, 0.85); }
.vri-cal-portal .vri-cal__stay:active { transform: scale(0.96); }
.vri-cal-portal .vri-cal__stay--on {
    background: #003A57;
    border-color: #003A57;
    color: #fff;
}

/* Month cards scroll horizontally: twelve of them will not fit, and a wall of
   wrapped tiles would bury the stay pills above. */
/* Cards are sized to the viewport rather than given a fixed width, so exactly
   five whole cards fill the strip and the sixth is never sliced down the
   middle at the edge. Paging moves by one full strip width, so that stays
   true at every position. The scrollbar is hidden: the arrows are the
   affordance, the way Airbnb does it. */
.vri-cal-portal .vri-cal__mwrap { position: relative; }
.vri-cal-portal .vri-cal__mstrip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vri-cal-portal .vri-cal__mstrip::-webkit-scrollbar { display: none; }

/* Arrows sit just outside the strip, inside the pane's own padding. */
.vri-cal-portal .vri-cal__mnav {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 58, 87, 0.14);
    background: #fff;
    color: #003A57;
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 30, 50, 0.20);
    z-index: 3;
    transition: background 0.18s, opacity 0.18s, transform 0.18s var(--lg-spring, ease);
}
.vri-cal-portal .vri-cal__mnav:hover { background: #f4f8fb; }
.vri-cal-portal .vri-cal__mnav:active { transform: translateY(-50%) scale(0.92); }
.vri-cal-portal .vri-cal__mnav--prev { left: -14px; }
.vri-cal-portal .vri-cal__mnav--next { right: -14px; }
/* Hidden rather than removed, so the strip never reflows as you page. */
.vri-cal-portal .vri-cal__mnav.is-hidden { opacity: 0; pointer-events: none; }
/* Nesting rule again: card 12 + strip padding ~20/2 = 22, the pane's 24. */
.vri-cal-portal .vri-cal__mcard {
    flex: 0 0 calc((100% - 48px) / 5); /* 5 cards, 4 x 12px gaps */
    /* Flex items default to min-width:auto, so a card will refuse to shrink
       below its own CONTENT width. On a narrow strip that silently overrode
       the basis above and sized every card to the length of its month name -
       "May" at 52px next to "September" at 94px. Desktop never showed it
       because the 131px basis already cleared the longest name. */
    min-width: 0;
    white-space: nowrap;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px 14px;
    border: 1px solid rgba(0, 58, 87, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    color: #003A57;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s var(--lg-spring, ease);
}
.vri-cal-portal .vri-cal__mcard:hover { background: rgba(255, 255, 255, 0.85); }
.vri-cal-portal .vri-cal__mcard:active { transform: scale(0.96); }
.vri-cal-portal .vri-cal__mcard-ico i { font-size: 26px; color: rgba(0, 58, 87, 0.55); }
.vri-cal-portal .vri-cal__mcard-name { font-size: 14px; font-weight: 700; }
.vri-cal-portal .vri-cal__mcard-year { font-size: 12px; color: rgba(0, 58, 87, 0.55); }
.vri-cal-portal .vri-cal__mcard--on {
    background: #003A57;
    border-color: #003A57;
    color: #fff;
}
.vri-cal-portal .vri-cal__mcard--on .vri-cal__mcard-ico i,
.vri-cal-portal .vri-cal__mcard--on .vri-cal__mcard-year { color: rgba(255, 255, 255, 0.78); }

/* The flexible pane keeps the Dates tab's width on purpose: resizing the
   container under the cursor as you switch tabs reads as a glitch. */

/* Below the two-month breakpoint the pane is ~360-380px, where a fifth of the
   strip is narrower than the word "September" - so the basis could only be
   honoured by squashing the label. Three per page instead, which leaves every
   card comfortably wider than its content at every phone size. */
@media (max-width: 899px) {
    .vri-cal-portal .vri-cal__flexpane { padding: 6px 16px 16px; }
    .vri-cal-portal .vri-cal__mstrip { gap: 8px; }
    .vri-cal-portal .vri-cal__mcard {
        flex: 0 0 calc((100% - 16px) / 3); /* 3 cards, 2 x 8px gaps */
        padding: 14px 6px 12px;
    }
    .vri-cal-portal .vri-cal__mcard-ico i { font-size: 22px; }
    .vri-cal-portal .vri-cal__mcard-name { font-size: 13px; }
    .vri-cal-portal .vri-cal__mcard-year { font-size: 11px; }
    /* Three pills on one row: at desktop padding they wrapped, leaving
       "Month" stranded on a line of its own. */
    .vri-cal-portal .vri-cal__stays { gap: 8px; flex-wrap: nowrap; }
    .vri-cal-portal .vri-cal__stay {
        flex: 1 1 0;
        min-width: 0;
        padding: 11px 8px;
        font-size: 13px;
    }
    .vri-cal-portal .vri-cal__flexq { font-size: 14px; margin: 16px 0 10px; }
    .vri-cal-portal .vri-cal__mnav { width: 28px; height: 28px; font-size: 15px; }
    .vri-cal-portal .vri-cal__mnav--prev { left: -10px; }
    .vri-cal-portal .vri-cal__mnav--next { right: -10px; }
}

/* Never let the two-up exceed the window. */
@media (max-width: 820px) {
    .vri-cal-portal .vri-cal--duo { width: min(92vw, 380px) !important; }
    .vri-cal-portal .vri-cal--duo .vri-cal__months { grid-template-columns: 1fr; }
}

/* accessibility, same contract as every other surface */
@media (prefers-reduced-transparency: reduce) {
    .vri-cal-portal .vri-cal {
        background: rgba(245, 249, 252, 0.99) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: rgba(0, 58, 87, 0.16) !important;
    }
    .vri-cal-portal .vri-cal::before { display: none; }
}
@media (prefers-contrast: more) {
    .vri-cal-portal .vri-cal {
        background: rgba(248, 251, 253, 0.97) !important;
        border-color: rgba(0, 58, 87, 0.34) !important;
    }
    .vri-cal-portal .vri-cal::before { opacity: 0.35; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vri-cal-portal .vri-cal { background: rgba(245, 249, 252, 0.97) !important; }
}


/* ---- Diagnostic: ?glass=noblur removes every backdrop-filter (2026-09-28) ---- */
html.lg-noblur *, html.lg-noblur *::before, html.lg-noblur *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}