/* HelloBalkan design system v1
   One stylesheet, loaded after Listivo and Elementor. Replaces design.css,
   refresh.css, mockup1.css and adriatic-stays.css from the plugin.
   Change a colour here, in :root, never in a component rule. */

/* ================================================================ Tokens */
:root {
    --hb-ink: #102C3E;
    --hb-deep: #102C3E;            /* dark backgrounds; stays dark in dark mode */
    --hb-ink-2: #2F4656;
    --hb-muted: #5E6B73;
    --hb-faint: #8A949A;
    --hb-line: #E6E0D4;
    --hb-line-2: #D9D1C2;
    --hb-sand: #F6F2E9;
    --hb-sand-2: #EFE8DA;
    --hb-surface: #FFFFFF;
    --hb-accent: #BF543C;          /* one primary action per view, white text 4.6:1 */
    --hb-accent-hover: #A8462F;
    --hb-terracotta: #E77B62;      /* decorative only, never behind white text */
    --hb-terracotta-soft: #FBE9E3;
    --hb-teal: #1D7771;
    --hb-teal-dark: #155B56;
    --hb-teal-soft: #E3F0EE;
    --hb-success: #2E7D5B;
    --hb-warn-bg: #FFF4E5;
    --hb-warn-line: #F0C98A;
    --hb-warn-ink: #8A5300;

    --hb-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --hb-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --hb-r-sm: 10px;
    --hb-r-btn: 12px;
    --hb-r: 16px;
    --hb-r-lg: 24px;
    --hb-pill: 999px;

    --hb-shadow-sm: 0 2px 8px rgba(16, 44, 62, .08);
    --hb-shadow: 0 10px 28px rgba(16, 44, 62, .10);
    --hb-shadow-lg: 0 24px 56px rgba(16, 44, 62, .18);
    --hb-focus: 0 0 0 3px rgba(29, 119, 113, .35);

    --hb-gutter: 16px;
    --hb-tap: 44px;

    /* Legacy names still used by plugin components and inline markup. */
    --np-blue: var(--hb-teal);
    --np-blue-dark: var(--hb-teal-dark);
    --np-blue-d: var(--hb-teal-dark);
    --np-blue-ink: var(--hb-ink);
    --np-ink: var(--hb-ink);
    --np-muted: var(--hb-muted);
    --np-grey: var(--hb-muted);
    --np-line: var(--hb-line);
    --np-bg: var(--hb-sand);
    --np-sky: var(--hb-teal-soft);
    --np-accent: var(--hb-terracotta);
    --np-radius: var(--hb-r);
    --np-r: var(--hb-r);
    --np-shadow: var(--hb-shadow);
    --np-shadow-soft: var(--hb-shadow-sm);
    --np-sand: var(--hb-sand);
    --np-surface: var(--hb-surface);
    --np-terracotta: var(--hb-accent);
    --np-terracotta-dark: var(--hb-accent-hover);
    --np-terracotta-deep: var(--hb-accent-hover);
    --np-terracotta-soft: var(--hb-terracotta-soft);
    --np-teal: var(--hb-teal);
    --np-teal-dark: var(--hb-teal-dark);
    --np-teal-soft: var(--hb-teal-soft);
}

@media (min-width: 768px) {
    :root { --hb-gutter: 24px; }
}

/* ================================================================== Base */
body {
    background-color: var(--hb-sand);
    color: var(--hb-ink);
    font-family: var(--hb-font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.listivo-heading-v2__text,
.listivo-listing-name,
.listivo-search-results__title {
    font-family: var(--hb-font-head);
    color: var(--hb-ink);
    letter-spacing: -.02em;
}

a { color: var(--hb-teal); }
a:hover { color: var(--hb-teal-dark); }

/* Links inside running text: Listivo paints them with the primary (CTA)
   colour, which is only 3.8:1 on sand. Teal-dark passes AA and is underlined
   so links do not rely on colour alone. */
.elementor-widget-text-editor a:not(.elementor-button):not([class*=button]),
.np-page a:not(.np-page__btn),
.listivo-listing-description a,
.fluentform .ff_t_c a {
    color: var(--hb-teal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.elementor-widget-text-editor a:not(.elementor-button):not([class*=button]):hover,
.np-page a:not(.np-page__btn):hover { color: var(--hb-ink); }

::selection { background: var(--hb-teal); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--hb-teal);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================ Header */
.listivo-menu-v2 {
    background: var(--hb-surface) !important;
    border-bottom: 1px solid var(--hb-line);
}

#listivo-menu > .menu-item > a {
    color: var(--hb-ink) !important;
    font-family: var(--hb-font-body);
    font-size: 14px;
    font-weight: 600;
}

#listivo-menu > .menu-item > a:hover { color: var(--hb-teal) !important; }

.listivo-menu-v2__logo img,
.listivo-menu-mobile-v2__logo img {
    height: 30px !important;
    width: auto !important;
    max-width: none !important;
}

/* Never let the menu squeeze the logo (it distorts the wordmark). */
.listivo-menu-v2__logo { flex: 0 0 auto !important; min-width: max-content; }

@media (min-width: 1025px) and (max-width: 1279px) {
    #listivo-menu > .menu-item > a { padding-left: 10px !important; padding-right: 10px !important; }
    .listivo-menu-v2__logo img { height: 28px !important; }
}

@media (min-width: 1025px) {
    .listivo-menu-v2__container,
    .listivo-menu-v2__left,
    .listivo-menu-v2__right,
    #listivo-menu { flex-wrap: nowrap !important; }
    #listivo-menu .menu-item { white-space: nowrap; }
    .listivo-menu-v2__logo img { height: 34px !important; }
}

@media (max-width: 640px) {
    .listivo-menu-v2__container,
    .listivo-menu-v2__left,
    .listivo-menu-v2__right { flex-wrap: nowrap !important; gap: 6px; }
    .listivo-menu-v2__account { flex: 0 0 auto; }
    .listivo-menu-v2__avatar { width: var(--hb-tap) !important; height: var(--hb-tap) !important; }
}

@media (max-width: 380px) {
    .listivo-menu-v2__logo img { height: 26px !important; }
}

/* Header, right side: one calm group. "List your stay" as a quiet text
   button, then theme and account as two matching round buttons. The separate
   "Log In" / "Register" links are gone: the account button opens the same
   login/register page (and the dashboard when signed in). */
.listivo-menu-v2__right { display: flex !important; align-items: center; gap: 6px; }
.listivo-menu-v2__account-link,
.listivo-menu-v2__separator { display: none !important; }
.listivo-menu-v2__account { display: flex !important; align-items: center; gap: 0 !important; padding: 0 !important; }
.listivo-menu-v2__button { order: -1; margin: 0 6px 0 0 !important; }

.listivo-menu-v2__button .listivo-button {
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--hb-ink) !important;
    font: 600 15px/1 var(--hb-font-body) !important;
}
.listivo-menu-v2__button .listivo-button svg { display: none !important; }
.listivo-menu-v2__button .listivo-button span { color: inherit !important; font: inherit !important; }
.listivo-menu-v2__button .listivo-button:hover { background: var(--hb-sand) !important; color: var(--hb-teal-dark) !important; }

.listivo-menu-v2__avatar,
.hb-theme-toggle {
    display: inline-grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    background: var(--hb-sand) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: var(--hb-ink) !important;
    transition: background-color .15s ease;
}
.listivo-menu-v2__avatar:hover,
.hb-theme-toggle:hover { background: var(--hb-sand-2) !important; color: var(--hb-ink) !important; }
.listivo-menu-v2__avatar svg path { fill: currentColor !important; }

/* Phone: hamburger matches the round buttons */
.listivo-menu-v2__mobile-button {
    width: 40px !important;
    height: 40px !important;
    background: var(--hb-sand) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Phone side menu: full screen, the top header steps aside while it is open */
/* It covers the whole screen (header included, it sits above it), also behind
   the phone's moving address bar: inset 0 plus dynamic viewport height. */
.listivo-menu-mobile-v2 {
    inset: 0 auto 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: var(--hb-surface) !important;
    box-shadow: none !important;
}
.listivo-menu-mobile-v2__top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 64px !important;
    padding: 0 var(--hb-gutter) !important;
    background: var(--hb-surface) !important;
    border-bottom: 1px solid var(--hb-line);
}
.listivo-menu-mobile-v2__button .listivo-button {
    height: 40px !important;
    padding: 0 14px !important;
    background: var(--hb-sand) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--hb-ink) !important;
    font: 600 15px/1 var(--hb-font-body) !important;
}
.listivo-menu-mobile-v2__button .listivo-button:hover,
.listivo-menu-mobile-v2__button .listivo-button:active { background: var(--hb-sand-2) !important; color: var(--hb-ink) !important; }
.listivo-menu-mobile-v2__button .listivo-button svg,
.listivo-menu-mobile-v2__button .listivo-button__icon { display: none !important; }
.listivo-menu-mobile-v2__button .listivo-button span { color: inherit !important; font: inherit !important; }
.listivo-menu-mobile-v2__close {
    display: grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    background: var(--hb-sand) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}
.listivo-menu-mobile-v2__close svg path { fill: var(--hb-ink) !important; }
.listivo-menu-mobile-v2__items .menu-item > a,
.listivo-menu-mobile-v2__items .menu-item > div > a { padding-left: var(--hb-gutter) !important; padding-right: var(--hb-gutter) !important; font: 600 18px/1.3 var(--hb-font-head) !important; color: var(--hb-ink) !important; }
.listivo-menu-mobile-v2__info { padding: 0 var(--hb-gutter) !important; }
.listivo-menu-mobile-v2__data-label { color: var(--hb-muted) !important; font-size: 13px !important; }

/* Thin line under the header instead of a heavy border */
.listivo-menu-v2__line { background: var(--hb-line) !important; opacity: .7; }

/* =============================================================== Buttons */
.listivo-button--primary-1,
.listivo-button--primary-2,
.listivo-simple-button--background-primary-1,
.elementor-button,
.fluentform .ff-btn-submit,
.np-availability__cta,
.np-contact__cta,
.np-page__btn {
    min-height: var(--hb-tap);
    background: var(--hb-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--hb-r-btn) !important;
    font-family: var(--hb-font-body);
    font-weight: 700;
    box-shadow: none !important;
    transition: background-color .18s ease, transform .18s ease;
}

.listivo-button--primary-1:hover,
.listivo-button--primary-2:hover,
.listivo-simple-button--background-primary-1:hover,
.elementor-button:hover,
.fluentform .ff-btn-submit:hover,
.np-availability__cta:hover,
.np-contact__cta:hover,
.np-page__btn:hover {
    background: var(--hb-accent-hover) !important;
    color: #fff !important;
}

.listivo-button--primary-1:active,
.elementor-button:active,
.fluentform .ff-btn-submit:active { transform: translateY(1px); }

.listivo-button--secondary,
.listivo-simple-button--background-secondary {
    background: var(--hb-teal-soft) !important;
    border-color: transparent !important;
    color: var(--hb-teal-dark) !important;
}

.listivo-button--secondary:hover,
.listivo-simple-button--background-secondary:hover {
    background: var(--hb-teal) !important;
    color: #fff !important;
}

/* ===================================================== Section headings */
.listivo-heading-v2__small-text {
    color: var(--hb-teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.listivo-heading-v2__text { font-weight: 800; }

/* ======================================== Listing cards (Listivo v3 + v4) */
.listivo-listing-card-v4,
.listivo-listing-card-v3 {
    position: relative;
    display: block;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--hb-r);
    overflow: visible !important;
}

.listivo-listing-card-v4__gallery,
.listivo-listing-card-v3__gallery {
    aspect-ratio: 4 / 3.4;
    border-radius: var(--hb-r);
    overflow: hidden;
    background: var(--hb-sand-2);
}

.listivo-listing-card-v4__gallery > div,
.listivo-listing-card-v4__gallery .listivo-swiper-container,
.listivo-listing-card-v4__gallery .listivo-swiper-wrapper,
.listivo-listing-card-v4__gallery .listivo-swiper-slide,
.listivo-listing-card-v3__gallery > div,
.listivo-listing-card-v3__gallery .listivo-swiper-container,
.listivo-listing-card-v3__gallery .listivo-swiper-wrapper,
.listivo-listing-card-v3__gallery .listivo-swiper-slide { height: 100% !important; }

.listivo-listing-card-v4__gallery img,
.listivo-listing-card-v3__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.listivo-listing-card-v4:hover .listivo-listing-card-v4__gallery img,
.listivo-listing-card-v3:hover .listivo-listing-card-v3__gallery img { transform: scale(1.03); }

/* Never render an empty photo frame. */
.listivo-listing-card-v4__gallery--image-count-0,
.listivo-listing-card-v4__gallery:empty { display: none !important; }

.listivo-listing-card-v4__body,
.listivo-listing-card-v4__inner,
.listivo-listing-card-v4__content,
.listivo-listing-card-v3__body,
.listivo-listing-card-v3__inner,
.listivo-listing-card-v3__content {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.listivo-listing-card-v4__body,
.listivo-listing-card-v3__body { padding-top: 10px !important; }

.listivo-listing-card-v4__name,
.listivo-listing-card-v3__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    font: 600 15px/1.3 var(--hb-font-head) !important;
    letter-spacing: -.01em !important;
    color: var(--hb-ink) !important;
}

.listivo-listing-card-v4__address,
.listivo-listing-card-v3__address { margin: 0 0 2px !important; }

.listivo-listing-card-v4__address-text,
.listivo-listing-card-v3__address-text {
    font: 500 14px/1.35 var(--hb-font-body) !important;
    color: var(--hb-muted) !important;
}

.hb-card-spec {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2px;
    font: 500 13px/1.45 var(--hb-font-body);
    color: var(--hb-muted);
}

.hb-card-spec span { white-space: nowrap; }

/* Price is information, not a call to action: ink. */
.listivo-listing-card-v4__value,
.listivo-listing-card-v3__value {
    margin: 4px 0 0 !important;
    font: 700 15px/1.3 var(--hb-font-body) !important;
    color: var(--hb-ink) !important;
}

.listivo-listing-card-v4__address-icon-wrapper,
.listivo-listing-card-v4__attributes,
.listivo-listing-card-v4__views,
.listivo-listing-card-v4__icon-label,
.listivo-listing-card-v3__address-icon-wrapper,
.listivo-listing-card-v3__attributes,
.listivo-listing-card-v3__user,
.listivo-listing-card-v3__icon-label { display: none !important; }

.listivo-listing-card-v4__featured,
.listivo-listing-card-v4__label {
    background: var(--hb-teal) !important;
    color: #fff !important;
}

/* "Featured" is a div inside the gallery, so the height:100% rule above
   used to stretch it into a full-height bar. Keep it a small pill. */
.listivo-listing-card-v4__gallery > .listivo-listing-card-v4__featured,
.listivo-listing-card-v3__gallery > .listivo-listing-card-v3__featured {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 4;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: var(--hb-pill) !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--hb-ink) !important;
    font: 700 12px/1 var(--hb-font-body) !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

/* Only the heart, floating on the photo, 44px tap target. */
.listivo-listing-card-v4__bottom,
.listivo-listing-card-v3__bottom {
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 5;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.listivo-listing-card-v4__icon:not(:last-child),
.listivo-listing-card-v3__icon:not(:last-child) { display: none !important; }

.listivo-listing-card-v4__icon:last-child,
.listivo-listing-card-v3__icon:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hb-tap);
    height: var(--hb-tap);
    border: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: var(--hb-shadow-sm);
    color: var(--hb-ink);
}

.listivo-listing-card-v4__icon--active,
.listivo-listing-card-v3__icon--active { color: var(--hb-terracotta) !important; }

.listivo-listing-card-v4__pagination { bottom: 10px !important; }

.listivo-listing-grid--cards { gap: 28px 20px !important; }

/* Row cards (list view): stack on phone. */
.listivo-listing-card-row {
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
    overflow: hidden;
}

.listivo-listing-card-row__name { color: var(--hb-ink); }
.listivo-listing-card-row__value { color: var(--hb-ink); font-weight: 800; }

/* Phone: two cards side by side, compact text; the list view stays one per row. */
@media (max-width: 559px) {
    .listivo-listing-grid,
    .listivo-listing-grid--cards {
        /* minmax(0, ...) is required: a bare 1fr track grows to the
           lazysizes image's intrinsic width and the card explodes. */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 10px !important;
    }

    .listivo-listing-grid--1-col,
    .listivo-listing-grid--rows {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .listivo-listing-grid .listivo-listing-card-v4__body,
    .listivo-listing-grid .listivo-listing-card-v3__body { padding-top: 8px !important; }
    .listivo-listing-grid .listivo-listing-card-v4__name,
    .listivo-listing-grid .listivo-listing-card-v3__name { font-size: 14px !important; line-height: 1.25 !important; }
    .listivo-listing-grid .listivo-listing-card-v4__address-text,
    .listivo-listing-grid .listivo-listing-card-v3__address-text { font-size: 12px !important; }
    .listivo-listing-grid .hb-card-spec { font-size: 12px; }
    .listivo-listing-grid .listivo-listing-card-v4__value,
    .listivo-listing-grid .listivo-listing-card-v3__value { font-size: 14px !important; }
    .listivo-listing-grid .listivo-listing-card-v4__icon:last-child,
    .listivo-listing-grid .listivo-listing-card-v3__icon:last-child { width: 36px; height: 36px; }
    .listivo-listing-grid .listivo-listing-card-v4__gallery > .listivo-listing-card-v4__featured,
    .listivo-listing-grid .listivo-listing-card-v3__gallery > .listivo-listing-card-v3__featured { top: 8px !important; left: 8px !important; height: 22px !important; padding: 0 8px !important; font-size: 11px !important; }

    .listivo-listing-card-row { flex-direction: column !important; width: 100% !important; }
    .listivo-listing-card-row__left { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; }
    .listivo-listing-card-row__left img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    .listivo-listing-card-row__main { width: 100% !important; padding: 12px !important; }
}

@media (min-width: 560px) and (max-width: 1023px) {
    .listivo-listing-grid,
    .listivo-listing-grid--cards,
    .listivo-listing-grid--1-col,
    .listivo-listing-grid--rows {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 16px !important;
    }
}

/* ============================================= Category tabs (pills) */
.listivo-tabs-v2 {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.listivo-tabs-v2::-webkit-scrollbar { display: none; }

.listivo-tab-v2 {
    flex: 0 0 auto;
    min-height: var(--hb-tap) !important;
    height: auto !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center;
    background: var(--hb-surface) !important;
    border: 1px solid var(--hb-line) !important;
    border-radius: var(--hb-pill) !important;
    color: var(--hb-ink) !important;
    font: 600 14px/1 var(--hb-font-body) !important;
    transition: border-color .15s ease, background-color .15s ease;
}

.listivo-tab-v2:hover { border-color: var(--hb-teal) !important; }

.listivo-tab-v2--active,
.listivo-tab-v2.listivo-tab-v2--active {
    background: var(--hb-teal) !important;
    border-color: var(--hb-teal) !important;
    color: #fff !important;
}

.listivo-listing-list-with-tabs__head { gap: 16px; align-items: center; }
.listivo-listing-list-with-tabs__tabs { min-width: 0; flex: 1 1 auto; }

.listivo-listing-list-with-tabs__button {
    min-height: var(--hb-tap);
    background: var(--hb-teal-soft);
    color: var(--hb-teal-dark);
    border-radius: var(--hb-r-btn);
}

.listivo-listing-list-with-tabs__button:hover { background: var(--hb-teal); color: #fff; }

@media (max-width: 767px) {
    .listivo-listing-list-with-tabs__head {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        margin-bottom: 20px;
    }
    .listivo-listing-list-with-tabs__button { align-self: flex-start; }
    .listivo-listing-list-with-tabs__tabs { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
}

/* ================================================== Country cards */
.adriatic-countries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.adriatic-country {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--hb-r);
    background: var(--hb-deep);
    text-decoration: none;
}

/* !important: Listivo sets img { height: auto } with higher specificity. */
.adriatic-country__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: transform .5s ease;
}

.adriatic-country:hover .adriatic-country__image { transform: scale(1.04); }

.adriatic-country__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 44, 62, 0) 38%, rgba(16, 44, 62, .86) 100%);
}

