a.yButton.bottom.left {
    display: flex !important;
    align-items: center;
    justify-content: center;
    left: var(--spacing-24) !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--spacing-24) !important;
    width: calc(var(--spacing-34) * 5) !important;
    height: calc(var(--spacing-24) * 2) !important;
    border-radius: var(--radius-pill);
    background-color: var(--color-blue);
    box-shadow: var(--shadow-sm);
    z-index: 90 !important;
    text-decoration: none;
    transition: background-color var(--transition-base);
}

a.yButton.bottom.left:hover {
    background-color: var(--color-blue-hover);
}

a.yButton.bottom.left:active {
    background-color: var(--color-blue-dark);
}

a.yButton.bottom.left .yButtonBackground,
a.yButton.bottom.left .yButtonWave,
a.yButton.bottom.left .yButtonIcon {
    display: none !important;
}

a.yButton.bottom.left .yButtonText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-heading) !important;
    letter-spacing: normal !important;
    color: var(--color-white) !important;
}

.header-booking[hidden] {
    display: none;
}

@media (max-width: 899px) {
    .header__top-inner:has(.header-booking) {
        flex-wrap: wrap;
        row-gap: var(--spacing-5);
    }

    .header__top-inner:has(.header-booking:not([hidden])) {
        padding-bottom: 0;
        row-gap: 0;
    }

    body > a.yButton.bottom.left {
        display: none !important;
    }

    .header-booking {
        order: 5;
        flex: 0 0 calc(100% + max(var(--container-padding), env(safe-area-inset-left)) + max(var(--container-padding), env(safe-area-inset-right)));
        min-width: 0;
        margin-left: calc(-1 * max(var(--container-padding), env(safe-area-inset-left)));
        margin-right: calc(-1 * max(var(--container-padding), env(safe-area-inset-right)));
    }

    .header-booking > a.yButton.bottom.left {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: calc(var(--spacing-14) * 2) !important;
        border-radius: 0;
        background-color: transparent;
        border-top: 1px solid color-mix(in srgb, var(--color-off-black) 6%, transparent);
        box-shadow: none;
        z-index: auto !important;
    }

    .header-booking > a.yButton.bottom.left:hover {
        background-color: color-mix(in srgb, var(--color-white) 12%, transparent);
    }

    .header-booking > a.yButton.bottom.left:active {
        background-color: color-mix(in srgb, var(--color-white) 24%, transparent);
    }

    .header-booking > a.yButton.bottom.left .yButtonText {
        color: var(--color-gray-dark) !important;
        font-size: var(--font-size-xs) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.yButton.bottom.left {
        transition: none;
    }
}
