/*
 * Cura's chat button and its notice (inc/cura.php, assets/js/cura.js). Loaded only when Cura is on.
 *
 * Built on the tokens like consent.css. The button is navy with Activities Yellow text (13.34:1),
 * yellow with navy text on hover (13.34:1), bold capitals in a rounded square as the brand guide
 * asks, with a white edge so it still reads over the navy footer. The notice is navy text on white
 * (15.04:1) with the Blue rule the cookie banner has. Focus is the site's one navy and white ring
 * (refinements.css section 6), not restyled here.
 *
 * Where it sits: bottom right, above whatever bar the page has at the foot of the window (the phone
 * booking bar, the designed pages' sticky phone buttons), whose height scroll-state.js measures into
 * --bh-bottom-bar-height.
 *
 * What it must not cover. The aside is outside Mmenu's page wrapper (inc/cura.php says why), and that
 * wrapper (.mm-page) is a stacking context at z-index 1, so the button paints over everything inside
 * it, the header and every panel and scrim included, whatever their own z-index. Seen on dev, 9
 * November 2026: it sat on top of Option C's phone sheet. So it is hidden while one of the theme's
 * own overlays is open: the phone menu, Option C's booking shortcuts panel, a header dropdown, Book
 * Now's phone drawer, the concept pages' sheet, a Bootstrap modal and the PhotoSwipe gallery.
 * visibility, not display, so it also leaves the tab order. Voiceflow's own chat (div#voiceflow-chat,
 * once the visitor has started it) has the same fault and steps aside the same way. The cookie banner
 * (1050) and the dialogs opened with showModal() are above the button anyway.
 */

:root {
    /* The button's height and the gap under it: what the foot of the page keeps clear. */
    --bh-cura-room: calc(48px + 2 * var(--bh-space-4));
}

.bh-cura {
    position: fixed;
    right: max(var(--bh-space-4), env(safe-area-inset-right, 0px));
    bottom: calc(var(--bh-bottom-bar-height, 0px) + max(var(--bh-space-4), env(safe-area-inset-bottom, 0px)));
    z-index: 1020;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--bh-space-2);
    max-width: calc(100vw - 2 * var(--bh-space-4));
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    /* The empty space around the button and the notice lets presses through to the page. */
    pointer-events: none;
}

.bh-cura > * {
    pointer-events: auto;
}

.bh-cura[hidden],
.bh-cura [hidden] {
    display: none;
}

.mm-wrapper--opened :is(.bh-cura, #voiceflow-chat),
.navc-open :is(.bh-cura, #voiceflow-chat),
.modal-open :is(.bh-cura, #voiceflow-chat),
:root:has(.c-navbar .dropdown-menu.show, .bh-book--open, .bh-v4-sheet.is-open, .pswp--open) :is(.bh-cura, #voiceflow-chat) {
    visibility: hidden;
}

/* ---- The button ------------------------------------------------------------------------- */

.bh-cura__launch {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: 48px;
    margin: 0;
    padding: 0 var(--bh-space-5);
    border: 2px solid var(--bh-white);
    border-radius: 6px;
    background: var(--bh-navy);
    box-shadow: var(--bh-shadow-md);
    color: var(--bh-yellow);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-cura__launch:hover {
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-cura__icon {
    flex: 0 0 auto;
}

/* On a phone the full label made the button about 60% of a 375px screen wide, so it hid much of
   whatever scrolled under it (seen on dev, 9 November 2026: the last Adventure Pass card, the Quick
   Book list). Below 480px only "Chat" shows beside the speech bubble. " with Cura" is clipped, not
   removed, so the button's name stays "Chat with Cura" and still contains the word it shows. */
@media (max-width: 479.98px) {
    .bh-cura__launch {
        padding: 0 var(--bh-space-4);
    }

    .bh-cura__label-rest {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* While the widget loads, after a press. */
.bh-cura--loading .bh-cura__launch {
    cursor: progress;
    opacity: 0.85;
}

/* ---- The notice ------------------------------------------------------------------------- */

.bh-cura__panel {
    box-sizing: border-box;
    width: min(22rem, calc(100vw - 2 * var(--bh-space-4)));
    max-height: calc(100vh - var(--bh-bottom-bar-height, 0px) - 6rem);
    max-height: calc(100dvh - var(--bh-bottom-bar-height, 0px) - 6rem);
    padding: var(--bh-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md), 0 0 0 1px var(--bh-line);
    color: var(--bh-on-white);
}

.bh-cura__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    line-height: var(--bh-leading-tight);
    text-transform: uppercase;
}

/* Focus is put on the title so a screen reader starts at the top. It is not a control, so no ring. */
.bh-cura__title:focus {
    outline: none;
}

.bh-cura__notice,
.bh-cura__policy {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-cura__policy a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bh-cura__policy a:hover {
    color: var(--bh-navy);
}

.bh-cura__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin-top: var(--bh-space-4);
}

.bh-cura__btn {
    display: inline-flex;
    flex: 1 1 8rem;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-navy);
    border-radius: 6px;
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-cura__btn--start {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-cura__btn--start:hover {
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-cura__btn--later {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-cura__btn--later:hover {
    background: var(--bh-surface-2);
}

/* "Cura could not be loaded just now", above the button. */
.bh-cura__status--shown {
    box-sizing: border-box;
    max-width: min(22rem, calc(100vw - 2 * var(--bh-space-4)));
    margin: 0;
    padding: var(--bh-space-3) var(--bh-space-4);
    border-left: 6px solid var(--bh-pink);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md), 0 0 0 1px var(--bh-line);
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

@media (prefers-reduced-motion: no-preference) {
    .bh-cura__launch {
        transition: background-color 0.15s ease-out, color 0.15s ease-out;
    }

    .bh-cura__panel:not([hidden]) {
        animation: bh-cura-rise 0.15s ease-out;
    }
}

@keyframes bh-cura-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- Room for it (WCAG 2.2 2.4.11) -------------------------------------------------------- */

/* A control reached by the keyboard is scrolled clear of the button as well as of the bars, as
   refinements.css section 48 does for the bars alone. :where() keeps the rule weightless, so a
   component's own scroll margin still wins. */
:where(html.bh-cura-on) :where(a[href], area[href], button, input, select, textarea, summary, iframe, [tabindex], [contenteditable], [id]) {
    scroll-margin-bottom: calc(var(--bh-scroll-clear-bottom, var(--bh-space-4)) + var(--bh-cura-room));
}

/* And the footer ends with room for it, so the last of the page can be scrolled out from under it. */
html.bh-cura-on .bh-foot::after {
    display: block;
    height: calc(var(--bh-bottom-bar-height, 0px) + var(--bh-cura-room));
    content: "";
}

@media print {
    .bh-cura {
        display: none !important;
    }
}