/* Multi-room basket of the hotel page (loaded only when the hotel has multi-room on).
   Screens from 1700 px: a card floating in the free margin at the left of the screen, outside the content, built from the same pieces as the booking
   details of guest_name.php (.card__dateil-container, .detail__room-item, .capacity-box, .room__meal-item, check-in / check-out).
   Narrower screens: the same card as a bottom sheet. Closed it shows the number of rooms, the total and "continue"; slide it up (tap or swipe) to see the rooms. */

/* ---------- "add room" box on a room card (replaces the single "book" button) ---------- */
.basket-add-box {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: stretch;
    min-width: 9.5rem;
}

.basket-add-box__extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    color: #555;
}

.basket-add-box__extra .form-select {
    width: 4.5rem;
    min-width: 4.5rem;
}

/* the extra-guests selector: the number on the right, the dropdown arrow on the left (the page is right-to-left; the arrow is a background
   image at the physical left, so the text is aligned to the physical right with room for the arrow on the left) */
.basket-add-box__extra .form-select,
.basket-item__extra .form-select {
    direction: rtl;
    text-align: right;
    text-align-last: right;
    padding: .25rem .75rem .25rem 2rem;
    background-position: left .6rem center;
}

/* ---------- the card ---------- */
.basket-bar [hidden] {
    display: none !important;
}

.basket-bar__inner {
    background: #fff;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06);
}

.basket-bar__empty {
    margin: 0 0 .5rem;
    color: #757f88;
    font-size: .9rem;
    line-height: 1.8;
}

/* an empty basket shows its hint, a filled one its rooms */
.basket-bar:not(.is-empty) .basket-bar__empty,
.basket-bar.is-empty [data-basket-items],
.basket-bar.is-empty .basket-bar__clear,
.basket-bar.is-empty .basket-bar__divider {
    display: none;
}

.basket-bar .detail__room-item {
    position: relative;
}

.basket-item__remove {
    flex: 0 0 auto;
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #b00020;
    cursor: pointer;
}

.basket-item__extra {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: #424c55;
}

.basket-item__extra .form-select {
    width: 4.5rem;
    min-width: 4.5rem;
}

.basket-item__price {
    margin-inline-start: auto;
    white-space: nowrap;
    font-weight: 700;
    color: #424c55;
}

.basket-item__price small {
    font-weight: 400;
    color: #757f88;
}

.basket-bar__clear {
    border: 0;
    background: none;
    color: #b00020;
    font-size: .85rem;
    padding: .6rem 0 0;
    cursor: pointer;
}

.basket-bar__message {
    margin: .5rem 0;
    padding: .4rem .7rem;
    border-radius: 6px;
    background: #fff4e5;
    color: #7a4b00;
    font-size: .85rem;
    line-height: 1.6;
}

.basket-bar__message--error {
    background: #fdecea;
    color: #8a1c14;
}

.basket-bar__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
}

.basket-bar__count {
    font-weight: 700;
    color: #424c55;
}