.adriatic-country__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px;
    color: #fff;
}

.adriatic-country__name { font: 700 19px/1.2 var(--hb-font-head); }
.adriatic-country__tagline { font-size: 13px; line-height: 1.4; opacity: .9; }
.adriatic-country__count { margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .85; }

@media (max-width: 1024px) {
    .adriatic-countries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: swipe row that bleeds to the screen edge. */
@media (max-width: 767px) {
    .adriatic-countries {
        display: flex;
        gap: 12px;
        margin: 0 calc(var(--hb-gutter) * -1);
        padding: 4px var(--hb-gutter) 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--hb-gutter);
        scrollbar-width: none;
    }
    .adriatic-countries::-webkit-scrollbar { display: none; }
    .adriatic-country { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ============================================== Destination cards */
.adriatic-destinations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 24px;
}

.adriatic-destination {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
    transition: transform .25s ease, box-shadow .25s ease;
}

.adriatic-destination:hover { transform: translateY(-3px); box-shadow: var(--hb-shadow); }

.adriatic-destination__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hb-sand-2); }
.adriatic-destination__media img {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.adriatic-destination__count {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 11px;
    border-radius: var(--hb-pill);
    background: rgba(255, 255, 255, .95);
    color: var(--hb-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.adriatic-destination__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.adriatic-destination__title { margin: 0; font: 700 20px/1.25 var(--hb-font-head); }
.adriatic-destination__title a { color: var(--hb-ink); text-decoration: none; }
.adriatic-destination__title a:hover { color: var(--hb-teal); }
.adriatic-destination__text { margin: 0; color: var(--hb-muted); font-size: 14px; line-height: 1.55; }

.adriatic-destination__cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }

.adriatic-destination__cities a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--hb-pill);
    background: var(--hb-teal-soft);
    color: var(--hb-teal-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.adriatic-destination__cities a:hover { background: var(--hb-teal); color: #fff; }

.adriatic-destinations__also { margin: 24px 0 0; color: var(--hb-muted); font-size: 14px; line-height: 1.6; }
.adriatic-destinations__also a { font-weight: 600; }

/* ============================================ Country page search */
.adriatic-search {
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px;
    background: var(--hb-surface);
    border-radius: var(--hb-r-lg);
    box-shadow: var(--hb-shadow-lg);
}

.adriatic-search__inner { display: grid; grid-template-columns: minmax(0, 1fr); }

.adriatic-search__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hb-line);
}

.adriatic-search__field label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hb-muted);
}

.adriatic-search__control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adriatic-search__icon { flex: 0 0 auto; color: var(--hb-teal); }

.adriatic-search select,
.adriatic-search input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hb-ink);
    font-size: 16px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.adriatic-search input[type="search"] { cursor: text; font-weight: 500; }
.adriatic-search input[type="search"]::placeholder { color: var(--hb-faint); font-weight: 400; }

.adriatic-search select {
    padding-right: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235E6B73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;
}

.adriatic-search__actions { display: flex; align-items: center; padding: 8px; }

.adriatic-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--hb-r-btn);
    background: var(--hb-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.adriatic-search__submit:hover { background: var(--hb-accent-hover); }

@media (min-width: 641px) {
    .adriatic-search__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adriatic-search__field--destination,
    .adriatic-search__field--keyword,
    .adriatic-search__actions { grid-column: 1 / -1; }
}

@media (min-width: 1081px) {
    .adriatic-search__inner { grid-template-columns: 1.5fr 1fr .85fr 1.4fr auto; align-items: stretch; }
    .adriatic-search__field { padding: 12px 20px; border-bottom: 0; border-right: 1px solid var(--hb-line); }
    .adriatic-search__field:last-of-type { border-right: 0; }
    .adriatic-search__field--destination,
    .adriatic-search__field--keyword,
    .adriatic-search__actions { grid-column: auto; }
    .adriatic-search__submit { width: auto; height: 100%; }
}

/* ============================================ Listing page: layout */
.listivo-listing-name {
    margin: 0 0 14px !important;
    font-size: clamp(26px, 4vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
}

.listivo-listing-price { color: var(--hb-ink) !important; font-weight: 800; font-size: 28px; }

/* Moved from an HTML widget in the listing "Gallery" template (10504). */
.listivo-weekly-price .listivo-listing-price { padding-top: 0; font-size: 15px; font-weight: 400; opacity: .65; }
.elementor-widget-shortcode .fluentform .ff-el-input--label label { font-size: 13px; font-weight: 600; }
.elementor-widget-shortcode .fluentform .ff-btn-submit { width: 100%; }

.elementor-widget-lst_listing_gallery .listivo-listing-gallery,
.elementor-widget-lst_listing_gallery img { border-radius: var(--hb-r); }

.listivo-listing-section__label,
.listivo-listing-simple-label,
.listivo-listing-facts__title { font-family: var(--hb-font-head); font-weight: 700; color: var(--hb-ink); }

.np-listing-main { background: transparent !important; border: 0 !important; padding: 0 !important; }
.np-listing-main .elementor-widget:not(:last-child) { margin-bottom: 0; }
.np-hide { display: none !important; }
.np-listing-title { margin-bottom: 14px !important; }
.np-listing-title .elementor-widget-container { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.np-listing-gallery { margin-bottom: 14px !important; }
.np-tabs-widget { margin: 0 0 16px !important; }

@media (min-width: 1025px) {
    .np-booking-column > .elementor-widget-wrap { max-width: 396px; margin-left: auto; }
}

/* Cards that group listing sections */
.np-card {
    margin-bottom: 16px !important;
    padding: 18px 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
}

.np-card > .elementor-widget-container { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.np-card .listivo-listing-section { padding: 0 !important; }
.np-card .listivo-listing-section__label { margin-bottom: 16px; }
.np-card .np-amenities, .np-card .np-things, .np-card .np-area { margin: 0; padding-top: 0; border-top: 0; }
.np-card .np-amenities__title, .np-card .np-things__title { margin-top: 0; }
.np-card--map { padding: 0; overflow: hidden; }
.np-card--booking .np-availability { margin: 0; padding: 0; background: var(--hb-surface); border: 0; border-radius: 0; }

.np-card--ov-start { border-bottom: 0 !important; border-radius: var(--hb-r) var(--hb-r) 0 0; padding-bottom: 2px; margin-bottom: 0 !important; }
.np-card--ov-mid { border-top: 0 !important; border-bottom: 0 !important; border-radius: 0; padding-top: 2px; padding-bottom: 2px; margin-bottom: 0 !important; }
.np-card--ov-end { border-top: 0 !important; border-radius: 0 0 var(--hb-r) var(--hb-r); padding-top: 6px; margin-bottom: 16px !important; }

@media (min-width: 761px) {
    .np-card { padding: 22px 24px; }
}

/* Section tabs */
.np-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.np-tabs::-webkit-scrollbar { display: none; }

.np-tabs__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hb-tap);
    padding: 0 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-pill);
    color: var(--hb-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.np-tabs__item:hover { border-color: var(--hb-teal); color: var(--hb-teal); }
.np-tabs__item.is-active { border-color: var(--hb-teal); color: var(--hb-teal); box-shadow: inset 0 0 0 1px var(--hb-teal); }

@media (min-width: 761px) {
    .np-tabs__item { flex: 1 1 0; font-size: 15px; }
}

/* Photo mosaic (desktop) */
.np-mosaic { display: none; }

@media (min-width: 1025px) {
    .np-has-mosaic .listivo-gallery-v1 { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); }
    .np-mosaic { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 200px 200px; gap: 8px; overflow: hidden; border-radius: var(--hb-r); }
    .np-mosaic__tile { position: relative; margin: 0; padding: 0; overflow: hidden; border: 0; background: var(--hb-sand-2); cursor: pointer; }
    .np-mosaic__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s ease; }
    .np-mosaic__tile:hover img { filter: brightness(.88); }
    .np-mosaic__tile--main { grid-row: 1 / 3; }
    .np-mosaic--1 .np-mosaic__tile:not(.np-mosaic__tile--main) { grid-column: 2 / 4; grid-row: 1 / 3; }
    .np-mosaic--2 .np-mosaic__tile:not(.np-mosaic__tile--main) { grid-column: 2 / 4; }
    .np-mosaic--3 .np-mosaic__tile:nth-child(2) { grid-column: 2 / 4; }
    .np-mosaic__all {
        position: absolute; right: 16px; bottom: 16px;
        display: flex; align-items: center; gap: 8px;
        min-height: var(--hb-tap); padding: 0 14px;
        border: 1px solid var(--hb-ink); border-radius: var(--hb-r-sm);
        background: var(--hb-surface); color: var(--hb-ink);
        font: 600 14px/1 var(--hb-font-body); cursor: pointer; box-shadow: var(--hb-shadow-sm);
    }
    .np-mosaic__all:hover { background: var(--hb-sand); }
}

/* Highlights */
.np-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

.np-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-pill);
    color: var(--hb-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.np-highlight__icon { flex: 0 0 auto; width: 19px; height: 19px; color: var(--hb-teal); }
.np-highlight strong { font-weight: 700; }

/* Overview */
.np-overview__title { margin: 0; font: 700 20px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.np-overview__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.np-overview__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.np-overview__icon { color: var(--hb-faint); }
.np-overview__label { color: var(--hb-muted); font-size: 14px; }
.np-overview__value { color: var(--hb-ink); font-size: 14px; font-weight: 700; text-align: right; }

.np-overview__link {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hb-line);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

@media (min-width: 761px) {
    .np-overview__title { font-size: 22px; }
    .np-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 44px; }
}

/* Host profile */
.np-host-profile,
.np-host-card {
    margin: 0 0 24px;
    padding: 20px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
}

.np-host-card { display: flex; flex-direction: column; gap: 4px; }
.np-host-card__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hb-muted); }
.np-host-card strong { font-size: 17px; color: var(--hb-ink); }
.np-host-card p { margin: 2px 0 6px; font-size: 14px; line-height: 1.55; color: var(--hb-muted); }
.np-host-card a { font-size: 14px; font-weight: 600; text-decoration: none; }

.np-host-profile__top { display: flex; align-items: center; gap: 12px; }
.np-host-profile__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--hb-teal-soft); }
.np-host-profile h3 { margin: 0 0 4px; font: 700 17px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.np-host-profile__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--hb-success); font-size: 12px; font-weight: 700; }
.np-host-profile__meta { margin: 12px 0 6px; color: var(--hb-muted); font-size: 13px; }
.np-host-profile__text { margin: 0 0 10px; color: var(--hb-muted); font-size: 14px; line-height: 1.55; }
.np-host-profile__contact { font-size: 14px; font-weight: 700; text-decoration: none; }

/* Area guide, sleeping, amenities, things to know: shared section rhythm */
.np-area,
.np-sleeping,
.np-amenities,
.np-things { margin: 32px 0 8px; padding-top: 24px; border-top: 1px solid var(--hb-line); }

.np-area__title,
.np-sleeping__title,
.np-amenities__title,
.np-things__title { margin: 0 0 16px; font: 700 21px/1.3 var(--hb-font-head); color: var(--hb-ink); }

.np-area__text { margin: 0 0 14px; color: var(--hb-ink-2); font-size: 15px; line-height: 1.7; }
.np-area__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.np-area__facts li { padding: 7px 12px; border: 1px solid var(--hb-line); border-radius: var(--hb-pill); background: var(--hb-surface); color: var(--hb-muted); font-size: 13px; }
.np-area__facts strong { color: var(--hb-ink); }
.np-area__note { margin: 0; color: var(--hb-muted); font-size: 12px; }

.np-sleeping__head,
.np-amenities__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.np-sleeping__head .np-sleeping__title,
.np-amenities__head .np-amenities__title { margin: 0; }
.np-sleeping__meta,
.np-amenities__meta { color: var(--hb-muted); font-size: 13px; font-weight: 500; }

.np-sleeping__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.np-sleeping__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
}

.np-sleeping__icon-wrap { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--hb-teal-soft); }
.np-sleeping__icon { width: 22px; height: 22px; color: var(--hb-teal); }
.np-sleeping__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.np-sleeping__body strong { color: var(--hb-ink); font-size: 14px; font-weight: 700; }
.np-sleeping__body span { color: var(--hb-muted); font-size: 13px; }
.np-sleeping__sleeps { margin-left: auto; padding: 4px 9px; border-radius: var(--hb-pill); background: var(--hb-teal-soft); color: var(--hb-teal-dark); font-size: 11px; font-weight: 700; white-space: nowrap; }

.np-amenities__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 42px; margin: 0; padding: 0; list-style: none; }
.np-amenities__grid--offers { row-gap: 16px; }
.np-amenity { display: flex; align-items: center; gap: 14px; min-height: 30px; color: var(--hb-ink); font-size: 15px; line-height: 1.4; }
.np-amenities__grid--offers .np-amenity { align-items: flex-start; }
.np-amenity__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--hb-ink); }
.np-amenities__grid--offers .np-amenity__icon { margin-top: 1px; }
.np-amenity--sleep span strong { font-weight: 700; }

/* Show 8 on phone, 12 on desktop until "show all". */
.np-amenities:not(.np-amenities--all) .np-amenities__grid--offers .np-amenity:nth-child(n+9) { display: none; }

@media (min-width: 901px) {
    .np-amenities:not(.np-amenities--all) .np-amenities__grid--offers .np-amenity:nth-child(n+9) { display: flex; }
    .np-amenities:not(.np-amenities--all) .np-amenities__grid--offers .np-amenity:nth-child(n+13) { display: none; }
}

.np-amenities--all .np-amenities__grid--offers .np-amenity { display: flex; }

.np-amenity-group { padding: 2px 0; border-top: 1px solid var(--hb-line); }

.np-amenity-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--hb-tap);
    padding: 12px 0;
    list-style: none;
    cursor: pointer;
    font: 700 16px/1.3 var(--hb-font-head);
    color: var(--hb-ink);
}

.np-amenity-group summary::-webkit-details-marker { display: none; }
.np-amenity-group summary > span:first-child { flex: 1 1 auto; }
.np-amenity-group summary:hover,
.np-amenity-group[open] summary { color: var(--hb-teal); }
.np-amenity-group[open] summary { padding-bottom: 10px; }
.np-amenity-group .np-amenities__grid,
.np-amenity-group .np-sleeping__grid { padding-bottom: 16px; }

.np-amenity-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: var(--hb-pill);
    background: var(--hb-teal-soft);
    color: var(--hb-teal-dark);
    font: 700 12px/1 var(--hb-font-body);
}

.np-amenity-group__chev { flex: 0 0 auto; color: var(--hb-faint); transition: transform .2s ease; }
.np-amenity-group[open] .np-amenity-group__chev { transform: rotate(180deg); color: var(--hb-teal); }

.np-amenities__more,
.np-amenities__toggle {
    min-height: var(--hb-tap);
    margin-top: 20px;
    padding: 0 16px;
    border: 1px solid var(--hb-ink);
    border-radius: var(--hb-r-btn);
    background: var(--hb-surface);
    color: var(--hb-ink);
    font: 600 14px/1 var(--hb-font-body);
    cursor: pointer;
}

.np-amenities__more:hover,
.np-amenities__toggle:hover { background: var(--hb-sand); }

.np-things__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.np-things__col h4 { margin: 0 0 10px; font: 700 16px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.np-things__col ul { margin: 0; padding: 0; list-style: none; }
.np-things__col li,
.np-things__col p { margin: 0 0 7px; color: var(--hb-muted); font-size: 14px; line-height: 1.55; }

@media (min-width: 641px) {
    .np-amenities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 701px) {
    .np-sleeping__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 801px) {
    .np-things__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}

/* Listing facts and price example */
.adriatic-price-example { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 16px 20px; background: var(--hb-sand); border: 1px solid var(--hb-line); border-radius: var(--hb-r); }
.adriatic-price-example__total { font-size: 16px; line-height: 1.4; color: var(--hb-ink); }
.adriatic-price-example__note { font-size: 13px; line-height: 1.5; color: var(--hb-muted); }

.adriatic-listing-facts { margin-top: 24px; }
.adriatic-listing-facts__title { margin: 0 0 12px; font: 700 18px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.adriatic-listing-facts__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; margin: 0; }
.adriatic-listing-facts__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hb-line); font-size: 14px; line-height: 1.5; }
.adriatic-listing-facts__row dt { color: var(--hb-muted); }
.adriatic-listing-facts__row dd { margin: 0; color: var(--hb-ink); font-weight: 600; text-align: right; }

