/* PHASE-1 basic styles — placeholder until proper SCSS pipeline lands in Phase 1.1.
   Visual target: https://arendoo.bg/ (prod) and the staging reference. */

* { box-sizing: border-box; }
html {
    /* Bulletproof mobile horizontal-scroll guard. The home page has a
       handful of components that legitimately need horizontal scroll
       (themed-cities strip, search-pill popovers) and several that
       absolute-position past the viewport edge on small screens (hero
       pills, search-wrap padding-right anchor, decorative blobs). Any
       one of them slipping out of its `max-width` cage causes the
       whole page to drift left/right under finger gestures.
       `hidden` first as a fallback for older Android stock browsers
       (< Chromium 90) which don't recognise `clip`; the modern `clip`
       value then wins because it preserves `position: sticky` inside
       descendants whereas `hidden` would break it. */
    overflow-x: hidden;
    overflow-x: clip;
}
body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    color: #333;
    line-height: 1.5;
    /* Belt-and-braces — `overflow-x: clip` on body too in case some
       deep descendant promotes to its own scroll container. */
    overflow-x: hidden;
    overflow-x: clip;
}

a { color: #0696ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: #888; font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .15s, background .15s;
}
.btn-pill { border-radius: 999px; padding: 12px 24px; }
.btn-primary { background: #0696ff; color: #fff; }
.btn-primary:hover { background: #057ad6; text-decoration: none; }
.btn-text { background: transparent; color: #333; }

/* ---------- Header ---------- */
.public-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 0;
}
.public-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    /* Relative so the mobile dropdown panel (.public-header__actions when
       the burger is toggled) can absolute-position itself against this row. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.public-header__logo { display: inline-flex; align-items: center; }
.public-header__logo img {
    height: 28px;
    width: auto;
    display: block;
}
.public-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.public-header__phone { font-size: 14px; }

/* Mobile burger — checkbox-driven (JS-free). Hidden on desktop;
   below 720px it replaces the inline action items and the action list
   flips into an absolute dropdown panel anchored to the header row. */
.public-header__toggle { position: absolute; opacity: 0; pointer-events: none; }
.public-header__burger { display: none; }

/* Login dropdown ("ВХОД" → Вход за клиенти / Вход за собственици).
   Uses <details>/<summary> for a zero-JS click-toggle; CSS hides the
   default disclosure triangle and styles the panel as a popover. */
.login-menu {
    position: relative;
    /* Promote a stacking context so the open dropdown floats above the
       hero banner / map / any other section that promotes its own
       z-index — same fix the locale switcher needed earlier. */
    z-index: 100;
}
.login-menu[open] {
    z-index: 9999;
}
.login-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.login-menu__trigger::-webkit-details-marker { display: none; }
.login-menu__trigger::marker { display: none; content: ''; }
.login-menu__caret {
    width: 10px;
    height: 6px;
    transition: transform 0.15s ease;
}
.login-menu[open] .login-menu__caret { transform: rotate(180deg); }
.login-menu__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 9999;
}
.login-menu__item {
    display: block;
    padding: 10px 16px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.login-menu__item:hover,
.login-menu__item:focus-visible {
    background: #f3f7fb;
    color: #0696ff;
    outline: none;
}
/* Logged-in user chip in the header — circular initial avatar + name +
   caret. Reuses the .login-menu shell so the dropdown behaviour is
   identical to the anonymous "ВХОД" menu. */
.login-menu--user .login-menu__trigger {
    padding: 4px 10px 4px 4px;
    gap: 8px;
    background: #f3f7fb;
    border-radius: 999px;
}
.login-menu--user .login-menu__trigger:hover { background: #e7eff7; }
.user-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0696ff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}
.user-chip__name {
    font-size: 14px;
    font-weight: 500;
    color: #1a1f2e;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.login-menu__sep {
    height: 1px;
    background: #ececf1;
    margin: 4px 0;
}
.login-menu__item--logout {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: #c0344b;
}
.login-menu__item--logout:hover { background: #fdeaea; color: #a02020; }
@media (max-width: 720px) {
    .user-chip__name { max-width: 80px; }
}

/* ---------- Hero ---------- */
.hp-section { padding: 32px 0; }

/* ---------- Home page — full-viewport blue gradient + transparent header --
   Triggered by `body.home-page` (set via @section('body_class') in
   home.blade.php). Everything below scopes to .home-page so other public
   routes keep their default white header + neutral body. */
.home-page {
    color: #fff;
    /* Brand-blue gradient covers the entire viewport behind the floating
       header and hero. Subsequent sections (properties, themed strips, why,
       become-host) all have solid backgrounds of their own so the gradient
       only shows through the hero zone. */
    background:
        linear-gradient(160deg, #1e6fc7 0%, #2a86d8 25%, #4f9fdf 55%, #6fa9d8 100%);
    background-attachment: fixed;
    min-height: 100vh;
}
/* Sunset glow — warm radial anchored to the top-right corner of the
   viewport. Originally used `top/right: -300px` to crop the radial's
   tail off-screen, but on mobile that triggered horizontal scroll
   because `position: fixed` boxes positioned past the viewport edge
   are NOT clipped by `overflow-x: clip` on html (the spec anchors
   fixed elements directly to the viewport, bypassing the html box).
   Rewriting with `transform: translate(…)` gives the same visual
   crop without affecting the page's scrollable area — `transform`
   doesn't extend the document overflow rectangle. */
.home-page::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 1000px;
    height: 1000px;
    transform: translate(300px, -300px);
    background: radial-gradient(circle,
        rgba(255, 180, 90, 0.40) 0%,
        rgba(255, 130, 100, 0.18) 35%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}
/* Header floats over the gradient: transparent bg, white text, no border. */
.home-page .public-header {
    background: transparent;
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 24px 0;
}
/* Edge-anchored header on home — drops the 1320px max-width container so
   the logo hugs the top-left corner and the action row the top-right
   corner. Matches the HomeToGo mockup where nav items span the full
   viewport width. */
.home-page .public-header__inner { max-width: none; padding: 0 48px; }
/* Phone number is decorative noise on the redesigned hero — hide it on
   home so the action row stays compact. Still rendered for SEO/contact. */
.home-page .public-header__phone { display: none; }
/* Logo on the blue hero: the real SVG wordmark is brand-blue (#4E9FEA) and
   would vanish on the gradient, so recolour it pure white with a filter rather
   than swapping in a plain text mark. brightness(0) blackens every pixel,
   invert(1) flips black→white; the drop-shadow keeps it legible over the sky. */
.home-page .public-header__logo-img {
    display: block;
    height: 30px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 30, 80, 0.25));
}
/* The stacked "aren / doo_" text mark is retired — the real wordmark now
   renders on every route. Keep the span hidden everywhere (it stays in the
   DOM only as the aria fallback inside the logo link). */
.public-header__logo-text { display: none; }

/* Nav text + buttons — white over the gradient, with a translucent
   backdrop-blur primary button matching the HomeToGo glassmorph style. */
.home-page .public-header__phone { color: #fff; opacity: 0.92; }
.home-page .public-header .btn-text {
    color: #fff;
    opacity: 0.92;
    background: transparent;
}
.home-page .public-header .btn-text:hover { opacity: 1; }
.home-page .public-header .btn-primary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow: none;
}
.home-page .public-header .btn-primary:hover {
    background: rgba(255, 255, 255, 0.25);
}
/* Caret colour in details/summary triggers — inherits white from parent. */
.home-page .public-header .login-menu__caret,
.home-page .public-header .locale-switcher svg {
    color: #fff;
}
/* White cover for everything below the hero — masks the body gradient so
   property cards + themed strips + why-arendoo + become-host render on the
   normal white canvas. z-index 5 keeps it above the body::before sunset. */
.home-page__after-hero {
    background: #fff;
    position: relative;
    z-index: 5;
}

/* ---------- Mobile public-header: burger + dropdown panel ----------
   Below 720px the inline action row collapses into an absolute dropdown
   panel anchored to the header. The hidden checkbox + adjacent burger
   label + sibling actions div gives us a JS-free toggle via :checked. */
@media (max-width: 720px) {
    .public-header__burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 36px;
        height: 36px;
        padding: 6px;
        cursor: pointer;
        background: transparent;
        border: none;
        border-radius: 8px;
        transition: background 150ms;
    }
    .public-header__burger:hover { background: rgba(0, 0, 0, 0.05); }
    .public-header__burger > span {
        display: block;
        width: 22px;
        height: 2px;
        background: #1a1a1a;
        border-radius: 2px;
        transition: transform 200ms, opacity 150ms;
    }
    .home-page .public-header__burger > span { background: #fff; }
    .home-page .public-header__burger:hover { background: rgba(255, 255, 255, 0.12); }

    /* Hide the inline action row until the burger is toggled. */
    .public-header__actions { display: none; }
    .public-header__toggle:checked ~ .public-header__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        position: absolute;
        top: calc(100% + 8px);
        right: 16px;
        min-width: 220px;
        padding: 16px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 30, 80, 0.22);
        z-index: 200;
    }
    /* Inside the open mobile panel, everything is dark-on-light regardless
       of whether the page is .home-page (panel itself is solid white). */
    .public-header__toggle:checked ~ .public-header__actions .public-header__phone,
    .public-header__toggle:checked ~ .public-header__actions .btn-text,
    .public-header__toggle:checked ~ .public-header__actions .login-menu__trigger,
    .public-header__toggle:checked ~ .public-header__actions .login-menu__caret,
    .public-header__toggle:checked ~ .public-header__actions .locale-switcher svg {
        color: #1a1a1a;
        opacity: 1;
    }
    /* Primary CTA inside panel — keep brand identity */
    .public-header__toggle:checked ~ .public-header__actions .btn-primary {
        background: linear-gradient(135deg, #ff9243 0%, #ff5e62 100%);
        border: none;
        color: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 12px 18px;
        text-align: center;
    }
    /* Nested details (login menu, locale switcher) — keep them readable on the
       light panel and let them flow vertically instead of overlapping. */
    .public-header__toggle:checked ~ .public-header__actions .login-menu,
    .public-header__toggle:checked ~ .public-header__actions .locale-switcher {
        position: static;
    }
    .public-header__toggle:checked ~ .public-header__actions .login-menu__list,
    .public-header__toggle:checked ~ .public-header__actions .locale-switcher__list {
        position: static;
        box-shadow: none;
        padding: 8px 0 0 8px;
        background: transparent;
    }

    /* Animate burger into an "X" when toggled open. */
    .public-header__toggle:checked + .public-header__burger > span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .public-header__toggle:checked + .public-header__burger > span:nth-child(2) {
        opacity: 0;
    }
    .public-header__toggle:checked + .public-header__burger > span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ---------- Hero — HomeToGo-style split with shared-image pills ----------
   Layout: two-column grid (copy left, three capsule pills right). The blue
   gradient + sunset glow live on `body.home-page` (further down) so they
   cover the full viewport behind a transparent floating header. The hero
   itself is just a transparent content block.
   z-index 50 keeps the search dropdown above the property-card section below. */
.hp-hero {
    position: relative;
    z-index: 50;
    /* Padding-top covers the absolute-positioned header on .home-page;
       padding-bottom gives the absolute search bar breathing room below. */
    padding: 80px 0 120px;
    /* Full-viewport hero — gradient covers the whole above-the-fold area
       (matches the HomeToGo composition). Next section appears only on scroll. */
    min-height: 100vh;
    box-sizing: border-box;
    /* Defensive — the absolute-positioned search-wrap and decorative
       pills can overhang their `max-width` cages on tight mobile
       viewports. Clip the section so any small overrun stays visually
       contained instead of triggering page-level horizontal scroll. */
    overflow-x: clip;
}
.hp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 56px 0;
}
.hp-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.hp-hero__copy {
    padding-top: 64px;
    color: #fff;
}
.hp-hero__eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    opacity: 0.92;
    margin: 0 0 20px;
}
.hp-hero__headline {
    font-family: 'Inter', sans-serif;
    /* Fluid sizing — mockup uses 68px at ~1700px viewport, but a narrow
       copy column can wrap "Открийте втория" onto two lines at that size.
       clamp() lets the headline shrink gracefully on tighter widths while
       hitting 64px at the wide end. */
    font-size: clamp(44px, 4.4vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2px;
    margin: 0 0 24px;
    color: #fff;
}
/* Italic Playfair accent — warm cream, the single chromatic break from white */
.hp-hero__headline em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    color: #ffd28a;
    letter-spacing: -1px;
}
.hp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.95;
    margin-top: 8px;
}
.hp-hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hp-hero__check {
    color: #5fc5ff;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
}
/* Image pills — three capsule windows into one shared photo. The math:
   --img-w/--img-h define the rendered photo size; pill-2 starts one
   column to the right, so its background-position-x = -(pillw + gap),
   and shifts -100px up to stay aligned to world-space Y. Same for pill-3. */
.hp-hero__pills {
    --pillw: 175px;
    --gap: 14px;
    --img-w: 1100px;
    --img-h: 720px;
    /* Vertical anchor of the shared photo. Tune --img-y to reframe the
       shot without rewriting all three pill rules. Smaller magnitude
       shows MORE sky/sea; larger magnitude reveals the palm/villa
       foreground at the photo's bottom. -40 lands a balanced middle —
       mostly sea, palms only in the bottom strip. */
    --img-y: -40px;
    display: flex;
    gap: var(--gap);
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
}
.hp-hero__pill {
    width: var(--pillw);
    height: 500px;
    border-radius: 88px;        /* half of width — perfect capsule */
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%),
        var(--hp-hero-photo);
    background-repeat: no-repeat;
    background-size: var(--img-w) var(--img-h);
    box-shadow: 0 18px 50px rgba(0, 30, 80, 0.25);
    flex-shrink: 0;
    transition: transform 220ms ease;
}
.hp-hero__pill:hover { transform: translateY(-6px); }
.hp-hero__pill--1 {
    margin-top: 0;
    background-position: 0 0, 0 var(--img-y);
}
.hp-hero__pill--2 {
    margin-top: 100px;
    background-position: 0 0, calc(-1 * (var(--pillw) + var(--gap))) calc(var(--img-y) - 100px);
}
.hp-hero__pill--3 {
    margin-top: 30px;
    background-position: 0 0, calc(-2 * (var(--pillw) + var(--gap))) calc(var(--img-y) - 30px);
}
/* Search bar wrap — absolute-positioned over the pills so its negative
   offset doesn't shrink the hero's auto-height (which would clip pills
   when combined with overflow: hidden on the parent). Pills end at ~640px
   from .hp-hero__inner top; `top: 460px` lands the bar overlapping their
   lower third — visually matches the HomeToGo reference. Mobile reverts
   to static flow below 980px. */
.hp-hero__search-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 460px;
    z-index: 3;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 56px;
}
/* Slim variant of pill-search used inside the new hero. Overrides the
   default airbnb-style sizes for a tighter HomeToGo look (max 940px wide,
   coral CTA, 6px outer padding). All JS interactions stay identical. */
/* Right-anchor the search bar within the hero — left edge lands roughly
   under "Verified собственици", right edge at the middle of pill-3.
   .pill-search is display:inline-flex from its base rule so margin: auto
   on it does NOT push it to the right edge (auto-margin trick only works
   on block-level elements). Solve it on the wrapper instead: flex layout
   with justify-content: flex-end + extra right padding = (outer 56) +
   (half-pill offset 88). Length unchanged at 940px. */
.hp-hero__search-wrap {
    display: flex;
    justify-content: flex-end;
    padding-right: 144px;
}
.hp-hero__search-wrap .pill-search {
    max-width: 940px;
    width: 100%;
    margin: 0;
    padding: 6px;
    /* Brand-blue gradient ring around the white pill — HomeToGo's
       hero search uses the same trick with a violet→pink ribbon. The
       `padding-box / border-box` two-layer background paints solid
       white inside and the gradient on the 5px transparent border,
       giving a real gradient ribbon instead of a flat outline that
       box-shadow alone can't deliver. */
    border: 5px solid transparent;
    border-radius: 64px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #0696ff 0%, #5fc5ff 50%, #0696ff 100%) border-box;
    box-shadow: 0 24px 60px rgba(0, 30, 80, 0.30);
}
.hp-hero__search-wrap .pill-search__segment {
    padding: 10px 26px;
    border-radius: 56px;
}
/* Slightly larger search labels — the previous 13px felt cramped
   against the wider segment padding. 15px reads cleanly without
   forcing a relayout of the slim pill. */
.hp-hero__search-wrap .pill-search__label  { font-size: 14px; line-height: 1.25; font-weight: 600; }
.hp-hero__search-wrap .pill-search__value  { font-size: 15px; line-height: 1.3; }
/* Coral warm CTA — the second visual accent that pairs with the cream
   italic in the headline. Gradient + lift-shadow on hover. */
.hp-hero__search-wrap .pill-search__submit {
    background: linear-gradient(135deg, #ff9243 0%, #ff5e62 100%);
    padding: 12px 32px;
    border-radius: 48px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(255, 110, 70, 0.45);
    margin-left: 8px;
    gap: 6px;
}
.hp-hero__search-wrap .pill-search__submit:hover {
    background: linear-gradient(135deg, #ff9243 0%, #ff5e62 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(255, 110, 70, 0.55);
}
.hp-hero__search-wrap .pill-search__submit-text { font-size: 13px; }
/* Mobile: collapse grid to one column, centre pills, full-width search.
   Breakpoint at 980px keeps the desktop grid roomy enough to need both
   columns; below that the pills stack horizontally above the copy. */
@media (max-width: 980px) {
    .hp-hero__inner { padding: 24px 24px 0; }
    .hp-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .hp-hero__copy { padding-top: 16px; text-align: center; }
    .hp-hero__trust { justify-content: center; gap: 16px; }
    .hp-hero__headline { font-size: 44px; letter-spacing: -1px; }
    .hp-hero__pills {
        --pillw: 110px;
        --img-w: 700px;
        --img-h: 460px;
        /* Scale --img-y proportionally to the smaller mobile frame so the
           same vertical slice of the photo stays in view (≈ 64% of desktop). */
        --img-y: -25px;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .hp-hero__pill { height: 320px; border-radius: 56px; }
    .hp-hero__pill--1 { margin-top: 0; background-position: 0 0, 0 var(--img-y); }
    .hp-hero__pill--2 { margin-top: 40px; background-position: 0 0, calc(-1 * (var(--pillw) + var(--gap))) calc(var(--img-y) - 40px); }
    .hp-hero__pill--3 { margin-top: 16px; background-position: 0 0, calc(-2 * (var(--pillw) + var(--gap))) calc(var(--img-y) - 16px); }
    /* Revert search-wrap to static flow on mobile — absolute over-pills
       positioning only makes sense when the pills are in their own column.
       Once they stack, the bar should follow them naturally. */
    /* Reset desktop's flex right-anchor — on mobile the pills column is
       gone so the search bar centers in the available width. */
    .hp-hero__search-wrap {
        position: static;
        display: block;
        max-width: none;
        margin: 24px auto 0;
        padding: 0 16px;
    }
    .hp-hero__search-wrap .pill-search { margin: 0 auto; }
    .hp-hero { padding: 24px 0 32px; }
}
/* True-mobile composition — minimalist HomeToGo-style above the fold:
   just the headline + trust + search. Pills + eyebrow are decorative,
   they crowd the small viewport and don't survive the photo crop at
   88px wide. Hide them outright below 720px. */
@media (max-width: 720px) {
    .hp-hero__pills,
    .hp-hero__eyebrow { display: none; }
    .hp-hero__copy { padding-top: 80px; }
    .hp-hero__headline { font-size: 44px; text-align: center; }
    .hp-hero__trust { justify-content: center; }
}
@media (max-width: 560px) {
    .hp-hero__headline { font-size: 36px; }
    .hp-hero__trust { font-size: 13px; gap: 10px; }
    /* Stacked search pill — pill-search.css already drops to column layout
       at this width; we just need to undo the slim pill's tighter spacing.
       Thinner gradient ring on mobile so it doesn't dominate the narrow
       column (keeps the brand-blue ribbon visible but proportional). */
    .hp-hero__search-wrap .pill-search {
        border-radius: 24px;
        padding: 12px;
        border-width: 3px;
    }
    .hp-hero__search-wrap .pill-search__submit { width: 100%; margin: 8px 0 0; justify-content: center; }
}

/* ---------- Section common ---------- */
.hp-section__head {
    max-width: 1400px;
    margin: 32px auto 20px;
    padding: 0 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.hp-section__title {
    color: #1f2937;
    font-weight: 700;
    font-size: 26px;
    margin: 0;
    letter-spacing: -0.01em;
}
.hp-section__see-all {
    color: #0696ff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.hp-section__see-all:hover { text-decoration: underline; }
/* Old centered-blue title style kept for legacy callers that still
   render `.hp-section__title` outside the new `.hp-section__head` wrap. */
.hp-section h2.hp-section__title:not(.hp-section__head .hp-section__title) {
    text-align: center;
    color: #0696ff;
    font-weight: 500;
    font-size: 28px;
    margin: 32px 0 24px;
}

/* ---------- Property cards ---------- */
.hp-section-properties__grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.property-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform .15s, box-shadow .15s, opacity .25s ease-out;
}
/* Partner cards start hidden until /partner-prices confirms availability.
   See _cards.blade.php — JS removes this class in quendoo-prices.js's
   paint() only on a bookable quote, so unavailable ones never appear. */
.property-card.is-pending-avail { display: none; }
/* applyCardDiff (estates-map.js) toggles these two during map-pan
   refetches: .is-entering before the new card is added to the DOM,
   removed on the next animation frame so the card fades in; .is-leaving
   on cards that the new result set has dropped, removed after 260 ms
   so the fade-out plays. Keeps map-pan refetches feeling like a
   crossfade instead of a hard wipe. */
.property-card.is-entering { opacity: 0; }
.property-card.is-leaving  { opacity: 0; pointer-events: none; }
.property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.property-card__media {
    position: relative;
    display: block;
    height: 200px;
    overflow: hidden;
    background: #eee; /* shows while images lazy-load */
}
.property-card__media img,
.property-card__slide {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Non-slider <img> sits ABOVE the absolutely-positioned placeholder.
   We can't apply `position: relative` to .property-card__slide via this
   selector — it'd over-specify and stop the slider's `position: absolute`
   below from winning the cascade, leaving the slides in normal flow and
   stacked vertically instead of fading over each other. */
.property-card__media > img:not(.property-card__slide) {
    position: relative;
    z-index: 1;
}

/* Slider — single-image cards keep the legacy absolute+opacity
   layout (one slide, always active, no track wrapper). Multi-image
   cards get a horizontal `.property-card__track` injected by the
   slider JS — the rules under `.property-card__track .slide` below
   override these. */
.property-card__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.property-card__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Airbnb-style horizontal slider — track holds all slides side by
   side, translateX selects which one is in view. Cubic-bezier ease
   gives the snap a natural decel; will-change keeps the GPU layer
   warm so swipes don't jank on mid-tier mobiles. */
.property-card__track {
    position: absolute;
    inset: 0;
    display: flex;
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
}
.property-card__track .property-card__slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* Sits behind the <img> by default; the img covers it when it loads.
   When the src 404s, onerror hides the img and the placeholder shows
   through. Plain neutral grey — no broken-icon, no alt-text leak. */
.property-card__placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, #e9ecef 0%, #f4f6f8 100%);
}
.property-card__placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23b0b7c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5L12 4l9 5.5'/><path d='M5 9v11h14V9'/><path d='M9 20v-6h6v6'/></svg>") no-repeat center center;
    opacity: 0.55;
}

.property-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity .15s, background .15s;
    z-index: 2;
}
.property-card:hover .property-card__nav { opacity: 1; }
.property-card__nav:hover { background: #fff; }
.property-card__nav--prev { left: 8px; }
.property-card__nav--next { right: 8px; }

.property-card__dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.property-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    transition: background .15s, transform .15s;
}
.property-card__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* Mobile — arrows always visible (no hover state on touch devices) */
@media (max-width: 720px) {
    .property-card__nav { opacity: 1; }
}
.property-card__price {
    position: absolute; bottom: 12px; left: 12px;
    background: #0696ff; color: #fff;
    padding: 6px 12px; border-radius: 4px;
    font-weight: 500;
}
.property-card__badge {
    position: absolute; top: 12px; left: 12px;
    background: #ffd700; color: #333;
    padding: 4px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Generic card body — backs the estates listing template
   (estates/_cards.blade.php). The `--home` modifier below overrides
   selectively for the new hometogo-style homepage cards. ---------- */
.property-card__body {
    padding: 12px 16px 16px;
    /* Flex column lets the pricing block align-flex-end + the CTA
       chip align-self-flex-end without wrapping helper divs. */
    display: flex;
    flex-direction: column;
}
.property-card__body h3 {
    margin: 0 0 8px; font-size: 16px; font-weight: 500;
}
.property-card__meta, .property-card__address {
    margin: 4px 0; font-size: 13px; color: #666;
}
/* Meta row holds the star-rating + the property-type chip on a single
   line under the title. Keeps the body compact when the new partner
   card metadata grows (PR introducing property type + amenity icons). */
.property-card__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0;
    font-size: 13px;
    color: #666;
}
.property-card__meta-row .property-card__meta { margin: 0; }
/* Property-type chip — small neutral pill next to the stars. Data-type
   attribute is reserved so future iterations can colour-code per type
   without touching the markup. */
.property-card__type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    background: #f3f5f8;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* Amenity icons row — 4 SVG glyphs + an optional "+N more" overflow
   chip. Lives between the address line and the price block. */
.property-card__amenity-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    color: #666;
    font-size: 12px;
}
.property-card__amenity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #f3f5f8;
    color: #555;
    /* Native browser tooltip on hover (title attr). Cursor:help signals
       that the icon is interrogable so the user knows to hover. */
    cursor: help;
}
.property-card__amenity-more {
    color: #888;
    font-size: 11px;
    font-weight: 500;
}
/* Meal-plan chip — painted by quendoo-prices.js once /partner-prices
   resolves. Sits under the pricing block. SSR-hidden via [hidden] so
   no chip flashes for unavailable hotels. */
