/* =========================================================
   Etna Lemon Sea - global shell: skip link, navbar, checkout header, footer,
   mobile booking bar, consent banner and the chat bubble (the chat panel itself
   lives in chat.css, loaded on the first click).
   Loaded on every page right after site.css (design tokens live there).
   z-order of the floating layers: mobile bar 1040 < chat bubble 1045 < consent 1050 < open chat 1056.
   ========================================================= */
.site-nav,
.site-footer,
.mobile-book-bar,
.consent-banner,
#chat-widget-container,
.skip-link {
    --shell-font: var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --shell-ease: cubic-bezier(.2, .8, .2, 1);
    font-family: var(--shell-font);
}

main:focus {
    outline: none;
}

/* ---------- Skip link ---------- */
.skip-link.visually-hidden-focusable:focus,
.skip-link.visually-hidden-focusable:focus-visible {
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 2000;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    clip: auto !important;
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--shadow);
    outline: 2px solid var(--lemon);
    outline-offset: 2px;
}

/* ---------- Focus ring shared by every shell control ---------- */
.site-nav a:focus-visible,
.site-nav button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.mobile-book-bar a:focus-visible,
.consent-banner a:focus-visible,
.consent-banner button:focus-visible,
#chat-toggle-btn:focus-visible {
    outline: 2px solid var(--sea);
    outline-offset: 2px;
    box-shadow: none;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible,
.consent-banner a:focus-visible,
.consent-banner button:focus-visible,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .brand:focus-visible,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .nav-link:focus-visible,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .lang-switch a:focus-visible,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .nav-cta:focus-visible,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .navbar-toggler:focus-visible {
    outline-color: var(--lemon);
}

/* ---------- Navbar ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--nav-h);
    background: rgba(251, 247, 239, .97);
    border-bottom: 1px solid var(--line);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Frosted glass only where it is cheap and readable (large screens). */
@media (min-width: 992px) {
    .site-nav {
        background: rgba(251, 247, 239, .78);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

.site-nav.is-overlay {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Soft scrim so the white labels stay readable over any part of the hero photo. */
.site-nav.is-overlay::before {
    content: "";
    position: absolute;
    inset: 0 0 -40px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 22, 29, .5), rgba(6, 22, 29, 0));
    transition: opacity .3s ease;
}

.site-nav.is-overlay.is-scrolled,
.site-nav.is-overlay.is-open {
    background: rgba(251, 247, 239, .97);
    border-color: var(--line);
    box-shadow: 0 10px 30px -22px rgba(11, 37, 48, .5);
}

.site-nav.is-overlay.is-scrolled::before,
.site-nav.is-overlay.is-open::before {
    opacity: 0;
}

@media (min-width: 992px) {
    .site-nav.is-overlay.is-scrolled,
    .site-nav.is-overlay.is-open {
        background: rgba(251, 247, 239, .78);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

.site-nav .navbar {
    padding: 0;
}

.nav-container,
.nav-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 12px;
    width: 100%;
    max-width: 1440px;
    min-height: var(--nav-h);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
}

/* Brand (nav and footer) */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand img {
    height: 44px;
    width: auto;
}

.brand picture {
    display: contents;
}

.brand-word {
    font-family: var(--shell-font, inherit);
    font-weight: 650;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--ink);
    white-space: nowrap;
}

.brand-word small {
    display: block;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .32rem;
}

/* Links */
.site-nav .navbar-nav {
    align-items: center;
}

.site-nav .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.site-nav .nav-link:hover {
    color: var(--sea);
    background: rgba(15, 102, 114, .07);
}

.site-nav .nav-link[aria-current="page"],
.site-nav .nav-link.is-current {
    color: var(--sea);
    font-weight: 600;
}

/* "Un mese al mare": a lemon dot draws the eye to the monthly stays */
.site-nav .nav-link.nav-link--accent::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--lemon);
    box-shadow: 0 0 0 3px rgba(244, 197, 52, .3);
}

.site-nav .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: 2px;
    border-top-width: 5px;
    border-right-width: 4px;
    border-left-width: 4px;
    transition: transform .2s ease;
}