@media (min-width: 641px) {
    .adriatic-listing-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adriatic-listing-country { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.adriatic-listing-country__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hb-muted); }
.adriatic-listing-country__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; text-decoration: none; }
.adriatic-listing-country__sub { font-size: 13px; color: var(--hb-muted); text-decoration: none; }
.adriatic-listing-country__sub:hover { color: var(--hb-teal); }

/* ===================================================== Contact card */
.np-contact {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
    box-shadow: var(--hb-shadow);
}

@media (min-width: 761px) { .np-contact { padding: 20px; } }
@media (min-width: 1025px) { .np-contact { position: sticky; top: 96px; } }

/* One order for the card (was set three times in three files). */
.np-contact > * { order: 10; }
.np-contact__price { order: 1; }
.np-contact__cta { order: 2; }
.np-contact__note { order: 3; }
.np-contact__host { order: 4; }
.np-contact__address { order: 5; }
.np-contact__map { order: 6; }
.np-contact__maplink { order: 7; }
.np-contact__phone { order: 8; }
.np-contact__trust { order: 9; }

.np-contact__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--hb-line); }
.np-contact__amount { display: flex; align-items: baseline; gap: 5px; }
.np-contact__amount span { color: var(--hb-muted); font-size: 13px; }
.np-contact__amount strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--hb-ink); }
.np-contact__week { color: var(--hb-muted); font-size: 13px; }
.np-contact__badge { margin-left: auto; padding: 4px 9px; border-radius: var(--hb-pill); background: var(--hb-teal-soft); color: var(--hb-teal-dark); font-size: 11px; font-weight: 700; white-space: nowrap; }

.np-contact__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    padding: 0 16px;
    font-size: 16px;
    text-decoration: none;
}

.np-contact__note { margin: 8px 0 14px; font-size: 13px; color: var(--hb-muted); text-align: center; }

.np-contact__host { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.np-contact__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--hb-teal); color: #fff; font-size: 18px; font-weight: 800; }
.np-contact__hosttext strong { display: block; color: var(--hb-ink); font-size: 15px; }
.np-contact__hosttext small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--hb-muted); font-size: 12px; }
.np-contact__hosttext small svg { flex: 0 0 auto; color: var(--hb-success); }

.np-contact__address,
a.np-contact__address { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; color: var(--hb-ink); font-size: 14px; text-decoration: none; }
a.np-contact__address:hover span { text-decoration: underline; }
.np-contact__address svg { flex: 0 0 auto; color: var(--hb-teal); }

.np-contact__map { position: relative; z-index: 0; height: 170px; margin: 4px 0 6px; overflow: hidden; background: var(--hb-sand-2); border: 1px solid var(--hb-line); border-radius: var(--hb-r-btn); }
.np-contact__map .leaflet-container { width: 100%; height: 100%; }
.np-contact__maplink { margin-bottom: 12px; font-size: 13px; font-weight: 600; text-decoration: none; }

.np-contact__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-ink);
    border-radius: var(--hb-r-btn);
    color: var(--hb-ink);
    font: 600 16px/1 var(--hb-font-body);
    cursor: pointer;
    transition: background-color .15s ease;
}

.np-contact__phone svg { color: var(--hb-teal); }
.np-contact__phone:hover { background: var(--hb-sand); }

.np-contact__trust { display: grid; gap: 9px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hb-line); list-style: none; }
.np-contact__trust li { display: flex; align-items: flex-start; gap: 8px; color: var(--hb-muted); font-size: 13px; line-height: 1.4; }
.np-contact__trust svg { flex: 0 0 auto; margin-top: 1px; color: var(--hb-success); }

/* Fluent Forms booking enquiry */
.np-booking-column .fluentform .ff-el-group { margin-bottom: 14px; }
.np-booking-column .fluentform .ff-el-input--label { margin-bottom: 5px; }
.np-booking-column .fluentform .ff-el-input--label label { font-size: 13px; font-weight: 600; color: var(--hb-ink); }

.np-booking-column .fluentform .ff-el-form-control {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line-2);
    border-radius: var(--hb-r-sm);
    color: var(--hb-ink);
    font-size: 16px;
    line-height: 1.4;
}

.np-booking-column .fluentform .ff-el-form-control:focus { border-color: var(--hb-teal); box-shadow: var(--hb-focus); outline: none; }
.np-booking-column .fluentform textarea.ff-el-form-control { min-height: 110px; }
.np-booking-column .fluentform .ff-btn-submit { width: 100%; min-height: 52px; padding: 0 18px; font-size: 16px; cursor: pointer; }
.np-booking-column .fluentform .ff-el-tc { margin-top: 4px; }
.np-booking-column .fluentform .ff_t_c { font-size: 12px; line-height: 1.5; color: var(--hb-muted); }

/* ============================ Mobile booking panel (slides in from right) */
.np-side-tab,
.np-side-overlay,
.np-side-close { display: none; }

@media (max-width: 1024px) {
    .np-side-overlay {
        position: fixed;
        inset: 0;
        z-index: 1180;
        display: block;
        background: rgba(16, 44, 62, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    body.np-side-open .np-side-overlay { opacity: 1; pointer-events: auto; }

    .np-side-tab {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1190;
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        padding: 0;
        border: 0;
        border-radius: var(--hb-r-btn) 0 0 var(--hb-r-btn);
        background: var(--hb-accent);
        color: #fff;
        box-shadow: var(--hb-shadow);
        cursor: pointer;
        transform: translateY(-50%);
    }

    .np-booking-column {
        position: fixed !important;
        top: 88px;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 1200;
        width: min(92vw, 430px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--hb-sand);
        box-shadow: var(--hb-shadow-lg);
        visibility: hidden;
        transform: translateX(104%);
        transition: transform .28s ease, visibility .28s ease;
    }

    body.np-side-open .np-booking-column { visibility: visible; transform: translateX(0); }
    body.np-side-open { overflow: hidden; }
    body.np-side-open .np-side-tab,
    body.np-side-open .np-mobile-cta { display: none !important; }

    /* Top padding leaves a row for the close button so it never covers the CTA. */
    .np-booking-column .elementor-widget-wrap { max-width: none !important; padding: 62px 14px 40px !important; }

    .np-side-close {
        position: fixed;
        top: 98px;
        right: 10px;
        z-index: 1210;
        display: grid;
        place-items: center;
        width: var(--hb-tap);
        height: var(--hb-tap);
        border: 1px solid var(--hb-line);
        border-radius: 50%;
        background: var(--hb-surface);
        color: var(--hb-ink);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    body:not(.np-side-open) .np-side-close { display: none; }
}

/* ================================================= Maps and markers */
.leaflet-container { font-family: var(--hb-font-body); }
.leaflet-control-zoom a { color: var(--hb-ink) !important; }
.leaflet-control-attribution { font-size: 10px !important; }

.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: transparent !important; }

.marker-cluster div,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    display: grid;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    margin: 2px !important;
    border: 3px solid #fff;
    border-radius: 50% !important;
    background: var(--hb-teal) !important;
    color: #fff !important;
    font: 700 14px/1 var(--hb-font-body);
    box-shadow: 0 4px 14px rgba(16, 44, 62, .3) !important;
}

.marker-cluster span { line-height: 1; }

.np-map-pin-wrap { background: transparent; border: 0; }
.np-map-pin { display: block; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; background: var(--hb-teal); box-shadow: 0 4px 12px rgba(16, 44, 62, .4); }
.np-map-pin--me { background: var(--hb-deep) !important; box-shadow: 0 0 0 6px rgba(29, 119, 113, .25) !important; }

/* Map price labels (Airbnb style): one clean white pill with the price,
   navy when hovered or opened. Listivo's own label box is flattened. */
.listivo-marker { transform: translate(-50%, -50%) !important; }

.listivo-marker__inner {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 28px !important;
    padding: 0 10px !important;
    background: var(--hb-surface) !important;
    border: 1px solid rgba(16, 44, 62, .12) !important;
    border-radius: var(--hb-pill) !important;
    box-shadow: 0 1px 2px rgba(16, 44, 62, .16), 0 4px 12px rgba(16, 44, 62, .14) !important;
    color: var(--hb-ink) !important;
    font: 700 13px/1 var(--hb-font-body) !important;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.listivo-marker__label {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.listivo-marker__icon { display: none !important; }

.leaflet-marker-icon:hover,
.leaflet-marker-icon:focus-visible { z-index: 9000 !important; }

.listivo-marker:hover .listivo-marker__inner,
.listivo-marker--active .listivo-marker__inner,
.listivo-marker--clicked .listivo-marker__inner {
    transform: scale(1.08);
    background: var(--hb-deep) !important;
    border-color: var(--hb-deep) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(16, 44, 62, .3) !important;
}

[data-theme="dark"] .listivo-marker__inner { border-color: rgba(255, 255, 255, .14) !important; }
[data-theme="dark"] .listivo-marker:hover .listivo-marker__inner,
[data-theme="dark"] .listivo-marker--active .listivo-marker__inner,
[data-theme="dark"] .listivo-marker--clicked .listivo-marker__inner { background: var(--hb-accent) !important; border-color: var(--hb-accent) !important; }

.np-mapcompare--single .np-mapcompare__canvas { height: 300px; overflow: hidden; border-radius: var(--hb-r); }
.np-mapcompare--single figcaption { margin-top: 10px; font-size: 14px; color: var(--hb-muted); }
.np-mapcompare--single .np-mapcompare__sub { margin: 4px 0 16px; color: var(--hb-muted); }

@media (min-width: 768px) {
    .np-mapcompare--single .np-mapcompare__canvas { height: 420px; }
}

/* ============================================ Search results page */
.listivo-search-results__title { font-weight: 800; letter-spacing: -.03em; }
.listivo-search-results__views { display: none !important; }

.post-type-archive-listivo_listing .listivo-main-search-form { padding: 18px 0 !important; }
.post-type-archive-listivo_listing .listivo-main-search-form__primary,
.post-type-archive-listivo_listing .listivo-main-search-form__secondary { gap: 10px 14px !important; }
.post-type-archive-listivo_listing .listivo-search-form-field { margin-bottom: 0 !important; }
.post-type-archive-listivo_listing .listivo-main-search-form .listivo-select-v2,
.post-type-archive-listivo_listing .listivo-main-search-form input { min-height: var(--hb-tap); padding: 10px 12px !important; border-radius: var(--hb-r-sm) !important; font-size: 16px !important; }
.post-type-archive-listivo_listing .listivo-main-search-form .listivo-select-v2__placeholder { padding-right: 28px !important; font-size: 15px !important; }
.post-type-archive-listivo_listing .listivo-main-search-form .listivo-button { height: var(--hb-tap) !important; font-size: 15px !important; }

.listivo-main-search-form--map .listivo-container { flex-wrap: wrap; }
.listivo-main-search-form--map .listivo-main-search-form__primary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.listivo-main-search-form--map .listivo-main-search-form__primary > *:first-child { grid-column: 1 / -1; }

.np-filters-btn {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: var(--hb-tap);
    margin: 12px 0 0;
    padding: 0 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line-2);
    border-radius: var(--hb-pill);
    color: var(--hb-ink);
    font: 600 14px/1 var(--hb-font-body);
    cursor: pointer;
}

.np-filters-btn:hover { border-color: var(--hb-ink); }
.np-filters-btn b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--hb-pill); background: var(--hb-teal); color: #fff; font-size: 12px; }

.np-viewswitch { display: none; }
.np-dialog__head,
.np-dialog__foot { display: none !important; }

@media (min-width: 1024px) {
    .listivo-main-search-form--map .listivo-main-search-form__primary { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
    .listivo-main-search-form--map .listivo-main-search-form__primary > *:first-child { grid-column: auto; }
    .listivo-main-search-form--map.np-filters-closed .listivo-main-search-form__secondary-wrapper { display: none !important; }
    .np-filters-btn { display: inline-flex; }
}

@media (min-width: 1025px) {
    .listivo-map-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-areas: "filters filters" "results map";
        align-items: start;
    }

    .listivo-map-search__left { display: contents !important; }

    .listivo-map-search__left > .listivo-main-search-form {
        position: relative;
        z-index: 500;
        grid-area: filters;
        width: auto !important;
        padding: 16px 24px !important;
        background: var(--hb-surface);
        border-bottom: 1px solid var(--hb-line);
    }

    .listivo-map-search__left > .listivo-main-search-form .listivo-main-search-form__primary-wrapper { margin: 0 !important; padding: 0 !important; background: transparent !important; }
    .listivo-map-search__left > .listivo-main-search-form .listivo-main-search-form__primary-wrapper > .listivo-container { display: flex !important; align-items: center; gap: 12px; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .listivo-map-search__left > .listivo-main-search-form .listivo-main-search-form__primary { flex: 0 1 760px; margin: 0 !important; }
    .listivo-map-search__left > .listivo-main-search-form .np-filters-btn { flex: 0 0 auto; height: 48px; margin: 0 !important; }
    .listivo-map-search__left > .listivo-container { grid-area: results; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 24px !important; }

    body .listivo-map-search .listivo-map-search__right {
        grid-area: map;
        align-self: stretch;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }

    .listivo-map-search__map,
    .listivo-map-results,
    .listivo-map-results__map { width: 100% !important; }

    .listivo-map-search__map { position: sticky !important; top: 0; height: 100vh !important; }
    .admin-bar .listivo-map-search__map { top: 32px; height: calc(100vh - 32px) !important; }

    .listivo-search-results--map { padding: 20px 0 40px !important; }
    .listivo-search-results__description { display: none !important; }
    .listivo-search-results__row { min-height: 0 !important; margin: 0 0 16px !important; padding: 0 !important; align-items: center; }
    .listivo-search-results--map .listivo-listing-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Filters as a centred dialog */
    .listivo-main-search-form--map .listivo-main-search-form__secondary-wrapper {
        position: fixed !important;
        top: 50%;
        left: 50%;
        z-index: 100000;
        width: min(720px, calc(100vw - 48px));
        max-height: calc(100vh - 80px);
        margin: 0 !important;
        padding: 0 !important;
        overflow: auto;
        background: var(--hb-surface);
        border-radius: var(--hb-r-lg);
        box-shadow: 0 0 0 100vmax rgba(16, 44, 62, .45), var(--hb-shadow-lg);
        transform: translate(-50%, -50%);
    }

    .listivo-main-search-form--map .listivo-main-search-form__secondary-wrapper > .listivo-container { max-width: none !important; margin: 0 !important; padding: 20px 24px !important; }
    .listivo-main-search-form--map .listivo-main-search-form__secondary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 16px !important; }

    .np-dialog__head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 16px 56px;
        background: var(--hb-surface);
        border-bottom: 1px solid var(--hb-line);
        font: 700 16px/1.2 var(--hb-font-head);
        color: var(--hb-ink);
    }

    .np-dialog__close { position: absolute; top: 50%; left: 14px; display: flex; align-items: center; justify-content: center; width: var(--hb-tap); height: var(--hb-tap); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hb-ink); cursor: pointer; transform: translateY(-50%); }
    .np-dialog__close:hover { background: var(--hb-sand); }
    .np-dialog__foot { position: sticky; bottom: 0; z-index: 2; display: flex !important; justify-content: flex-end; padding: 14px 24px; background: var(--hb-surface); border-top: 1px solid var(--hb-line); }
    .np-dialog__show { min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--hb-r-btn); background: var(--hb-accent); color: #fff; font: 600 15px/1 var(--hb-font-body); cursor: pointer; }
    .np-dialog__show:hover { background: var(--hb-accent-hover); }
    html.np-dialog-open { overflow: hidden; }

    /* Archive layout and list/map toggle */
    .post-type-archive-listivo_listing .listivo-map-search__left { width: 50% !important; }
    .post-type-archive-listivo_listing .listivo-map-search__right { width: 50% !important; }

    .np-viewswitch { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 24px 0; background: var(--hb-sand); }

    .np-viewswitch button {
        min-height: 40px;
        padding: 0 14px;
        background: var(--hb-surface);
        border: 1px solid var(--hb-line);
        border-radius: var(--hb-r-sm);
        color: var(--hb-ink);
        font: 600 13px/1 var(--hb-font-body);
        cursor: pointer;
    }

    .np-viewswitch button.is-active { background: var(--hb-deep); border-color: var(--hb-deep); color: #fff; }

    .post-type-archive-listivo_listing .np-view-list .listivo-map-search__right { display: none !important; }
    .post-type-archive-listivo_listing .np-view-list .listivo-map-search__left { width: 100% !important; }
    .post-type-archive-listivo_listing .np-view-map .listivo-map-search__left { display: none !important; }
    .post-type-archive-listivo_listing .np-view-map .listivo-map-search__right { display: block !important; width: 100% !important; }
}

@media (min-width: 1280px) {
    .listivo-search-results--map .listivo-listing-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px 16px !important; }
}

/* ================================================ Host form (panel) */
.listivo-panel-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }
.listivo-panel-form__fields > * { grid-column: 1 / -1; min-width: 0; }

.listivo-panel-form__fields > .listivo_11021,
.listivo-panel-form__fields > .listivo_5462,
.listivo-panel-form__fields > .listivo_5463,
.listivo-panel-form__fields > .listivo_11118,
.listivo-panel-form__fields > .listivo_11119,
.listivo-panel-form__fields > .listivo_11115,
.listivo-panel-form__fields > .listivo_11116 { grid-column: auto; }

@media (min-width: 600px) {
    .listivo-panel-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 18px !important; }
    .listivo-panel-form__fields > * { grid-column: auto; }
    .listivo-panel-form__fields > .listivo-panel-form__single-column { grid-column: 1 / -1; }
}