.property-card__meal-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #0a6e3a;
    background: #e7f5ec;
    border-radius: 10px;
}
.property-card__meal-chip[hidden] { display: none; }
/* Colour-bias by meal code (closed enum from platform.rate_plans).
   UAI gets a gold tint to call out the premium tier vs vanilla AI;
   BO falls back to neutral grey. */
.property-card__meal-chip[data-meal="UAI"] { color: #7a4a00; background: #fbecc4; }
.property-card__meal-chip[data-meal="AI"]  { color: #8a2c00; background: #fff1e6; }
.property-card__meal-chip[data-meal="FB"]  { color: #7a3d00; background: #fdefd9; }
.property-card__meal-chip[data-meal="HB"]  { color: #4a3a00; background: #f7efd0; }
.property-card__meal-chip[data-meal="BO"]  { color: #555;    background: #eef0f3; }

/* ---------- Hometogo-style card body (Phase 2, --home variant only) ----------
   Scoped to `.property-card--home` so it doesn't override the listing
   card layout (resources/views/estates/_cards.blade.php uses the same
   base class with a different body structure: title / meta / address /
   stay-price). */
.property-card--home .property-card__media { height: 230px; }
/* Heart overlay — formerly scoped to `.property-card--home`, now lives on
   every `.property-card` so search-result cards get the same wishlist
   button the homepage cards have. Same hook (data-arendoo-wishlist) →
   same wishlist.js → same auth-modal flow for guests. */
.property-card .property-card__heart,
.property-card__heart {
    position: absolute; top: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #0696ff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform .15s, background .15s, color .15s;
}
.property-card__heart:hover {
    transform: scale(1.08);
    background: #fff;
}
.property-card__heart.is-active { color: #e91e63; }
/* Wishlisted → filled heart (not just recoloured outline). */
.property-card__heart.is-active svg,
.gc-tool--heart.is-active svg { fill: currentColor; }
.property-card__heart svg { width: 18px; height: 18px; }

.property-card--home .property-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 168px;
}
.property-card--home .property-card__type {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-transform: capitalize;
}
.property-card--home .property-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.property-card--home .property-card__name a { color: inherit; text-decoration: none; }
.property-card--home .property-card__name a:hover { color: #0696ff; }
.property-card--home .property-card__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    font-size: 13px;
}
.property-card--home .property-card__location svg { color: #9aa5b1; flex-shrink: 0; }
.property-card--home .property-card__footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.property-card--home .property-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #1f2937;
    font-size: 13px;
}
.property-card--home .property-card__rating svg { color: #0696ff; }
.property-card--home .property-card__rating-value { font-weight: 700; }
.property-card--home .property-card__rating-of { color: #9aa5b1; }
.property-card--home .property-card__rating-count { color: #9aa5b1; margin-left: 2px; }
.property-card--home .property-card__rating--empty {
    color: #9aa5b1;
    font-size: 12px;
    font-style: italic;
}
.property-card--home .property-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(90deg, #0696ff, #00d4ff);
    color: #fff !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}
.property-card--home .property-card__cta:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

/* ---------- Themed cities strip (Phase 3) ---------- */
.hp-cities-strip { max-width: 1400px; margin: 0 auto; padding: 0 24px 16px; }
.hp-cities-strip__intro {
    max-width: 1400px;
    margin: -10px auto 14px;
    padding: 0 24px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}
.hp-cities-strip__scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 16px;
    margin: 0 -4px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.hp-cities-strip__scroll::-webkit-scrollbar { height: 8px; }
.hp-cities-strip__scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.hp-cities-strip__scroll::-webkit-scrollbar-track { background: transparent; }

.hp-city-tile {
    flex: 0 0 200px;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform .15s;
}
.hp-city-tile:hover { transform: translateY(-2px); }
.hp-city-tile__media {
    width: 200px;
    height: 200px;
    border-radius: 14px;
    background-color: #e5edf3;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 30, 60, 0.08);
    transition: box-shadow .15s;
}
.hp-city-tile:hover .hp-city-tile__media {
    box-shadow: 0 6px 18px rgba(0, 30, 60, 0.18);
}
.hp-city-tile__placeholder {
    font-size: 64px;
    font-weight: 600;
    color: rgba(10, 61, 102, 0.35);
    text-transform: uppercase;
}
.hp-city-tile__body {
    margin-top: 10px;
    padding: 0 4px;
}
.hp-city-tile__name {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}
.hp-city-tile__sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .hp-city-tile, .hp-city-tile__media { flex-basis: 150px; width: 150px; height: 150px; }
    .hp-city-tile__placeholder { font-size: 48px; }
}

/* ---------- Footer ---------- */
.public-footer {
    background: #f5f7fa;
    border-top: 1px solid #e3eaf2;
    padding: 48px 0 32px;
    margin-top: 48px;
    color: #4b5563;
}
.public-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.public-footer__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    margin-bottom: 36px;
}
.public-footer__heading {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.public-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.public-footer__col a {
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    transition: color .15s;
}
.public-footer__col a:hover { color: #0696ff; }

.public-footer__col--meta { gap: 18px; display: flex; flex-direction: column; }
.public-footer__social { display: flex; gap: 10px; }
.public-footer__social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: color .15s, transform .15s;
}
.public-footer__social a:hover { color: #0696ff; transform: translateY(-2px); }
/* The footer language control is now the shared <details> locale-switcher
   (same as the header). Re-assert the switcher's own item colours so the
   generic `.public-footer__col a` rule doesn't override them (it's more
   specific than `.locale-switcher__item` on its own). */
.public-footer .locale-switcher__item { color: #333; }
.public-footer .locale-switcher__item:hover { color: #333; }
.public-footer .locale-switcher__item--active,
.public-footer .locale-switcher__item--active .locale-switcher__code { color: #0696ff; }

.public-footer__bottom {
    border-top: 1px solid #e3eaf2;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.public-footer__logo img { height: 32px; opacity: 0.7; }
.public-footer__copy { font-size: 12px; color: #9aa5b1; margin: 0; text-align: center; }

@media (max-width: 900px) {
    .public-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .public-footer__col--meta { grid-column: 1 / -1; align-items: center; text-align: center; }
}

/* ---------- "Why Arendoo" trust section ---------- */
.hp-why { padding: 16px 0; }
.hp-why__inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.hp-why__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 8px;
}
.hp-why__card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    padding: 24px 20px;
    transition: box-shadow .15s, transform .15s;
}
.hp-why__card:hover {
    box-shadow: 0 6px 22px rgba(0, 30, 60, 0.10);
    transform: translateY(-2px);
}
.hp-why__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.hp-why__card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px;
}
.hp-why__card-text {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 900px) {
    .hp-why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .hp-why__grid { grid-template-columns: 1fr; }
}

/* ---------- "Become a host" CTA section ---------- */
.hp-host { padding: 32px 24px; }
.hp-host__inner {
    max-width: 1180px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a3d66 0%, #0696ff 100%);
    border-radius: 18px;
    padding: 40px 48px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 30, 60, 0.18);
}
.hp-host__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
}
.hp-host__lead {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 560px;
}
.hp-host__stats {
    display: flex;
    gap: 36px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.hp-host__stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.hp-host__stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.hp-host__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #0a3d66;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.hp-host__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.hp-host__art { display: flex; justify-content: center; }
.hp-host__art svg { width: 200px; height: 200px; }

@media (max-width: 800px) {
    .hp-host__inner { grid-template-columns: 1fr; padding: 32px 24px; }
    .hp-host__title { font-size: 22px; }
    .hp-host__art { display: none; }
}

/* ---------- Estates listing ---------- */
.estates-page__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
}
.estates-page__title {
    color: #0696ff;
    font-weight: 500;
    font-size: 32px;
    margin: 0 0 8px;
}
.estates-page__meta {
    color: #888;
    margin: 0 0 24px;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #eef7ff;
    border: 1px solid #cfe6fb;
    border-radius: 999px;
    color: #0d4f80;
    font-size: 13px;
    font-weight: 500;
}
.filter-chip svg { opacity: 0.7; }
.property-card__stay-price {
    margin: 8px 0 0;
    color: #444;
    font-size: 14px;
}
.property-card__stay-price strong {
    color: #0696ff;
    font-weight: 700;
}
.estates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* ===== Listing filters bar — pill-style match for the hero search ===== */
.estates-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    /* 12px breathing room above so the panel doesn't visually fuse with
       the toolbar chips (location pill, "Още филтри", "Скрий картата")
       when it expands. */
    margin: 12px 0 12px;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 6px;
}
.estates-filters[hidden] { display: none; }
.estates-filter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    min-width: 0;
    position: relative;
}
.estates-filter + .estates-filter::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 1px;
    background: #ececec;
}
.estates-filter__label {
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.estates-filter__select,
.estates-filter__input {
    padding: 4px 6px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    font-weight: 500;
    box-sizing: border-box;
    transition: background .12s;
    margin-left: -6px;
}
.estates-filter__select { min-width: 110px; cursor: pointer; }
.estates-filter__select:focus,
.estates-filter__input:focus {
    outline: none;
    background: #f5f8fb;
    border-radius: 4px;
}
.estates-filter__price-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.estates-filter__price-range .estates-filter__input { width: 60px; margin: 0; }
.estates-filter__price-sep { color: #ccc; }

.estates-filter--check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
}
.estates-filter--check input[type=checkbox] {
    width: 18px; height: 18px;
    accent-color: #0696ff;
    cursor: pointer;
}
.estates-filter--check span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.estates-filter__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    padding: 8px 6px 8px 14px;
}
.estates-filter__apply {
    background: #0696ff;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, transform .1s;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(6, 150, 255, 0.25);
}
.estates-filter__apply:hover { background: #057ad6; }
.estates-filter__apply:active { transform: translateY(1px); }
.estates-filter__clear {
    color: #888;
    font-size: 12px;
    text-decoration: underline;
}
.estates-filter__clear:hover { color: #d84315; }

/* ===== Amenity chip filter (Phase D — canonical multi-select) ===== */
.estates-filter__amenities {
    flex-basis: 100%;
    border: 0;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed #e0e0e0;
    padding-top: 14px;
}
.estates-filter__amenities-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 0;
    margin: 6px 0 4px;
    font-weight: 600;
}
.estates-filter__amenities-group + .estates-filter__amenities-chips + .estates-filter__amenities-group { margin-top: 12px; }
.estates-filter__amenities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chip — pill button with stroke icon + label + (active) checkmark */
.amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid #e0e6ed;
    background: #fff;
    color: #4a5568;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s, box-shadow .12s, transform .08s;
    user-select: none;
}
.amenity-chip:hover {
    border-color: #0696ff;
    color: #0696ff;
}
.amenity-chip:active {
    transform: translateY(1px);
}
.amenity-chip__icon {
    color: inherit;
    flex-shrink: 0;
}
.amenity-chip__label {
    white-space: nowrap;
}
.amenity-chip__check {
    color: inherit;
    flex-shrink: 0;
    opacity: 0;
    width: 0;
    transition: opacity .12s, width .12s;
}
.amenity-chip.is-active {
    border-color: #0696ff;
    background: #0696ff;
    color: #fff;
    box-shadow: 0 2px 6px rgba(6, 150, 255, 0.25);
}
.amenity-chip.is-active .amenity-chip__check {
    opacity: 1;
    width: 12px;
}

/* Pull the chips to a full-width row inside the existing
   flex-wrap filter form — avoids the chip stack getting
   stretched by sibling labels. */
.estates-filters > .estates-filter__amenities {
    flex-basis: 100%;
    width: 100%;
}

/* Toggle button group sits in the toolbar */
.estates-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.estates-toolbar__toggle.is-active {
    border-color: #0696ff;
    color: #0696ff;
    background: #eef7ff;
}

/* Filters-toggle's open state reads as a "Close filters" affordance —
   solid brand-blue fill + white text + X icon (HTML side swaps the
   icon via data-show). Stronger than the default subtle is-active so
   the user clearly sees clicking again will close the panel. */
.estates-toolbar__toggle--filters.is-active {
    background: #0696ff;
    color: #fff;
    border-color: #0696ff;
    box-shadow: 0 2px 6px rgba(6, 150, 255, 0.25);
}
.estates-toolbar__toggle--filters.is-active:hover {
    background: #057ad6;
    border-color: #057ad6;
}
.estates-toolbar__toggle--filters.is-active .estates-toolbar__badge {
    background: #fff;
    color: #0696ff;
}
.estates-toolbar__badge {
    background: #0696ff;
    color: #fff;
    border-radius: 99px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Search summary chip — visible on every breakpoint now that the
   search wrap is collapsed by default everywhere (estates#157). The
   chip is the only way to re-open the full pill search, so hiding
   it on desktop would strand the user. */
.estates-toolbar__toggle--search { display: inline-flex; }
.estates-toolbar__toggle-text {
    /* Wide enough to fit "City · DD.MM — DD.MM · N гости" in BG locales
       without ellipsis on a city like "Sunny beach". Long city names
       (e.g. "Велико Търново") still ellipsis-truncate — preferred over
       wrapping the toolbar onto a second row. */
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .estates-toolbar__toggle--search { display: inline-flex; }
    .estates-search-wrap[hidden] { display: none; }
    /* Toolbar can wrap onto multiple lines and the buttons stretch full-width
       so a 360px screen doesn't horizontally scroll. */
    .estates-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .estates-toolbar__actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .estates-toolbar__actions > .estates-toolbar__toggle {
        flex: 1 1 auto;
        justify-content: center;
        /* Without min-width:0 a flex item won't shrink below its content's
           intrinsic width — the long search-summary text (city + dates +
           guests) would push the whole toolbar wider than viewport and
           let the user swipe the page horizontally. */
        min-width: 0;
    }
    .estates-toolbar__toggle-text {
        /* Override the 420px desktop cap with "shrink to whatever flex
           gives us" so the ellipsis kicks in instead of overflowing. */
        max-width: 100%;
        min-width: 0;
    }
    /* Bottom-sheet overlay on phones. Previous PRs (#401-#405) tried
       in-flow sticky variants and a thin overlay; each lost to
       sticky-inside-sticky, dvh maths or z-index vs the brand bar.
       The clean fix is a full-screen overlay with its OWN sticky
       close head, body scroll-lock + overscroll-behavior:contain to
       kill scroll-chaining into the cards layer underneath. */
    .estates-filters {
        flex-wrap: nowrap;
    }
    .estates-filters:not([hidden]) {
        position: fixed;
        inset: 0;
        max-height: none;
        margin: 0;
        z-index: 2000;
        background: #fff;
        border-radius: 0;
        border: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Stop touch-drag inside the overlay from chaining into the
           page below — without this Android Chrome scrolls the cards
           layer first and the user has to "use up" that scroll before
           the form itself starts moving. */
        overscroll-behavior: contain;
    }
    .estates-filters__sheet-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: #fff;
        border-bottom: 1px solid #ececec;
    }
    .estates-filters__sheet-title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
    }
    .estates-filters__sheet-close {
        background: transparent;
        border: 0;
        padding: 4px;
        margin: -4px;
        color: #333;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Side padding for the rows inside the overlay since the form
       itself is now padding:0 (head goes edge-to-edge). */
    .estates-filters:not([hidden]) > .estates-filter,
    .estates-filters:not([hidden]) > .estates-filter__amenities,
    .estates-filters:not([hidden]) > .estates-filter__actions {
        margin-left: 12px;
        margin-right: 12px;
    }
    /* Body scroll-lock toggled by the inline JS — belt-and-braces
       against overscroll-behavior:contain failing on older iOS. */
    body.is-filter-sheet-open {
        overflow: hidden;
        touch-action: none;
    }
}
/* Hide the sticky overlay head on desktop — the toolbar X dismisses
   the form there. */
.estates-filters__sheet-head { display: none; }
@media (max-width: 720px) {
    .estates-filters__sheet-head { display: flex; }
}

@media (max-width: 720px) {
    .estates-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-radius: 14px;
    }
    .estates-filter { padding: 10px 14px; }
    .estates-filter + .estates-filter::before {
        left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px;
    }
    .estates-filter__actions { margin-left: 0; justify-content: space-between; padding: 12px 14px; border-top: 1px solid #ececec; }
    .estates-filter__apply { flex: 1; }
}

/* ===== 2-column layout: sticky map left + scrolling results right ===== */
.estates-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.estates-toolbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.estates-toolbar__toggle:hover { border-color: #0696ff; color: #0696ff; }
.estates-toolbar__toggle [hidden] { display: none !important; }

.estates-layout {
    display: grid;
    grid-template-columns: minmax(360px, 5fr) 7fr;
    gap: 24px;
    align-items: start;
}
.estates-layout--no-map { grid-template-columns: 1fr; }
.estates-layout--no-map .estates-layout__map { display: none; }

.estates-layout__map {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
}
.estates-map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #eef4ee;
}
.estates-layout--no-map + * .estates-grid,
.estates-layout--no-map .estates-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* When map is shown, narrow the card grid to 2 cols so cards stay legible. */
.estates-layout:not(.estates-layout--no-map) .estates-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ===== Full-screen estates listing — frozen map + independently-scrolling cards ===== */
body.estates-fullscreen {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
body.estates-fullscreen .public-footer { display: none; }
body.estates-fullscreen .public-header { flex: 0 0 auto; }
body.estates-fullscreen .site-main { flex: 1 1 auto; min-height: 0; }

.estates-page--fullscreen { height: 100%; }
.estates-page--fullscreen .estates-layout {
    grid-template-columns: minmax(420px, 5fr) 7fr;
    gap: 0;
    height: 100%;
    align-items: stretch;
    max-width: none;
}
.estates-page--fullscreen .estates-layout__map {
    position: static;
    top: 0;
    height: 100%;
}
.estates-page--fullscreen .estates-map {
    border-radius: 0;
    height: 100%;
}
.estates-page--fullscreen .estates-layout__list {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}
.estates-page--fullscreen .estates-sticky-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 16px 32px 12px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}
.estates-page--fullscreen .estates-sticky-header .filter-chips { margin: 0 0 12px; }
.estates-page--fullscreen .estates-sticky-header .estates-toolbar { margin: 0; }
.estates-page--fullscreen .estates-page__meta { margin: 0; }

.estates-page--fullscreen .estates-layout__list-inner {
    padding: 24px 32px 40px;
    max-width: 1100px;
}
.estates-page--fullscreen .estates-page__title { margin-top: 0; }

/* Infinite-scroll loader. The HTML attribute `hidden` must win — a bare
   `display: flex` here was overriding it and the spinner appeared even
   on 0-results / single-page filters. */
.estates-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    color: #888;
    font-size: 14px;
}
.estates-loader[hidden] { display: none !important; }

/* Phase 2 geo breadcrumb — pill above the card grid that surfaces
   once estates-map.js bounds-sync drops the original city= filter.
   Tells the user 'you're seeing what's on the map' + a single-tap
   reset back to the original city. estates-map.js toggles `hidden`
   on this element. */
.estates-geo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 12px;
    background: #eef7ff;
    color: #0a4a85;
    border: 1px solid #cae3f5;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}
.estates-geo-chip[hidden] { display: none; }
.estates-geo-chip__reset {
    background: transparent;
    border: 0;
    padding: 0 2px;
    margin-left: 6px;
    color: #0696ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.estates-geo-chip__reset:hover { color: #057ad6; }

/* Empty state inside the cards grid — shown when bounds-sync returns
   zero results. estates-map.js toggles `hidden`. Without this, a
   0-result pan reads as 'page broke', not 'nothing in this area'. */
.estates-empty-state {
    margin: 32px 0;
    padding: 24px 16px;
    text-align: center;
    color: #777;
    font-size: 14px;
    background: #fafbfc;
    border: 1px dashed #d8dde4;
    border-radius: 12px;
}
.estates-empty-state[hidden] { display: none; }
.estates-loader__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #d0e6f8;
    border-top-color: #0696ff;
    border-radius: 50%;
    animation: estates-spin 0.7s linear infinite;
}
@keyframes estates-spin { to { transform: rotate(360deg); } }
.estates-page--fullscreen .estates-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.estates-page--fullscreen .estates-layout--no-map { grid-template-columns: 1fr; }

/* Dim pins for cards that are not in the current scroll viewport */
.price-marker.is-out-of-view .price-marker__chip {
    background: #cfd6dd;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    opacity: 0.75;
}
.price-marker.is-out-of-view .price-marker__chip::after { border-top-color: #cfd6dd; }

/* Highlight a card when its pin is clicked / hovered */
.property-card.is-active {
    outline: 2px solid #0696ff;
    outline-offset: 2px;
    box-shadow: 0 8px 24px rgba(6, 150, 255, 0.18);
}

/* ===== Price-chip marker (mimics legacy yellow/blue pill) ===== */
.price-marker {
    background: transparent;
    border: none;
}
.price-marker__chip {
    display: inline-block;
    padding: 4px 9px;
    background: #0696ff;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
    transform: translate(-50%, -100%);
    position: relative;
}
.price-marker__chip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #0696ff;
}
.price-marker:hover .price-marker__chip { background: #057ad6; }

/* Card hover → pin pulse. Replaces the old InfoWindow popup that
   fired on every card mouseenter; the popup duplicated the grid
   card and added DOM churn that competed with partner-price
   spinners. Hovered pin goes dark + scales up + pulses a wide
   shadow ring so the location reads at glance distance across the
   whole map, not just for someone already looking at it. */
.price-marker.is-pulsing .price-marker__chip {
    background: #111827;
    border-color: #fff;
    transform: translate(-50%, -100%) scale(1.18);
    animation: price-marker-pulse 1.05s ease-in-out infinite;
    z-index: 10;
}
/* Arrow tail follows the chip's dark fill so the pin doesn't read
   as 'dark badge with light tail' — single solid mark. */
.price-marker.is-pulsing .price-marker__chip::after {
    border-top-color: #111827;
}
@keyframes price-marker-pulse {
    0%   { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(17, 24, 39, 0.55); }
    70%  { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 18px rgba(17, 24, 39, 0); }
    100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(17, 24, 39, 0); }
}

/* Custom cluster bubble — we render <div class="estates-cluster">N</div>
   instead of the @googlemaps/markerclusterer v2 default SVG so the
   same is-pulsing class lights up cluster bubbles the same way
   price-chip pins do when the user hovers a card that lives in a
   cluster. Renderer lives in estates-map.js (arendooClusterRenderer). */
.estates-cluster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    background: #fff;
    color: #0696ff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid #0696ff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    position: relative;
}
.estates-cluster.is-pulsing {
    background: #111827;
    color: #fff;
    border-color: #fff;
    transform: translate(-50%, -50%) scale(1.18);
    animation: price-marker-pulse 1.05s ease-in-out infinite;
    z-index: 10;
}

/* ===== Map popup styling ===== */
/* Mirrors arendoo.com legacy popup: image with €-chip overlay bottom-left
   and heart bottom-right, then a 3-line body (title link + type-meta +
   location). The chip uses our own primary blue, not the legacy pinkish
   pill, so the two surfaces feel like one product. */
.mp-pop {
    /* Match Google's maxWidth (240) minus the chrome's 8px padding
       on each side. Width drives off the chrome instead of being
       fixed so a future maxWidth tweak doesn't reintroduce overflow
       clipping on the right border. */
    width: 100%;
    font-family: inherit;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}
.mp-pop__media {
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #eee;
    border-radius: 6px 6px 0 0;
    outline: none;
}
.mp-pop__media:focus,
.mp-pop__media:focus-visible { outline: none; }
.mp-pop__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 250ms ease;
}
/* Hover anywhere on the popup zooms the cover slightly — same micro-
   interaction the legacy card uses on the listing grid. .mp-pop is
   the root link, so :hover catches the whole tile. */
.mp-pop:hover .mp-pop__media img { transform: scale(1.04); }
.mp-pop__price-chip {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 10px;
    background: #0696ff;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    line-height: 1.1;
}
.mp-pop__heart {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #6b7280;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.mp-pop__body { padding: 8px 12px 10px; }
.mp-pop__name {
    color: #0696ff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    /* Chrome paints a black focus rectangle around the focused link
       which lingers after a marker click; the user never reaches it
       via keyboard (the marker is the entry point), so drop it. */
    outline: none;
}
.mp-pop__name:focus,
.mp-pop__name:focus-visible { outline: none; }
.mp-pop__name:hover { text-decoration: underline; }
/* Title also lights up when hovering anywhere on the card body, not
   just the title text itself — matches the listing-card behaviour. */
.mp-pop:hover .mp-pop__name { text-decoration: underline; }
.mp-pop__meta {
    font-size: 12px;
    color: #5b6370;
    margin-top: 4px;
    line-height: 1.4;
}
.mp-pop__loc {
    font-size: 12px;
    color: #5b6370;
    margin-top: 2px;
    line-height: 1.4;
}
/* Total-stay block — populated from pt.stayTotal + pt.staySub
   (pre-localised on the BE). Right-aligned to mirror the listing
   card's pricing area; bold total drops the per-night sub-line in
   muted grey. Hidden via popupHtml's totalBlock = '' branch when
   the property has no resolved stay price. */
.mp-pop__total {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-top: 1px solid #f0f2f5;
    padding-top: 6px;
}
.mp-pop__total-amount {
    font-size: 15px;
    font-weight: 700;
    color: #0a3a66;
    line-height: 1.2;
}
.mp-pop__total-sub {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* Google's InfoWindow wraps the content in .gm-style-iw-d with a default
   max-height of ~282px and `overflow: auto`, which paints a scroll track
   even when our .mp-pop is shorter than that. Strip both so the popup
   sizes purely to its content.

   Also zero the wrapper padding so our card's image hugs the top + left
   edges of the popup chrome — Google's default 12px gap left the cover
   floating in a white frame and looked unfinished. The `.mp-pop` body
   itself supplies its own breathing room (padding inside .mp-pop__body;
   the chip + heart sit at absolute offsets on the media block). */
.gm-style-iw-d  { overflow: visible !important; max-height: none !important; padding: 0 !important; margin: 0 !important; }
.gm-style-iw    { max-height: none !important; padding: 0 !important; margin: 0 !important; }
/* 8px padding on the chrome paints the legacy-style white frame
   AROUND the card on ALL four sides. Margin on .mp-pop instead
   would push the right edge past the maxWidth Google reserves in
   the InfoWindow options and the right border gets clipped — only
   chrome padding stays within bounds. */
.gm-style-iw-c  { padding: 8px !important; margin: 0 !important; box-sizing: border-box !important; }

/* Catch any inner wrapper Google's latest API may have added that
   isn't one of the named classes above (.gm-style-iw-c, -d, -ch).
   Without this the cover floats ~12px inside the white chrome —
   visible as a thin frame around the image and our radius gets
   masked by the popup background. */
.gm-style-iw-c > div:not(.mp-pop):not(.gm-style-iw-ch):not(.gm-style-iw-d),
.gm-style-iw-d > div:not(.mp-pop) {
    padding: 0 !important;
    margin: 0 !important;
}
.gm-style-iw-c > .mp-pop,
.gm-style-iw-d > .mp-pop { margin: 0 !important; }
/* Our own card stretches the radius onto the popup chrome itself
   so the rounded corners + image align with no inner frame. */
.gm-style-iw-c { border-radius: 8px !important; overflow: hidden !important; }

/* The close-button header is its own block-level element with a
   ~25px reserved height — that's what was leaving a white strip
   above the cover. Pull the whole header out of the flow so the
   content starts at top:0; the X button gets re-positioned inside
   it as a small white pill sitting on the top-right corner of the
   popup, visible against any image background.

   We keep `height: 0` on the header itself (not auto) so its own
   bounding box doesn't restore the strip — the close <button>
   inside is repositioned absolutely against the popup container
   instead, with explicit dimensions so the icon stays clickable. */
.gm-style-iw-ch {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important; /* let the button reach outside */
    z-index: 3;
    pointer-events: none;          /* let map drags through where the header used to claim space */
}
.gm-style-iw-ch > button.gm-ui-hover-effect,
button.gm-ui-hover-effect {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 4;
}
.gm-style-iw-ch > button.gm-ui-hover-effect > span,
button.gm-ui-hover-effect > span {
    width: 14px !important;
    height: 14px !important;
    margin: 6px !important;
}

.leaflet-popup-content { margin: 0; }
.leaflet-popup-content-wrapper { padding: 0; border-radius: 8px; overflow: hidden; }

@media (max-width: 900px) {
    .estates-layout { grid-template-columns: 1fr; }
    .estates-layout__map { position: relative; height: 360px; top: 0; }

    /* On narrow viewports the fullscreen mode collapses to single column + page scroll */
    body.estates-fullscreen { overflow: auto; }
    body.estates-fullscreen .site-main { height: auto; }
    /* Keep the footer hidden on the listing page on mobile too. Letting
       it back in (earlier compromise so the LEGAL / login links were
       discoverable on phone) collided with the card grid — when only a
       few rows were in view the LEGAL / LOG IN / FOLLOW US columns
       crowded right beneath the first two cards and read as page
       chrome instead of end-of-feed. Footer lives on / and the
       property page. */
    body.estates-fullscreen .public-footer { display: none; }
    .estates-page--fullscreen .estates-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .estates-page--fullscreen .estates-layout__map { height: 320px; }
    .estates-page--fullscreen .estates-layout__list { height: auto; overflow: visible; }
    /* Wider top padding so the first card breathes a bit below the sticky
       toolbar instead of looking clipped by it. */
    .estates-page--fullscreen .estates-layout__list-inner { padding: 22px 16px 16px; }
    .estates-page--fullscreen .estates-sticky-header {
        padding: 12px 16px 10px;
        /* Faint shadow makes the sticky boundary clean when cards scroll
           beneath — without it the toolbar+card share the same flat-white
           plane and the seam disappears, reading as "card got clipped". */
        box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.12);
    }
}
.property-card__body h3 a { color: #333; text-decoration: none; }
.property-card__body h3 a:hover { color: #0696ff; }
.property-card__ref { color: #aaa; font-size: 12px; margin-top: 6px; }
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}
.pager__btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px 16px;
    border-radius: 4px;
    color: #333;
}
.pager__btn:hover { background: #f5f5f5; text-decoration: none; }

/* ===== Booking inquiry page (/booking) ===== */
.booking-page { padding: 24px 0 60px; background: #f7f8fa; min-height: calc(100vh - 60px); }
.booking-page__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.booking-page__title {
    color: #0696ff;
    font-size: 26px;
    font-weight: 500;
    margin: 0 0 20px;
}
.booking-flash {
    background: #eef7ff;
    border: 1px solid #cfe6fb;
    color: #0d4f80;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.booking-error {
    background: #fff3ec;
    border: 1px solid #f5cbb6;
    color: #d84315;
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}

.booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}
.booking-grid__main { min-width: 0; }
.booking-grid__aside {
    position: sticky;
    top: 80px;
}

.booking-section-lead {
    color: #555;
    font-size: 14px;
    margin: 16px 0 10px;
}
.booking-section-lead:first-child { margin-top: 0; }

.booking-card {
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    padding: 16px 20px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.booking-card__title {
    color: #0696ff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 14px;
}
.booking-card__row { display: grid; gap: 14px; margin-bottom: 12px; }
.booking-card__row--two   { grid-template-columns: 1fr 1fr; }
.booking-card__row--three { grid-template-columns: 1fr 1fr 1fr; }
.booking-card__hint {
    margin: 4px 0 0;
    font-size: 13px;
    text-align: right;
}
.booking-card__muted {
    color: #888;
    font-size: 12px;
    margin: 6px 0 0;
}
.booking-card__muted--center { text-align: center; }
.booking-card__divider {
    margin: 14px -20px 8px;
    padding: 6px 20px;
    background: #eaf4fc;
    color: #1c5d8b;
    font-weight: 600;
    font-size: 13px;
}

.booking-field { display: block; }
.booking-field--full { grid-column: 1 / -1; }
.booking-field__label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}
.booking-field__label em { color: #d84315; font-style: normal; }
.booking-field input,
.booking-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.booking-field input:focus,
.booking-field textarea:focus {
    outline: none;
    border-color: #0696ff;
    box-shadow: 0 0 0 3px rgba(6, 150, 255, 0.12);
}
.booking-field input:disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; }
.booking-field textarea { resize: vertical; min-height: 80px; }
/* Country picker + birthdate styled to match text inputs. */
.booking-field__select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.booking-field__select:focus {
    outline: none;
    border-color: #0696ff;
    box-shadow: 0 0 0 3px rgba(6, 150, 255, 0.12);
}
/* Birthdate — three side-by-side day/month/year selects. The wrapper is
   capped at ~360px so the year ("Година", 4 digits) always fits without
   clipping. On narrow screens it stretches fluidly. */
.booking-birthdate {
    display: grid;
    grid-template-columns: 80px 140px 110px;
    gap: 6px;
    max-width: 360px;
}
.booking-birthdate .booking-field__select {
    padding-left: 10px;
    padding-right: 26px;
    background-position: right 8px center;
}
@media (max-width: 540px) {
    .booking-birthdate {
        grid-template-columns: 1fr 1.4fr 1.1fr;
        max-width: 100%;
    }
}

/* ───────────────── Scenarios card (above credit-card form) ───────────────── */
.booking-card--scenarios .booking-scenarios {
    margin: 0;
    padding: 0;
    list-style: none;
}
.booking-card--scenarios .booking-scenarios li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.booking-card--scenarios .booking-scenarios li:last-child { border-bottom: 0; }
.booking-card--scenarios .booking-scenarios li::before {
    content: '✓';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8f5ee;
    color: #2e8a55;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
}
.booking-card--scenarios .booking-scenarios li strong { color: #0f4d83; }

/* ───────────────── Card-form additions ───────────────── */
.booking-card__payments {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 8px;
    flex-wrap: wrap;
}
.booking-card__payment-logo {
    width: auto;
    opacity: 0.95;
}
.booking-card__payment-logo--visa  { height: 40px; }
.booking-card__payment-logo--mc    { height: 32px; }
.booking-card__payment-logo--mango { height: 22px; }
.booking-card__payment-sep {
    color: #cfcfcf;
    font-size: 18px;
    margin: 0 4px;
}

.booking-card__terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
    cursor: pointer;
}
.booking-card__terms input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #0696ff;
    cursor: pointer;
}
.booking-card__terms a { color: #0696ff; text-decoration: underline; }
.booking-card__terms a:hover { color: #0578d2; }

.booking-card__terms-error {
    margin: 6px 0 0;
    padding: 8px 12px;
    background: #fdeaea;
    border: 1px solid #d94f4f;
    color: #a02020;
    border-radius: 6px;
    font-size: 13px;
}

.booking-card__submit {
    width: 100%;
    margin-top: 16px;
}

/* Card-data form — section keeps the same outer width as sibling
   booking-card sections (booking summary, payment summary, "what
   happens next"…) so the page rhythm stays consistent. Only the inner
   form group (inputs, payment logos, T&Cs, submit) is constrained +
   centered, giving the credit-card-sized cue without shrinking the
   whole card. */
.booking-card--card-form .booking-card__title,
.booking-card--card-form .booking-card__muted {
    text-align: left;
}
.booking-card--card-form .booking-card__row,
.booking-card--card-form .booking-card__payments,
.booking-card--card-form .booking-card__terms,
.booking-card--card-form #card-error,
.booking-card--card-form #terms-error,
.booking-card--card-form #processing {
    max-width: 440px;
    margin-left: 0;
    margin-right: auto;
}
.booking-card--card-form .booking-card__payments,
.booking-card--card-form .booking-card__terms {
    justify-content: flex-start;
}
/* Submit button always centered horizontally regardless of cluster
   alignment — primary call-to-action sits on the center axis of the
   whole card so it reads as the page's main affordance. */
.booking-card--card-form .booking-card__submit {
    display: block;
    width: auto;
    min-width: 240px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 22px;
    font-size: 15px;
}

/* ───────────────── Legal pages (terms, privacy) ───────────────── */
.legal-page { padding: 24px 16px 64px; }
.legal-page__inner {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    padding: 28px 32px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    color: #2a2a2a;
    line-height: 1.65;
    font-size: 15px;
}
.legal-page__inner h1 { font-size: 28px; margin: 0 0 16px; color: #0f4d83; }
.legal-page__inner h2 { font-size: 20px; margin: 26px 0 10px; color: #0f4d83; }
.legal-page__inner h3 { font-size: 17px; margin: 22px 0 8px; color: #0f4d83; }
.legal-page__inner h4, .legal-page__inner h5 { font-size: 15px; margin: 18px 0 6px; }
.legal-page__inner p { margin: 0 0 12px; }
.legal-page__inner ul, .legal-page__inner ol { margin: 0 0 12px 22px; }
.legal-page__inner li { margin: 0 0 6px; }
.legal-page__inner a { color: #0696ff; }
.legal-page__inner a:hover { text-decoration: underline; }

/* Summary side card */
.booking-card--summary { padding-bottom: 16px; }
.booking-summary__property {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}
.booking-summary__cover {
    width: 90px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.booking-summary__name { font-weight: 600; color: #333; font-size: 14px; line-height: 1.3; }
.booking-summary__addr { color: #777; font-size: 12px; margin-top: 4px; }
.booking-summary__ref { color: #aaa; font-size: 12px; margin-top: 2px; }

.booking-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}
.booking-row__label { flex: 1 1 auto; color: #555; }
.booking-row__amount { color: #0696ff; font-weight: 600; white-space: nowrap; }
.booking-row__sub {
    display: block;
    color: #999;
    font-weight: 400;
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.4;
}
.booking-row--total {
    background: #f6fafe;
    margin: 6px -20px 0;
    padding: 8px 20px;
    font-weight: 600;
    color: #1c5d8b;
}
.booking-row--total .booking-row__amount { color: #1c5d8b; }

.booking-cancel-policy {
    margin: 12px 0 14px;
    padding: 10px 12px;
    background: #fafafa;
    border-left: 3px solid #0696ff;
    color: #555;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
}

/* Logged-in card */
.booking-card--logged-in {
    border-color: #b6e0fa;
    background: #f6fbff;
}
.booking-loggedin { margin: 0 0 8px; font-size: 14px; }
.booking-loggedin strong { color: #1c5d8b; }
.booking-loggedin__email { display: block; color: #666; font-size: 13px; margin-top: 2px; }
.booking-loggedin__logout {
    color: #d84315;
    padding: 6px 12px;
    border: 1px solid #f5cbb6;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
}
.booking-loggedin__logout:hover { background: #fff3ec; }

/* Success page */
.booking-success {
    max-width: 720px;
    margin: 24px auto 0;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.booking-success__icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #d6f1de;
    color: #1f8f3e;
    font-size: 28px;
    font-weight: 700;
}
.booking-success__title {
    color: #0696ff;
    font-size: 24px;
    margin: 0 0 12px;
    font-weight: 600;
}
.booking-success__lead {
    color: #444;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
}
.booking-success__details {
    text-align: left;
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    padding: 16px 18px;
    background: #fafbfd;
    border-radius: 8px;
    border: 1px solid #eef1f5;
}
.booking-success__details > div {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}
.booking-success__details dt { color: #888; }
.booking-success__details dd { margin: 0; font-weight: 600; color: #333; }
.booking-success__cta { margin: 0; }
@media (max-width: 600px) {
    .booking-success__details { grid-template-columns: 1fr; }
}

.booking-submit {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .booking-grid { grid-template-columns: 1fr; }
    .booking-grid__aside { position: static; }
    .booking-card__row--three { grid-template-columns: 1fr 1fr; }
    .booking-card__row--two   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .booking-card__row--three { grid-template-columns: 1fr; }
}
.pager__current { font-weight: 500; }

/* ---------- Single property ---------- */
.property-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}
.property-page__head {
    margin-bottom: 24px;
}
.property-page__title {
    color: #333;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 8px;
}
.property-page__address {
    color: #666;
    margin: 0;
}
.property-page__ref {
    color: #aaa;
    margin-left: 12px;
    font-size: 14px;
}
.property-gallery__hero {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.property-gallery__hero img {
    width: 100%;
    height: auto;
    display: block;
}
.property-gallery__strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.property-gallery__thumb {
    display: block;
    height: 100px;
    overflow: hidden;
    border-radius: 4px;
}
.property-gallery__thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.property-gallery__more {
    background: rgba(0,0,0,0.1);
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    height: 100px;
}
.property-meta {
    margin: 24px 0;
}
.property-meta ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.property-meta li {
    background: #f5f5f5;
    padding: 8px 14px;
    border-radius: 4px;
}
.property-section {
    margin: 32px 0;
}
.property-section h2 {
    color: #0696ff;
    font-weight: 500;
    font-size: 20px;
    margin: 0 0 12px;
}
.property-section__body {
    line-height: 1.6;
}
.property-cta {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ========== Estate detail view — full-width legacy-style gallery ========== */

/* Title bar — full-width banner */
.estate-titlebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    pointer-events: none; /* let clicks pass through to slides except on buttons */
}
.estate-titlebar > * { pointer-events: auto; }
.estate-titlebar__inner {
    max-width: 100%;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.estate-titlebar__content {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.estate-title {
    margin: 0;
    background: transparent;
    color: #fff;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.estate-score { display: flex; align-items: center; gap: 6px; }
.review-stars {
    width: 100px; height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 18"><g fill="%23ddd"><polygon points="10,1 12.6,7 19,7 14,11 15.6,17 10,13.5 4.4,17 6,11 1,7 7.4,7"/><polygon points="30,1 32.6,7 39,7 34,11 35.6,17 30,13.5 24.4,17 26,11 21,7 27.4,7"/><polygon points="50,1 52.6,7 59,7 54,11 55.6,17 50,13.5 44.4,17 46,11 41,7 47.4,7"/><polygon points="70,1 72.6,7 79,7 74,11 75.6,17 70,13.5 64.4,17 66,11 61,7 67.4,7"/><polygon points="90,1 92.6,7 99,7 94,11 95.6,17 90,13.5 84.4,17 86,11 81,7 87.4,7"/></g></svg>') no-repeat;
}
.review-stars .stars {
    height: 18px; background: #ffb400;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 18"><g><polygon points="10,1 12.6,7 19,7 14,11 15.6,17 10,13.5 4.4,17 6,11 1,7 7.4,7"/><polygon points="30,1 32.6,7 39,7 34,11 35.6,17 30,13.5 24.4,17 26,11 21,7 27.4,7"/><polygon points="50,1 52.6,7 59,7 54,11 55.6,17 50,13.5 44.4,17 46,11 41,7 47.4,7"/><polygon points="70,1 72.6,7 79,7 74,11 75.6,17 70,13.5 64.4,17 66,11 61,7 67.4,7"/><polygon points="90,1 92.6,7 99,7 94,11 95.6,17 90,13.5 84.4,17 86,11 81,7 87.4,7"/></g></svg>') no-repeat;
}
.votes { color: rgba(255,255,255,0.85); font-size: 13px; }
.verified-by-arendoo span {
    background: #0696ff; color: #fff;
    font-size: 11px; padding: 4px 8px; border-radius: 3px;
}
.estate-titlebar__actions {
    display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.estate-titlebar__actions > span {
    cursor: pointer;
    background: rgba(255,255,255,0.15);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
    user-select: none;
}
.estate-titlebar__actions > span:hover { background: rgba(255,255,255,0.28); }
.btn-photo-gallery { font-weight: 500; }
.btn-wish-list { font-size: 16px; }
.btn-wish-list.on { color: #ff5470; }

/* ===== Full-width gallery cover ===== */
.section-gallery {
    position: relative; /* anchor for the translucent title bar overlay */
    background: #F0F1F2; /* legacy gallery container background */
    max-width: 1920px; /* legacy cap — don't span 4K screens */
    margin: 0 auto;
    overflow: hidden;
}
.gallery-cover {
    position: relative;
    width: 100%;
    background: #F0F1F2;
    overflow: hidden;
    /*
     * Legacy geometry (verified from main.css line 2143-2168):
     *   .swiper-main   flex: 0 1 62.5%
     *   .iw-container  flex: 0 1 37.5%
     *   .iw           border-left:2px solid #fff; border-bottom:2px solid #fff
     *   .swiper-slide  padding-top: 66.67% (3:2 aspect)
     *
     * Grid: 5fr main + 3fr thumbs = 8 units across. Container aspect 8:3.2
     * (62.5% × 2/3 = 41.67% height → 8/3.33 ≈ 12/5). Simpler: aspect 5/2.
     */
    display: grid;
    grid-template-columns: 62.5% 37.5%;
    aspect-ratio: 8 / 3.34; /* matches main 5:3.34 ≈ 3:2 */
    max-height: 720px;
}

/* Main swiper (left side) — fills its grid cell, 3:2 by construction.
   Background sits on the SAME light grey as the `.gallery-cover` wrapper
   and the thumb cells. Previously this strip flashed `#111` while the
   hero JPEG was in flight (visibly so since the 800x450→1920x1080
   upgrade increased the hero from 61 KB to ~260 KB), which read as a
   "black screen lag" before the image landed — the legacy site holds
   a grey placeholder so the eye doesn't notice the wait. */
.gc-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e5e5e5;
}
.gc-slide {
    position: absolute;
    inset: 0;
    background: #e5e5e5;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.gc-slide--active {
    opacity: 1;
    pointer-events: auto;
}

/* Airbnb-style horizontal track — JS injects this wrapper around the
   slides on multi-image galleries. translateX selects which slide is
   in view; finger-follow drag during touchmove, snap on release. The
   `.gc-track .gc-slide` rules below override the absolute/opacity
   layout above; single-image galleries (no track injected) keep the
   legacy crossfade. */
.gc-track {
    position: absolute;
    inset: 0;
    display: flex;
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
}
.gc-track .gc-slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    user-select: none;
    -webkit-user-drag: none;
}
.gc-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.gc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    padding-bottom: 10px;
    cursor: pointer;
    transition: background .15s;
    z-index: 3;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.gc-nav:hover { background: rgba(0,0,0,0.75); }
.gc-nav--prev { left: 16px; }
.gc-nav--next { right: 16px; }
.gc-pagination {
    position: absolute;
    bottom: 16px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
}
.gc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.gc-dot--active { background: #fff; transform: scale(1.3); }

/* Right-side thumb grid — 2 cols × 3 rows (6 thumbs).
   White 2px gutters match legacy main.css line 2163. */
.gc-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
    background: #fff;
    padding: 0;
    padding-left: 2px; /* gap between swiper column and first thumb column */
}
.gc-swiper {
    border-right: 2px solid #fff;
    box-sizing: border-box;
}
.gc-thumb {
    position: relative;
    border: none;
    background-color: #e5e5e5; /* legacy fallback before image loads */
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}
/* Inner image element so scale stays clipped by the outer thumb (matches
   legacy main.css line 2168: .iw .image { position: absolute; ... } and
   line 2176: .iw:hover .image { transform: scale(1.05) } ). */
.gc-thumb__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 1s ease-out;
}
.gc-thumb:hover .gc-thumb__image { transform: scale(1.05); }
.gc-thumb:hover { opacity: 0.85; }
.gc-thumb--empty { cursor: default; background-color: #e5e5e5; }
.gc-thumb__more {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.65);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 500;
}

/* Gallery toolbar (heart + share) — top-right corner overlay. */
.gc-toolbar {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 4;
}
.gc-tool {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: transform .15s, color .15s, background .15s;
}
.gc-tool:hover { transform: scale(1.05); background: #fff; }
.gc-tool--heart.is-active { color: #e91e63; }

/* "Покажи всички N снимки" — bottom-right overlay. */
.gc-show-all {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    border: none;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    z-index: 4;
    transition: background .15s, transform .15s;
}
.gc-show-all:hover { background: #fff; transform: translateY(-1px); }

/* ===== Title block — first row inside the main column of the detail
   layout. Sidebar widget pins to the same row, so they read as a pair. */
.estate-titleblock {
    margin: 0 0 16px;
    padding: 4px 0 0;
}
.estate-titleblock__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.estate-titleblock__heading {
    flex: 1;
    min-width: 0;
}
.estate-titleblock .estate-title {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: none;
    /* Reset legacy overlay styling from .estate-title. */
    background: none;
    padding: 0;
}
.estate-titleblock__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #6b7280;
}
.estate-titleblock__location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.estate-titleblock__location svg { color: #9aa5b1; }
.estate-titleblock__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0696ff;
    font-weight: 600;
}
.estate-titleblock__ref {
    font-family: monospace;
    color: #9aa5b1;
    font-size: 12px;
}
.estate-titleblock__chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3eaf2;
}
.estate-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f4f7fa;
    border: 1px solid #e3eaf2;
    border-radius: 999px;
    font-size: 14px;
    color: #1f2937;
}
.estate-chip svg { color: #0696ff; flex-shrink: 0; }
.estate-chip__value { font-weight: 700; }
.estate-chip__label { color: #6b7280; }

@media (max-width: 600px) {
    .estate-titleblock .estate-title { font-size: 22px; }
    .gc-show-all { padding: 8px 12px; font-size: 12px; bottom: 10px; right: 10px; }
    .gc-toolbar { top: 10px; right: 10px; }
    .gc-tool { width: 36px; height: 36px; }
}

/* ===== Page body below gallery ===== */
.estate-detail-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 120px;
}

/* Anchor tabs (sticky on scroll, with shadow + bg shift when pinned). */
.estate-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #f0f0f0;
    margin: 24px 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50;
    overflow-x: auto;
    scrollbar-width: none;
    transition: box-shadow .15s, background .15s;
}
.estate-tabs::-webkit-scrollbar { display: none; }
.estate-tabs.is-pinned {
    box-shadow: 0 2px 12px rgba(0, 30, 60, 0.08);
}
.estate-tabs a {
    padding: 14px 24px;
    color: #555;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.estate-tabs a:hover, .estate-tabs a.active {
    color: #0696ff;
    border-bottom-color: #0696ff;
    text-decoration: none;
}

.estate-section {
    padding: 32px 0;
    scroll-margin-top: 80px;
}
.estate-section h2 {
    color: #0696ff;
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 16px;
}
.estate-section__body {
    line-height: 1.7;
    margin: 16px 0;
}
.estate-quick-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.estate-quick-meta li {
    background: #f5f5f5;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
}
.estate-map-placeholder {
    background: #f5f5f5;
    color: #888;
    padding: 64px;
    text-align: center;
    border-radius: 8px;
}

/* Sticky price footer */
.estate-price-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #ffd54f;
    color: #333;
    padding: 12px 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    z-index: 10;
}
.estate-price-footer__inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
.estate-price-footer__label {
    font-size: 14px;
    opacity: 0.85;
}
.estate-price-footer__value {
    font-size: 24px;
    font-weight: 600;
    color: #d84315;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .gallery-cover {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        aspect-ratio: auto;
        max-height: none;
    }
    .gc-swiper { aspect-ratio: 3 / 2; }
    .gc-thumbs {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr;
        height: 80px;
        gap: 2px;
        padding: 2px;
    }
    .gc-thumb { height: 80px; }
    .estate-title { font-size: 16px; padding: 6px 12px; }
    .estate-titlebar__inner { padding: 10px 16px; }
}

/* ===== Owner business card (mirrors legacy box-1/box-2/box-3 structure) ===== */
.owner-business-card {
    max-width: 760px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.owner-business-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.owner-card__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 16px;
}
.owner-card__person {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.owner-card__avatar {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    flex-shrink: 0;
}
.owner-card__avatar--placeholder {
    background: #ccc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M3 22c0-5 4-9 9-9s9 4 9 9"/></svg>') center / 50% no-repeat;
}
.owner-card__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.owner-card__name {
    color: #444;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-block;
}
.owner-card__name:hover { color: #0696ff; text-decoration: underline; }
.owner-card__trusted {
    color: #0696ff;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.owner-card__trusted-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.owner-card__see-more {
    color: #0696ff;
    font-size: 13px;
    text-decoration: underline;
    align-self: flex-start;
    margin-top: 2px;
}
.owner-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    text-align: center;
}
.owner-card__stat {
    padding: 0 12px;
    position: relative;
}
.owner-card__stat + .owner-card__stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: #d8d8d8;
}
.owner-card__stat-label {
    color: #666;
    font-size: 12px;
    margin-bottom: 6px;
    line-height: 1.3;
}
.owner-card__stat-value {
    color: #0696ff;
    font-size: 18px;
    font-weight: 600;
}
.owner-card__cta {
    text-align: center;
    padding-top: 14px;
    border-top: 1px solid #e0e0e0;
}
.owner-card__cta .btn { padding: 10px 24px; }

/* Tighten the section header for the owner block */
#EstateOwner.estate-section { padding: 16px 0; }
#EstateOwner.estate-section h2 { margin-bottom: 12px; }

@media (max-width: 720px) {
    .owner-card__main {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .owner-card__stats { gap: 8px; }
    .owner-card__stat-value { font-size: 16px; }
}

/* ===== 2-column layout: main content + sticky booking sidebar ===== */
.estate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    margin-top: 16px;
}
.estate-layout__main { min-width: 0; }
.estate-layout__sidebar {
    position: sticky;
    top: 80px; /* below the sticky .estate-tabs nav (~60px) + breathing room */
    align-self: start;
}

@media (max-width: 1024px) {
    .estate-layout { grid-template-columns: 1fr; }
    /* On mobile the widget drops into the content flow under the main column.
       No more sticky positioning — it just sits at the bottom of the article. */
    .estate-layout__sidebar { position: static; align-self: stretch; }
    .booking-widget {
        max-width: 480px;
        margin: 0 auto;
    }
    /* The standalone bottom price strip becomes redundant once the widget is
       visible inline. Hide it so we don't double-render the CTA. */
    .estate-price-footer--mobile { display: none; }
    .estate-detail-view { padding-bottom: 32px; }
}

/* ===== Booking widget =====
   v2 (2026-06-26) redesign — Hometogo-style metasearch polish. Three goals:
   (1) single accent — kill yellow overuse, deep Material blue 700 (#1976D2)
       carries CTA + selection + range; brand identity stays Arendoo-blue family.
   (2) inverted hierarchy — Total (€365) is the visual hero; the legacy
       "Цена на ден от €40" header is demoted to a quiet hint strip so it
       no longer baits guests with a number they will not actually pay.
   (3) calendar = 3 states — Free / Selected / Unavailable. The half-state
       checkin-only / checkout-only cells keep a small corner dot indicator
       and surface their meaning in a hover tooltip instead of diagonal
       stripes that pulled the eye but communicated little. */
.booking-widget {
    --bw-brand:        #1976d2;
    --bw-brand-dark:   #1565c0;
    --bw-brand-light:  #2089e3;
    /* v2 used #e3f0fb for range — visually indistinguishable from white at
       small cell sizes (5% delta). v3 darkens the range bg to #d3e4f4
       (~15% delta) so the bar between check-in and check-out is actually
       legible at a glance. Subtitle backgrounds still ride brand-soft for
       the gentler in-flow use. */
    --bw-brand-range:  #d3e4f4;
    --bw-brand-soft:   #e3f0fb;
    --bw-brand-ghost:  #ebf4fc;       /* hover-preview ghost between brand-soft and tint */
    --bw-brand-tint:   #f5f9fd;
    --bw-weekend:      #fef9ee;       /* cream rhythm for Sat/Sun cells */
    --bw-weekend-edge: #f4ecd5;
    --bw-today:        #0a8a5c;       /* small green ring for today */
    --bw-ink-1:        #0b1220;
    --bw-ink-2:        #3a4453;
    --bw-ink-3:        #6b7480;
    --bw-muted:        #9aa3ad;
    --bw-line:         #e6e9ee;
    --bw-line-2:       #f0f2f6;
    --bw-success:      #0a8a5c;
    --bw-success-soft: #e7f5ee;
    --bw-shadow-sel:   0 4px 12px rgba(25, 118, 210, 0.32), 0 1px 2px rgba(25, 118, 210, 0.18);

    background: #fff;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
    /* No `overflow: hidden` here — the calendar popup is absolutely positioned
       inside the widget and would otherwise get clipped. The header / footer
       round their own outer corners instead. */
}
/* "От €40" hint strip — quiet bg with secondary text styling, intentionally
   demoted vs the legacy bright-yellow strip. Total in breakdown is now the
   prominent number. */
.booking-widget__header {
    background: var(--bw-brand-tint);
    padding: 10px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--bw-line);
}
.booking-widget__footer { border-radius: 0 0 12px 12px; }
.booking-widget__label {
    color: var(--bw-ink-3);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.booking-widget__price {
    color: var(--bw-ink-1);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}
.booking-widget__currency { font-size: 13px; font-weight: 500; color: var(--bw-ink-2); }
.booking-widget__price-empty {
    color: var(--bw-ink-3);
    font-size: 12px;
    font-weight: 500;
}

/* Form */
.booking-widget__form {
    padding: 14px;
    font-size: 14px;
}
.booking-widget__row { margin-bottom: 8px; }
.booking-widget__row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.booking-widget__field {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.booking-widget__field-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.booking-widget__field input,
.booking-widget__field select {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.booking-widget__field input:focus,
.booking-widget__field select:focus {
    outline: none;
    border-color: #0696ff;
    box-shadow: 0 0 0 3px rgba(6, 150, 255, 0.12);
}

/* ===== Guests picker (adults / children / infants — legacy parity) ===== */
/* ===== Guests picker — v3 — same palette as calendar/booking panel =====
   Was a mash of legacy bright Arendoo blue (#0696ff) + neutral greys.
   v3 ties it to the var(--bw-brand) family so the popover feels like
   the calendar's sibling: brand focus ring, brand-tint hover, brand
   subtitle text, brand CTA. */
.booking-widget__guests { position: relative; }
.booking-widget__guests-trigger {
    width: 100%;
    padding: 9px 30px 9px 34px;
    border: 1px solid var(--bw-line);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--bw-ink-1);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.booking-widget__guests-trigger:hover {
    border-color: var(--bw-brand-soft);
}
.booking-widget__guests-trigger:focus,
.booking-widget__guests-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--bw-brand);
    box-shadow: 0 0 0 3px var(--bw-brand-soft);
}
.booking-widget__guests-label { flex: 1 1 auto; }
.booking-widget__guests-caret { flex: 0 0 auto; color: var(--bw-ink-3); }
.booking-widget__guests-popover {
    /* The mobile media query below hoists this popover into <body>
       via JS so any `overflow: hidden` ancestor can't clip it. That
       move strips it of the custom properties declared on
       `.booking-widget`, so we re-declare the palette here in the
       same way we do for `.bw-calendar`. Same values, no drift. */
    --bw-brand:        #1976d2;
    --bw-brand-dark:   #1565c0;
    --bw-brand-soft:   #e3f0fb;
    --bw-brand-tint:   #f5f9fd;
    --bw-ink-1:        #0b1220;
    --bw-ink-2:        #3a4453;
    --bw-ink-3:        #6b7480;
    --bw-muted:        #9aa3ad;
    --bw-line:         #e6e9ee;
    --bw-line-2:       #f0f2f6;

    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
    padding: 8px 16px 14px;
}
.booking-widget__guests-popover[hidden] { display: none !important; }
.bw-guests-header { display: none; }  /* mobile-only — overridden in media query */
.bw-guests-rows   { display: block; }
.bw-guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bw-line-2);
}
.bw-guests-row:last-of-type { border-bottom: none; }
.bw-guests-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bw-ink-1);
}
.bw-guests-row__sub {
    font-size: 12px;
    color: var(--bw-brand);     /* was #0696ff bright; now brand for parity */
    margin-top: 2px;
    font-weight: 500;
}
.bw-guests-counter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.bw-guests-counter__btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--bw-line);
    background: #fff;
    color: var(--bw-ink-1);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s, background .12s, color .12s;
}
.bw-guests-counter__btn:hover:not(:disabled) {
    border-color: var(--bw-brand);
    color: var(--bw-brand);
    background: var(--bw-brand-tint);
}
.bw-guests-counter__btn:active:not(:disabled) { background: var(--bw-brand-soft); }
.bw-guests-counter__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--bw-muted);
    border-color: var(--bw-line-2);
    background: #fafbfc;
}
.bw-guests-counter__val {
    min-width: 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--bw-ink-1);
}
.bw-guests-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--bw-line);
}
.bw-guests-hint {
    font-size: 12px;
    color: var(--bw-ink-3);
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.4;
}
.bw-guests-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bw-brand);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .12s, box-shadow .12s;
    box-shadow: 0 1px 2px rgba(25, 118, 210, 0.18);
}
.bw-guests-close:hover { background: var(--bw-brand-dark); box-shadow: 0 2px 6px rgba(25, 118, 210, 0.32); }
.bw-guests-close:active { transform: scale(0.97); }
.booking-widget__submit {
    width: 100%;
    background: var(--bw-brand);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s, transform .1s;
    letter-spacing: -0.005em;
}
.booking-widget__submit:hover:not(:disabled) { background: var(--bw-brand-dark); }
.booking-widget__submit:active:not(:disabled) { transform: translateY(1px); }
.booking-widget__submit:disabled {
    background: #cfdcea;
    cursor: not-allowed;
}
.booking-widget__footer {
    padding: 10px 14px;
    border-top: 1px solid var(--bw-line);
    text-align: center;
    background: #fbfcfd;
    border-radius: 0 0 12px 12px;
}
.booking-widget__footer small {
    color: var(--bw-ink-3);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.booking-widget__footer small svg { fill: var(--bw-brand); }

/* ===== Price breakdown — 4 accordions matching legacy renderEstateBookingSummary ===== */
.booking-widget__breakdown {
    margin: 12px 0 14px;
    border-top: 1px solid #ececec;
}
.booking-widget__hint {
    color: #888;
    text-align: center;
    margin: 14px 0 0;
    font-size: 13px;
}
.booking-widget__breakdown[data-state="loading"] .booking-widget__hint,
.booking-widget__breakdown[data-state="error"] .booking-widget__hint {
    display: none;
}
.booking-widget__error {
    color: #d84315;
    background: #fff3ec;
    border: 1px solid #f5cbb6;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.45;
}
.booking-widget__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #888;
    font-size: 13px;
    padding: 14px 0;
}
.booking-widget__loading::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid #d0e6f8;
    border-top-color: #0696ff;
    border-radius: 50%;
    animation: estates-spin 0.7s linear infinite;
}

.bw-accordion {
    border-top: 1px solid var(--bw-line);
}
.bw-accordion:last-child { border-bottom: 1px solid var(--bw-line); }
.bw-accordion__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: var(--bw-ink-1);
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    transition: background 120ms ease;
}
.bw-accordion__head:hover { background: var(--bw-brand-tint); }
.bw-accordion__chevron {
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bw-line-2);
    color: var(--bw-ink-2);
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
/* Closed → chevron stays as `▾` (down) — "click to expand downward".
   Open → flip 180° so it points up — "click to collapse upward". The
   previous rule rotated -90deg on the closed state, which combined with
   the JS-emitted `▸` glyph to display as an upward-looking caret on
   closed sections — exactly the opposite of the open-direction hint. */
.bw-accordion[data-open="true"] .bw-accordion__chevron { transform: rotate(180deg); }
.bw-accordion__body {
    padding: 8px 14px 12px;
    background: #fff;
    font-size: 13px;
}
.bw-accordion[data-open="false"] .bw-accordion__body { display: none; }
.bw-accordion__subtitle {
    background: var(--bw-brand-tint);
    margin: 0 -14px 10px;
    padding: 7px 14px;
    font-weight: 600;
    color: var(--bw-brand-dark);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bw-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    color: var(--bw-ink-2);
}
.bw-row__label { flex: 1 1 auto; min-width: 0; }
.bw-row__amount {
    color: var(--bw-ink-1);
    font-weight: 600;
    white-space: nowrap;
}
.bw-row__sub {
    display: block;
    color: var(--bw-muted);
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.4;
}
/* Total row — the visual hero. Inverted hierarchy: this number is now the
   biggest digit in the widget, replacing the legacy yellow "Цена на ден от"
   header as the eye's anchor. Amount intentionally 22px so it dominates the
   €78.75 × N line and the cleaning-fee line. */
.bw-row--total {
    background: var(--bw-brand-soft);
    margin: 10px -14px -12px;
    padding: 14px 14px 16px;
    border-top: 1px solid var(--bw-line);
    font-weight: 700;
    color: var(--bw-ink-1);
    font-size: 15px;
}
.bw-row--total .bw-row__amount {
    color: var(--bw-ink-1);
    font-size: 22px;
    letter-spacing: -0.01em;
}
.bw-policy-text {
    color: var(--bw-ink-2);
    line-height: 1.5;
    margin: 0;
    font-size: 13px;
}

/* ===== Calendar popup (Дати и Цени) — mimics legacy CalendarWidget ===== */
.booking-widget { position: relative; }

.bw-calendar {
    /* booking-widget.js hoists the popup out of `.booking-widget` and
       into `document.body` on first open (see hoistPopup()) so it can
       escape the sticky-sidebar stacking context. That move strips the
       popup of the custom-property inheritance the panel itself sets up,
       so every var(--bw-…) in the calendar block below would resolve to
       initial (transparent / black) once hoisted. Re-declare the full
       palette here so the calendar renders correctly whether it lives
       inside its original parent or in <body>. */
    --bw-brand:        #1976d2;
    --bw-brand-dark:   #1565c0;
    --bw-brand-light:  #2089e3;
    --bw-brand-range:  #d3e4f4;
    --bw-brand-soft:   #e3f0fb;
    --bw-brand-ghost:  #ebf4fc;
    --bw-brand-tint:   #f5f9fd;
    --bw-weekend:      #fef9ee;
    --bw-weekend-edge: #f4ecd5;
    --bw-today:        #0a8a5c;
    --bw-ink-1:        #0b1220;
    --bw-ink-2:        #3a4453;
    --bw-ink-3:        #6b7480;
    --bw-muted:        #9aa3ad;
    --bw-line:         #e6e9ee;
    --bw-line-2:       #f0f2f6;
    --bw-success:      #0a8a5c;
    --bw-success-soft: #e7f5ee;
    --bw-shadow-sel:   0 4px 12px rgba(25, 118, 210, 0.32), 0 1px 2px rgba(25, 118, 210, 0.18);

    position: fixed;        /* JS sets top + left in viewport coordinates */
    width: 700px;           /* legacy parity — calendar-month is 330px × 2 + paddings */
    background: #fff;
    border: 1px solid var(--bw-line);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    /* Beats Leaflet's internal pane / control z-indexes (max ~1000)
       so the calendar always sits above the property's map section. */
    z-index: 9999;
    font-size: 12px;
    user-select: none;
    /* v3: was `overflow: hidden` — needed it back when the rounded
       corners would otherwise be filled by child backgrounds. With the
       v3 layout the gradient header clips its own ::before (it has
       overflow: hidden + its own border-radius for the top corners)
       and the footer below now has its own bottom corners. Keeping the
       calendar visible-overflow lets hover tooltips escape the rounded
       boundary instead of being clipped on the edge cells. */
    overflow: visible;
}
.bw-calendar[hidden] { display: none; }

/* Mobile-only chrome — hidden on desktop, surfaced via the @media
   (max-width: 720px) overrides further down. */
.bw-calendar__weekdays { display: none; }
.bw-calendar__footer   { display: none; }

/* v3 header — gradient + dotted pattern overlay for brand identity.
   The pattern is stacked on the element itself (two background-images)
   instead of a `::before` pseudo, so the parent doesn't need
   `overflow: hidden` — that previously clipped chips when they wrapped
   to a second row on narrow viewports (Гориан caught it on phone).
   The bg-stack is clipped by the parent border-radius natively. */
.bw-calendar__header {
    background:
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px) 0 0 / 14px 14px,
        linear-gradient(135deg, var(--bw-brand) 0%, var(--bw-brand-dark) 100%);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px 10px 0 0;
    position: relative;
}
.bw-calendar__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}
/* Chips strip — sits under the title, hosts contextual info that used to
   live on separate rows (min-stay banner + selected-range bar). Inline
   chips read as one cohesive sub-header rather than two stacked strips. */
.bw-calendar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.bw-calendar__chips[hidden] { display: none; }
.bw-cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bw-cal-chip--success {
    background: var(--bw-success-soft);
    color: var(--bw-success);
    font-weight: 600;
}
.bw-cal-chip--success::before {
    content: "✓";
    font-weight: 700;
}
.bw-cal-chip-clear {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 0 4px;
    opacity: 0.85;
}
.bw-cal-chip-clear:hover { opacity: 1; }
.bw-calendar__close {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: #fff;
    border: none;
    width: 28px; height: 28px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.bw-calendar__close:hover { background: rgba(255, 255, 255, 0.18); }

/* v3: the legacy bw-calendar__selected and bw-calendar__min-stay strips
   are hidden because their content has moved INTO the header as chips
   (see .bw-calendar__chips above). The Blade still emits them so JS can
   keep its existing wiring; the visual hides via display: none. */
.bw-calendar__selected,
.bw-calendar__min-stay {
    display: none !important;
}

/* Footer status flashes red briefly when the user picks a check-out
   that violates min_stay. updateFooterStatus() restores normal after
   ~1.8s; see flashFooterError() in booking-widget.js. */
.bw-calendar__footer-status--error {
    color: #c4253c !important;
    font-weight: 700;
}
.bw-calendar__selected-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bw-brand-dark);
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}

.bw-calendar__months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
}
.bw-month {
    border: 1px solid #ececec;
    border-radius: 4px;
    overflow: hidden;
}

.bw-month__header {
    background: #fff;
    color: var(--bw-ink-1);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--bw-line-2);
}
/* v3: month header is now white, so the navs need a visible (ink-2)
   colour instead of the legacy white-on-blue and a brand-tint hover
   pill so the controls clearly feel clickable. */
.bw-month__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--bw-ink-2);
    width: 26px; height: 26px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bw-month__nav:hover:not(:disabled) {
    background: var(--bw-brand-tint);
    color: var(--bw-brand);
}
.bw-month__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.bw-month__nav--prev { left: 6px; }
.bw-month__nav--next { right: 6px; }

.bw-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 6px;
}
.bw-day-header {
    text-align: center;
    padding: 8px 0 6px;
    font-weight: 600;
    color: var(--bw-muted);
    background: transparent;
    border-bottom: 1px solid var(--bw-line-2);
    font-size: 10px;
    letter-spacing: 0.06em;
}
.bw-day-header--weekend { color: #c19330; }
/* v3 cell — Hometogo typography. Number is now the visual focus (15px bold,
   centered) with the price as a small secondary line under it, not a
   bottom-right corner stamp. The grid lines between cells are gone in
   favour of small gaps and rounded individual cells — feels like a
   calendar, not a spreadsheet. */
.bw-day {
    aspect-ratio: 1;
    background: #fff;
    color: var(--bw-ink-1);
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 4px 0 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
    position: relative;
}
.bw-day--empty {
    background: transparent;
    cursor: default;
    border-color: transparent;
}
.bw-day--empty:hover { background: transparent; }
.bw-day__num {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
}
.bw-day__price {
    color: var(--bw-ink-3);
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
}

/* Weekend rhythm — Sat/Sun get a soft cream tint. Subtle so it doesn't
   compete with selection / range states; visible enough that a guest
   scanning the calendar sees "weekend blocks" at a glance. */
.bw-day--weekend:not(.bw-day--range):not(.bw-day--selected):not(.bw-day--booked):not(.bw-day--not-for-rent):not(.bw-day--past):not(.bw-day--too-early):not(.bw-day--checkin-only):not(.bw-day--checkout-only) {
    background: var(--bw-weekend);
    border-color: var(--bw-weekend-edge);
}

/* "Днес" — single ring + green number. No bg change so it doesn't fight
   with weekend tint when today happens to be a Saturday. */
.bw-day--today:not(.bw-day--selected):not(.bw-day--range) {
    border-color: var(--bw-today);
}
.bw-day--today:not(.bw-day--selected):not(.bw-day--range) .bw-day__num {
    color: var(--bw-today);
}


.bw-day:hover:not(.bw-day--empty):not(.bw-day--booked):not(.bw-day--not-for-rent):not(.bw-day--past):not(.bw-day--too-early):not(.bw-day--selected) {
    background: var(--bw-brand-tint);
    border-color: var(--bw-brand-soft);
}
/* Range cells (strict between ci and co): the v3 darker bg #d3e4f4 — the
   v2 #e3f0fb was indistinguishable from white. Brand-dark text plays well
   on it. The range is now an immediate visual answer to "what's selected". */
.bw-day--range {
    background: var(--bw-brand-range) !important;
    color: var(--bw-brand-dark);
    border-color: var(--bw-brand-range);
}
.bw-day--range .bw-day__num { font-weight: 600; }
.bw-day--range .bw-day__price { color: var(--bw-brand-dark); font-weight: 600; }
/* Hover-range preview — when ONLY check-in is set and the user hovers a
   future date, render the would-be range as a dashed ghost. Lets the
   guest see the min-stay rule in action before they commit. JS adds
   `.bw-day--preview` to the in-between cells on mouseenter. */
.bw-day--preview {
    background: var(--bw-brand-ghost) !important;
    border-color: var(--bw-brand-soft) !important;
    border-style: dashed !important;
    color: var(--bw-brand-dark);
}
.bw-day--preview .bw-day__price { color: var(--bw-brand-dark); }
/* Selected endpoints — BOTH check-in and check-out get the loud chip.
   Drop shadow gives them a premium "raised" feel and lifts them above
   the range bar. Number is 700 to read as definitively picked. */
.bw-day--selected {
    background: var(--bw-brand) !important;
    color: #fff !important;
    border-color: var(--bw-brand-dark) !important;
    border-radius: 10px;
    box-shadow: var(--bw-shadow-sel);
    z-index: 2;
}
.bw-day--selected .bw-day__num { font-weight: 700; color: #fff; }
.bw-day--selected .bw-day__price { color: rgba(255, 255, 255, 0.92); }

/* Unavailable states — collapsed visually into ONE neutral grey. Semantic
   distinctions live on `data-bw-tip` attributes set by the JS renderer and
   surface on hover only (.bw-day__tip). No diagonal stripes — they read
   as "weird" rather than "unavailable" at small sizes. */
.bw-day--booked,
.bw-day--not-for-rent {
    background: var(--bw-line-2);
    color: var(--bw-muted);
    cursor: not-allowed;
    border-color: transparent;
}
.bw-day--booked .bw-day__price,
.bw-day--not-for-rent .bw-day__price { display: none; }

/* Past dates — Hometogo-style: strikethrough number rather than a grey
   bg patch. Keeps the cell visually consistent with neighbouring
   available cells (still a calendar, not a wall of grey). */
.bw-day--past {
    color: var(--bw-muted);
    cursor: not-allowed;
}
.bw-day--past .bw-day__num { text-decoration: line-through; }
.bw-day--past .bw-day__price {
    color: #d0d4da;
    text-decoration: line-through;
}

/* Within the property's min_stay window after the user picked check-in.
   Stays visible (price + day number) but with strikethrough so the
   guest understands the rule without us having to spell it out — same
   visual language as past dates. */
.bw-day--too-early {
    color: var(--bw-muted);
    cursor: not-allowed;
    background: transparent;
}
.bw-day--too-early .bw-day__num { text-decoration: line-through; }
.bw-day--too-early .bw-day__price { color: #c8c8c8; }

/* Half-state — booking ENDS this day (morning booked, afternoon free).
   You may check IN starting tonight. Tiny corner dot signals the
   conditional availability; tooltip explains the rest. */
.bw-day--checkout-only {
    background: var(--bw-line-2);
    color: var(--bw-ink-2);
    cursor: pointer;
}
.bw-day--checkout-only::after {
    content: "";
    position: absolute;
    bottom: 3px; right: 3px;
    width: 6px; height: 6px;
    background: var(--bw-brand);
    border-radius: 50%;
    opacity: 0.7;
}
.bw-day--checkout-only .bw-day__price { color: var(--bw-ink-2); }

/* Half-state — booking STARTS this day (morning free, afternoon booked).
   You may check OUT today, but not stay overnight. Same dot, top corner. */
.bw-day--checkin-only {
    background: var(--bw-line-2);
    color: var(--bw-ink-2);
    cursor: pointer;
}
.bw-day--checkin-only::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 6px; height: 6px;
    background: var(--bw-brand);
    border-radius: 50%;
    opacity: 0.7;
}
.bw-day--checkin-only .bw-day__price { color: var(--bw-ink-2); }

/* v3 hover tooltip — opacity-only transition, no transform on hover.
   v2's `transform: translate(-50%, -4px)` on hover caused a visible
   "jump" + flicker because the cell beneath could re-flow as the tooltip
   gained dimensions; here the tip sits at a stable position above the
   cell, fades in 120ms, no layout shift.
   The `.bw-calendar` wrapper has `overflow: hidden` (it holds the
   gradient header's dotted overlay inside the rounded corners), which
   would clip tooltips on edge cells. Bumping the tip via JS-positioned
   `position: fixed` was overkill for this; an inline-flow tip CAN'T
   escape `overflow: hidden`. Instead we let the calendar own the clip
   and render the tip with `overflow: visible` UPGRADED to `clip-path:
   none` per cell. The pseudo-element below uses `position: absolute`
   relative to the cell and stays inside the visible area on all but
   the very topmost cell row — where it flips below the cell. */
.bw-day[data-bw-tip]:hover .bw-day__tip {
    opacity: 1;
}
.bw-day__tip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bw-ink-1);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 50;
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    max-width: 220px;
    /* Hover bubbles up the stacking context to the cell, then to its
       row, then the month, then the popup. We elevate the cell on hover
       so the tip can paint above neighbours. */
}
.bw-day[data-bw-tip]:hover {
    z-index: 60;
}
.bw-day__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--bw-ink-1);
}
/* Edge-column tooltips — anchor the tip to the cell EDGE so it stays
   inside the calendar instead of overflowing into the clip. The arrow
   stays under the cell's centre. */
