@charset "utf-8";

.reservationTooltip {
    transition: opacity .4s ease-out;
    opacity: 0;
    pointer-events: none;
}

.reservationTooltip-arrow--b {
    content: '';
    position: absolute;
    left: 50%;
    bottom:0.75vw;
    transform: translateX(-50%);
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent;
    border-top: 0;
    border-bottom: 5.2vw solid #000;

}
.reservationTooltip-arrow--f {
    content: '';
    position: absolute;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent;
    border-top: 0;
    border-bottom: 5.2vw solid #fff;
}

.reservationTooltip p {
    position: absolute;
    line-height: 1;
    background: #fff;
    border: 0.3vw solid #000;
    white-space: nowrap;
    font-weight: bold;
    right: 0;
    bottom: -2vw;
    transform: translateY(50%);
    padding: 2vw 2vw;
    border-radius: 0.5rem;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 2px #000;
}


@media screen and (min-width: 1024px) {
    .reservationTooltip {
        width: 21rem;
        position: absolute;
        bottom: 0;
        right: 0;
        transition: all 0.5s ease;

    }
    .reservationTooltip-arrow--b {
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
        border-top: 0;
        bottom:4px;
        border-bottom: 2rem solid #000;
    }
    .reservationTooltip-arrow--f {
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
        border-top: 0;
        border-bottom: 2rem solid #fff;
    }
    .reservationTooltip p {
        border: 2px solid #000;
        padding: 0.38rem 0.57rem;
        font-size: 0.9em;
        line-height: 1.5;
        bottom: -0.4rem;
        letter-spacing: 0.05em;
        transition: opacity 0.1s ease;
    }

    .-inview .reservationTooltip{
        width: 19rem;
        transform: translateY(1.5rem);
    }
    .-inview .reservationTooltip p {
        transform: translateX(-0.5vw) translateY(50%);
    }
}
@media screen and (min-width: 1240px) {
    .-inview .reservationTooltip{
        width: calc(230px * var(--scale));
    }
}

.reservationTooltip .text-sm {
    font-size: 0.9em;
}
.reservationTooltip .text-xs {
    font-size: 0.7em;
}

.reservationTooltip.visible {
    opacity: 1;
    pointer-events: auto;
}

.c-buttonReserveWrap:hover  .reservationTooltip {
    opacity: 1;
    pointer-events: auto;
}



.reservationTooltip.hidden-permanent {
    display: none;
}