.basket-bar__total {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.basket-bar__total .price-currency {
    font-weight: 300;
    font-size: 1rem;
}

.basket-bar__go {
    margin-inline-start: auto;
    min-width: 8rem;
    padding: .65rem 1rem;
    border: 0;
    border-radius: .75rem;
    background: #0db38a;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.basket-bar__go:disabled {
    background: #bfc7cc;
    cursor: not-allowed;
}

/* ---------- large screens: the box floats at the left edge of the screen, outside the content ---------- */
@media (min-width: 1700px) {
    /* the content area is at most 1140 px wide and centred, so from 1700 px there is a margin of 280 px or more at the left of the screen.
       Narrower screens have no usable margin: they use the sheet below. Only while the rooms section is in view (basket.js sets .is-in-view). */
    .basket-bar {
        position: fixed;
        left: 1rem;
        top: 6.25rem; /* the real value is set by basket.js: just under the page's own sticky search bar */
        width: 16.5rem; /* the real width is set by basket.js: the free space up to the room cards */
        z-index: 1030;
    }

    .basket-bar:not(.is-in-view) {
        display: none;
    }

    .basket-bar__backdrop,
    .basket-bar__handle,
    .basket-bar__toggle {
        display: none;
    }

    /* the rest of the box (title, total, button, padding) is about 15 rem; the list scrolls when the rooms do not fit */
    .basket-bar__details {
        max-height: max(8rem, calc(100vh - var(--basket-top, 6.25rem) - 15rem));
        overflow-y: auto;
        padding-inline: .15rem;
    }

    /* basket.js sizes the box to the free space and tells how many columns of rooms fit */
    .basket-bar .detail__room-box[data-basket-items] {
        display: grid;
        grid-template-columns: repeat(var(--basket-cols, 1), minmax(0, 1fr));
        gap: .6rem;
        align-items: start;
    }

    .basket-bar__row {
        flex-direction: column;
        align-items: stretch;
    }

    .basket-bar__total {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .basket-bar__go {
        margin-inline-start: 0;
        width: 100%;
    }

    /* a wide box: the total and the button share one line */
    .basket-bar--wide .basket-bar__row {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }

    .basket-bar--wide .basket-bar__total {
        flex: 1 1 auto;
    }

    .basket-bar--wide .basket-bar__go {
        width: auto;
        min-width: 12rem;
    }
}

/* ---------- small screens: the bottom sheet ---------- */
@media (max-width: 1699.98px) {
    .basket-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1040;
    }

    .basket-bar.is-empty {
        display: none;
    }

    /* behind the sheet, over the page: dims it while the sheet is open, a tap on it closes the sheet */
    .basket-bar__backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(0, 13, 26, .45);
    }

    .basket-bar.is-open .basket-bar__backdrop {
        display: block;
    }

    body.has-basket-bar {
        padding-bottom: 5.5rem; /* the sheet must not cover the end of the page */
    }

    .basket-bar__inner.card__dateil-container {
        max-width: 640px;
        margin-inline: auto;
        padding: 0 1rem .75rem;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .18);
    }

    .basket-bar__handle {
        display: block;
        width: 100%;
        padding: .6rem 0 .4rem;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .basket-bar__grip {
        display: block;
        width: 2.75rem;
        height: .3rem;
        margin: 0 auto;
        border-radius: .2rem;
        background: #cfcfcf;
    }

    /* closed: only the grip and the summary row show; open: the title and the rooms slide up */
    .basket-bar__title {
        display: none;
    }

    .basket-bar.is-open .basket-bar__title {
        display: block;
        margin-bottom: .5rem !important;
    }

    .basket-bar__details {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    .basket-bar.is-open .basket-bar__details {
        max-height: 55vh;
        overflow-y: auto;
    }

    .basket-bar__divider {
        display: none;
    }

    .basket-bar__toggle {
        padding: 0;
        border: 0;
        background: none;
        text-align: start;
        cursor: pointer;
    }

    .basket-bar__toggle::after {
        content: " ▴";
        color: #757f88;
    }

    .basket-bar.is-open .basket-bar__toggle::after {
        content: " ▾";
    }

    .basket-bar__go {
        min-width: 7rem;
    }
}

/* ---------- extra guests and half price guests (+ / - steppers, shared by the room card box and the basket cards) ---------- */
.guest-steppers {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.guest-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    color: #424c55;
}

.guest-stepper__label small {
    display: block;
    color: #757f88;
    font-size: .7rem;
}

.guest-stepper__ctl {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    direction: ltr; /* minus on the left, plus on the right, whatever the page direction */
}

.guest-stepper__btn {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
    color: #0b7a4b;
    background: #fff;
    border: 1px solid #0b7a4b;
    border-radius: 50%;
    cursor: pointer;
}

.guest-stepper__btn:disabled {
    color: #b5bcc3;
    border-color: #d8dde1;
    cursor: not-allowed;
}

.guest-stepper__value {
    min-width: 1.2rem;
    text-align: center;
    font-weight: 700;
}

.guest-steppers__note {
    margin: 0;
    font-size: .7rem;
    color: #757f88;
}

/* ---------- the persons of the extra beds (name + national code), one card each ---------- */
.guest-person {
    border: 1px solid #e3e7ea;
    border-radius: .6rem;
    padding: .75rem;
    margin-top: .75rem;
}

.guest-person__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    font-weight: 700;
    color: #424c55;
}

.guest-person__same {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 400;
    color: #0b7a4b;
    border: 1px solid #0b7a4b;
    border-radius: 1rem;
    cursor: pointer;
}

.guest-person__same input {
    margin: 0;
}

.guest-person input[readonly] {
    background: #f5f7f8;
}