/* Size, position and the label of the floating chat button on desktop; its look is in "messenger-chat-button-base.css" */
.messenger-chat-button {
    /* Follows the width of the window: the height of the order button up to 1280px, 60px at 1920px */
    --messenger-chat-button-size: clamp(48px, 24px + 1.875vw, 90px);
    /* Above the floating button ".fixed-btn" and the price block that takes its place at the top of a journey page */
    --messenger-chat-button-raised-bottom: calc(clamp(50px, 30px + 1.041667vw, 70px) + 82px);

    display: grid;
    /* The only column is the label. Closed, it leaves the circle with the icon */
    grid-template-columns: 0fr;
    /* The label is kept at the icon while the column opens */
    justify-content: end;
    align-items: center;
    /* The gutter of the site, the same as of the floating button ".fixed-btn" */
    right: var(--page-gutter, 50px);
    bottom: var(--messenger-chat-button-raised-bottom);
    height: var(--messenger-chat-button-size);
    /* The place of the icon: the disc inside the border */
    padding-right: calc(var(--messenger-chat-button-size) - 2 * var(--messenger-chat-button-border));
    overflow: hidden;
    /* The text of the order button ".btn-basic" */
    font-size: clamp(16px, 12px + .208333vw, 20px);
    font-weight: 700;
    line-height: 1.2;
    /* The overshoot makes the button hop when a floating button appears under it */
    transition: bottom .35s cubic-bezier(.34, 1.45, .64, 1), grid-template-columns .18s ease;
}

/* Not the colours of a link of the site */
.messenger-chat-button,
.messenger-chat-button:hover,
.messenger-chat-button:focus {
    color: #131313;
    text-decoration: none;
}

/*
 * The button opens into a pill with the label under the pointer and on keyboard focus. It is fixed by
 * its right edge, so it grows to the left: the right edge and the icon stay under the pointer.
 */
@media (hover: hover) {
    .messenger-chat-button:hover {
        grid-template-columns: 1fr;
    }
}

.messenger-chat-button:focus-visible {
    grid-template-columns: 1fr;
}

.messenger-chat-button_label {
    /* The text stands in its final place from the start: the growing button uncovers it from the right */
    justify-self: end;
    /* Lets the column close */
    min-width: 0;
    white-space: nowrap;
}

.messenger-chat-button_label-text {
    padding: 0 .8em 0 1.5em;
}

/* Browsers without ":has()" keep the raised position on every page: higher than needed, but never over a button */
@supports selector(:has(*)) {
    .messenger-chat-button {
        bottom: 30px;
    }

    /*
     * Raised only while the corner is taken: by a floating button that is shown (they are hidden with the
     * "hidden" class), or by the price block of a journey page, which stands there on the first screen
     * until the floating button replaces it.
     */
    body:has(.fixed-btn:not(.hidden)) .messenger-chat-button,
    body:has(.page-nav_container.in-tour) .messenger-chat-button {
        bottom: var(--messenger-chat-button-raised-bottom);
    }
}

@media (prefers-reduced-motion: reduce) {
    .messenger-chat-button {
        transition: none;
    }
}