@media (min-width: 1024px) { .listivo-panel-form__fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1280px) { .listivo-panel-form__fields { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

.listivo-panel-form .listivo-field-group__label { display: flex; align-items: center; gap: 6px; min-height: 0 !important; margin: 0 0 6px !important; font: 600 13px/1.3 var(--hb-font-body) !important; color: var(--hb-ink) !important; }
.listivo-panel-form .listivo-input-v2,
.listivo-panel-form .listivo-field-group__field { min-height: 0 !important; }

.listivo-panel-form .listivo-field-group,
.listivo-panel-form .listivo-field-group__field,
.listivo-panel-form .listivo-input-v2,
.listivo-panel-form .listivo-select-v2,
.listivo-panel-form .listivo-input-v2 input { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

.listivo-panel-form .listivo-input-v2 input { height: 48px !important; min-height: 48px !important; padding: 0 34px 0 12px !important; border-radius: var(--hb-r-sm) !important; font: 500 16px/48px var(--hb-font-body) !important; }
.listivo-panel-form .listivo-select-v2 { display: flex; align-items: center; height: 48px !important; min-height: 48px !important; padding: 0 12px !important; border-radius: var(--hb-r-sm) !important; font: 500 16px/48px var(--hb-font-body) !important; }
.listivo-panel-form .listivo-input-v2__clear,
.listivo-panel-form .listivo-select-v2__clear,
.listivo-panel-form .listivo-select-v2__arrow { top: 0 !important; height: 48px !important; }
.listivo-panel-form .listivo-input-v2__after,
.listivo-panel-form [class*=input-v2__text-after] { font-size: 13px !important; }
.listivo-panel-form textarea { padding: 12px !important; border-radius: var(--hb-r-sm) !important; font: 400 16px/1.5 var(--hb-font-body) !important; }
.listivo-panel-form input::placeholder,
.listivo-panel-form textarea::placeholder { color: var(--hb-faint) !important; opacity: 1; }
.listivo-panel-form-label__text,
.listivo-panel-form h3 { font: 700 18px/1.3 var(--hb-font-head) !important; letter-spacing: -.01em; }
.listivo-panel-form-label { margin-top: 8px !important; margin-bottom: 12px !important; }
.listivo-panel-form .listivo-field-hint__icon { transform: scale(.85); }
.listivo-panel-form__multiple-options { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px !important; }
.listivo-panel-form__checkbox-option { margin: 0 !important; padding: 6px 0 !important; font-size: 14px !important; }
.listivo-panel-section__label { font: 700 24px/1.2 var(--hb-font-head) !important; }
.listivo-panel-section { padding-top: 24px !important; }

.np-loc-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hb-tap);
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line-2);
    border-radius: var(--hb-r);
    color: var(--hb-ink) !important;
    font: 600 15px/1.3 var(--hb-font-body);
    text-decoration: none !important;
}

.np-loc-banner svg { flex: 0 0 auto; color: var(--hb-teal); }
.np-loc-banner:hover { border-color: var(--hb-ink); }
.np-loc-banner.is-missing { background: var(--hb-warn-bg); border-color: var(--hb-warn-line); }
.np-loc-banner.is-missing svg { color: var(--hb-warn-ink); }

/* Import form */
.hb-import { max-width: 760px; margin: 0 auto; padding: 20px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); box-shadow: var(--hb-shadow-sm); }
.hb-import__label { display: block; margin-bottom: 12px; font: 700 18px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.hb-import__row { display: flex; flex-direction: column; gap: 10px; }
.hb-import__input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; background: var(--hb-sand); border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-btn); color: var(--hb-ink); font: 400 16px/1 var(--hb-font-body); }
.hb-import__input:focus { outline: none; border-color: var(--hb-teal); box-shadow: var(--hb-focus); }
.hb-import__submit { width: 100%; height: 52px; padding: 0 26px; white-space: nowrap; }
.hb-import__hint { margin: 14px 0 0; color: var(--hb-muted); font-size: 13px; }
.hb-import__notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--hb-r-btn); background: var(--hb-sand); color: var(--hb-ink); font-size: 14px; }
.hb-import__notice--ok { background: var(--hb-teal-soft); color: var(--hb-teal-dark); }
.hb-import__notice--error { background: var(--hb-terracotta-soft); color: var(--hb-accent-hover); }

@media (min-width: 641px) {
    .hb-import { padding: 26px; }
    .hb-import__row { flex-direction: row; }
    .hb-import__submit { width: auto; }
}

/* ======================================================= Content pages */
.np-page { max-width: 720px; margin: 0 auto; color: var(--hb-ink); font: 400 16px/1.7 var(--hb-font-body); }
.np-page p, .np-page li { font-size: 16px; line-height: 1.7; }
.np-page__lead { margin: 0 0 28px; font-size: 19px; line-height: 1.5; color: var(--hb-ink); }
.np-page h2 { margin: 36px 0 12px; font: 700 22px/1.3 var(--hb-font-head); letter-spacing: -.01em; }
.np-page p { margin: 0 0 14px; color: var(--hb-ink-2); }
.np-page__btn { display: inline-flex; align-items: center; min-height: 48px; margin-right: 16px; padding: 0 22px; text-decoration: none; }
.np-page__link { font-weight: 600; }

.np-steps,
.np-ticks,
.np-page .np-steps,
.np-page .np-ticks { margin: 0; padding: 0; list-style: none; }

.np-steps { counter-reset: s; }
.np-steps li { position: relative; padding: 0 0 16px 48px; color: var(--hb-ink-2); counter-increment: s; }
.np-steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--hb-teal); color: #fff; font: 700 15px/32px var(--hb-font-body); text-align: center; }
.np-ticks li { position: relative; padding: 0 0 12px 30px; color: var(--hb-ink-2); }
.np-ticks li::before { content: ""; position: absolute; top: 7px; left: 4px; width: 12px; height: 7px; border-left: 2.5px solid var(--hb-teal); border-bottom: 2.5px solid var(--hb-teal); transform: rotate(-45deg); }
.np-steps li::marker,
.np-ticks li::marker { content: ''; }

.np-page details { padding: 4px 0; border-bottom: 1px solid var(--hb-line); }
.np-page summary { position: relative; min-height: var(--hb-tap); padding: 12px 32px 12px 0; list-style: none; color: var(--hb-ink); font: 600 16px/1.4 var(--hb-font-body); cursor: pointer; }
.np-page summary::-webkit-details-marker { display: none; }
.np-page summary::after { content: ""; position: absolute; top: 20px; right: 6px; width: 9px; height: 9px; border-right: 2px solid var(--hb-ink); border-bottom: 2px solid var(--hb-ink); transform: rotate(45deg); transition: transform .2s ease; }
.np-page details[open] summary::after { top: 24px; transform: rotate(-135deg); }
.np-page details p { margin: 0 0 16px; }

@media (min-width: 768px) { .np-page__lead { font-size: 20px; } }

/* Sits below the login card, on top of the page photo: give it a surface. */
.np-register-terms { max-width: 460px; margin: 14px auto 0; padding: 12px 16px; background: var(--hb-surface); border-radius: var(--hb-r-btn); color: var(--hb-muted); font-size: 13px; line-height: 1.6; text-align: center; }
.np-register-terms a { font-weight: 600; text-decoration: none; }

/* Country landing pages */
.adriatic-hero-copy { max-width: 760px; }
.adriatic-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.adriatic-fact-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.adriatic-fact-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--hb-line); color: var(--hb-ink); font-size: 14px; line-height: 1.5; }
.adriatic-fact-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.adriatic-fact-list span { color: var(--hb-muted); font-weight: 600; }

@media (min-width: 641px) { .adriatic-fact-list li { grid-template-columns: 132px 1fr; gap: 12px; } }

.adriatic-country-page .elementor-accordion .elementor-accordion-item { margin-bottom: 10px; overflow: hidden; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); }
.adriatic-country-page .elementor-accordion .elementor-tab-title { padding: 18px 20px; color: var(--hb-ink); font-weight: 600; }
.adriatic-country-page .elementor-accordion .elementor-tab-title.elementor-active { color: var(--hb-teal); }
.adriatic-country-page .elementor-accordion .elementor-tab-content { padding: 4px 20px 20px; border-top: 1px solid var(--hb-line); color: var(--hb-ink-2); font-size: 15px; line-height: 1.7; }
.adriatic-country-page .elementor-accordion .elementor-accordion-icon { color: var(--hb-teal); }

/* Blog post body */
.listivo-single-post__content { font-size: 17px; line-height: 1.7; color: var(--hb-ink-2); }
.listivo-single-post__content h2 { margin: 1.6em 0 .5em; font: 800 clamp(22px, 3vw, 28px)/1.2 var(--hb-font-head); color: var(--hb-ink); }
.listivo-single-post__content h3 { margin: 1.3em 0 .35em; font: 700 18px/1.3 var(--hb-font-head); color: var(--hb-ink); }
.listivo-single-post__content ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.listivo-single-post__content li { margin-bottom: .45em; }
.listivo-single-post__content a { color: var(--hb-teal-dark); text-decoration: underline; text-underline-offset: 2px; }

/* "Plan your trip" guide cards on the country pages */
.hb-guides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 8px; }
@media (min-width: 700px) { .hb-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.hb-guide {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    padding: 22px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
    color: var(--hb-ink) !important;
    text-decoration: none !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hb-guide:hover { border-color: var(--hb-teal); transform: translateY(-2px); box-shadow: var(--hb-shadow); }
.hb-guide__label { color: var(--hb-teal-dark); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hb-guide__title { font: 700 20px/1.25 var(--hb-font-head); }
.hb-guide__more { margin-top: auto; color: var(--hb-accent); font-weight: 700; font-size: 15px; }

/* Newsletter block (blog template) */
.np-newsletter { max-width: 560px; margin: 0 auto; text-align: center; }
.np-newsletter h3 { margin: 0 0 6px; font: 800 24px/1.2 var(--hb-font-head); color: var(--hb-ink); }
.np-newsletter p { margin: 0 0 18px; color: var(--hb-muted); font-size: 15px; }
.np-newsletter .ff-el-form-control { min-height: 48px; border-radius: var(--hb-r-sm); font-size: 16px; }

/* Photo credits */
.np-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.np-credit { display: flex; align-items: center; gap: 14px; padding: 10px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r-btn); }
.np-credit img { flex: 0 0 auto; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.np-credit__body { color: var(--hb-muted); font-size: 13px; line-height: 1.5; }

/* ============================================================ Home hero
   Moved from the plugin's hero.css; markup comes from [adriatic_hero].
   Mobile first: one compact screen with the search button above the fold. */
.np-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 28px 0 24px;
    color: #fff;
    font-family: var(--hb-font-body);
}

.np-hero__media,
.np-hero__shade { position: absolute; inset: 0; }
.np-hero__media { z-index: 0; overflow: hidden; }
.np-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

.np-hero__shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(16, 44, 62, .62) 0%, rgba(16, 44, 62, .30) 34%, rgba(16, 44, 62, .45) 64%, rgba(16, 44, 62, .82) 100%);
}

.np-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--hb-gutter); }
.np-hero__copy { max-width: 760px; }

.np-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--hb-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.np-hero__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .65); }

.np-hero__title {
    margin: 16px 0 0;
    color: #fff;
    font: 800 clamp(30px, 8.4vw, 64px)/1.04 var(--hb-font-head);
    letter-spacing: -.035em;
    text-shadow: 0 6px 28px rgba(16, 44, 62, .35);
}

/* The tagline sits under the headline at a smaller size, so the H1 stays
   two to three lines on a phone instead of five. */
.np-hero__accent {
    display: block;
    margin-top: 8px;
    color: #FBE9E3; /* always on the photo, so not a theme token */
    font-size: .62em;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.np-hero__sub {
    max-width: 600px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.55;
    text-shadow: 0 2px 12px rgba(16, 44, 62, .35);
}

/* Search: one white surface, hairline-divided fields */
.np-search {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 20px;
    padding: 6px;
    background: var(--hb-surface);
    border-radius: var(--hb-r-lg);
    box-shadow: var(--hb-shadow-lg);
}

.np-search__field {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
    border: 0;
    border-radius: var(--hb-r-btn);
    transition: background-color .15s ease;
}

.np-search__field + .np-search__field { border-top: 1px solid var(--hb-line); border-radius: 0; }
.np-search__field:hover,
.np-search__field.is-open { background: var(--hb-sand); }

.np-search__trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 56px;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    border-radius: var(--hb-r-btn);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.np-search__trigger--input { cursor: text; }

.np-search__label {
    color: var(--hb-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.np-search__value,
.np-search__select,
.np-search__input {
    max-width: 100%;
    color: var(--hb-ink);
    font: 600 16px/1.3 var(--hb-font-body);
}

.np-search__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.np-search__selectwrap { position: relative; display: block; width: 100%; }
.np-search__selectwrap svg { position: absolute; top: 50%; right: 0; color: var(--hb-muted); pointer-events: none; transform: translateY(-50%); }

.np-search__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0 22px 0 0;
    background: transparent;
    border: 0;
    text-overflow: ellipsis;
    cursor: pointer;
}

.np-search__input { width: 100%; padding: 0; background: transparent; border: 0; outline: none; }
.np-search__input::placeholder { color: var(--hb-faint); font-weight: 500; }
.np-search__select:focus { outline: none; }
.np-search__field:focus-within { box-shadow: inset 0 0 0 2px var(--hb-teal); border-radius: var(--hb-r-btn); }

.np-search__submit {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    margin: 6px 0 0;
    padding: 0 24px;
    background: var(--hb-accent);
    border: 0;
    border-radius: var(--hb-r-btn);
    color: #fff;
    font: 700 16px/1 var(--hb-font-body);
    cursor: pointer;
    transition: background-color .15s ease;
}

.np-search__submit:hover { background: var(--hb-accent-hover); }

.np-search__filter,
.np-search__map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin: 6px 0 0;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: var(--hb-r-btn);
    color: var(--hb-teal-dark);
    font: 600 15px/1 var(--hb-font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.np-search__filter { grid-column: 1 / 2; }
.np-search__map { grid-column: 2 / 3; }
.np-search__filter:hover,
.np-search__map:hover { background: var(--hb-teal-soft); color: var(--hb-teal-dark); }

/* Dropdowns: bottom sheets on a phone */
.np-search__panel {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 1000;
    width: auto;
    max-height: 78vh;
    padding: 10px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-lg);
    box-shadow: 0 30px 80px rgba(16, 44, 62, .45);
    color: var(--hb-ink);
    text-align: left;
    cursor: default;
}

.np-search__panel::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: 2px auto 8px;
    border-radius: var(--hb-pill);
    background: var(--hb-line-2);
}

.np-search__panel[hidden],
.np-dest__view[hidden],
.np-dest__option[hidden] { display: none !important; }

.np-dest__search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 4px 8px;
    padding: 0 12px;
    min-height: var(--hb-tap);
    background: var(--hb-sand);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-sm);
    color: var(--hb-muted);
}

.np-dest__search input { width: 100%; background: transparent; border: 0; color: var(--hb-ink); font: 400 16px/1.2 var(--hb-font-body); outline: none; }

.np-dest__body { max-height: calc(78vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.np-dest__option {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: var(--hb-tap);
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--hb-r-sm);
    color: var(--hb-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.np-dest__option:hover { background: var(--hb-sand); }

.np-dest__code {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--hb-teal-soft);
    color: var(--hb-teal-dark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.np-dest__code--blue { background: var(--hb-teal); color: #fff; }
.np-dest__code--light { background: var(--hb-sand); color: var(--hb-muted); }

.np-dest__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.np-dest__text strong { overflow: hidden; color: var(--hb-ink); font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.np-dest__text small { overflow: hidden; color: var(--hb-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.np-dest__chev { flex: 0 0 auto; margin-left: auto; color: var(--hb-faint); }

.np-dest__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 2px 0 4px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--hb-teal-dark);
    font: 700 13px/1 var(--hb-font-body);
    cursor: pointer;
}

.np-dest__back:hover { background: var(--hb-sand); }
.np-dest__group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--hb-line); }

.np-dest__region {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px 4px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--hb-ink);
    font: 700 14px/1.3 var(--hb-font-body);
    text-align: left;
    cursor: pointer;
}

.np-dest__region small { color: var(--hb-faint); font-size: 12px; font-weight: 600; }
.np-dest__towns { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }

.np-dest__town {
    min-height: 36px;
    padding: 0 12px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-pill);
    color: var(--hb-ink-2);
    font: 500 13px/1 var(--hb-font-body);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.np-dest__town:hover { background: var(--hb-teal-soft); border-color: var(--hb-teal); color: var(--hb-teal-dark); }

/* Guests popover */
.np-guests { padding: 16px; }
.np-guests__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-guests__copy { display: flex; flex-direction: column; gap: 2px; }
.np-guests__copy strong { color: var(--hb-ink); font-size: 15px; }
.np-guests__copy span { color: var(--hb-muted); font-size: 13px; }
.np-stepper { display: flex; align-items: center; gap: 12px; }

.np-stepper button {
    display: grid;
    place-items: center;
    width: var(--hb-tap);
    height: var(--hb-tap);
    background: var(--hb-surface);
    border: 1px solid var(--hb-line-2);
    border-radius: 50%;
    color: var(--hb-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.np-stepper button:hover { border-color: var(--hb-teal); color: var(--hb-teal); }
.np-stepper span { min-width: 18px; color: var(--hb-ink); font-weight: 700; text-align: center; }
.np-guests__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hb-line); }
.np-guests__clear { min-height: var(--hb-tap); background: transparent; border: 0; color: var(--hb-muted); font: 600 14px/1 var(--hb-font-body); text-decoration: underline; cursor: pointer; }
.np-guests__done { min-height: var(--hb-tap); padding: 0 18px; background: var(--hb-accent); border: 0; border-radius: var(--hb-r-sm); color: #fff; font: 700 14px/1 var(--hb-font-body); cursor: pointer; }

/* Popular places: one swipeable row on a phone */
.np-hero__foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 1000px; margin-top: 16px; }
.np-hero__popular-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.np-hero__popular { flex: 0 0 auto; color: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 600; }

.np-hero__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    margin-right: calc(var(--hb-gutter) * -1);
    padding-right: var(--hb-gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.np-hero__chips::-webkit-scrollbar { display: none; }

.np-hero__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--hb-pill);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.np-hero__chip:hover { background: #fff; border-color: #fff; color: var(--hb-ink); }
.np-hero__note { color: rgba(255, 255, 255, .82); font-size: 12.5px; }

@media (max-width: 359px) {
    .np-hero__sub { display: none; }
}

/* Tablet */
@media (min-width: 641px) {
    .np-hero { padding: 56px 0 40px; }
    .np-hero__eyebrow { padding: 8px 14px; font-size: 12.5px; }
    .np-hero__title { margin-top: 20px; }
    .np-hero__sub { font-size: 17px; }
    .np-search { margin-top: 28px; padding: 8px; }

    .np-search__panel {
        position: absolute;
        top: calc(100% + 10px);
        right: auto;
        bottom: auto;
        left: 0;
        z-index: 40;
        width: min(420px, calc(100vw - 48px));
        max-height: none;
        padding: 8px;
        border-radius: var(--hb-r);
        box-shadow: var(--hb-shadow-lg);
    }

    .np-search__panel::before { display: none; }
    .np-dest__body { max-height: 342px; }
    .np-guests { right: 0; left: auto; width: min(340px, calc(100vw - 48px)); }

    .np-hero__foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; margin-top: 22px; }
    .np-hero__chips { flex-wrap: wrap; margin-right: 0; padding-right: 0; overflow: visible; }
}

/* Desktop: one floating bar */
@media (min-width: 1025px) {
    .np-hero { align-items: center; min-height: clamp(600px, 78vh, 780px); padding: 72px 0 64px; }
    .np-hero__title { max-width: 980px; font-size: clamp(44px, 4.4vw, 62px); }
    .np-hero__accent { margin-top: 10px; font-size: .58em; }

    .np-search {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, 1.3fr) auto auto auto;
        align-items: center;
        max-width: 1040px;
        margin-top: 34px;
        border-radius: 20px;
    }

    .np-search__field,
    .np-search__submit,
    .np-search__filter,
    .np-search__map { grid-column: auto; }

    .np-search__field + .np-search__field { border-top: 0; border-left: 1px solid var(--hb-line); border-radius: var(--hb-r-btn); }
    .np-search__trigger { min-height: 60px; padding: 10px 18px; }
    .np-search__submit { height: 56px; margin: 0 0 0 6px; padding: 0 26px; }
    .np-search__filter,
    .np-search__map { height: 56px; margin: 0 0 0 4px; padding: 0 14px; }
}

/* ==================================================== Host CTA band */
.np-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 1180px;
    margin: 0 6px; /* the Elementor column already adds 10px */
    padding: 32px 22px;
    background: var(--hb-deep);
    background-image: radial-gradient(120% 140% at 100% 0%, rgba(29, 119, 113, .55) 0%, rgba(16, 44, 62, 0) 60%);
    border-radius: var(--hb-r-lg);
    color: #fff;
}

.np-cta__eyebrow { display: inline-block; margin-bottom: 12px; padding: 6px 12px; border-radius: var(--hb-pill); background: rgba(255, 255, 255, .12); color: #fff; font: 600 13px/1 var(--hb-font-body); }
.np-cta__title { margin: 0 0 10px !important; color: #fff !important; font: 700 24px/1.2 var(--hb-font-head) !important; letter-spacing: -.01em; }
.np-cta p { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .84) !important; font: 400 16px/1.6 var(--hb-font-body); }
.np-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; flex: 0 0 auto; }

.np-cta__btn {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--hb-r-btn);
    background: var(--hb-accent);
    color: #fff !important;
    font: 700 16px/1 var(--hb-font-body);
    text-decoration: none !important;
    transition: background-color .18s ease;
}