.bw-month__grid > .bw-day:nth-child(7n+1) .bw-day__tip,
.bw-month__grid > .bw-day:nth-child(7n+2) .bw-day__tip {
    left: 0;
    transform: none;
}
.bw-month__grid > .bw-day:nth-child(7n+1) .bw-day__tip::after,
.bw-month__grid > .bw-day:nth-child(7n+2) .bw-day__tip::after {
    left: 14px;
    transform: none;
}
.bw-month__grid > .bw-day:nth-child(7n) .bw-day__tip,
.bw-month__grid > .bw-day:nth-child(7n+6) .bw-day__tip {
    left: auto;
    right: 0;
    transform: none;
}
.bw-month__grid > .bw-day:nth-child(7n) .bw-day__tip::after,
.bw-month__grid > .bw-day:nth-child(7n+6) .bw-day__tip::after {
    left: auto;
    right: 14px;
    transform: none;
}
/* Top row tooltips — flip below the cell, otherwise the top of the
   popup clips them. */
.bw-month__grid > .bw-day:nth-child(-n+7) .bw-day__tip {
    bottom: auto;
    top: calc(100% + 4px);
}
.bw-month__grid > .bw-day:nth-child(-n+7) .bw-day__tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bw-ink-1);
}

/* 3-state legend — Свободно / Избрано / Заето. The four sub-flavours of
   "unavailable" (booked, not-for-rent, checkin-only, checkout-only) all
   render in the same grey now and surface their meaning via tooltip,
   so the legend doesn't need to enumerate them. The legacy 6-item legend
   row was a lot of cognitive load for B2C visitors who don't care about
   operator-side "free in the morning" subtleties. */