.site-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.nav-guides .dropdown-menu {
    min-width: 264px;
    margin-top: 10px !important;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.nav-guides .dropdown-item {
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.nav-guides .dropdown-item:hover,
.nav-guides .dropdown-item:focus {
    background: rgba(15, 102, 114, .08);
    color: var(--sea);
}

.nav-guides .dropdown-item[aria-current="page"] {
    color: var(--sea);
    font-weight: 600;
}

.nav-guides .dropdown-item:focus-visible {
    outline: 2px solid var(--sea);
    outline-offset: -2px;
}

.nav-group-label {
    display: none;
}

/* Tools: host area, language, CTA */
.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-nav .nav-link.nav-login {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.3rem;
    color: var(--muted);
}

.site-nav .nav-link.nav-login:hover {
    color: var(--sea);
}

.nav-login-label {
    display: none;
    font-size: .9375rem;
    margin-left: 10px;
}

.nav-account {
    flex-direction: row;
    gap: 4px;
}

.nav-logout {
    margin: 0;
}

.nav-logout .btn-link {
    text-decoration: none;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.lang-switch a:hover {
    color: var(--sea);
    background: rgba(15, 102, 114, .07);
}

.lang-switch a.is-active {
    color: var(--ink);
}

.lang-sep {
    width: 1px;
    height: 14px;
    background: currentColor;
    color: var(--muted);
    opacity: .45;
}

/* Booking CTA (lemon: the only lemon action in the shell) */
.site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.nav-cta-price {
    font-weight: 500;
}

.nav-cta-sep {
    opacity: .55;
}

.site-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}

.site-nav .navbar-toggler:focus {
    box-shadow: none;
}

.site-nav .navbar-toggler-icon {
    width: 24px;
    height: 24px;
}

/* Over the hero, before scrolling: light text */
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .nav-link,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .brand-word,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .lang-switch a.is-active {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .brand-word small,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .lang-switch a,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .lang-sep {
    color: rgba(255, 255, 255, .86);
}

.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .nav-link:hover,
.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .lang-switch a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.site-nav.is-overlay:not(.is-scrolled):not(.is-open) .navbar-toggler-icon {
    filter: invert(1);
}

/* Desktop: everything on one line, never wrapping */
@media (min-width: 1200px) {
    .nav-container {
        flex-wrap: nowrap;
    }

    .nav-quick {
        display: none;
    }

    .site-nav .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
    }

    .nav-links {
        flex-direction: row;
        margin: 0 auto;
        gap: 2px;
    }

    .nav-tools {
        flex-shrink: 0;
    }
}

/* 1200-1439 px: a little tighter so IT and EN both fit */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .nav-container {
        gap: 0 8px;
    }

    .site-nav .nav-links .nav-link,
    .site-nav .nav-account .nav-link {
        padding: 8px 9px;
        font-size: .9rem;
    }

    .nav-tools {
        gap: 4px;
    }

    .site-nav .nav-cta {
        padding: 0 16px;
        font-size: .9rem;
    }

    .brand {
        gap: 8px;
    }

    .brand img {
        height: 40px;
    }

    .brand-word {
        font-size: 1.1rem;
    }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
    .site-nav .nav-links .nav-link,
    .site-nav .nav-account .nav-link {
        padding: 8px 7px;
    }

    .nav-cta-price,
    .nav-cta-sep {
        display: none;
    }

    /* Signed in (host): the account icon gives way so "Pannello admin" and "Esci" still fit; the dashboard links to it */
    .nav-account .nav-login {
        display: none;
    }
}

/* Below 1200 px: logo + CTA + menu button; the links open as a panel */
@media (max-width: 1199.98px) {
    .nav-quick {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .site-nav .navbar-collapse {
        flex-basis: 100%;
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100svh - var(--nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-links {
        align-items: stretch !important;
        padding: 8px 0 4px;
        border-top: 1px solid var(--line);
    }

    .site-nav .nav-links .nav-link {
        width: 100%;
        min-height: 48px;
        padding: 12px 4px;
        border-radius: 0;
        font-size: 1.0625rem;
    }

    .site-nav .nav-links .nav-link:hover {
        background: transparent;
    }

    /* The Guides group is shown expanded, without a second toggle */
    .nav-guides .dropdown-toggle {
        display: none;
    }

    .nav-group-label {
        display: block;
        padding: 16px 4px 4px;
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .nav-guides .dropdown-menu {
        position: static !important;
        display: block;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none !important;
    }

    .nav-guides .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 4px;
        border-radius: 0;
        font-size: 1.0625rem;
        white-space: normal;
    }

    .nav-guides .dropdown-item:hover,
    .nav-guides .dropdown-item:focus {
        background: transparent;
    }

    .nav-tools {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0 20px;
        border-top: 1px solid var(--line);
    }

    .site-nav .nav-link.nav-login {
        justify-content: flex-start;
        padding: 0 4px;
    }

    .nav-login-label {
        display: inline;
    }

    .nav-account {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* Same left edge as the menu links above */
    .site-nav .nav-account .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
        border: 0;
        text-align: left;
    }

    .site-nav .nav-cta--full {
        display: none;
    }

    /* Open menu: an opaque panel (no hero text showing through) and a dimmed page below it */
    .site-nav.is-open,
    .site-nav.is-overlay.is-open {
        z-index: 1046; /* above the mobile bar and the chat bubble, which get dimmed too */
        background: #fbf7ef;
        box-shadow: 0 0 0 100vmax rgba(6, 22, 29, .38);
    }

    .brand img {
        height: 38px;
    }

    .brand-word {
        font-size: 1.08rem;
    }
}

/* Phones: the mobile bar carries the booking CTA, so the header keeps only logo and menu;
   the CTA is still inside the opened menu. */
@media (max-width: 575.98px) {
    .site-nav .nav-cta--compact {
        display: none;
    }

    .site-nav .nav-cta--full {
        display: inline-flex;
        width: 100%;
        min-height: 48px;
    }

    .brand img {
        height: 34px;
    }

    .brand-word {
        font-size: 1.02rem;
    }

    .brand-word small {
        font-size: .56rem;
    }
}

/* Small screens: no frosted glass (cost and readability), solid colour instead */
@media (max-width: 991.98px) {
    .site-nav,
    .site-nav.is-overlay.is-scrolled,
    .site-nav.is-overlay.is-open {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ---------- Checkout header: logo, back to the house, WhatsApp, language ---------- */
.checkout-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.nav-back:hover {
    color: var(--sea);
    background: rgba(15, 102, 114, .07);
}

.nav-back .bi {
    font-size: .85em;
}

/* WhatsApp green with ink text and icon: 8:1, white on #25d366 would be only 2:1 */
.site-nav .btn-whatsapp,
.mobile-book-bar .btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: var(--ink);
}

.site-nav .btn-whatsapp:hover,
.mobile-book-bar .btn-whatsapp:hover {
    background: #3fe07c;
    border-color: #3fe07c;
    color: var(--ink);
}

.nav-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
}

.nav-wa .bi {
    font-size: 1.15rem;
}

.site-nav--checkout .nav-bar {
    flex-wrap: nowrap;
}

@media (max-width: 399.98px) {
    .site-nav--checkout .nav-bar {
        gap: 0 4px;
    }

    .nav-back {
        padding: 0 6px;
        font-size: .875rem;
    }

    .site-nav--checkout .lang-switch a {
        min-width: 28px;
        padding: 0 4px;
    }
}

@media (max-width: 575.98px) {
    .site-nav--checkout .brand-word {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }

    .nav-wa {
        padding: 0;
    }

    .nav-wa-label {
        display: none;
    }

    .checkout-tools {
        gap: 4px;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    padding: clamp(56px, 7vw, 96px) 0 32px;
    background: var(--ink);
    color: rgba(255, 255, 255, .74);
    font-size: .9375rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: 40px clamp(24px, 4vw, 56px);
}

.site-footer .brand img.brand-tile {
    height: 44px;
    padding: 6px 9px;
    background: var(--sand);
    border-radius: 14px;
    box-sizing: content-box;
}

.site-footer .brand-word {
    color: #fff;
}

.site-footer .brand-word small {
    color: rgba(255, 255, 255, .66);
}

.footer-tagline {
    max-width: 36ch;
    margin: 20px 0 24px;
    line-height: 1.55;
}

.footer-cta .btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 600;
}

.footer-cta-note {
    max-width: 38ch;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: .8125rem;
    line-height: 1.5;
}

.footer-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    margin: 0;
}

/* :not(.btn) keeps the lemon CTA dark-on-lemon (A11Y-01) */
.site-footer a:not(.btn) {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.site-footer a:not(.btn):hover {
    color: var(--lemon);
}

.footer-links a {
    display: inline-block;
    padding: 6px 0;
    line-height: 1.4;
}

.footer-links .bi {
    margin-right: 8px;
}

.footer-phone {
    white-space: nowrap;
}

.footer-address {
    margin: 12px 0 0;
    font-style: normal;
    font-size: .875rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .66);
}

/* Legal registration line (CIN / CIR) */
.footer-registration {
    margin-top: 48px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .875rem;
    color: rgba(255, 255, 255, .8);
}

.footer-registration i {
    color: var(--lemon);
    margin-right: .35rem;
}

.footer-registration strong {
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .03em;
}

/* A code never breaks in the middle: the line wraps between "CIN …" and "CIR …" */
.footer-registration .registration-pair {
    display: inline-block;
    white-space: nowrap;
}

/* Phones: label and codes as three tidy lines, without separators at the line starts */
@media (max-width: 575.98px) {
    .footer-registration .registration-pair {
        display: block;
        margin-top: 4px;
    }

    .footer-registration .registration-sep {
        display: none;
    }
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .66);
    font-size: .8125rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal a,
.footer-link-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.site-footer .footer-legal a:not(.btn),
.footer-link-button {
    color: rgba(255, 255, 255, .72);
}

.footer-link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    transition: color .2s ease;
}

.footer-link-button:hover {
    color: var(--lemon);
}

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .footer-grid {
        gap: 32px 20px;
    }

    .footer-contacts {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Room under the last footer row for the chat bubble */
body.has-chat .site-footer {
    padding-bottom: 96px;
}

/* ---------- Mobile booking bar (phones only) ---------- */
.mobile-book-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-book-bar {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 1040;
        align-items: center;
        gap: 8px;
        min-height: 64px;
        padding: 8px 8px 8px 16px;
        background: rgba(255, 255, 255, .98);
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: 0 18px 40px -14px rgba(11, 37, 48, .45);
        transform: translateY(calc(100% + 24px));
        visibility: hidden;
        transition: transform .45s var(--shell-ease), visibility 0s linear .45s;
    }

    .mobile-book-bar.is-visible {
        transform: none;
        visibility: visible;
        transition: transform .45s var(--shell-ease), visibility 0s;
    }

    body.has-mobile-bar .site-footer {
        padding-bottom: 104px;
    }
}

.mbb-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.mbb-main {
    overflow: hidden;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mbb-unit {
    color: var(--muted);
    font-weight: 500;
}

.mbb-sub {
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mbb-wa {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    font-size: 1.25rem;
}

.mbb-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: none;
}

/* ---------- Consent banner: one compact bottom sheet ---------- */
.consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 8px 8px 20px;
    background: rgba(11, 37, 48, .97);
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .4s var(--shell-ease);
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner.is-visible {
    opacity: 1;
    transform: none;
}

.consent-text {
    margin: 0;
}

.consent-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.consent-actions {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
}

/* Accept and Reject look exactly the same (no nudging) */
.consent-btn {
    min-width: 88px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.consent-btn:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5);
}

@media (max-width: 575.98px) {
    .consent-banner {
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        gap: 10px;
        padding: 8px 8px 8px 14px;
        border-radius: 18px;
        font-size: .78rem;
        line-height: 1.3;
    }

    .consent-btn {
        min-width: 0;
        padding: 0 12px;
    }
}

/* While the banner is open the mobile bar waits (it comes back after the choice) */
body.consent-open .mobile-book-bar.is-visible {
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
}

/* ---------- Chat bubble (the panel styles load with chat.css) ---------- */
#chat-toggle-btn {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 14px 30px -10px rgba(11, 37, 48, .55);
    cursor: pointer;
    transform: translateY(calc(-1 * var(--fab-lift, 0px)));
    transition: transform .4s var(--shell-ease), opacity .3s ease, visibility 0s, background-color .2s ease;
}

#chat-toggle-btn:hover {
    background: var(--ink-2);
}