.np-cta__btn:hover { background: var(--hb-accent-hover); }

.np-cta__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--hb-tap);
    color: #fff !important;
    font: 600 15px/1 var(--hb-font-body);
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

@media (min-width: 768px) {
    .np-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; margin: 0 auto; padding: 44px 48px; }
    .np-cta__title { font-size: 30px !important; }
}

/* ============================================================ Footer */
.listivo-copyrights { background: var(--hb-deep); color: rgba(255, 255, 255, .72); }

/* Phone: link lists sit two columns side by side (set in Elementor);
   keep each row a 44px tap target instead of Listivo's 76px. */
@media (max-width: 767px) {
    .listivo-vertical-link-list .listivo-simple-menu > li { margin: 0 !important; padding: 0 !important; }
    .listivo-vertical-link-list .listivo-simple-menu > li > a {
        display: flex !important;
        align-items: center;
        min-height: var(--hb-tap);
        padding: 8px 4px !important;
        font-size: 14px;
    }
    .listivo-vertical-link-list .listivo-simple-menu > li > a svg,
    .listivo-vertical-link-list .listivo-simple-menu > li > a [class*=arrow] { display: none; }
}

/* Running text inside Elementor text widgets: give headings room. */
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3 { margin: 1.4em 0 .5em; line-height: 1.2; }
.elementor-widget-text-editor > .elementor-widget-container > h2:first-child,
.elementor-widget-text-editor h2:first-child { margin-top: 0; }
.elementor-widget-text-editor p { margin: 0 0 1em; }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { margin: 0 0 1em; padding-left: 1.25em; }
.elementor-widget-text-editor li { margin-bottom: .4em; }
.listivo-copyrights a { color: #fff; }

/* Hide placeholder social links until real ones exist. */
a.listivo-social-icons__icon[href="#"],
a[href="#"] > .listivo-social-icons__icon { display: none !important; }
.listivo-social-icons:not(:has(a:not([href="#"]))) { display: none !important; }

/* ============================================================ Phrasebook
   [hb_phrasebook] - "Say hello in 8 countries" */
.hb-phrasebook__bar { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.hb-phrasebook__chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--hb-gutter) * -1); padding: 2px var(--hb-gutter) 6px; scrollbar-width: none; }
.hb-phrasebook__chips::-webkit-scrollbar { display: none; }

.hb-chip {
    flex: 0 0 auto;
    min-height: var(--hb-tap);
    padding: 0 16px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-pill);
    color: var(--hb-ink);
    font: 600 14px/1 var(--hb-font-body);
    cursor: pointer;
}

.hb-chip:hover { border-color: var(--hb-teal); }
.hb-chip.is-active { background: var(--hb-teal); border-color: var(--hb-teal); color: #fff; }

.hb-switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--hb-tap); color: var(--hb-ink); font-weight: 600; cursor: pointer; }
.hb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-switch__track { position: relative; width: 46px; height: 26px; border-radius: var(--hb-pill); background: var(--hb-line-2); transition: background-color .2s ease; }
.hb-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--hb-shadow-sm); transition: transform .2s ease; }
.hb-switch input:checked + .hb-switch__track { background: var(--hb-teal); }
.hb-switch input:checked + .hb-switch__track::after { transform: translateX(20px); }
.hb-switch input:focus-visible + .hb-switch__track { outline: 3px solid var(--hb-teal); outline-offset: 2px; }

.hb-phrasebook__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 720px) { .hb-phrasebook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hb-phrasebook__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hb-phrase-card { display: flex; flex-direction: column; padding: 20px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); }
.hb-phrase-card[hidden] { display: none; }
.hb-phrase-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hb-phrase-card__code { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--hb-teal-soft); color: var(--hb-teal-dark); font: 800 14px/1 var(--hb-font-head); letter-spacing: .04em; }
.hb-phrase-card__country { margin: 0 !important; font: 800 20px/1.2 var(--hb-font-head) !important; color: var(--hb-ink); }
.hb-phrase-card__lang { margin: 2px 0 0; color: var(--hb-muted); font-size: 13px; }

.hb-phrase-card__list { margin: 0; padding: 0; list-style: none; }

.hb-phrase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "en listen" "local listen" "say listen";
    column-gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--hb-line);
}

.hb-phrase__reveal { grid-area: en; justify-self: start; padding: 0; background: none; border: 0; color: var(--hb-muted); font: 600 12px/1.3 var(--hb-font-body); letter-spacing: .04em; text-transform: uppercase; cursor: default; }
.hb-phrase__local { grid-area: local; color: var(--hb-ink); font: 700 18px/1.3 var(--hb-font-head); }
.hb-phrase__say { grid-area: say; color: var(--hb-teal-dark); font-size: 13px; font-style: italic; }

.hb-phrase__listen {
    grid-area: listen;
    align-self: center;
    display: grid;
    place-items: center;
    width: var(--hb-tap);
    height: var(--hb-tap);
    padding: 0;
    background: var(--hb-teal-soft);
    border: 0;
    border-radius: 50%;
    color: var(--hb-teal-dark);
    cursor: pointer;
}

.hb-phrase__listen:hover { background: var(--hb-teal); color: #fff; }
.hb-phrase__listen[hidden] { display: none; }

/* Test yourself: hide the English until tapped */
.hb-phrasebook.is-quiz .hb-phrase__reveal { cursor: pointer; }
.hb-phrasebook.is-quiz .hb-phrase__en { display: inline-block; min-width: 96px; padding: 2px 8px; border-radius: 6px; background: var(--hb-line); color: transparent; }
.hb-phrasebook.is-quiz .hb-phrase.is-revealed .hb-phrase__en { background: none; padding: 0; color: var(--hb-teal-dark); }

.hb-phrase-card__tip { margin: 14px 0 12px; padding: 12px 14px; background: var(--hb-sand); border-radius: var(--hb-r-btn); color: var(--hb-ink-2); font-size: 14px; line-height: 1.5; }
.hb-phrase-card__link { margin-top: auto; color: var(--hb-teal-dark) !important; font-weight: 700; text-decoration: none !important; }
.hb-phrase-card__link:hover { text-decoration: underline !important; }

@media (min-width: 768px) {
    .hb-phrasebook__bar { flex-direction: row; align-items: center; justify-content: space-between; }
    .hb-phrasebook__chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}

/* =========================================================== Sea now
   [hb_sea_now] - live temperatures and webcams */
.hb-seanow__heading { margin: 36px 0 14px !important; font: 800 clamp(22px, 3vw, 28px)/1.2 var(--hb-font-head) !important; color: var(--hb-ink); }
.hb-seanow__heading:first-child { margin-top: 0 !important; }
.hb-seanow__intro { margin: -6px 0 16px; color: var(--hb-muted); }
.hb-seanow__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .hb-seanow__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .hb-seanow__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hb-temp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 150px;
    padding: 16px;
    overflow: hidden;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r);
    color: var(--hb-ink) !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

.hb-temp::before { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--hb-teal); }
.hb-temp:hover { transform: translateY(-2px); box-shadow: var(--hb-shadow); }
.hb-temp__place { font: 800 17px/1.2 var(--hb-font-head); }
.hb-temp__country { color: var(--hb-muted); font-size: 12px; }
.hb-temp__value { margin-top: 10px; font: 800 30px/1 var(--hb-font-head); letter-spacing: -.02em; }
.hb-temp__label { margin-top: 4px; color: var(--hb-teal-dark); font-size: 13px; font-weight: 700; }
.hb-temp__air { margin-top: auto; padding-top: 8px; color: var(--hb-muted); font-size: 12px; }

.hb-temp.is-hot::before { background: var(--hb-accent); }
.hb-temp.is-warm::before { background: var(--hb-terracotta); }
.hb-temp.is-mild::before { background: var(--hb-teal); }
.hb-temp.is-cool::before { background: #5B8FB0; }
.hb-temp.is-cold::before { background: #8AA7BC; }
.hb-temp--air { min-height: 120px; }
.hb-temp--air::before { background: var(--hb-line-2); }

.hb-seanow__meta { margin: 16px 0 0; color: var(--hb-muted); font-size: 13px; line-height: 1.6; }
.hb-seanow__empty { padding: 20px; background: var(--hb-surface); border-radius: var(--hb-r); }

.hb-cams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .hb-cams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hb-cams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hb-cam { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dot name" "dot country"; column-gap: 12px; align-items: center; min-height: 64px; padding: 12px 16px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r-btn); color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-cam:hover { border-color: var(--hb-teal); }
.hb-cam__dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: #D93A2B; box-shadow: 0 0 0 4px rgba(217, 58, 43, .18); animation: hb-live 2s ease-in-out infinite; }
.hb-cam__name { grid-area: name; font-weight: 700; }
.hb-cam__country { grid-area: country; color: var(--hb-muted); font-size: 13px; }
@keyframes hb-live { 50% { opacity: .35; } }

/* ======================================================= Theme toggle */
.hb-theme-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--hb-tap);
    height: var(--hb-tap);
    margin: 0 4px;
    padding: 0;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: 50%;
    color: var(--hb-ink);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.hb-theme-toggle:hover { border-color: var(--hb-teal); color: var(--hb-teal); }
.hb-theme-toggle .hb-icon-sun { display: none; }
[data-theme="dark"] .hb-theme-toggle .hb-icon-sun { display: block; }
[data-theme="dark"] .hb-theme-toggle .hb-icon-moon { display: none; }
.hb-theme-toggle--floating { position: fixed; right: 16px; bottom: 16px; z-index: 1100; box-shadow: var(--hb-shadow); }

/* ========================================================== Dark mode
   Toggled with the header button; the choice is stored per visitor.
   Only tokens change here, so every component follows automatically. */
/* Elementor defines its kit colours on body.elementor-kit-5417, so the
   override has to target that element too, not only :root. */
:root[data-theme="dark"],
[data-theme="dark"] .elementor-kit-5417 {
    color-scheme: dark;
    --hb-ink: #E8EEF1;
    --hb-ink-2: #C7D2D8;
    --hb-muted: #A3B1B9;
    --hb-faint: #7F8E97;
    --hb-line: #23394A;
    --hb-line-2: #2E475A;
    --hb-sand: #0D1C27;
    --hb-sand-2: #152A38;
    --hb-surface: #132737;
    --hb-deep: #081621;
    --hb-teal: #4FB8AD;
    --hb-teal-dark: #7FD3CA;
    --hb-teal-soft: #163A3D;
    --hb-terracotta-soft: #3A2520;
    --hb-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --hb-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    --hb-shadow-lg: 0 24px 56px rgba(0, 0, 0, .5);

    /* Elementor kit colours (Listivo reads these) */
    --e-global-color-lcolor1: #E8EEF1;
    --e-global-color-lcolor2: #A3B1B9;
    --e-global-color-lcolor3: #3A2520;
    --e-global-color-lcolor4: #23394A;
    --e-global-color-lcolor5: #132737;
    --e-global-color-lsectionbg: #0D1C27;
    --e-global-color-hbdeep: #081621;
    --e-global-color-hbteal: #4FB8AD;
    --e-global-color-hbtealsoft: #163A3D;
    --e-global-color-hbline: #23394A;
}

[data-theme="dark"] body,
[data-theme="dark"] .listivo-app { background-color: var(--hb-sand); color: var(--hb-ink); }

[data-theme="dark"] .listivo-menu-v2,
[data-theme="dark"] .listivo-menu-mobile-v2,
[data-theme="dark"] .listivo-mobile-menu,
[data-theme="dark"] .listivo-mobile-menu-v2__container { background: var(--hb-surface) !important; border-color: var(--hb-line); }

/* Swap to the light logo (navy "Hello" would vanish on the dark header). */
[data-theme="dark"] .listivo-menu-v2__logo img,
[data-theme="dark"] .listivo-menu-mobile-v2__logo img { content: url("/wp-content/uploads/2026/11/hellobalkan-logo-light.svg"); }

[data-theme="dark"] .listivo-menu-v2 svg path[fill="#2A2422"],
[data-theme="dark"] .listivo-menu-v2 svg path[fill="#102C3E"] { fill: currentColor; }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .listivo-input-v2,
[data-theme="dark"] .listivo-select-v2,
[data-theme="dark"] .listivo-select-v2__dropdown,
[data-theme="dark"] .listivo-search-form-field,
[data-theme="dark"] .fluentform .ff-el-form-control {
    background-color: var(--hb-surface) !important;
    border-color: var(--hb-line-2) !important;
    color: var(--hb-ink) !important;
}

[data-theme="dark"] ::placeholder { color: var(--hb-faint) !important; }

[data-theme="dark"] .np-search,
[data-theme="dark"] .np-search__panel { background: var(--hb-surface); }

[data-theme="dark"] .listivo-listing-card-v4__icon:last-child,
[data-theme="dark"] .listivo-listing-card-v3__icon:last-child,
[data-theme="dark"] .listivo-listing-card-v3__gallery > .listivo-listing-card-v3__featured,
[data-theme="dark"] .listivo-listing-card-v4__gallery > .listivo-listing-card-v4__featured { background: rgba(13, 28, 39, .9) !important; color: var(--hb-ink) !important; }

[data-theme="dark"] img { filter: brightness(.94); }
[data-theme="dark"] .listivo-menu-v2__logo img,
[data-theme="dark"] .listivo-menu-mobile-v2__logo img { filter: none; }

[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.75) contrast(1.1) saturate(.8); }
/* ================================================ Map hover price pin */
.hb-hover-pin-wrap { background: none !important; border: 0 !important; }
.hb-hover-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--hb-accent); box-shadow: 0 0 0 6px rgba(191, 84, 60, .25), 0 4px 12px rgba(16, 44, 62, .35); animation: hb-pin-pulse 1.4s ease-out infinite; }
.hb-hover-pin {
    position: absolute;
    left: 0;
    bottom: 16px;
    padding: 7px 12px;
    background: var(--hb-accent);
    border-radius: var(--hb-pill);
    color: #fff;
    font: 700 14px/1 var(--hb-font-body);
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(16, 44, 62, .3);
    transform: translateX(-50%);
}
.hb-hover-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
@keyframes hb-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(191, 84, 60, .45), 0 4px 12px rgba(16, 44, 62, .35); } 100% { box-shadow: 0 0 0 14px rgba(191, 84, 60, 0), 0 4px 12px rgba(16, 44, 62, .35); } }
/* Edge hint: the hovered stay is outside the visible map */
.hb-edge-pin { position: absolute; z-index: 1000; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; background: var(--hb-accent); border-radius: var(--hb-pill); color: #fff; font: 700 14px/1 var(--hb-font-body); white-space: nowrap; box-shadow: 0 6px 18px rgba(16, 44, 62, .3); transform: translate(-50%, -50%); pointer-events: none; }
.hb-edge-pin__arrow { display: block; width: 18px; height: 18px; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); border-radius: 50%; background-color: rgba(255, 255, 255, .2); }
/* ========================================================= Collections
   [hb_collections] cards and chips */
.hb-colls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .hb-colls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .hb-colls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hb-coll { display: flex; flex-direction: column; overflow: hidden; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); color: var(--hb-ink) !important; text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease; }
.hb-coll:hover { transform: translateY(-2px); box-shadow: var(--hb-shadow); }
.hb-coll__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hb-sand-2); }
.hb-coll__media img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .4s ease; }
.hb-coll:hover .hb-coll__media img { transform: scale(1.04); }
.hb-coll__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.hb-coll__title { font: 800 16px/1.25 var(--hb-font-head); }
.hb-coll__text { display: none; color: var(--hb-muted); font-size: 13px; line-height: 1.45; }
.hb-coll__count { margin-top: auto; padding-top: 4px; color: var(--hb-teal-dark); font-size: 13px; font-weight: 700; }
@media (min-width: 760px) { .hb-coll__title { font-size: 18px; } .hb-coll__text { display: block; } }