.bw-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 12px 10px;
    border-top: 1px solid var(--bw-line);
    color: var(--bw-ink-2);
    font-size: 12px;
}
.bw-calendar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.bw-leg {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.bw-leg--free { background: #fff; border-color: var(--bw-line); }
.bw-leg--selected { background: var(--bw-brand); }
/* "Booked" is the single visual for every unavailable variant — the
   tooltip on hover surfaces "Заето", "Заето до обед", "Заето след обед",
   etc. as needed. */
.bw-leg--booked { background: var(--bw-line-2); }
/* Hide the legacy fine-grained legend entries — they survived as DOM
   markers from the Blade template but no longer carry useful information
   to a guest now that all "unavailable" cells look the same. */
.bw-calendar__legend > span:has(.bw-leg--not-for-rent),
.bw-calendar__legend > span:has(.bw-leg--checkout-only),
.bw-calendar__legend > span:has(.bw-leg--checkin-only) {
    display: none;
}

.bw-calendar__updated {
    text-align: center;
    color: var(--bw-ink-3);
    font-size: 11px;
    padding: 10px;
    background: #fbfcfd;
    border-top: 1px solid var(--bw-line-2);
    /* Without the parent `overflow: hidden` (v3), the footer rounds its
       own bottom corners so the calendar shape stays clean. */
    border-radius: 0 0 10px 10px;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.bw-calendar__updated::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bw-success);
    box-shadow: 0 0 0 3px var(--bw-success-soft);
}

/* Anchor popup under the date inputs in normal flow on narrower widgets */
@media (max-width: 1024px) {
    .bw-calendar {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(620px, 92vw);
        max-height: 90vh;
        overflow: auto;
    }
}

/* Mobile sticky CTA strip — hidden on desktop, shown under 720px. Mirrors
   the hometogo pattern: guests + per-night price on the left, "Choose
   dates" button on the right that opens the booking widget's calendar. */
.estate-price-footer--mobile { display: none; }

@media (max-width: 720px) {
    .estate-price-footer--mobile {
        display: block;
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
        border-top: 1px solid #ececec;
        padding: 10px 0;
        /* iOS Safari home-indicator bar — let the strip sit above it. */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        /* Higher than .estate-tabs (z-index: 50) AND anything else
           the page might stick to the viewport so the bottom CTA
           strip always wins the foreground when they overlap. */
        z-index: 1000;
    }
    .estate-price-footer--mobile .estate-price-footer__inner {
        padding: 0 14px;
        justify-content: space-between;
        gap: 12px;
    }
    .estate-price-footer__meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .estate-price-footer__guests {
        font-size: 12px;
        color: #555;
    }
    .estate-price-footer__price {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
    }
    .estate-price-footer__price strong {
        font-size: 16px;
        font-weight: 700;
        color: #111;
    }
    .estate-price-footer__from,
    .estate-price-footer__per { color: #555; }
    .estate-price-footer__ready {
        /* Native <button> reset — the whole left block is tappable to
           reopen the calendar and edit dates/guests. */
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        text-align: left;
        cursor: pointer;
        color: inherit;
        font: inherit;
        min-width: 0;
        -webkit-tap-highlight-color: rgba(6, 150, 255, 0.08);
    }
    /* [hidden] override: the display:flex above ties specificity with
       the UA's `[hidden] { display: none }` and wins by cascade order,
       leaving both blocks rendered. Same pattern we use on .bw-calendar
       [hidden] and on the guests popover. */
    .estate-price-footer__ready[hidden],
    .estate-price-footer__initial[hidden] { display: none !important; }
    .estate-price-footer__ready:active { opacity: 0.7; }
    .estate-price-footer__dates {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #555;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .estate-price-footer__dates > span {
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: underline;
        text-decoration-color: rgba(85, 85, 85, 0.4);
        text-underline-offset: 2px;
    }
    .estate-price-footer__edit-icon {
        flex: 0 0 auto;
        color: #0696ff;
    }
    .estate-price-footer__total-label {
        color: #555;
        margin-right: 4px;
    }
    .estate-price-footer__cta {
        flex: 0 0 auto;
        padding: 13px 24px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.2px;
        /* Multi-stop gradient + soft glow so the CTA reads as the
           primary action even alongside the .estate-tabs strip
           that sits just above it on shorter pages. */
        background: linear-gradient(135deg, #0696ff 0%, #4a6cf7 55%, #6a47ff 100%);
        border: none;
        border-radius: 999px;
        color: #fff;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(106, 71, 255, 0.30);
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .estate-price-footer__cta:active {
        transform: scale(0.97);
        box-shadow: 0 2px 6px rgba(106, 71, 255, 0.35);
    }
    /* Reserve bottom space so the sticky strip doesn't cover the last
       chunk of the page when the user scrolls all the way down. */
    .estate-detail-view { padding-bottom: 80px; }
}

/* ============================================================
 * Mobile polish — viewports <= 720px (phones)
 * Big-bucket fixes so the booking flow works end-to-end on a phone.
 * ============================================================ */
@media (max-width: 720px) {
    /* Safety net — any stray child wider than the viewport (e.g. a long
       chip without max-width, the Google Map's offscreen panes) would
       otherwise let the user horizontally pan the whole page. Clamp at
       the root so nothing escapes. */
    html, body { overflow-x: hidden; }

    /* Header: drop the logo + phone so RENT WITH US + LOG IN + locale
       have room to breathe on a 360px-wide screen. The browser back +
       URL bar cover the "home" affordance the logo would provide. */
    .public-header { padding: 10px 0; }
    .public-header__inner {
        padding: 0 12px;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: 0;
        /* Logo anchors the left; actions sit on the right. */
        justify-content: space-between;
    }
    /* Keep the logo on mobile (just smaller) so the brand + home affordance
       stay visible. Allow shrink — without it the logo would push the burger
       past the viewport on the narrowest phones (320px portrait). */
    .public-header__logo { display: inline-flex; min-width: 0; }
    .public-header__logo img { height: 22px; max-width: 100%; }
    /* Home-page rules override `.public-header__logo-img` height to 30px
       and the inner padding to 48px without any mobile breakpoint,
       beating this @media block by selector specificity (.home-page +
       descendant beats a bare descendant). On the narrowest phones
       (320px portrait) 96px of horizontal padding + 217px logo width
       + 36px burger = ~349px which overflows. Override with matching
       specificity so the home-page header packs the same as the rest. */
    .home-page .public-header__inner { padding: 0 12px; }
    .home-page .public-header__logo-img { height: 22px; max-width: 100%; }
    .public-header__actions { gap: 6px; flex-wrap: nowrap; min-width: 0; }
    .public-header__phone { display: none; }
    .public-header__actions .btn-pill {
        padding: 6px 11px;
        font-size: 11px;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }
    .public-header__actions .btn-text {
        font-size: 11px;
        padding: 6px 4px;
        white-space: nowrap;
    }

    /* Tabs nav on the property page — horizontal scroll instead of wrap. */
    .estate-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .estate-tabs::-webkit-scrollbar { display: none; }
    .estate-tabs a { padding: 12px 14px; font-size: 13px; flex-shrink: 0; }

    /* Property section padding tighter */
    .estate-section { padding: 20px 0; }
    .estate-section > h2 { font-size: 20px; }

    /* Gallery cover: stack the main slide + thumbs vertically */
    .gallery-cover {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
        max-height: none;
    }
    .gc-swiper { aspect-ratio: 3 / 2; }
    .gc-thumbs {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        padding: 4px 0 0;
    }
    .gc-thumb:nth-child(n+4) { display: none; }
    .gc-nav { width: 36px; height: 36px; font-size: 22px; }

    /* Booking widget: full width inside the content column */
    .booking-widget { max-width: 100%; }
    .booking-widget__breakdown { font-size: 12px; }

    /* Booking page: tighter padding + single-col form */
    .booking-page { padding: 14px 0 40px; }
    .booking-page__inner { padding: 0 14px; }
    .booking-page__title { font-size: 20px; margin: 0 0 12px; }
    .booking-card { padding: 14px 14px 16px; }
    .booking-card__row--two,
    .booking-card__row--three { grid-template-columns: 1fr; gap: 10px; }
    .booking-grid { gap: 14px; }

    /* Calendar popup on phone: full-screen overlay.
       `inset: 0` instead of `width: 100vw` — 100vw includes the
       browser scrollbar width on some Android engines, making the
       overlay 8-16px wider than the visual viewport and triggering
       horizontal page drift. `inset: 0` is anchored to the actual
       layout viewport with no scrollbar inflation. */
    .bw-calendar {
        position: fixed;
        inset: 0 !important;
        width: auto;
        max-width: none;
        max-height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
        transform: none;
    }
    /* Mobile calendar (Airbnb-style):
       - one sticky weekday legend above the scroll strip
       - month "headers" are plain text, no chrome
       - large day cells (48px+) so finger taps land cleanly
       - sticky bottom action bar with summary + clear + apply */
    .bw-calendar {
        display: flex;
        flex-direction: column;
    }
    .bw-calendar__selected { display: none; }  /* desktop yellow chip → mobile footer */
    .bw-calendar__legend   { display: none; }  /* drop the per-state legend for tighter mobile UI */
    .bw-calendar__updated  { display: none; }
    /* v3 chips strip is redundant on phone — the sticky bottom action bar
       already surfaces the picked range + clear. Hiding them keeps the
       gradient header at a single compact row for the title + close ✕. */
    .bw-calendar__chips    { display: none !important; }
    .bw-calendar__header {
        padding: 12px 16px;
        flex-direction: row;       /* title left, ✕ right — one tidy row */
        justify-content: space-between;
        gap: 8px;
    }
    .bw-calendar__title { font-size: 15px; }

    .bw-calendar__weekdays {
        display: grid;  /* override the desktop display:none */
        grid-template-columns: repeat(7, 1fr);
        position: sticky;
        top: 0;
        z-index: 3;
        background: #fafafa;
        border-bottom: 1px solid #ececec;
        padding: 0 12px;
    }
    .bw-calendar__weekdays .bw-day-header {
        padding: 10px 0;
        font-size: 11px;
        background: transparent;
        border-bottom: none;
    }

    .bw-calendar__months {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 8px 12px 14px;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }
    .bw-month { border: none; border-radius: 0; }
    .bw-month__header {
        background: transparent;
        color: #222;
        padding: 8px 0 6px;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        justify-content: flex-start;
        position: static;
    }
    /* Day cells — 48px tap targets, no inner borders, soft tap scale */
    .bw-day {
        aspect-ratio: 1;
        min-height: 48px;
        border: none;
        padding: 6px 4px;
        font-size: 14px;
        transition: transform .08s ease, background-color .12s ease;
    }
    .bw-day:active:not(.bw-day--empty):not(.bw-day--booked):not(.bw-day--past) {
        transform: scale(0.92);
    }
    .bw-day__num { font-size: 14px; }
    .bw-day__price { font-size: 11px; }

    /* Sticky bottom action bar */
    .bw-calendar__footer {
        display: flex;  /* override the desktop display:none */
        position: sticky;
        bottom: 0;
        z-index: 3;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
    }
    .bw-calendar__footer-status {
        flex: 1 1 auto;
        font-size: 13px;
        color: #333;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bw-calendar__footer-clear {
        flex: 0 0 auto;
        background: transparent;
        border: none;
        color: #0696ff;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 4px;
        cursor: pointer;
        text-decoration: underline;
    }

    /* Mobile fullscreen guests picker — matches the calendar UX:
       sticky header (title + X), scrolling rows in the middle, sticky
       footer with hint + Done. Hoisted to <body> by JS on open so any
       overflow:hidden parents can't clip it.
       v3: 100vh → 100dvh so iOS Safari's address bar can't push the
       footer (with the Готово button) below the visible viewport.
       Гориан flagged it — the button "disappeared" once the browser
       chrome counted toward 100vh. dvh ignores chrome. */
    .booking-widget__guests-popover {
        position: fixed;
        inset: 0;
        /* `inset: 0` replaces the explicit top/left/right/bottom + width
           100vw pair that previously inflated the popover by the Android
           scrollbar gutter and caused horizontal drift behind the modal. */
        height: 100dvh;
        max-height: 100dvh;
        /* Fallback for browsers that don't know dvh yet (rare in 2026
           but cheap to keep). */
        height: 100vh;
        max-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 0;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        background: #fff;
    }
    .bw-guests-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--bw-line);
        background: var(--bw-brand-tint);     /* brand-tint like calendar's quiet strips */
        position: sticky;
        top: 0;
        z-index: 3;
        flex: 0 0 auto;
    }
    .bw-guests-header__title {
        font-size: 16px;
        font-weight: 700;
        color: var(--bw-ink-1);
    }
    .bw-guests-header__close {
        background: transparent;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: var(--bw-ink-2);
        cursor: pointer;
        padding: 4px 8px;
        margin: -4px -8px;
    }
    .bw-guests-rows {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 18px;
    }
    .bw-guests-rows .bw-guests-row {
        padding: 18px 0;
    }
    .bw-guests-rows .bw-guests-row__title { font-size: 16px; }
    .bw-guests-rows .bw-guests-row__sub   { font-size: 13px; margin-top: 4px; }
    .bw-guests-counter__btn {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    .bw-guests-counter__val {
        min-width: 28px;
        font-size: 16px;
    }
    .bw-guests-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 0;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--bw-line);
        /* Dropped the `box-shadow: 0 -4px 14px rgba(…)` upward halo.
           Combined with the border-top it visually read as a SECOND
           separator above the "Готово" button — user spotted "две
           черти, едната излишна". With just the 1px border the
           separator looks intentional and clean. */
        flex: 0 0 auto;
    }
    .bw-guests-close {
        padding: 12px 28px;
        font-size: 15px;
        /* On mobile the Done button stretches to fill the right side so it
           reads as the obvious primary action of the sheet — matching the
           calendar's sticky bottom action bar pattern. */
        flex: 1 1 auto;
        justify-content: center;
        border-radius: 10px;
    }
    .bw-guests-hint {
        flex: 0 1 auto;
        max-width: 55%;
    }
    /* Body scroll lock applied while the picker is open */
    body.bw-guests-open {
        overflow: hidden;
        touch-action: none;
    }

    /* Estates listing: tighter cards on phone */
    .property-card { min-width: 0; }
    .estates-page--fullscreen .estates-layout__list-inner { padding: 14px; }
    .filter-chip { font-size: 12px; padding: 5px 10px; }

    /* Property page address / owner card etc. */
    .estate-titlebar { padding: 10px 14px; }
    .estate-title { font-size: 18px; }
}

/* Even tighter for very small phones (iPhone SE etc.) */
@media (max-width: 380px) {
    .public-header__actions .btn-pill { padding: 5px 8px; font-size: 10px; }
    .public-header__actions .btn-text { font-size: 11px; padding: 5px 2px; }
    .booking-page__title { font-size: 18px; }
    .gc-thumbs { grid-template-columns: repeat(2, 1fr); }
    .gc-thumb:nth-child(n+3) { display: none; }
}

/* ===== Характеристики (Property features) — mirrors legacy "box-details type-3 props" ===== */
.characteristics {
    background: #fff;
}
.characteristics__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 48px;
    margin: 0 0 24px;
    padding: 0;
}
.characteristics__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.characteristics__label {
    color: #555;
    margin: 0;
    flex-shrink: 0;
}
.characteristics__value {
    color: #0696ff;
    font-weight: 600;
    margin: 0;
}
.characteristics__beds {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 48px;
}
.characteristics__bed {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0696ff;
    font-weight: 600;
    font-size: 14px;
}
.characteristics__bed-icon {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}
.characteristics__times {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f8f8f8;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    color: #555;
}
.characteristics__times strong { color: #333; font-weight: 500; }

@media (max-width: 720px) {
    .characteristics__grid { grid-template-columns: 1fr; gap: 8px 0; }
    .characteristics__beds { grid-template-columns: 1fr; }
}

/* ===== Обoрудване и удобства (Extras list) — mirrors legacy estate-option ===== */
.extras-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 48px;
}
.extras-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0696ff;
    font-size: 14px;
    line-height: 1.4;
}
.extras-item__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #0696ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.extras-item__icon svg { width: 100%; height: 100%; }
.extras-item__name { flex: 1; min-width: 0; }