#chat-toggle-btn[aria-busy="true"] {
    opacity: .7;
    cursor: progress;
}

/* Home: the bubble waits until the hero has been left behind */
#chat-widget-container.is-deferred #chat-toggle-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(16px - var(--fab-lift, 0px))) scale(.9);
    transition: transform .4s var(--shell-ease), opacity .3s ease, visibility 0s linear .4s;
}

/* The open chat covers the bubble on phones */
body.chat-open #chat-toggle-btn {
    opacity: 0;
    visibility: hidden;
}

@media (min-width: 481px) {
    body.chat-open #chat-toggle-btn {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 767.98px) {
    #chat-toggle-btn {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

/* ---------- Page wrapper of the inner pages ---------- */
.page-shell {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* photo viewer and photo sheet take the whole screen: hide the floating buttons */
body.overlay-open #chat-widget-container,
body.overlay-open .mobile-book-bar {
    display: none !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav::before,
    .site-nav .nav-link,
    .site-nav .dropdown-toggle::after,
    .mobile-book-bar,
    .mobile-book-bar.is-visible,
    .consent-banner,
    #chat-toggle-btn,
    #chat-widget-container.is-deferred #chat-toggle-btn {
        transition: none !important;
    }

    .consent-banner {
        transform: none;
    }

    .site-nav .btn:hover,
    .site-footer .btn:hover,
    .mobile-book-bar .btn:hover {
        transform: none;
    }
}