.hb-coll-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--hb-gutter) * -1); padding: 2px var(--hb-gutter) 6px; scrollbar-width: none; }
.hb-coll-chips::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .hb-coll-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
.hb-coll-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: var(--hb-tap); padding: 0 16px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-pill); color: var(--hb-ink) !important; font: 600 14px/1 var(--hb-font-body); text-decoration: none !important; white-space: nowrap; }
.hb-coll-chip:hover { border-color: var(--hb-teal); }
.hb-coll-chip span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--hb-pill); background: var(--hb-teal-soft); color: var(--hb-teal-dark); font-size: 12px; }
/* Collection pages: our own "search on the map" button replaces Listivo's unfiltered "View all" */
.hb-coll-list .listivo-listing-list-with-tabs__button { display: none !important; }
.hb-coll-list { margin-bottom: 28px; }
/* ============================================================ Search
   [hb_search] - Airbnb-style Where | When | Who.
   Phone first: a "Where to?" button that opens a full-screen sheet. */
.hb-sb { position: relative; z-index: 30; width: 100%; max-width: 860px; color: var(--hb-ink); font-family: var(--hb-font-body); }
.hb-sb--hero { margin-top: 22px; }

.hb-sb__mini {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 10px 20px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-pill);
    box-shadow: 0 6px 22px rgba(16, 44, 62, .16);
    color: var(--hb-ink);
    text-align: left;
    cursor: pointer;
}
.hb-sb__mini svg { flex: 0 0 auto; color: var(--hb-ink); }
.hb-sb__mini-text { display: flex; flex-direction: column; min-width: 0; }
.hb-sb__mini-text strong { font: 700 15px/1.25 var(--hb-font-body); }
.hb-sb__mini-text small { overflow: hidden; color: var(--hb-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

/* Phone: the form is a hidden full-screen sheet */
.hb-sb__form { display: none; }

.hb-sb.is-open .hb-sb__form {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 96px;
    overflow-y: auto;
    background: var(--hb-sand);
    animation: hb-sheet-in .22s ease-out;
}
@keyframes hb-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
html.hb-sb-lock { overflow: hidden; }

.hb-sb__head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.hb-sb__head-title { font: 700 16px/1 var(--hb-font-head); }
.hb-sb__close { display: grid; place-items: center; width: var(--hb-tap); height: var(--hb-tap); padding: 0; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 50%; color: var(--hb-ink); cursor: pointer; }

.hb-sb__step { background: var(--hb-surface); border-radius: var(--hb-r-lg); box-shadow: 0 4px 18px rgba(16, 44, 62, .08); }

.hb-sb__seg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 14px 20px;
    background: none;
    border: 0;
    border-radius: var(--hb-r-lg);
    color: var(--hb-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hb-sb__label { color: var(--hb-muted); font-size: 14px; font-weight: 600; }
.hb-sb__value { overflow: hidden; color: var(--hb-ink); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

/* The active step on a phone: big question title, label row hidden */
.hb-sb__step.is-active .hb-sb__seg:not(.hb-sb__seg--input) { display: none; }
.hb-sb__q { display: none; margin: 0 0 14px !important; font: 800 24px/1.15 var(--hb-font-head) !important; color: var(--hb-ink); }
.hb-sb__step.is-active .hb-sb__q { display: block; }

.hb-sb__seg--input { flex-direction: column; align-items: stretch; gap: 2px; cursor: text; }
.hb-sb__step[data-step="where"].is-active .hb-sb__seg--input { padding-top: 20px; }
.hb-sb__step[data-step="where"].is-active .hb-sb__seg--input .hb-sb__label { font: 800 24px/1.15 var(--hb-font-head); color: var(--hb-ink); }
.hb-sb__input {
    width: 100%;
    min-height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--hb-ink);
    font: 700 15px/1.3 var(--hb-font-body);
    -webkit-appearance: none;
    appearance: none;
}
.hb-sb__input::placeholder { color: var(--hb-faint); font-weight: 500; }
.hb-sb__input::-webkit-search-cancel-button { display: none; }
.hb-sb__step[data-step="where"].is-active .hb-sb__input { min-height: 52px; margin-top: 10px; padding: 0 16px; background: var(--hb-sand); border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-btn); font-size: 16px; }

.hb-sb__panel { display: none; padding: 0 16px 18px; }
.hb-sb__step.is-active .hb-sb__panel { display: block; }
.hb-sb__step.is-active[data-step="when"] .hb-sb__panel,
.hb-sb__step.is-active[data-step="who"] .hb-sb__panel { padding-top: 20px; }

/* Destinations */
.hb-sb__opts { margin: 4px -6px 0; padding: 0; list-style: none; }
.hb-sb__opts li[hidden] { display: none; }
.hb-sb__opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 6px; background: none; border: 0; border-radius: var(--hb-r-btn); color: var(--hb-ink); font: inherit; text-align: left; cursor: pointer; }
.hb-sb__opt:hover, .hb-sb__opt:focus-visible { background: var(--hb-sand); }
.hb-sb__opt-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--hb-r-btn); background: var(--hb-teal-soft) no-repeat center / 22px; }
.hb-sb__opt-icon--country { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.hb-sb__opt-icon--place { background-color: var(--hb-sand-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102C3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.hb-sb__opt-icon--any { background-color: var(--hb-terracotta-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF543C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-8-8 18-2-8z'/%3E%3C/svg%3E"); }
.hb-sb__opt-text { display: flex; flex-direction: column; min-width: 0; }
.hb-sb__opt-text strong { font-size: 15px; font-weight: 700; }
.hb-sb__opt-text small { overflow: hidden; color: var(--hb-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.hb-sb__none { margin: 8px 0 0; color: var(--hb-muted); font-size: 14px; }

/* Calendar */
.hb-cal { position: relative; }
.hb-cal__nav { position: absolute; top: -4px; right: 0; left: 0; display: flex; justify-content: space-between; pointer-events: none; }
.hb-cal__arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 50%; color: var(--hb-ink); font-size: 22px; line-height: 1; cursor: pointer; pointer-events: auto; }
.hb-cal__arrow:disabled { opacity: .3; cursor: default; }
.hb-cal__months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hb-cal__title { margin-bottom: 12px; font: 700 16px/40px var(--hb-font-head); text-align: center; }
.hb-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.hb-cal__dow { padding: 6px 0; color: var(--hb-muted); font-size: 12px; font-weight: 600; text-align: center; }
.hb-cal__day { position: relative; height: 44px; padding: 0; background: none; border: 0; color: var(--hb-ink); font: 600 14px/1 var(--hb-font-body); cursor: pointer; }
.hb-cal__day::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; transition: background-color .12s ease; }
.hb-cal__day:not(:disabled):hover::before { box-shadow: inset 0 0 0 1.5px var(--hb-ink); }
.hb-cal__day:disabled { color: var(--hb-line-2); text-decoration: line-through; cursor: default; }
.hb-cal__day.is-in { background: var(--hb-teal-soft); }
.hb-cal__day.is-start, .hb-cal__day.is-end { color: #fff; }
.hb-cal__day.is-start::before, .hb-cal__day.is-end::before { background: var(--hb-deep); }
.hb-cal__day.is-start { background: linear-gradient(90deg, transparent 50%, var(--hb-teal-soft) 50%); }
.hb-cal__day.is-end { background: linear-gradient(90deg, var(--hb-teal-soft) 50%, transparent 50%); }
.hb-cal__day.is-start.is-end, .hb-cal__day.is-start:last-child { background: none; }
.hb-cal__day span, .hb-cal__day { z-index: 0; }
.hb-sb__panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hb-line); color: var(--hb-muted); font-size: 14px; }
.hb-sb__link { min-height: var(--hb-tap); padding: 0 4px; background: none; border: 0; color: var(--hb-ink); font: 600 14px/1 var(--hb-font-body); text-decoration: underline; cursor: pointer; }

/* Who */
.hb-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hb-line); }
.hb-who:last-child { border-bottom: 0; }
.hb-who__text { display: flex; flex-direction: column; }
.hb-who__text strong { font-size: 16px; }
.hb-who__text small { color: var(--hb-muted); font-size: 13px; }
.hb-who__step { display: flex; align-items: center; gap: 12px; }
.hb-who__step button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 50%; color: var(--hb-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.hb-who__step button:hover:not(:disabled) { border-color: var(--hb-ink); }
.hb-who__step button:disabled { opacity: .3; cursor: not-allowed; }
.hb-who__step output { min-width: 22px; font-weight: 700; text-align: center; }

/* Search buttons */
.hb-sb__go { display: none; }
.hb-sb__foot { position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--hb-surface); border-top: 1px solid var(--hb-line); }
.hb-sb__submit { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; background: var(--hb-accent); border: 0; border-radius: var(--hb-r-btn); color: #fff; font: 700 16px/1 var(--hb-font-body); cursor: pointer; }
.hb-sb__submit:hover { background: var(--hb-accent-hover); }

.hb-sb__resume { display: inline-flex; align-items: center; min-height: var(--hb-tap); margin-top: 12px; padding: 0 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--hb-pill); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hb-sb--bar .hb-sb__resume { display: none; }

/* Field icons (pin, calendar, people) in a soft teal tile: HelloBalkan's own look */
.hb-sb__ico { display: none; }
.hb-sb__ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--hb-teal-soft) no-repeat center / 20px;
}
.hb-sb__ico--where { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.hb-sb__ico--when { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.hb-sb__ico--who { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19c.6-3.3 3-5 6-5s5.4 1.7 6 5'/%3E%3Cpath d='M15.5 5.2a3 3 0 0 1 0 5.6M17.5 14.4c1.8.6 3 2.2 3.5 4.6'/%3E%3C/svg%3E"); }

/* Phone: the mini bar is a rounded card, not a pill */
.hb-sb__mini { border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 44, 62, .06), 0 10px 26px -10px rgba(16, 44, 62, .3); }
.hb-sb__mini > svg { box-sizing: content-box; padding: 9px; background: var(--hb-teal-dark); border-radius: 10px; color: #fff; }
.hb-sb__step:not(.is-active) .hb-sb__seg:not(.hb-sb__seg--input) .hb-sb__ico { display: block; }
.hb-sb__step:not(.is-active) .hb-sb__seg:not(.hb-sb__seg--input) .hb-sb__label { margin-right: auto; }

/* ---------- Desktop: one card with three icon fields ---------- */
@media (min-width: 768px) {
    .hb-sb__mini, .hb-sb__head, .hb-sb__foot, .hb-sb__q { display: none !important; }

    .hb-sb__form,
    .hb-sb.is-open .hb-sb__form {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px;
        overflow: visible;
        background: var(--hb-surface);
        border: 1px solid var(--hb-line);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 44, 62, .05), 0 14px 34px -14px rgba(16, 44, 62, .28);
        animation: none;
    }

    .hb-sb__step { position: static; flex: 1 1 0; min-width: 0; background: none; border-radius: 12px; box-shadow: none; }
    .hb-sb__step[data-step="where"] { flex: 1.35 1 0; }

    /* Divider lives on the segment, so the steps stay position: static and
       the panels are positioned against the whole bar. */
    .hb-sb__step > .hb-sb__seg { position: relative; }
    .hb-sb__step + .hb-sb__step > .hb-sb__seg::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: -3px; width: 1px; background: var(--hb-line); }
    .hb-sb__step.is-active > .hb-sb__seg::before,
    .hb-sb__step.is-active + .hb-sb__step > .hb-sb__seg::before,
    .hb-sb__seg:hover::before,
    .hb-sb__step:hover + .hb-sb__step > .hb-sb__seg::before { display: none; }

    .hb-sb__seg,
    .hb-sb__step.is-active .hb-sb__seg:not(.hb-sb__seg--input),
    .hb-sb__step[data-step="where"].is-active .hb-sb__seg--input {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 12px;
        row-gap: 1px;
        height: 60px;
        min-height: 0;
        padding: 0 14px 0 10px;
        border-radius: 12px;
        transition: background-color .15s ease, box-shadow .15s ease;
    }
    .hb-sb__ico,
    .hb-sb__step .hb-sb__seg .hb-sb__ico { display: block; grid-row: 1 / span 2; align-self: center; }
    .hb-sb__seg:hover { background: var(--hb-sand); }
    .hb-sb__step.is-active .hb-sb__seg { background: var(--hb-surface); box-shadow: inset 0 0 0 2px var(--hb-teal); }
    .hb-sb__step.is-active .hb-sb__ico { background-color: var(--hb-surface); box-shadow: inset 0 0 0 1px var(--hb-teal-soft); }

    .hb-sb__label,
    .hb-sb__step[data-step="where"].is-active .hb-sb__seg--input .hb-sb__label { margin: 0; color: var(--hb-teal-dark); font: 700 11px/1.2 var(--hb-font-body); letter-spacing: .08em; text-transform: uppercase; }
    .hb-sb__value { max-width: 100%; color: var(--hb-faint); font-size: 15px; font-weight: 500; }
    .hb-sb__value.is-set { color: var(--hb-ink); font-weight: 700; }
    .hb-sb__input,
    .hb-sb__step[data-step="where"].is-active .hb-sb__input { min-height: 22px; margin: 0; padding: 0; background: transparent; border: 0; font: 700 15px/1.3 var(--hb-font-body); }

    /* Panels float under the bar */
    .hb-sb__panel,
    .hb-sb__step.is-active .hb-sb__panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; display: none; padding: 24px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 18px; box-shadow: 0 24px 48px -16px rgba(16, 44, 62, .3); }
    .hb-sb__step.is-active .hb-sb__panel { display: block; }
    .hb-sb__panel--where { width: min(440px, 100%); max-height: 460px; overflow-y: auto; padding: 14px 16px; }
    .hb-sb__panel--when { right: 0; left: 0; }
    .hb-sb__panel--who,
    .hb-sb__step.is-active .hb-sb__panel--who { right: 0; left: auto; width: 400px; }
    .hb-sb__step.is-active[data-step="when"] .hb-sb__panel,
    .hb-sb__step.is-active[data-step="who"] .hb-sb__panel { padding: 24px 28px; }
    .hb-cal__months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

    /* Search: a squared teal button with its label, not a round icon */
    .hb-sb__go {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 52px;
        margin: 0 0 0 2px;
        padding: 0 22px;
        background: var(--hb-teal-dark);
        border: 0;
        border-radius: 12px;
        color: #fff;
        font: 700 15px/1 var(--hb-font-body);
        cursor: pointer;
        transition: background-color .18s ease;
    }
    .hb-sb__go:hover { background: var(--hb-deep); }
    .hb-sb__go-text { display: inline; }
}

/* Search bar on the results page: search card + Filters side by side */
.hb-search-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 12px var(--hb-gutter) 10px; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); }
.hb-search-bar .hb-sb { flex: 1 1 0; min-width: 0; max-width: 780px; }