/* Unavailable extras — struck-through, grey (legacy estate-option-no) */
.extras-item--off {
    color: #bbb;
    text-decoration: line-through;
}
.extras-item--off .extras-item__icon { color: #bbb; }

/* Collapse-by-default for long amenities lists.
   When `.extras-list--collapsed` is set, items beyond the cap are
   hidden via `.extras-item--hidden`; the toggle button below
   removes the modifier to reveal everything. */
.extras-list--collapsed .extras-item--hidden { display: none; }

.extras-toggle {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid #0696ff;
    border-radius: 999px;
    color: #0696ff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.extras-toggle:hover {
    background: #0696ff;
    color: #fff;
}
.extras-toggle__caret { transition: transform .2s; }
.extras-toggle__less { display: none; }
.extras-toggle[aria-expanded="true"] .extras-toggle__more { display: none; }
.extras-toggle[aria-expanded="true"] .extras-toggle__less { display: inline; }
.extras-toggle[aria-expanded="true"] .extras-toggle__caret { transform: rotate(180deg); }

@media (max-width: 720px) {
    .extras-list { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== Map section ===== */
.estate-map__address {
    color: #555;
    margin: 0 0 16px;
    font-size: 14px;
}
.estate-map {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 8px;
    overflow: hidden;
    background: #e8eef2;
}
/* Click-to-load overlay — legacy parity. Blurred-map JPG + centered
   pin SVG above a blue pill button. Google Maps init only fires after
   the user clicks the CTA, keeping the tile-load bill bounded. */
.estate-map__cover {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: url('/img/legacy-map.jpg') 50% 50% / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: border-color .15s;
}
.estate-map__cover:hover { border-color: #0696ff; }
.estate-map__cover-inner {
    flex: 0 1 100%;
    padding: 10px;
    text-align: center;
}
.estate-map__pin {
    display: block;
    width: 64px;
    height: auto;
    margin: 0 auto 16px;
}
.estate-map__cta {
    display: inline-block;
    padding: 8px 18px;
    background: #0696ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.estate-map__cta:hover { background: #0581e0; }

/* When map is showing, fade the cover out (matches legacy .map-showed). */
.estate-map.is-loaded .estate-map__cover {
    overflow: hidden;
    width: 0; height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s, visibility .8s, width 0s 1s, height 0s 1s;
}

@media (max-width: 600px) {
    .estate-map__cta { padding: 5px 10px; }
}

/* Google Maps renders into this once the user activates the map */
.estate-map__canvas {
    width: 100%;
    height: 100%;
}

/* ===== Reviews / Оценки ===== */

/* Aggregate score block — left: overall stars + votes, right: category bars */
.reviews-score {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 32px;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}
.reviews-score__title {
    color: #555;
    font-size: 14px;
    margin-bottom: 6px;
}
.reviews-score__votes {
    color: #888;
    font-size: 13px;
    margin-top: 4px;
}
.reviews-score__categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.reviews-score__category-label {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
}

/* Star bar — uses the same SVG mask trick as .review-stars on the title bar */
.reviews-score__stars {
    width: 120px;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 18"><g fill="%23ddd"><polygon points="10,1 12.6,7 19,7 14,11 15.6,17 10,13.5 4.4,17 6,11 1,7 7.4,7"/><polygon points="30,1 32.6,7 39,7 34,11 35.6,17 30,13.5 24.4,17 26,11 21,7 27.4,7"/><polygon points="50,1 52.6,7 59,7 54,11 55.6,17 50,13.5 44.4,17 46,11 41,7 47.4,7"/><polygon points="70,1 72.6,7 79,7 74,11 75.6,17 70,13.5 64.4,17 66,11 61,7 67.4,7"/><polygon points="90,1 92.6,7 99,7 94,11 95.6,17 90,13.5 84.4,17 86,11 81,7 87.4,7"/><polygon points="110,1 112.6,7 119,7 114,11 115.6,17 110,13.5 104.4,17 106,11 101,7 107.4,7"/></g></svg>') no-repeat;
    background-size: 120px 18px;
    position: relative;
    overflow: hidden;
}
.reviews-score__stars--small { width: 96px; height: 14px; background-size: 96px 14px; }
.reviews-score__stars-fill {
    height: 100%;
    background: #ffb400;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 18"><g><polygon points="10,1 12.6,7 19,7 14,11 15.6,17 10,13.5 4.4,17 6,11 1,7 7.4,7"/><polygon points="30,1 32.6,7 39,7 34,11 35.6,17 30,13.5 24.4,17 26,11 21,7 27.4,7"/><polygon points="50,1 52.6,7 59,7 54,11 55.6,17 50,13.5 44.4,17 46,11 41,7 47.4,7"/><polygon points="70,1 72.6,7 79,7 74,11 75.6,17 70,13.5 64.4,17 66,11 61,7 67.4,7"/><polygon points="90,1 92.6,7 99,7 94,11 95.6,17 90,13.5 84.4,17 86,11 81,7 87.4,7"/><polygon points="110,1 112.6,7 119,7 114,11 115.6,17 110,13.5 104.4,17 106,11 101,7 107.4,7"/></g></svg>') no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 18"><g><polygon points="10,1 12.6,7 19,7 14,11 15.6,17 10,13.5 4.4,17 6,11 1,7 7.4,7"/><polygon points="30,1 32.6,7 39,7 34,11 35.6,17 30,13.5 24.4,17 26,11 21,7 27.4,7"/><polygon points="50,1 52.6,7 59,7 54,11 55.6,17 50,13.5 44.4,17 46,11 41,7 47.4,7"/><polygon points="70,1 72.6,7 79,7 74,11 75.6,17 70,13.5 64.4,17 66,11 61,7 67.4,7"/><polygon points="90,1 92.6,7 99,7 94,11 95.6,17 90,13.5 84.4,17 86,11 81,7 87.4,7"/><polygon points="110,1 112.6,7 119,7 114,11 115.6,17 110,13.5 104.4,17 106,11 101,7 107.4,7"/></g></svg>') no-repeat;
    -webkit-mask-size: 120px 18px;
    mask-size: 120px 18px;
    -webkit-mask-position: left center;
    mask-position: left center;
}
.reviews-score__stars--small .reviews-score__stars-fill {
    -webkit-mask-size: 96px 14px;
    mask-size: 96px 14px;
}

/* Reviews list */
.reviews-list { display: flex; flex-direction: column; gap: 24px; }
.review-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
}
.review-item:last-child { border-bottom: none; padding-bottom: 0; }
.review-item__client,
.review-item__reply {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.review-item__reply {
    margin-top: 14px;
    margin-left: 28px;
    padding: 12px 14px;
    background: #f5f9ff;
    border-radius: 6px;
}
.review-item__avatar {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    flex-shrink: 0;
}
.review-item__avatar--small { width: 36px; height: 36px; }
.review-item__avatar--placeholder {
    background: #ccc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M3 22c0-5 4-9 9-9s9 4 9 9"/></svg>') center / 50% no-repeat;
}
.review-item__body { flex: 1; min-width: 0; }
.review-item__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.review-item__name { font-weight: 600; color: #333; font-size: 15px; }
.review-item__date { color: #888; font-size: 13px; }
.review-item__comment {
    color: #444;
    font-size: 14px;
    line-height: 1.6;
    margin: 6px 0 0;
}

@media (max-width: 720px) {
    .reviews-score { grid-template-columns: 1fr; }
    .reviews-score__categories { grid-template-columns: 1fr; gap: 10px; }
    .review-item__reply { margin-left: 12px; }
}

/* ===== Цени (Rates) ===== */
.rates-fees {
    background: #fffbe6;
    border: 1px solid #ffe7a3;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.rates-fees__title {
    color: #8b6914;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 12px;
}
.rates-fees__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid #ffe7a3;
    font-size: 14px;
}
.rates-fees__row:first-of-type { border-top: none; padding-top: 0; }
.rates-fees__label { color: #555; }
.rates-fees__value { color: #d84315; font-weight: 600; white-space: nowrap; }

.rates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.rates-table thead th {
    text-align: left;
    color: #888;
    font-weight: 500;
    font-size: 13px;
    padding: 10px 12px;
    border-bottom: 2px solid #eee;
    background: #fafafa;
}
.rates-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
    vertical-align: middle;
}
.rates-table tbody tr:hover { background: #fbfdff; }
.rates-table__sep { color: #999; padding: 0 6px; }
.rates-table__nights, .rates-table__price { text-align: right; }
.rates-table__price strong { color: #0696ff; font-size: 15px; }

@media (max-width: 720px) {
    .rates-table thead { display: none; }
    .rates-table tbody td { display: block; padding: 6px 0; border-bottom: none; }
    .rates-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 0;
        display: block;
    }
    .rates-table__price, .rates-table__nights { text-align: left; }
    .rates-table__nights::before { content: 'Нощувки: '; color: #888; }
    .rates-table__price::before  { content: 'Цена: ';    color: #888; }
}

/* ===== Подобни Оферти ===== */
.similar-offers {
    padding: 32px 0;
    border-top: 1px solid #eee;
    margin-top: 24px;
}
.similar-offers__title {
    color: #555;
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 20px;
}
.similar-offers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.similar-card {
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform .15s, box-shadow .15s;
}
.similar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.similar-card__media {
    position: relative;
    display: block;
    height: 200px;
    overflow: hidden;
}
.similar-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.similar-card__placeholder { width: 100%; height: 100%; background: #eee; }
.similar-card__price {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #0696ff;
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}
.similar-card__heart {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.similar-card__heart:hover { background: #fff; }
.similar-card__body { padding: 12px 14px 16px; }
.similar-card__body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.similar-card__body h3 a { color: #333; text-decoration: none; }
.similar-card__body h3 a:hover { color: #0696ff; }
.similar-card__meta, .similar-card__address {
    margin: 3px 0;
    font-size: 13px;
    color: #888;
}

/* ===== Популярни дестинации (Home destinations grid) ===== */
.hp-section-destinations { padding: 32px 24px; max-width: 1400px; margin: 0 auto; }
.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.destination-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.destination-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.destination-card__media {
    position: relative;
    height: 220px;
    background: #e5e5e5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.destination-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}
.destination-card__title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    padding: 16px 18px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.destination-card__links {
    list-style: none;
    margin: 0;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}
.destination-card__links li { font-size: 14px; }
.destination-card__links a {
    color: #555;
    text-decoration: none;
    transition: color .15s;
}
.destination-card__links a:hover { color: #0696ff; text-decoration: underline; }

/* ===== Hero — fixes the empty area + Vuetify v-app reset inside widget ===== */
.hp-section-main__bg--placeholder {
    background: linear-gradient(135deg, #0696ff 0%, #057ad6 60%, #034d8a 100%);
}
#arendoo-search-form {
    position: relative;
    z-index: 2;
    margin: 24px auto 0;
    max-width: 1100px;
}
/* Vuetify v-app inserts its own scoped styles — make sure the wrapper plays
   nice with the rest of the page (don't let it take 100vh) */
#arendoo-search-form .v-application,
#arendoo-search-form .arendoo-widget-app {
    background: transparent !important;
    min-height: 0 !important;
}
#arendoo-search-form .v-application__wrap { min-height: 0 !important; }

/* Empty-form state — show a CTA box that links to /estates so the page
   doesn't look broken if the widget JS hasn't finished loading yet */
#arendoo-search-form:empty::before {
    content: 'Зареждам търсачката…';
    display: block;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
}

/* ===== Airbnb-style pill search ===== */
.pill-search {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    /* Signature 4px arendoo-blue frame, mirrors hometogo's pink-bordered search. */
    border: 4px solid #0696ff;
    border-radius: 999px;
    box-shadow: 0 12px 36px rgba(0, 30, 60, 0.32);
    padding: 6px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}
.pill-search:hover { box-shadow: 0 16px 44px rgba(0, 30, 60, 0.38); }

.pill-search__segment {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 22px;
    text-align: left;
    cursor: pointer;
    position: relative;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    transition: background .15s;
    font-family: inherit;
}
.pill-search__segment + .pill-search__segment::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: #e0e0e0;
}
.pill-search__segment:hover { background: #f0f0f0; }
.pill-search__segment.is-active {
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
}
.pill-search__segment.is-active + .pill-search__segment::before,
.pill-search__segment.is-active::before { background: transparent; }
.pill-search__label {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    line-height: 1;
}
.pill-search__value {
    font-size: 14px;
    color: #777;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pill-search__value.is-set { color: #222; font-weight: 500; }
.pill-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: #ebebeb;
    color: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.pill-search__clear[hidden] { display: none; }
.pill-search__clear:hover { background: #d0d0d0; }

.pill-search__submit {
    background: #0696ff;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0 22px;
    margin: 2px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}
.pill-search__submit:hover { background: #057ad6; }
.pill-search__submit:active { transform: translateY(1px); }
.pill-search__submit-text { font-size: 14px; }

/* ===== Dropdown panels ===== */
.pill-panel {
    position: absolute;
    top: calc(100% + 12px);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    /* z-index bumped above the hero (z 50) and after-hero (z 5) so the
       panel reliably paints over the next section if it overflows. */
    z-index: 100;
    min-width: 360px;
    max-width: 90vw;
}
.pill-panel[data-panel="where"] { left: 0; }
.pill-panel[data-panel="when"]  { left: 50%; transform: translateX(-50%); }
.pill-panel[data-panel="who"]   { right: 0; min-width: 380px; }

.pill-panel__inner { padding: 22px; }
.pill-panel__inner--calendar { padding: 14px; }

.pill-panel__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.pill-panel__input:focus { border-color: #0696ff; }
.pill-panel__heading {
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: 0.5px;
}
.pill-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}
.pill-panel__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
    font-family: inherit;
}
.pill-panel__option:hover { background: #f5f5f5; }
.pill-panel__option svg { background: #f0f0f0; padding: 4px; border-radius: 6px; box-sizing: content-box; }
.pill-panel__option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pill-panel__option-text strong { font-size: 14px; color: #222; font-weight: 600; }
.pill-panel__option-text small { font-size: 12px; color: #777; }

/* ===== Who (guest stepper) ===== */
.who-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    /* Hero content is text-align:center — reset so the labels sit left, with
       only the +/- counter on the right. */
    text-align: left;
}
.who-row:last-child { border-bottom: none; }
/* Label column takes the remaining width and wraps gracefully — longer
   translations (other locales) must not push the counter off or misalign. */
.who-row > div:first-child,
.who-row__label { flex: 1 1 auto; min-width: 0; }
/* Hometogo-style icon + label pairing — soft grey circle on the left,
   title + sub stacked on the right. Replaces the plain text label. */
.who-row__label {
    display: flex;
    align-items: center;
    gap: 12px;
}
.who-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.who-row__text { min-width: 0; }
.who-row__title { font-size: 15px; font-weight: 600; color: #222; }
.who-row__sub { font-size: 12px; color: #888; margin-top: 2px; }
.who-counter { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.who-counter__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
    font-family: inherit;
    padding: 0;
}
.who-counter__btn:hover {
    border-color: #0696ff;
    color: #0696ff;
    background: #f0f9ff;
}
.who-counter__btn:active { transform: scale(0.94); }
.who-counter__btn:focus-visible {
    outline: 2px solid #0696ff;
    outline-offset: 2px;
}
.who-counter__btn:disabled {
    border-color: #e5e7eb;
    color: #d1d5db;
    cursor: not-allowed;
    background: #fff;
}
/* SVG glyphs centred via flex (parent button) — make sure clicks
   on the <svg> or its <line> children bubble up to the button so
   the data-step handler fires regardless of where the cursor lands. */
.who-counter__icon { pointer-events: none; display: block; }
.who-child-row__remove > svg { pointer-events: none; display: block; }
/* Explicit dark colour — the panel sits inside .home-page (color:#fff) so
   without this the digit inherits white and vanishes on the white panel. */
.who-counter__val { min-width: 16px; text-align: center; font-size: 15px; font-weight: 500; color: #222; }

/* Footer with the primary "Done" CTA inside the guests panel — keeps the
   mobile flow self-contained instead of hunting for the floating × in the
   page corner. Tap target sized to match the booking-widget's Готово. */
.who-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid #eee;
}
.who-done {
    background: #0696ff;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .12s;
    font-family: inherit;
}
.who-done:hover { background: #0782e0; }
.who-done:active { transform: scale(0.97); }

/* Children block — header row + dynamic per-child age list + add btn.
   Replaces the old children + infants steppers with a Hometogo-style
   per-child age picker. Partner-hotel pricing depends on the age
   tier, so we ship explicit ages to the price endpoint. */
.who-children-block {
    border-bottom: 1px solid #eee;
    padding: 16px 0;
}
.who-row--header {
    border-bottom: none;
    padding: 0;
}
.who-children-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.who-children-list:empty { margin: 0; }
.who-child-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.who-child-row__label { flex: 1 1 auto; min-width: 0; }
.who-child-row__title {
    font-size: 14px;
    color: #444;
}
.who-child-row__age { flex: 0 0 auto; }
.who-child-row__select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23666' stroke-width='2'><polyline points='1,1 6,6 11,1'/></svg>") no-repeat right 10px center;
    background-size: 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 7px 28px 7px 12px;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    min-width: 110px;
    font-family: inherit;
}
.who-child-row__select:hover { border-color: #999; }
.who-child-row__select:focus { outline: 2px solid #0696ff; outline-offset: 1px; }
/* × remove — borderless icon button. Destructive action gets a
   muted resting state (no border, soft grey ×) and a red wash on
   hover so it doesn't compete visually with the +/- counters.
   32px hit-target for comfortable mobile tapping. */
.who-child-row__remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .12s ease, color .12s ease;
    font-family: inherit;
    flex-shrink: 0;
}
.who-child-row__remove:hover {
    background: #fef2f2;
    color: #dc2626;
}
.who-child-row__remove:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 1px;
}
/* Compact pill button matching Hometogo's "Add" affordance — solid
   border (not dashed), pill-rounded, brand-blue text on white,
   tucks self-aligned-end under the children list. */
.who-children-block { display: flex; flex-direction: column; }
.who-add-child {
    align-self: flex-end;
    margin-top: 12px;
    background: #fff;
    border: 1.5px solid #0696ff;
    color: #0696ff;
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.who-add-child:hover { background: #0696ff; color: #fff; }
.who-add-child:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #fff;
    color: #0696ff;
}

/* a11y — hide visually but keep accessible to screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Litepicker — fills the When panel + brand styling ===== */
.pill-panel--when { min-width: 720px; }
.pill-panel__inner--calendar { padding: 18px 16px 8px; }
.pill-panel__hint {
    text-align: center;
    color: #888;
    font-size: 12px;
    margin: 0 0 10px;
    letter-spacing: 0.4px;
}

#ps-calendar { width: 100%; }
#ps-calendar .litepicker { width: 100% !important; font-size: 15px; }
.litepicker { border-radius: 16px; padding: 0; box-shadow: none; font-family: inherit; background: transparent; }
.litepicker .container__main { width: 100%; }
.litepicker .container__months {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 16px;
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
}
.litepicker .container__months .month-item {
    flex: 1 1 0;
    width: auto !important;
    padding: 0 12px;
    box-sizing: border-box;
}
.litepicker .container__months .month-item-header {
    padding: 4px 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    width: 100%;
}
.litepicker .container__months .month-item-header .button-previous-month,
.litepicker .container__months .month-item-header .button-next-month {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f7fa;
    color: #0696ff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    transition: background .15s, transform .15s;
    cursor: pointer;
}
.litepicker .container__months .month-item-header .button-previous-month:hover,
.litepicker .container__months .month-item-header .button-next-month:hover {
    background: #e3eaf2;
    transform: scale(1.05);
}
.litepicker .container__months .month-item-header .button-previous-month svg,
.litepicker .container__months .month-item-header .button-next-month svg {
    width: 24px; height: 24px; fill: #0696ff;
}

/* Weekday headers + day grid both span the full month width with 7 equal cols */
.litepicker .container__months .month-item-weekdays-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.litepicker .container__months .month-item-weekdays-row > div {
    font-size: 12px;
    color: #888;
    text-transform: lowercase;
    padding: 6px 0;
    width: auto;
    text-align: center;
}
.litepicker .container__days {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
}
.litepicker .container__days .day-item {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto;
    line-height: 1;
    font-size: 14px;
    color: #222;
    border-radius: 50%;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.litepicker .container__days .day-item:empty {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none !important;
    background: transparent !important;
}
.litepicker .container__tooltip {
    display: none !important;
}
.litepicker .container__days .day-item:hover {
    box-shadow: inset 0 0 0 1px #222 !important;
    color: #222 !important;
    background: transparent !important;
}
/* Range selection visuals — brand blue everywhere instead of black */
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date {
    background: #0696ff !important;
    color: #fff !important;
    border-radius: 50%;
    font-weight: 600;
}
.litepicker .container__days .day-item.is-in-range {
    background: #e8f4ff !important;
    color: #0696ff !important;
    border-radius: 0;
}
.litepicker .container__days .day-item.is-start-date.is-in-range { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.litepicker .container__days .day-item.is-end-date.is-in-range { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.litepicker .container__days .day-item.is-locked,
.litepicker .container__days .day-item.is-locked:hover {
    color: #ccc !important;
    text-decoration: line-through;
    box-shadow: none !important;
    background: transparent !important;
}

/* Compact variant — used inside the estates listing's sticky header so the
   search pill fits in a tight space without dominating the viewport. */
.pill-search--compact {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e9ee;
    margin-bottom: 12px;
    padding: 4px;
}
.pill-search--compact .pill-search__segment { padding: 8px 14px; }
.pill-search--compact .pill-search__label { font-size: 11px; }
.pill-search--compact .pill-search__value { font-size: 13px; }
.pill-search--compact .pill-search__submit { padding: 8px 18px; }
.pill-search--compact .pill-search__submit-text { font-size: 13px; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
    .pill-search {
        flex-direction: column;
        border-radius: 24px;
        padding: 8px;
    }
    .pill-search__segment + .pill-search__segment::before { display: none; }
    .pill-search__segment { padding: 12px 18px; }
    .pill-search__submit { margin-top: 6px; padding: 14px; justify-content: center; }

    /* Pill panels open as full-screen sheets so the guest stepper + dates
       + locations don't overlap the page content below. `inset: 0` only —
       NOT `width: 100vw` which on Android Chrome includes the scrollbar
       gutter and ends up 8-16px wider than the visual viewport, causing
       horizontal page drift. Removing width: 100vw also drops the
       redundant top/left/right/bottom resets that were trying to defeat
       the same problem. */
    .pill-panel {
        position: fixed !important;
        inset: 0 !important;
        transform: none !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 100dvh;
        border-radius: 0;
        z-index: 1000;
        overflow-y: auto;
        /* Reserve a safe-area for the floating × at the top + the
           device notch / status bar on phones with a curved cutout. */
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }
    .pill-panel--when, .pill-panel[data-panel="when"] { min-width: 0; }
    .pill-panel__inner { padding: 16px; }
    .pill-panel__inner--calendar { padding: 8px; }
    .pill-panel__list { max-height: none; }

    /* Where panel sticky-header pattern — input + "Популярни дестинации"
       heading freeze at the top of the sheet, only the destinations list
       scrolls underneath. Without this every finger swipe inside the
       panel scrolls the whole sheet, hiding the search field exactly
       when the user wants to type into it.

       Implementation: drop the .pill-panel's own overflow-y so the
       panel becomes a non-scrolling container, then make the .__inner
       a flex column. The input and heading stay in normal flow (always
       at the top of the visible area) and the list takes `flex: 1 1 0`
       + its own overflow-y so finger drags inside it scroll only the
       options, never the input. iOS momentum scroll preserved via
       -webkit-overflow-scrolling.

       `:not([hidden])` is CRITICAL — `display: flex` would otherwise
       override the user-agent `[hidden] { display: none }` rule
       (selector specificity beats the UA stylesheet) and the where
       panel would stay visible at all times. That's the bug from #360
       that caused the mobile home page to "open straight into the
       destinations search": the panel was rendering on every paint,
       the JS-injected × button never fired (its show handler runs on
       segment click, not on panel auto-appear), and the public-header
       logo bled through above the panel. */
    .pill-panel[data-panel="where"]:not([hidden]) { overflow-y: hidden; display: flex; flex-direction: column; }
    .pill-panel[data-panel="where"] .pill-panel__inner {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .pill-panel[data-panel="where"] .pill-panel__input,
    .pill-panel[data-panel="where"] .pill-panel__heading { flex: 0 0 auto; }
    .pill-panel[data-panel="where"] .pill-panel__list {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Add an inner pad-bottom so the last option isn't visually
           hugging the safe-area / device home indicator on iOS. */
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* Floating × close button injected by JS. Safe-area-inset-top
       pushes the button below a notched / curved status bar so it's
       never cropped by the device chrome. SVG icon (drawn via
       background mask in CSS) renders identically across Android
       stock browsers where the Unicode `×` could fall back to a thin
       glyph or render as a literal "x" letter. */
    .pill-panel__close {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #d4d4d4;
        font-size: 0; /* hide the Unicode `×` injected by JS — we draw with SVG below */
        line-height: 0;
        cursor: pointer;
        z-index: 1001;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
    .pill-panel__close::before {
        content: '';
        width: 18px;
        height: 18px;
        background: currentColor;
        color: #333;
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>') no-repeat center / 18px 18px;
                mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>') no-repeat center / 18px 18px;
    }
    .pill-panel__close:active { background: #f5f5f5; }

    /* Litepicker fills the inset sheet too — no need for 100vw which
       inflates on browsers with a scrollbar gutter. */
    .pill-panel--when { width: auto; }
    .litepicker .container__months { flex-direction: column; gap: 16px; }

    /* Calendar inner: drop padding so the sticky header spans the full
       width and the months align with the weekday strip above. */
    .pill-panel__inner--calendar { padding: 0; }
    .pill-panel--when .pill-panel__hint { display: none; }
    /* Drop the close-button padding-top — the sticky header sits at the
       very top instead; the floating × stays above via z-index. */
    .pill-panel[data-panel="when"] { padding-top: 0; }

    /* Mobile sticky header — title + single weekday row above the
       scrolling month strip. Replaces the per-month chevrons +
       per-month weekday rows which Litepicker draws by default. */
    .when-mobile-header {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        padding: 14px 16px 8px;
        padding-right: 60px; /* clear the floating × close button */
        border-bottom: 1px solid #ececec;
    }
    .when-mobile-header__title {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        text-align: center;
        margin-bottom: 8px;
    }
    .when-mobile-header__weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-size: 11px;
        color: #777;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    /* Hide Litepicker's chevrons — vertical scrolling replaces them */
    .litepicker .month-item-header .button-previous-month,
    .litepicker .month-item-header .button-next-month { display: none !important; }
    /* Hide per-month weekday rows — the sticky header carries them once */
    .litepicker .month-item-weekdays-row { display: none !important; }
    /* Month-name header stays but reads as a plain section title */
    .litepicker .month-item-header {
        padding: 14px 16px 6px !important;
        font-size: 15px;
        font-weight: 700;
        color: #222;
        text-align: left;
        justify-content: flex-start;
    }
    .litepicker .container__months .month-item {
        padding: 0 8px;
        /* Desktop sets flex:1 1 0 for the 2-up columns; in the vertical mobile
           strip that height-distributes the months so a month's day grid
           overflows its box and the last row spills under the next month's
           name (June 29/30 appearing under "юли"). Size each month to its own
           content instead. */
        flex: 0 0 auto;
    }
    /* Vertical month strip has gap:0 — add breathing room above each
       following month's name so it isn't glued to the previous month's
       trailing dates. */
    .litepicker .container__months .month-item + .month-item {
        margin-top: 22px;
    }
    .litepicker .container__months { padding-bottom: 24px; gap: 0; }
    /* Bigger tap targets on phones for the day cells. Also drop the
       aspect-ratio (set on desktop): with flexible 1fr columns it collapses
       the grid's implicit last-row track, so a month's last row (e.g. 29/30)
       overflows and the next month's name lands on top of it. A definite row
       height keeps every row inside its own month. */
    .litepicker .container__days .day-item {
        aspect-ratio: auto;
        min-height: 48px;
        height: 48px;
    }
}

/* Desktop never shows the mobile-only sticky header — mobile media query
   above re-enables it with !important so cascade order doesn't matter. */
.when-mobile-header { display: none; }
/* Fullscreen pill-panel must sit above the public-header's login menu
   which jumps to z-index: 9999 when open. Bumped to 10000 so the panel
   wins regardless of header state. The floating × is 10001. */
@media (max-width: 720px) {
    .pill-panel { z-index: 10000 !important; }
    .pill-panel__close { z-index: 10001 !important; }
    /* Public-header sits in normal flow but its <details>-based login
       menu would still poke through the panel — explicitly bury the
       whole header while a pill-panel is open. */
    body.pill-panel-open .public-header { visibility: hidden; }
}
/* Lock page scroll behind the fullscreen panel on mobile */
@media (max-width: 720px) {
    body.pill-panel-open { overflow: hidden; }
}
@media (min-width: 721px) {
    /* Desktop never shows the mobile close button */
    .pill-panel__close { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Contact-owner modal (Свържи се с собственика)
   ════════════════════════════════════════════════════════════════ */
.contact-owner-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.contact-owner-modal[hidden] { display: none; }
.contact-owner-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.contact-owner-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.contact-owner-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #ececf1;
}
.contact-owner-modal__header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #0f4d83;
}
.contact-owner-modal__close {
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: #6e7186;
    cursor: pointer;
    padding: 0 4px;
}
.contact-owner-modal__close:hover { color: #1a1f2e; }

.contact-owner-modal__form {
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-owner-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr 90px;
    gap: 10px;
}
@media (max-width: 540px) {
    .contact-owner-modal__row { grid-template-columns: 1fr; }
}
.contact-owner-modal__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-owner-modal__field > span {
    font-size: 12px;
    color: #6e7186;
    font-weight: 500;
}
.contact-owner-modal__field input,
.contact-owner-modal__field textarea {
    border: 1px solid #d0d4de;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #1a1f2e;
    transition: border-color .15s, box-shadow .15s;
}
.contact-owner-modal__field input:focus,
.contact-owner-modal__field textarea:focus {
    outline: none;
    border-color: #0696ff;
    box-shadow: 0 0 0 3px rgba(6, 150, 255, 0.18);
}
.contact-owner-modal__field textarea { resize: vertical; min-height: 100px; }

.contact-owner-modal__hint {
    margin: 0;
    font-size: 12px;
    color: #6e7186;
    background: #fff8e6;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #f1d97f;
    line-height: 1.4;
}

.contact-owner-modal__error {
    background: #fdeaea;
    border: 1px solid #d94f4f;
    color: #a02020;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.contact-owner-modal__error ul { margin: 6px 0 0 18px; padding: 0; }

.contact-owner-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   Contact-owner standalone page
   ════════════════════════════════════════════════════════════════ */
.contact-owner-page { padding: 32px 16px 64px; }
.contact-owner-page__inner { max-width: 820px; margin: 0 auto; }
.contact-owner-page__title {
    font-size: 26px;
    color: #0f4d83;
    margin: 0 0 22px;
}
.contact-owner-page__error {
    background: #fdeaea;
    border: 1px solid #d94f4f;
    color: #a02020;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13.5px;
}
.contact-owner-page__error ul { margin: 6px 0 0 18px; padding: 0; }

.contact-owner-page__estate {
    display: flex;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}
.contact-owner-page__cover {
    width: 240px;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    border-radius: 10px;
    flex-shrink: 0;
}
.contact-owner-page__cover--placeholder {
    background: #f5f5f5
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='%23ccc'><path d='M12 3L2 12h3v8h6v-5h2v5h6v-8h3z'/></svg>")
        center/40px no-repeat;
}
.contact-owner-page__estate-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-owner-page__estate-name {
    font-size: 18px;
    color: #0696ff;
    font-weight: 600;
    margin: 0 0 4px;
}
.contact-owner-page__estate-ref {
    font-size: 12px;
    font-family: monospace;
    color: #888;
}
.contact-owner-page__back {
    margin-top: 12px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
}
.contact-owner-page__back:hover { color: #0696ff; }

.contact-owner-page__card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 22px;
}

.contact-owner-page__notice {
    background: #fff8e6;
    border: 1px solid #f1d97f;
    color: #7a5500;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.45;
}
.contact-owner-page__notice strong { color: #5a3f00; }

.contact-owner-page__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact-owner-page__row {
    display: grid;
    grid-template-columns: 1fr 1fr 140px;
    gap: 10px;
}
@media (max-width: 640px) {
    .contact-owner-page__row { grid-template-columns: 1fr; }
}
.contact-owner-page__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-owner-page__field > span {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
.contact-owner-page__field em { color: #d84315; font-style: normal; }
.contact-owner-page__field input,
.contact-owner-page__field select,
.contact-owner-page__field textarea {
    border: 1px solid #d0d4de;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #1a1f2e;
    transition: border-color .15s, box-shadow .15s;
}
.contact-owner-page__field input:focus,
.contact-owner-page__field select:focus,
.contact-owner-page__field textarea:focus {
    outline: none;
    border-color: #0696ff;
    box-shadow: 0 0 0 3px rgba(6, 150, 255, 0.18);
}
.contact-owner-page__field textarea { resize: vertical; min-height: 120px; }
/* Guest picker reuses the booking-widget popover, but the guests column
   here is only 140px wide — widen the popover and anchor it to the field's
   right edge (rightmost column) on desktop. On ≤640px the row is a single
   column and the shared mobile fullscreen rule takes over. */
@media (min-width: 641px) {
    [data-co-guests] .booking-widget__guests-popover {
        left: auto;
        right: 0;
        width: 300px;
        max-width: 90vw;
    }
}
.contact-owner-page__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
.contact-owner-page__section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1f2937;
}
.contact-owner-page__flash {
    padding: 12px 14px;
    border-radius: 6px;
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #c8e6c9;
    margin-bottom: 16px;
    font-size: 14px;
}
.contact-owner-page__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4b5563;
}
.co-cal-wrap .contact-owner-page__field input[readonly] {
    cursor: pointer;
    background: #fff;
}

/* Terms checkbox on the from-offer page. */
.booking-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
}
.booking-terms input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
 * Full-screen gallery lightbox
 *
 * Hidden by default; gallery.js toggles `.fsg--open` when the
 * "Покажи всички N снимки" button or any cover thumb is clicked.
 * Body gets `.fsg-body-locked` so the page scroll freezes.
 * ──────────────────────────────────────────────────────────── */
.fsg-body-locked { overflow: hidden; }

.fsg {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.96);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fsg--open { display: flex; }

.fsg__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
}
.fsg__close:hover { background: rgba(255, 255, 255, 0.18); }

.fsg__counter {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.4px;
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 10px;
    border-radius: 14px;
}

.fsg__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
}
.fsg__nav:hover { background: rgba(255, 255, 255, 0.18); }
.fsg__nav--prev { left: 24px; }
.fsg__nav--next { right: 24px; }

.fsg__stage {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 1400px;
    margin: 60px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fsg__slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 80px;
}
.fsg__slide--active { display: flex; }

.fsg__img {
    max-width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.fsg__thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 14px 60px 22px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.fsg__thumbs::-webkit-scrollbar { height: 6px; }
.fsg__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; }

.fsg__thumb {
    flex: 0 0 96px;
    height: 64px;
    border-radius: 4px;
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s;
}
.fsg__thumb:hover { opacity: 0.85; }
.fsg__thumb--active { opacity: 1; border-color: #fff; }

.fsg__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .fsg__nav { width: 42px; height: 42px; font-size: 26px; }
    .fsg__nav--prev { left: 8px; }
    .fsg__nav--next { right: 8px; }
    .fsg__slide { padding: 0 14px; }
    .fsg__img { max-height: calc(100vh - 180px); }
    .fsg__thumbs { padding: 10px 8px 16px; }
    .fsg__thumb { flex-basis: 72px; height: 48px; }
}
.booking-terms a { color: #0696ff; }

/* ─────────────────────────────────────────────────────────────
 * Header locale switcher (10 locales)
 *
 * Uses native <details>/<summary> so the dropdown works without
 * JavaScript. The button shows the active locale as a 2-letter
 * code; the panel lists every locale by its short code + native
 * name and POSTs to the same URL with `?locale=…` so
 * SetLocale middleware picks it up and the page server-renders
 * in the new language.
 * ──────────────────────────────────────────────────────────── */
.locale-switcher {
    position: relative;
    /* Promote the stacking context so the open dropdown floats above the
       hero banner / map / any other section that sets its own z-index. */
    z-index: 100;
}
.locale-switcher[open] {
    z-index: 9999;
}
.locale-switcher > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.locale-switcher > summary::-webkit-details-marker { display: none; }
.locale-switcher > summary::marker { display: none; content: ''; }
.locale-switcher > summary > svg {
    transition: transform 0.15s ease;
}
.locale-switcher[open] > summary > svg { transform: rotate(180deg); }

.locale-switcher__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    margin: 0;
    /* Inner padding on all sides so items (and their hover/active highlight)
       don't touch the rounded border. */
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 9999;
}

/* Footer variant — switcher sits at the page bottom, so open the list
   upward (and align to the left edge of the column). */
.locale-switcher--up .locale-switcher__list {
    top: auto;
    bottom: calc(100% + 4px);
    left: 0;
    right: auto;
}

.locale-switcher__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
.locale-switcher__item:hover { background: #f5f7fa; }
.locale-switcher__item--active {
    background: #eef5fb;
    color: #0696ff;
    font-weight: 500;
}

.locale-switcher__code {
    display: inline-block;
    min-width: 28px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: #888;
}
.locale-switcher__item--active .locale-switcher__code { color: #0696ff; }

.locale-switcher__name { flex: 1; }

/* ===== Quick-login modal (Hometogo-style) =================================
   In-page sign in / sign up. Lives on every page (included from
   layouts.public) and is shown by auth-modal.js whenever a feature wants
   a logged-in client without bouncing the visitor to a separate login
   page. v1 surface = wishlist heart. */
.auth-modal {
    --am-brand:        #1976d2;
    --am-brand-dark:   #1565c0;
    --am-brand-soft:   #e3f0fb;
    --am-brand-tint:   #f5f9fd;
    --am-ink-1:        #0b1220;
    --am-ink-2:        #3a4453;
    --am-ink-3:        #6b7480;
    --am-muted:        #9aa3ad;
    --am-line:         #e6e9ee;
    --am-line-2:       #f0f2f6;
    --am-success:      #0a8a5c;
    --am-danger:       #c0252e;
    --am-danger-soft:  #fde7e9;

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: inherit;
}
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 32, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
body.auth-modal-open { overflow: hidden; }

.auth-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 22px;
    box-shadow: 0 24px 56px rgba(11, 18, 32, 0.28), 0 4px 12px rgba(11, 18, 32, 0.12);
    z-index: 1;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    color: var(--am-ink-2);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: background .12s ease;
}
.auth-modal__close:hover { background: var(--am-line-2); }

.auth-modal__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--am-ink-1);
    margin: 0 0 6px;
    padding-right: 24px;
}
.auth-modal__subtitle {
    font-size: 14px;
    color: var(--am-ink-3);
    margin: 0 0 18px;
    line-height: 1.45;
}

.auth-modal__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--am-line-2);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 18px;
}
.auth-modal__tab {
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--am-ink-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.auth-modal__tab.is-active {
    background: #fff;
    color: var(--am-brand);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.08);
}

.auth-modal__form { display: flex; flex-direction: column; gap: 12px; }
.auth-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.auth-modal__field { display: block; }
.auth-modal__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--am-ink-2);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}
.auth-modal__field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--am-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--am-ink-1);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
}
.auth-modal__field input:focus {
    outline: none;
    border-color: var(--am-brand);
    box-shadow: 0 0 0 3px var(--am-brand-soft);
}
.auth-modal__field.has-error input {
    border-color: var(--am-danger);
    background: var(--am-danger-soft);
}

.auth-modal__err {
    display: block;
    font-size: 12px;
    color: var(--am-danger);
    margin-top: 4px;
}
.auth-modal__err[hidden] { display: none; }
.auth-modal__err--top {
    background: var(--am-danger-soft);
    border-radius: 8px;
    padding: 10px 12px;
    margin: -4px 0 0;
    font-size: 13px;
}

.auth-modal__submit {
    width: 100%;
    background: var(--am-brand);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    margin-top: 6px;
    box-shadow: 0 1px 2px rgba(25, 118, 210, 0.18);
}
.auth-modal__submit:hover:not(:disabled) {
    background: var(--am-brand-dark);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.28);
}
.auth-modal__submit:active:not(:disabled) { transform: translateY(1px); }
.auth-modal__submit.is-loading,
.auth-modal__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-modal__swap {
    text-align: center;
    font-size: 13px;
    color: var(--am-ink-2);
    margin: 16px 0 6px;
}
.auth-modal__swap-btn {
    background: none;
    border: none;
    color: var(--am-brand);
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-modal__swap-btn:hover { color: var(--am-brand-dark); }
.auth-modal__swap > span { display: none; }
.auth-modal[data-mode="login"]    .auth-modal__swap > span[data-mode="login"]    { display: inline; }
.auth-modal[data-mode="register"] .auth-modal__swap > span[data-mode="register"] { display: inline; }

.auth-modal__terms {
    font-size: 11px;
    color: var(--am-muted);
    text-align: center;
    line-height: 1.45;
    margin: 8px 0 0;
}
.auth-modal__terms a { color: var(--am-ink-2); text-decoration: underline; }

.auth-modal[data-mode="login"]    .auth-modal__row--register { display: none; }

/* Forgot-password mode strips everything but title, subtitle, email,
   submit. No tabs, no register row, no password field, no swap prompt,
   no terms — the actual reset page handles legal copy in its own flow. */
.auth-modal[data-mode="forgot"] .auth-modal__tabs,
.auth-modal[data-mode="forgot"] .auth-modal__row--register,
.auth-modal[data-mode="forgot"] .auth-modal__field--password,
.auth-modal[data-mode="forgot"] .auth-modal__swap,
.auth-modal[data-mode="forgot"] .auth-modal__terms { display: none; }

/* "Forgot password?" link — sits under the password field. Quiet but
   discoverable (Booking / Hometogo pattern). */
.auth-modal__forgot-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--am-brand);
    text-decoration: none;
    font-weight: 500;
}
.auth-modal__forgot-link:hover { text-decoration: underline; color: var(--am-brand-dark); }

/* "Check your inbox" success panel — replaces the form once the forgot
   POST returns 200. Big green checkmark + reassuring copy + back-to-
   sign-in button. */
.auth-modal__forgot-sent {
    text-align: center;
    padding: 8px 0 4px;
}
.auth-modal__forgot-sent-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--am-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 14px;
    box-shadow: 0 4px 12px rgba(10, 138, 92, 0.25);
}
.auth-modal__forgot-sent-heading {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-ink-1);
}
.auth-modal__forgot-sent-body {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--am-ink-3);
}
.auth-modal__forgot-back {
    background: none;
    border: none;
    color: var(--am-brand);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 12px;
}
.auth-modal__forgot-back:hover { color: var(--am-brand-dark); }

/* Reset-password page (server-rendered Blade form the email link lands
   on). Uses the same palette as the modal so it feels like one product. */
.reset-password-page {
    --rp-brand: #1976d2;
    --rp-brand-dark: #1565c0;
    --rp-brand-soft: #e3f0fb;
    --rp-ink-1: #0b1220;
    --rp-ink-2: #3a4453;
    --rp-ink-3: #6b7480;
    --rp-line: #e6e9ee;
    --rp-danger: #c0252e;
    --rp-danger-soft: #fde7e9;

    background: #f7f8fa;
    min-height: 70vh;
    padding: 60px 16px;
    display: flex;
    justify-content: center;
}
.reset-password-card {
    background: #fff;
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.reset-password__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--rp-ink-1);
    letter-spacing: -0.01em;
}
.reset-password__sub {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--rp-ink-3);
    line-height: 1.5;
}
.reset-password__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.reset-password__field { display: block; }
.reset-password__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-ink-2);
    margin-bottom: 5px;
}
.reset-password__field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rp-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--rp-ink-1);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.reset-password__field input:focus {
    outline: none;
    border-color: var(--rp-brand);
    box-shadow: 0 0 0 3px var(--rp-brand-soft);
}
.reset-password__field-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rp-danger);
}
.reset-password__submit {
    margin-top: 4px;
    background: var(--rp-brand);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.reset-password__submit:hover { background: var(--rp-brand-dark); }
.reset-password__error {
    background: var(--rp-danger-soft);
    color: var(--rp-danger);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
}
.reset-password__home-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--rp-brand);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.reset-password__home-link:hover { text-decoration: underline; }

@media (max-width: 540px) {
    .auth-modal { padding: 0; align-items: flex-end; }
    .auth-modal__sheet {
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 16px 16px 0 0;
        padding: 24px 20px;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .auth-modal__title { font-size: 20px; }
}

/* ============================================================================
   Public owner profile page (/owners/{id})
   Mirrors legacy arendoo.com/?cid=38&user={id} layout: vertical sidebar with
   avatar + trust signals + stats, main column with greeting + property list +
   inline recent reviews per property. Class names use the `owner-public-*`
   prefix to avoid clashing with the existing horizontal `owner-business-card`
   block on the estate detail page (#EstateOwner). Color palette + spacing
   follow site.css conventions (blue #0696ff brand, subtle #f5f5f5 surfaces).
   ============================================================================ */
.owner-public-page {
    max-width: 1180px;
    margin: 24px auto 64px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 32px;
    align-items: start;
}

.owner-public-page__sidebar {
    position: sticky;
    top: 24px;
}

.owner-public-card {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.owner-public-card__avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
}
.owner-public-card__avatar--placeholder {
    background: #ccc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M3 22c0-5 4-9 9-9s9 4 9 9"/></svg>') center / 50% no-repeat;
}
.owner-public-card__name {
    color: #0696ff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}
.owner-public-card__trusted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0696ff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
}
.owner-public-card__trusted-badge {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    background: #0696ff;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}
.owner-public-card__stats {
    margin: 0;
    padding: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
}
.owner-public-card__stat {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid #ececec;
}
.owner-public-card__stat:last-child { border-bottom: 0; }
.owner-public-card__stat dt {
    color: #666;
    font-size: 14px;
}
.owner-public-card__stat dd {
    margin: 0;
    color: #0696ff;
    font-weight: 600;
    font-size: 14px;
}

.owner-public-page__main { min-width: 0; }
.owner-public-page__greeting {
    color: #0696ff;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 16px;
}
.owner-public-page__bio {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.owner-public-page__section-title {
    color: #0696ff;
    font-size: 22px;
    font-weight: 600;
    margin: 24px 0 16px;
}
.owner-public-page__empty {
    color: #666;
    font-style: italic;
    padding: 24px;
    background: #fafafa;
    border-radius: 8px;
    text-align: center;
}
.owner-public-page__property-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.owner-property-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
}
.owner-property-card__media { position: relative; }
.owner-property-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    position: relative;
}
.owner-property-card__price {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}
.owner-property-card__booking-type {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
.owner-property-card__booking-type--instant::after {
    content: '⚡';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffa500;
    font-size: 16px;
}
.owner-property-card__body {
    padding: 16px 20px;
}
.owner-property-card__name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}
.owner-property-card__name a {
    color: #0696ff;
    text-decoration: none;
}
.owner-property-card__name a:hover { text-decoration: underline; }
.owner-property-card__info {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}
.owner-property-card__rating {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}
.owner-property-card__stars {
    position: relative;
    width: 90px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23ddd" d="M9 1l2.6 5.3 5.8.8-4.2 4.1 1 5.8L9 14.3l-5.2 2.7 1-5.8L.6 7.1l5.8-.8z"/></svg>') repeat-x;
    background-size: 18px 16px;
}
.owner-property-card__stars-fill {
    display: block;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23ffa500" d="M9 1l2.6 5.3 5.8.8-4.2 4.1 1 5.8L9 14.3l-5.2 2.7 1-5.8L.6 7.1l5.8-.8z"/></svg>') repeat-x;
    background-size: 18px 16px;
}

.owner-property-card__reviews {
    grid-column: 1 / -1;
    padding: 16px 20px;
    background: #fafafa;
    border-top: 1px solid #ececec;
}
.owner-property-card__reviews-title {
    font-weight: 600;
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}
.owner-property-card__reviews-empty {
    color: #999;
    font-size: 13px;
    font-style: italic;
}
.owner-property-card__review {
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}
.owner-property-card__review:last-of-type { border-bottom: 0; }
.owner-property-card__review-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 13px;
}
.owner-property-card__review-name {
    font-weight: 600;
    color: #444;
}
.owner-property-card__review-date {
    color: #999;
}
.owner-property-card__review-body {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}
.owner-property-card__reviews-all {
    display: inline-block;
    margin-top: 12px;
    color: #0696ff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.owner-property-card__reviews-all:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .owner-public-page {
        grid-template-columns: 1fr;
    }
    .owner-public-page__sidebar {
        position: static;
    }
    .owner-property-card {
        grid-template-columns: 1fr;
    }
    .owner-property-card__media { min-height: 220px; }
}

/* ============================================================================
   Owner public profile — full-width hero map (main column) + review reply block
   ============================================================================ */
.owner-public-page__map {
    width: 100%;
    height: 420px;
    margin-bottom: 24px;
    border-radius: 14px;
    overflow: hidden;
    background: #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.owner-public-page__map .price-marker__chip {
    background: #fff;
    border: 1.5px solid #0696ff;
    color: #0696ff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.owner-public-page__map .price-marker__chip:hover {
    background: #0696ff;
    color: #fff;
    cursor: pointer;
    transform: scale(1.08);
}
@media (max-width: 900px) {
    .owner-public-page__map {
        height: 300px;
        border-radius: 10px;
        margin-bottom: 16px;
    }
}

/* Owner reply block under a review — indented + grey-bg to mirror the
   legacy "owner-comment" nested under "client-comment" pattern. */
.owner-property-card__reply {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    margin-left: 24px;
    padding: 10px 12px;
    background: #fff;
    border-left: 3px solid #0696ff;
    border-radius: 6px;
}
.owner-property-card__reply-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    flex-shrink: 0;
}
.owner-property-card__reply-avatar--placeholder {
    background: #ccc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M3 22c0-5 4-9 9-9s9 4 9 9"/></svg>') center / 60% no-repeat;
}
.owner-property-card__reply-body { flex: 1; min-width: 0; }

/* ----- Quendoo partner cards (Phase 1.C) ----------------------------------
   Reuses the .property-card frame entirely — image slider, wishlist
   heart, body layout — so a partner hotel is indistinguishable visually
   from an Arendoo own-estate. The only differentiator is the CTA
   wording ("Hotel Direct") and a brand-blue accent on that link. */
/* Card pricing block — right-aligned, two-line: large bold per-night
   (or "from" headline) over a small grey total. Replaces the old
   `__price` chip on the media + the in-body `__stay-price` line.
   Single visual home for price keeps the card hierarchy clean. */
.property-card__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 10px;
    min-height: 44px;
    justify-content: center;
}
.property-card__pricing-per {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    color: #111827;
}
.property-card__pricing-total {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.2;
}
.property-card__pricing:not(.is-loaded) {
    align-items: center;
}
/* Stable card height — when a hotel has no availability for the
   search dates we render this placeholder INSTEAD of removing the
   price block, so the CTA underneath doesn't jump up and reshuffle
   the grid row. */
.property-card__pricing.is-unavailable {
    align-items: flex-end;
    justify-content: center;
}
.property-card__pricing-unavail {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
    text-align: right;
}

/* Primary CTA button — gives the action an explicit visual affordance.
   `--primary` is the brand-blue solid (own-estate cards); `--outline`
   is the same hue as a border-only button (partner cards) so the
   visual hierarchy reads "your inventory vs partner inventory" at a
   glance without needing a "Quendoo" badge. */
/* Stretched-link clickability — clicks anywhere on the card BODY
   navigate to the title anchor's href. Media (the image) already
   has its own anchor and its own touch-swipe handlers; if the
   stretched link covers the media too, mobile swipe stops working
   because touch events hit the link's invisible overlay first.
   So we scope ::before to the body only — media stays interactive,
   the dead text-gap areas of the body still go to detail page. */
.property-card { position: relative; }
.property-card__body { position: relative; }
.property-card__title-link {
    color: inherit;
    text-decoration: none;
}
.property-card__title-link:hover { color: #0696ff; }
.property-card__title-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Lift these above the stretched-link `::before` overlay so they stay
   interactive. Position type stays whatever the existing rules set
   (heart + nav are absolute, dots are absolute too) — only the
   stacking changes. */
.property-card__heart,
.property-card__nav,
.property-card__dots {
    z-index: 2;
}

/* Source label — right-aligned small line under the pricing block.
   Tells the visitor where the click takes them; replaces the
   explicit CTA button now that the whole card is clickable. */
.property-card__source {
    margin: 6px 0 0;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    /* Blue across both card kinds — 'Book via Arendoo' and 'Hotel
       Direct' are equal-weight CTAs and visitor feedback on the
       grey vs blue split was confusion ("is one of them disabled?").
       The --partner modifier becomes a no-op kept for backwards
       compatibility; can drop in a follow-up once nothing references
       it. */
    color: #0696ff;
    letter-spacing: 0.02em;
}
.property-card__source--partner { color: #0696ff; }

/* Partner stay-price line — SSR renders the spinner inline; on paint
   it's replaced by `Цена за N нощувки за M гости: € X` matching the
   own-estate `property-card__stay-price` shape. */
.property-card__price-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 0, 0, .15);
    border-top-color: #0696ff;
    border-radius: 50%;
    animation: qd-spin 0.7s linear infinite;
    vertical-align: middle;
}
.property-card__price-spinner--inline { margin-right: 6px; }
@keyframes qd-spin { to { transform: rotate(360deg); } }