/* Quick filter chips: a scrollable row under the search */
.hb-chips {
    display: flex;
    flex: 0 0 100%;
    gap: 8px;
    margin: 2px calc(var(--hb-gutter) * -1) 0;
    padding: 2px var(--hb-gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hb-chips::-webkit-scrollbar { display: none; }
.hb-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: 10px;
    color: var(--hb-ink);
    font: 600 13px/1 var(--hb-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.hb-chip:hover { border-color: var(--hb-ink); }
.hb-chip[aria-pressed="true"] { background: var(--hb-teal-soft); border-color: var(--hb-teal); color: var(--hb-teal-dark); }
.hb-chip[aria-pressed="true"]::before {
    content: "";
    width: 12px;
    height: 12px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
    .hb-chips { flex-wrap: wrap; justify-content: center; margin: 4px 0 0; padding: 0; overflow: visible; }
}

.hb-filters {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 60px;
    height: 60px;
    padding: 0;
    background: var(--hb-surface);
    border: 1px solid var(--hb-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 44, 62, .06), 0 10px 26px -10px rgba(16, 44, 62, .3);
    color: var(--hb-ink);
    font: 700 14px/1 var(--hb-font-body);
    cursor: pointer;
}
.hb-filters[hidden] { display: none; }
.hb-filters:hover { border-color: var(--hb-ink); }
.hb-filters.is-set { border-color: var(--hb-teal); }
.hb-filters__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hb-filters__n { position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--hb-teal); border: 2px solid var(--hb-surface); border-radius: var(--hb-pill); color: #fff; font-size: 11px; }
.hb-filters__n[hidden] { display: none; }

@media (min-width: 768px) {
    .hb-search-bar .hb-sb__seg,
    .hb-search-bar .hb-sb__step.is-active .hb-sb__seg:not(.hb-sb__seg--input),
    .hb-search-bar .hb-sb__step[data-step="where"].is-active .hb-sb__seg--input { height: 52px; }
    .hb-search-bar .hb-sb__go { height: 46px; }
    .hb-filters { width: auto; height: 66px; padding: 0 20px; border-radius: 18px; }
    .hb-filters__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Listivo destination dropdown: no counts (they differ from the map area) */
.listivo-select-v2__option .listivo-select-v2__count,
.listivo-select-v2__option [class*="count"] { display: none !important; }
.hb-sb__resume[hidden] { display: none !important; }
/* Results page: Where and Who live in the [hb_search] bar above, so hide
   Listivo's duplicate destination and guests fields (price + Filters stay). */
.listivo-search-form-field--listivo_11019,
.listivo-search-form-field--listivo_11021 { display: none !important; }
/* Listivo's own filter row is replaced by the Filters button in the bar; the
   row stays in the page (hidden) because it holds the filter dialog. */
.listivo-main-search-form--map .listivo-main-search-form__primary-wrapper,
.listivo-main-search-form--map .listivo-main-search-form__filters { display: none !important; }
.listivo-main-search-form--map,
.listivo-map-search__left > .listivo-main-search-form { min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.listivo-main-search-form--map > .listivo-container { min-height: 0 !important; padding: 0 !important; }
/* The phone sheet is position: fixed inside an Elementor section that has its
   own z-index; lift that section above the header while the sheet is open. */
html.hb-sb-lock .elementor-element:has(.hb-sb.is-open),
html.hb-sb-lock .elementor-section:has(.hb-sb.is-open),
html.hb-sb-lock .np-hero:has(.hb-sb.is-open),
html.hb-sb-lock .np-hero__inner:has(.hb-sb.is-open) { z-index: 100040 !important; }
/* Empty results: what to change, like the big booking sites */
.hb-empty { margin: 8px 0 24px; padding: 22px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); }
.hb-empty strong { display: block; font: 800 20px/1.2 var(--hb-font-head); color: var(--hb-ink); }
.hb-empty p { margin: 6px 0 14px; color: var(--hb-muted); }
.hb-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-empty__btn { min-height: var(--hb-tap); padding: 0 16px; background: var(--hb-surface); border: 1px solid var(--hb-ink); border-radius: var(--hb-pill); color: var(--hb-ink); font: 600 14px/1 var(--hb-font-body); cursor: pointer; }
.hb-empty__btn:hover { background: var(--hb-sand); }

/* Filters on a phone: the same panel as a full-screen sheet */
@media (max-width: 1024px) {
    html.np-dialog-open { overflow: hidden; }
    html.np-dialog-open .listivo-search-map-switcher { display: none !important; }
    html.np-dialog-open .elementor-element:has(.listivo-main-search-form--map:not(.np-filters-closed)),
    html.np-dialog-open .elementor-section:has(.listivo-main-search-form--map:not(.np-filters-closed)) { z-index: 100040 !important; }
    .listivo-main-search-form--map.np-filters-closed .listivo-main-search-form__secondary-wrapper { display: none !important; }
    .listivo-main-search-form--map:not(.np-filters-closed) .listivo-main-search-form__secondary-wrapper {
        position: fixed !important;
        inset: 0;
        z-index: 100050;
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto;
        background: var(--hb-surface);
        animation: hb-sheet-in .22s ease-out;
    }
    .listivo-main-search-form--map:not(.np-filters-closed) .listivo-main-search-form__secondary-wrapper > .listivo-container { flex: 1 0 auto; max-width: none !important; margin: 0 !important; padding: 16px var(--hb-gutter) !important; }
    .listivo-main-search-form--map:not(.np-filters-closed) .listivo-main-search-form__secondary { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    .listivo-main-search-form--map:not(.np-filters-closed) .np-dialog__head { position: sticky; top: 0; z-index: 2; display: flex !important; align-items: center; justify-content: center; min-height: 56px; padding: 0 56px; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); color: var(--hb-ink); font: 700 16px/1.2 var(--hb-font-head); }
    .listivo-main-search-form--map:not(.np-filters-closed) .np-dialog__close { position: absolute; top: 50%; left: 8px; display: grid; place-items: center; width: var(--hb-tap); height: var(--hb-tap); padding: 0; background: none; border: 0; border-radius: 50%; color: var(--hb-ink); transform: translateY(-50%); }
    .listivo-main-search-form--map:not(.np-filters-closed) .np-dialog__foot { position: sticky; bottom: 0; z-index: 2; display: flex !important; justify-content: stretch; padding: 12px var(--hb-gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--hb-surface); border-top: 1px solid var(--hb-line); }
    .listivo-main-search-form--map:not(.np-filters-closed) .np-dialog__show { flex: 1 1 auto; min-height: 52px; border: 0; border-radius: var(--hb-r-btn); background: var(--hb-accent); color: #fff; font: 700 16px/1 var(--hb-font-body); }
}
/* Phone "Map view" / "List view" switch: a floating navy button in the
   HelloBalkan shape (rounded rectangle), not Listivo's terracotta tab. */
.listivo-search-map-switcher {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.listivo-search-map-switcher__inner {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 46px !important;
    padding: 0 20px !important;
    background: var(--hb-deep) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px -8px rgba(16, 44, 62, .55) !important;
    color: #fff !important;
    font: 600 15px/1 var(--hb-font-body) !important;
    cursor: pointer;
}
.listivo-search-map-switcher__inner * { color: inherit !important; font: inherit !important; }
.listivo-search-map-switcher__icon svg path { fill: #fff !important; }
.listivo-search-map-switcher__inner:active { transform: scale(.97); }
[data-theme="dark"] .listivo-search-map-switcher__inner { background: #155B56 !important; }
/* The filter dialog is hidden until it is opened (html.np-dialog-open), so it
   never flashes as a pop-up while the results page loads. */
html:not(.np-dialog-open) .listivo-main-search-form--map .listivo-main-search-form__secondary-wrapper { display: none !important; }
/* ===================================================== Audit fixes, Nov 2026 */
/* The footer is navy in both themes, so it keeps the light-theme kit colours;
   in dark mode they flipped and the links/headings went dark on dark. */
[data-theme="dark"] .elementor-element-1d345df7,
[data-theme="dark"] .elementor-element-abef5e3 {
    --e-global-color-lcolor1: #102C3E;
    --e-global-color-lcolor2: #5E6B73;
    --e-global-color-lcolor3: #FBE9E3;
    --e-global-color-lcolor4: #EFE8DA;
    --e-global-color-lcolor5: #FFFFFF;
}

/* "2 stays" sits on a white pill over the photo: keep its text dark */
[data-theme="dark"] .adriatic-destination__count { color: #102C3E !important; }

/* Availability calendar: free days readable in dark mode */
[data-theme="dark"] .np-bigcal__day--free,
[data-theme="dark"] .np-bigcal__day--free .np-bigcal__num,
[data-theme="dark"] .np-bigcal__day--free .np-bigcal__price { color: #7FD3CA !important; }

/* Terracotta badges and the active page number: white text in both themes */
.listivo-sidebar-list__count,
.listivo-pagination__item--active,
.listivo-pagination__item--active * { color: #fff !important; }
[data-theme="dark"] .listivo-single-post__category { color: var(--hb-terracotta) !important; }

/* Map credits (Leaflet / OpenStreetMap): calm grey instead of default blue */
.leaflet-control-attribution a { color: var(--hb-muted) !important; }

/* Empty search fields and calendar weekdays: readable grey (WCAG AA) */
.hb-sb__value:not(.is-set),
.hb-sb__input::placeholder { color: var(--hb-muted) !important; }
.np-bigcal__dow, .np-bigcal__head span { color: var(--hb-muted) !important; }

/* Footer legal links and e-mail: bigger tap area on phones */
@media (max-width: 767px) {
    .elementor-element-abef5e3 a,
    .elementor-element-1d345df7 .listivo-email,
    .elementor-element-1d345df7 .listivo-simple-menu a { display: inline-block; padding-top: 8px !important; padding-bottom: 8px !important; }
}
/* Dark mode: buttons on terracotta keep white text; map credits on a dark strip */
[data-theme="dark"] .listivo-button--primary-1,
[data-theme="dark"] .listivo-button--primary-2,
[data-theme="dark"] .listivo-simple-button--background-primary-1,
[data-theme="dark"] .listivo-button--primary-1 *,
[data-theme="dark"] .listivo-button--primary-2 *,
[data-theme="dark"] .listivo-simple-button--background-primary-1 * { color: #fff !important; }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(13, 28, 39, .85) !important; color: var(--hb-muted) !important; }
/* ============================================================ Trust strip + badge */
.hb-trust { padding: 0 var(--hb-gutter); background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); }
.hb-trust__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-width: 1200px; margin: 0 auto; padding: 14px 0; list-style: none; }
.hb-trust__item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.hb-trust__icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; background: var(--hb-teal-soft); border-radius: 12px; color: var(--hb-teal-dark); }
.hb-trust__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hb-trust__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hb-trust__text strong { color: var(--hb-ink); font: 700 15px/1.3 var(--hb-font-body); }
.hb-trust__text small { color: var(--hb-muted); font-size: 13px; }
.hb-trust__text a { color: var(--hb-teal-dark); font-weight: 600; text-decoration: underline; }
@media (min-width: 640px) { .hb-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; } }
@media (min-width: 1024px) { .hb-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 0; } .hb-trust__item { padding: 0; } }

.hb-checked {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px 0 7px;
    background: var(--hb-teal-dark);
    border-radius: 8px;
    color: #fff !important;
    font: 700 11px/1 var(--hb-font-body);
    letter-spacing: .02em;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(16, 44, 62, .25);
}
.hb-checked--lg { position: static; display: inline-flex; height: 30px; margin: 4px 0 12px; padding: 0 12px 0 9px; border-radius: 10px; font-size: 13px; box-shadow: none; }
.hb-checked--lg:hover { background: var(--hb-deep); }
.hb-checked svg { flex: 0 0 auto; }
[data-theme="dark"] .hb-checked { background: #155B56; }
/* ============================================================ Country quiz */
.hb-quiz { max-width: 720px; margin: 0 auto; padding: 28px 20px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 44, 62, .05), 0 18px 40px -22px rgba(16, 44, 62, .35); }
.hb-quiz[hidden], .hb-quiz [hidden] { display: none !important; }
.hb-quiz__eyebrow { display: inline-block; padding: 5px 10px; background: var(--hb-teal-soft); border-radius: 8px; color: var(--hb-teal-dark); font: 700 12px/1 var(--hb-font-body); letter-spacing: .06em; text-transform: uppercase; }
.hb-quiz__title { margin: 14px 0 10px !important; color: var(--hb-ink); font: 800 clamp(26px, 5vw, 36px)/1.12 var(--hb-font-head) !important; }
.hb-quiz__lead { margin: 0 0 20px; color: var(--hb-muted); font-size: 17px; line-height: 1.5; }
.hb-quiz__places { margin: 0 0 20px; color: var(--hb-ink); }
.hb-quiz__start, .hb-quiz__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--hb-accent); border: 0; border-radius: 12px; color: #fff !important; font: 700 16px/1 var(--hb-font-body); text-decoration: none !important; cursor: pointer; }
.hb-quiz__start:hover, .hb-quiz__cta:hover { background: var(--hb-accent-hover); }
.hb-quiz__ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; background: transparent; border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink) !important; font: 600 15px/1 var(--hb-font-body); text-decoration: none !important; }
.hb-quiz__ghost:hover { border-color: var(--hb-ink); }
.hb-quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-quiz__second { margin: 18px 0 0; color: var(--hb-muted); font-size: 15px; }
.hb-quiz__second a { color: var(--hb-teal-dark); font-weight: 700; }
.hb-quiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hb-line); }
.hb-quiz__link, .hb-quiz__back { min-height: var(--hb-tap); padding: 0; background: none; border: 0; color: var(--hb-ink); font: 600 14px/1 var(--hb-font-body); text-decoration: underline; cursor: pointer; }
.hb-quiz__copied { color: var(--hb-teal-dark); font-size: 14px; font-weight: 600; }
.hb-quiz__bar { height: 6px; background: var(--hb-sand-2); border-radius: 6px; overflow: hidden; }
.hb-quiz__bar span { display: block; height: 100%; width: 0; background: var(--hb-teal); border-radius: 6px; transition: width .25s ease; }
.hb-quiz__count { margin: 14px 0 0; color: var(--hb-muted); font-size: 14px; font-weight: 600; }
.hb-quiz__q { margin: 6px 0 18px !important; color: var(--hb-ink); font: 800 clamp(22px, 4.6vw, 28px)/1.2 var(--hb-font-head) !important; outline: 0; }
.hb-quiz__options { display: grid; gap: 10px; margin-bottom: 8px; }
.hb-quiz__opt { display: flex; align-items: center; min-height: 56px; padding: 0 18px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 14px; color: var(--hb-ink); font: 600 16px/1.3 var(--hb-font-body); text-align: left; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.hb-quiz__opt:hover { background: var(--hb-sand); border-color: var(--hb-ink); }
.hb-quiz__opt.is-picked { background: var(--hb-teal-soft); border-color: var(--hb-teal); }
@media (min-width: 768px) { .hb-quiz { padding: 40px; } .hb-quiz__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ============================================ Good to know, WhatsApp, total price */
.hb-gtk { margin: 20px 0; padding: 20px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: var(--hb-r); }
.hb-gtk__title { margin: 0 0 12px !important; color: var(--hb-ink); font: 700 18px/1.2 var(--hb-font-head) !important; }
.hb-gtk__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hb-gtk__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--hb-ink-2); font-size: 15px; line-height: 1.4; }
.hb-gtk__list svg { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; background: var(--hb-teal-soft); border-radius: 10px; fill: none; stroke: var(--hb-teal-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hb-gtk__list strong { display: block; color: var(--hb-ink); font-size: 14px; }
.hb-gtk__list a { color: var(--hb-teal-dark); font-weight: 600; text-decoration: underline; }
@media (min-width: 768px) { .hb-gtk__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; } }

.hb-wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hb-tap); margin-top: 10px; padding: 0 16px; background: #E7F6EE; border: 1px solid #BFE5D0; border-radius: 12px; color: #14573A !important; font: 700 15px/1 var(--hb-font-body); text-decoration: none !important; }
.hb-wa:hover { background: #D7F0E2; }
[data-theme="dark"] .hb-wa { background: #123428; border-color: #1F5A43; color: #8BE0B6 !important; }

.hb-total { display: block; margin-top: 2px; color: var(--hb-teal-dark); font: 600 12px/1.3 var(--hb-font-body); }
.hb-total--lg { margin-top: 6px; font-size: 14px; }
[data-theme="dark"] .hb-total { color: #7FD3CA; }
/* ====================================================== When: dates / flexible */
.hb-tabs { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--hb-sand-2); border-radius: 12px; }
.hb-tabs__tab { min-height: 38px; padding: 0 16px; background: transparent; border: 0; border-radius: 9px; color: var(--hb-ink-2); font: 600 14px/1 var(--hb-font-body); cursor: pointer; }
.hb-tabs__tab.is-on { background: var(--hb-surface); box-shadow: 0 1px 3px rgba(16, 44, 62, .15); color: var(--hb-ink); }
.hb-flex__label { margin: 14px 0 8px; color: var(--hb-ink); font: 700 14px/1.2 var(--hb-font-body); }
.hb-flex__label:first-child { margin-top: 0; }
.hb-flex__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-flex__hint { margin: 16px 0 0; color: var(--hb-muted); font-size: 13px; }
.hb-sb__panel--when.is-flex .hb-cal,
.hb-sb__panel--when.is-flex .hb-sb__panel-foot { display: none; }
/* ============================================================ Host calculator */
.hb-calc { max-width: 960px; margin: 0 auto; padding: 24px 20px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 44, 62, .05), 0 18px 40px -22px rgba(16, 44, 62, .35); }
.hb-calc__title { margin: 12px 0 8px !important; color: var(--hb-ink); font: 800 clamp(24px, 4.5vw, 34px)/1.15 var(--hb-font-head) !important; }
.hb-calc__lead { margin: 0 0 20px; color: var(--hb-muted); font-size: 16px; line-height: 1.5; }
.hb-calc__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.hb-calc__form { display: grid; gap: 16px; }
.hb-calc__field { display: grid; gap: 6px; color: var(--hb-ink); font: 600 14px/1.3 var(--hb-font-body); }
.hb-calc__field small { color: var(--hb-muted); font-weight: 500; font-size: 13px; }
.hb-calc__field select, .hb-calc__field input[type="number"] { min-height: 48px; padding: 0 14px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink); font: 600 16px/1 var(--hb-font-body); }
.hb-calc__field input[type="range"] { width: 100%; accent-color: var(--hb-teal); }
.hb-calc__result { padding: 22px; background: var(--hb-deep); border-radius: 16px; color: #fff; }
.hb-calc__label { margin: 0; color: rgba(255, 255, 255, .72); font: 600 13px/1.3 var(--hb-font-body); text-transform: uppercase; letter-spacing: .06em; }
.hb-calc__big { margin: 2px 0 14px; color: #fff; font: 800 44px/1.1 var(--hb-font-head); }
.hb-calc__year { margin: 2px 0 14px; color: #7FD3CA; font: 700 24px/1.2 var(--hb-font-head); }
.hb-calc__note { margin: 0 0 16px; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.5; }
@media (min-width: 768px) { .hb-calc { padding: 36px; } .hb-calc__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; } }
/* ============================================================ Travel dashboard */
.hb-dash { max-width: 1200px; margin: 0 auto; padding: 8px 0 32px; }
.hb-dash[hidden], .hb-dash [hidden] { display: none !important; }
.hb-dash__bar { display: grid; gap: 12px; margin-bottom: 18px; }
.hb-dash__countries { display: flex; gap: 8px; margin: 0 calc(var(--hb-gutter) * -1); padding: 2px var(--hb-gutter) 6px; overflow-x: auto; scrollbar-width: none; }
.hb-dash__countries::-webkit-scrollbar { display: none; }
.hb-dash__place select { width: 100%; min-height: 48px; padding: 0 14px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink); font: 700 16px/1 var(--hb-font-body); }
.hb-dash__status { padding: 40px 0; color: var(--hb-muted); text-align: center; }
.hb-dash__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); transition: opacity .15s ease; }
.hb-dash__grid.is-busy { opacity: .45; pointer-events: none; }
.hb-dash__meta { margin: 20px 0 0; color: var(--hb-muted); font-size: 12px; line-height: 1.5; }
.hb-dash__meta a { color: var(--hb-teal-dark); text-decoration: underline; }
.hb-card { padding: 18px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 44, 62, .04); }
.hb-card__title { margin: 0 0 12px !important; color: var(--hb-muted); font: 700 12px/1.2 var(--hb-font-body) !important; letter-spacing: .08em; text-transform: uppercase; }
.hb-card__text { margin: 10px 0 0; color: var(--hb-ink-2); font-size: 14px; line-height: 1.5; }
.hb-card__big { margin: 0; color: var(--hb-ink); font: 800 26px/1.15 var(--hb-font-head); }
.hb-link { display: inline-block; margin-top: 10px; color: var(--hb-teal-dark); font-weight: 700; text-decoration: underline; }
.hb-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hb-now__temp { color: var(--hb-ink); font: 800 52px/1 var(--hb-font-head); }
.hb-now__label { color: var(--hb-muted); font-weight: 600; }
.hb-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-facts li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hb-line); font-size: 14px; }
.hb-facts li:last-child { padding-bottom: 0; border-bottom: 0; }
.hb-facts span { color: var(--hb-muted); }
.hb-facts strong { color: var(--hb-ink); text-align: right; }
.hb-sea { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.hb-sea__temp { color: var(--hb-teal-dark); font: 800 52px/1 var(--hb-font-head); }
.hb-sea__temp small { font-size: 22px; font-weight: 700; }
.hb-sea__label { color: var(--hb-ink); font-weight: 700; }
.hb-week { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hb-day { display: grid; grid-template-columns: 48px 32px minmax(0, 1fr) 64px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14px; }
.hb-day.is-best { background: var(--hb-teal-soft); }
.hb-day__name { color: var(--hb-ink); font-weight: 700; }
.hb-day__temp { color: var(--hb-muted); }
.hb-day__temp strong { color: var(--hb-ink); }
.hb-day__rain { display: none; color: var(--hb-muted); font-size: 12px; text-align: right; }
.hb-day__score { grid-column: 1 / -1; height: 4px; background: var(--hb-sand-2); border-radius: 4px; overflow: hidden; }
.hb-day__score i { display: block; height: 100%; background: var(--hb-teal); border-radius: 4px; }
.hb-day { grid-template-areas: "n i t r" "s s s s"; }
.hb-day__name { grid-area: n; } .hb-wx { grid-area: i; } .hb-day__temp { grid-area: t; } .hb-day__rain { grid-area: r; display: block; } .hb-day__score { grid-area: s; }
.hb-linklist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hb-linklist a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--hb-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.hb-linklist a:hover { color: var(--hb-teal-dark); text-decoration: underline; }
.hb-card--stays { background: var(--hb-teal-soft); border-color: transparent; }
@media (min-width: 700px) { .hb-dash__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hb-card--week { grid-column: 1 / -1; } .hb-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .hb-day { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "i" "t" "r" "s"; justify-items: center; text-align: center; padding: 12px 6px; } .hb-day__score { width: 100%; } .hb-day__rain { text-align: center; } }
@media (min-width: 1000px) { .hb-dash__bar { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; } .hb-dash__countries { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } .hb-dash__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb-card--now { grid-column: span 2; } }
[data-theme="dark"] .hb-day__score { background: rgba(255, 255, 255, .12); }
/* Dashboard page gutters */
.hb-dash-h1 { max-width: 1200px; margin: 28px auto 8px !important; padding: 0 var(--hb-gutter); color: var(--hb-ink); font: 800 clamp(28px, 6vw, 44px)/1.1 var(--hb-font-head) !important; }
.hb-dash-h1 + .np-page__lead { max-width: 1200px; margin: 0 auto 20px !important; padding: 0 var(--hb-gutter); color: var(--hb-muted); font-size: 17px; line-height: 1.5; }
.hb-dash { padding-right: var(--hb-gutter); padding-left: var(--hb-gutter); }
/* ================================================================ Webcams */
.hb-wc__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hb-wc__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .hb-wc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hb-wc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hb-wcam { margin: 0; }
.hb-wcam__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; background: var(--hb-deep); border: 0; border-radius: 14px; cursor: pointer; }
.hb-wcam__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hb-wcam__media img.is-fallback { transform: scale(1.34); }
.hb-wcam__media:hover img { transform: scale(1.03); }
.hb-wcam__media:hover img.is-fallback { transform: scale(1.38); }
.hb-wcam__media iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.hb-wcam__live { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; background: rgba(16, 44, 62, .82); border-radius: 8px; color: #fff; font: 700 11px/1 var(--hb-font-body); letter-spacing: .08em; text-transform: uppercase; }
.hb-wcam__live::before { content: ""; width: 8px; height: 8px; background: #E5484D; border-radius: 50%; animation: hb-pulse 1.6s ease-in-out infinite; }
@keyframes hb-pulse { 50% { opacity: .35; } }
.hb-wcam__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 58px; height: 58px; background: rgba(255, 255, 255, .92) no-repeat 54% 50% / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23102C3E'%3E%3Cpath d='M7 4.5v15l13-7.500z'/%3E%3C/svg%3E"); border-radius: 50%; box-shadow: 0 6px 20px rgba(16, 44, 62, .35); transform: translate(-50%, -50%); transition: transform .15s ease; }
.hb-wcam__media:hover .hb-wcam__play { transform: translate(-50%, -50%) scale(1.08); }
.hb-wcam__media.is-playing .hb-wcam__live, .hb-wcam__media.is-playing .hb-wcam__play { display: none; }
.hb-wcam.is-off img { filter: grayscale(1) brightness(.6); }
.hb-wcam__off { position: absolute; inset: auto 10px 10px 10px; z-index: 2; color: #fff; font: 600 13px/1.2 var(--hb-font-body); }
.hb-wcam.is-off .hb-wcam__media { cursor: default; }
.hb-wcam figcaption { padding: 8px 2px 0; color: var(--hb-ink); font-size: 14px; line-height: 1.3; }
.hb-wc__more { margin-top: 22px; padding: 14px 16px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 14px; }
.hb-wc__more summary { cursor: pointer; font-weight: 700; color: var(--hb-ink); }
.hb-wc__more .hb-cams { margin-top: 12px; }
.hb-wc__note { margin: 18px 0 0; color: var(--hb-muted); font-size: 12px; line-height: 1.5; }
.hb-card--wide { grid-column: 1 / -1; }
.hb-card--wide .hb-wc__grid { margin-bottom: 12px; }
/* ================================================== Emergency numbers + sights */
.hb-sos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.hb-sos a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--hb-sand); border-radius: 12px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-sos a span { color: var(--hb-muted); font-size: 12px; font-weight: 600; }
.hb-sos a strong { font: 800 22px/1.1 var(--hb-font-head); }
.hb-sos__main { grid-column: 1 / -1; background: var(--hb-terracotta-soft) !important; }
.hb-sos__main strong { color: var(--hb-accent); font-size: 30px !important; }
.hb-sos a:hover { background: var(--hb-sand-2); }
.hb-card__text--first { margin: 0 0 12px; }
.hb-sights { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hb-sights a { display: grid; gap: 3px; padding: 14px; background: var(--hb-sand); border-radius: 14px; color: var(--hb-ink-2) !important; font-size: 14px; line-height: 1.4; text-decoration: none !important; }
.hb-sights a:hover { background: var(--hb-sand-2); }
.hb-sights strong { color: var(--hb-ink); font-size: 16px; }
.hb-sights__kind { justify-self: start; padding: 2px 8px; background: var(--hb-teal-soft); border-radius: 6px; color: var(--hb-teal-dark); font: 700 11px/1.5 var(--hb-font-body); letter-spacing: .06em; text-transform: uppercase; }
.hb-sights__more { margin-top: 12px; }
.hb-sights__more summary { margin-bottom: 10px; color: var(--hb-teal-dark); font-weight: 700; cursor: pointer; }
@media (min-width: 700px) { .hb-card--wide > .hb-sights { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb-sights__more .hb-sights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Windy cameras, search and "show more" */
.hb-wc__search input { width: 100%; max-width: 480px; min-height: 48px; margin-bottom: 14px; padding: 0 16px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink); font: 600 16px/1 var(--hb-font-body); }
.hb-wcam__live.is-today::before { background: var(--hb-teal); animation: none; }
.hb-wcam figcaption span { display: block; color: var(--hb-muted); font-size: 12px; }
.hb-wc__morebtn { display: block; min-height: 48px; margin: 22px auto 0; padding: 0 24px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink); font: 700 15px/1 var(--hb-font-body); cursor: pointer; }
.hb-wc__morebtn:hover { border-color: var(--hb-ink); }
.hb-wc__empty { padding: 30px 0; color: var(--hb-muted); text-align: center; }
.hb-wc__note a { color: var(--hb-teal-dark); text-decoration: underline; }
/* ============================================ Help nearby, news, embassies */
.hb-help__group { margin: 16px 0 8px !important; color: var(--hb-ink); font: 700 15px/1.3 var(--hb-font-head) !important; }
.hb-help__group:first-of-type { margin-top: 0 !important; }
.hb-help { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-help li { display: grid; gap: 4px; padding: 12px 14px; background: var(--hb-sand); border-radius: 12px; }
.hb-help__main { display: grid; gap: 2px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-help__main strong { font-size: 15px; }
.hb-help__main span { color: var(--hb-muted); font-size: 13px; }
.hb-help__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--hb-muted); font-size: 13px; }
.hb-help__meta a { color: var(--hb-teal-dark); font-weight: 700; text-decoration: underline; }
.hb-help__tag { padding: 2px 8px; background: var(--hb-teal-soft); border-radius: 6px; color: var(--hb-teal-dark); font: 700 12px/1.5 var(--hb-font-body); font-style: normal; }
.hb-help__more { color: var(--hb-muted); font-size: 13px; background: transparent !important; }
.hb-emb__q { width: 100%; max-width: 420px; min-height: 46px; margin-bottom: 12px; padding: 0 14px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 12px; color: var(--hb-ink); font: 600 15px/1 var(--hb-font-body); }
.hb-news { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-news a { display: grid; gap: 2px; padding: 12px 14px; background: var(--hb-sand); border-radius: 12px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-news a:hover { background: var(--hb-sand-2); }
.hb-news strong { font-size: 15px; line-height: 1.35; }
.hb-news span { color: var(--hb-muted); font-size: 12px; }
@media (min-width: 900px) { .hb-help, .hb-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ================================================== Dashboard: toggles, alerts, practical */
.hb-card { position: relative; }
.hb-card.is-off { display: none !important; }
.hb-card__hide { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--hb-faint); cursor: pointer; opacity: .55; transition: opacity .15s ease, background-color .15s ease; }
.hb-card:hover .hb-card__hide, .hb-card__hide:focus-visible { opacity: 1; }
.hb-card__hide:hover { background: var(--hb-sand-2); color: var(--hb-ink); }
@media (hover: none) { .hb-card__hide { opacity: .8; } }
.hb-custom { margin: 0 0 14px; }
.hb-custom summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--hb-surface); border: 1px solid var(--hb-line-2); border-radius: 10px; color: var(--hb-ink); font: 600 14px/1 var(--hb-font-body); cursor: pointer; list-style: none; }
.hb-custom summary::-webkit-details-marker { display: none; }
.hb-custom[open] summary { border-color: var(--hb-teal); }
.hb-custom__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hb-custom__all { min-height: 36px; padding: 0 12px; background: none; border: 0; color: var(--hb-teal-dark); font: 700 13px/1 var(--hb-font-body); text-decoration: underline; cursor: pointer; }
.hb-custom .hb-chip[aria-pressed="false"] { background: var(--hb-sand-2); color: var(--hb-faint); text-decoration: line-through; border-color: transparent; }
.hb-custom .hb-chip[aria-pressed="true"]::before { content: ""; width: 12px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155B56' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E"); }
.hb-card--alert { background: #FFF4E5; border-color: #F4C98B; }
[data-theme="dark"] .hb-card--alert { background: #3A2A12; border-color: #7A5A22; }
.hb-card--alert .hb-card__title { color: #8A4B00; }
[data-theme="dark"] .hb-card--alert .hb-card__title { color: #F2B544; }
.hb-alerts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--hb-ink); font-size: 15px; }
.hb-pract { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; color: var(--hb-ink-2); font-size: 14px; line-height: 1.45; }
.hb-pract strong { display: block; color: var(--hb-ink); font-size: 13px; }
/* Audit round 2: bigger tap area for the hide buttons, readable "hidden" chips */
@media (max-width: 899px) { .hb-card__hide { top: 4px; right: 4px; width: 40px; height: 40px; opacity: .8; } .hb-card > .hb-card__title { padding-right: 36px; } }
.hb-custom .hb-chip[aria-pressed="false"] { color: var(--hb-muted); }
/* ================================================== Country dashboard + landing block */
.hb-cd { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); max-width: 1200px; margin: 0 auto; padding: 8px var(--hb-gutter) 32px; }
.hb-cd__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-cd__summary > div { display: grid; gap: 2px; padding: 14px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 14px; }
.hb-cd__summary span { color: var(--hb-muted); font-size: 12px; font-weight: 600; }
.hb-cd__summary strong { color: var(--hb-ink); font: 800 20px/1.2 var(--hb-font-head); }
.hb-cd__summary a { color: var(--hb-accent) !important; text-decoration: none; }
.hb-cd__maphead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hb-cd__maphead .hb-card__title { margin: 0 !important; }
.hb-cd__maphead .hb-tabs { margin: 0; }
.hb-cd__map { width: 100%; height: 340px; background: var(--hb-sand-2); border-radius: 12px; overflow: hidden; }
.hb-wm-wrap { background: none !important; border: 0 !important; }
.hb-wm { display: inline-grid; place-items: center; min-width: 46px; height: 28px; padding: 0 8px; border: 2px solid #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(16, 44, 62, .35); font: 800 14px/1 var(--hb-font-body); }
.hb-cd__places { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-cd__places a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--hb-sand); border-radius: 12px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-cd__places a:hover { background: var(--hb-sand-2); }
.hb-cd__pname { display: grid; gap: 1px; }
.hb-cd__pname small, .hb-cd__ptemp small { color: var(--hb-muted); font-size: 12px; }
.hb-cd__ptemp { display: grid; text-align: right; }
.hb-cd__ptemp strong { font: 800 22px/1.1 var(--hb-font-head); }
.hb-cd__cards { display: grid; gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.hb-cd__cards a { display: grid; gap: 3px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-cd__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hb-sand-2); border-radius: 14px; }
.hb-cd__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hb-cd__cards a:hover img { transform: scale(1.03); }
.hb-cd__badge { position: absolute; bottom: 8px; left: 8px; padding: 3px 8px; background: var(--hb-teal-dark); border-radius: 7px; color: #fff; font: 700 11px/1.4 var(--hb-font-body); font-style: normal; }
.hb-cd__cards strong { margin-top: 6px; font-size: 15px; line-height: 1.3; }
.hb-cd__cards small { color: var(--hb-muted); font-size: 13px; }
.hb-cd__price { font-weight: 700; font-size: 15px; }
.hb-cd__price small { font-weight: 500; }
.hb-cd__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin: 0; }
@media (min-width: 700px) { .hb-cd { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hb-cd__summary, .hb-cd__map-card, .hb-cd__stays, .hb-cd__links { grid-column: 1 / -1; } .hb-cd__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hb-cd__map { height: 440px; } .hb-cd__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Landing page block */
.hb-cw { max-width: 1200px; margin: 0 auto; padding: 18px var(--hb-gutter); }
.hb-cw__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hb-cw__title { margin: 0 !important; color: var(--hb-ink); font: 800 clamp(20px, 4vw, 26px)/1.2 var(--hb-font-head) !important; }
.hb-cw__sea { padding: 4px 10px; background: var(--hb-teal-soft); border-radius: 8px; color: var(--hb-teal-dark); font: 700 13px/1.4 var(--hb-font-body); }
.hb-cw__places { display: flex; gap: 10px; margin: 0 calc(var(--hb-gutter) * -1) 12px; padding: 2px var(--hb-gutter) 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
.hb-cw__places::-webkit-scrollbar { display: none; }
.hb-cw__places a { display: grid; grid-template-columns: 32px auto; grid-template-areas: "i n" "i t" "i s"; column-gap: 8px; align-items: center; min-width: 130px; padding: 10px 14px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 14px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-cw__places a:hover { border-color: var(--hb-ink); }
.hb-cw__places .hb-wx { grid-area: i; }
.hb-cw__name { grid-area: n; font-size: 13px; font-weight: 600; color: var(--hb-muted); }
.hb-cw__places strong { grid-area: t; font: 800 20px/1.1 var(--hb-font-head); }
.hb-cw__places small { grid-area: s; color: var(--hb-muted); font-size: 12px; }
.hb-cw__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 12px; padding: 0; list-style: none; }
.hb-cw__facts li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.hb-cw__facts span { color: var(--hb-muted); }
.hb-cw__facts a { color: var(--hb-accent) !important; text-decoration: none; }
.hb-cw__more { display: inline-block; color: var(--hb-teal-dark) !important; font-weight: 700; text-decoration: underline; }
@media (min-width: 900px) { .hb-cw__places { flex-wrap: wrap; margin: 0 0 12px; padding: 0; overflow: visible; } }
.hb-dash__over { margin: 0 0 12px; }
.hb-dash__over a { color: var(--hb-teal-dark); font-weight: 700; text-decoration: underline; }
/* ================================================== Place pages + global overview */
.hb-pp { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); max-width: 1200px; margin: 0 auto; padding: 4px var(--hb-gutter) 32px; }
.hb-pp[hidden], .hb-pp [hidden] { display: none !important; }
.hb-pp__crumbs { color: var(--hb-muted); font-size: 14px; }
.hb-pp__crumbs a { color: var(--hb-teal-dark); font-weight: 600; text-decoration: underline; }
.hb-pp__intro { margin: 0; max-width: 62ch; color: var(--hb-ink-2); font-size: 17px; line-height: 1.6; }
.hb-week--plain .hb-day__score { display: none; }
@media (min-width: 700px) { .hb-pp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hb-pp > .hb-pp__crumbs, .hb-pp > .hb-pp__intro, .hb-pp > .hb-card--wide, .hb-pp > .hb-cd__links { grid-column: 1 / -1; } }

.hb-gd { max-width: 1200px; margin: 0 auto; padding: 0 var(--hb-gutter) 8px; }
.hb-gd__h { margin: 0 0 12px !important; color: var(--hb-ink); font: 800 clamp(20px, 4vw, 26px)/1.2 var(--hb-font-head) !important; }
.hb-gd__countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.hb-gd__countries a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "i n t" "i s t"; align-items: center; column-gap: 10px; padding: 12px; background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 14px; color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-gd__countries a:hover { border-color: var(--hb-ink); }
.hb-gd__countries .hb-wx { grid-area: i; }
.hb-gd__countries strong { grid-area: n; font-size: 14px; line-height: 1.2; }
.hb-gd__countries small { grid-area: s; color: var(--hb-muted); font-size: 12px; }
.hb-gd__t { grid-area: t; font: 800 22px/1 var(--hb-font-head); }
.hb-gd__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
.hb-gd__mapbox { height: 340px; }
.hb-gd__facts { margin-bottom: 18px; }
.hb-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hb-table th, .hb-table td { padding: 10px 12px; border-bottom: 1px solid var(--hb-line); text-align: left; white-space: nowrap; color: var(--hb-ink); }
.hb-table thead th { color: var(--hb-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hb-table tbody th a { color: var(--hb-teal-dark); font-weight: 700; }
.hb-dash-h2 { max-width: 1200px; margin: 28px auto 12px !important; padding: 0 var(--hb-gutter); color: var(--hb-ink); font: 800 clamp(22px, 4.5vw, 30px)/1.2 var(--hb-font-head) !important; }
@media (min-width: 760px) { .hb-gd__countries { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hb-gd__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .hb-gd__mapbox { height: 420px; } }