/* Reservaline desktop st_activity detail — V138
 * Native Traveler booking is shown in a modal. There is still exactly one
 * Activity booking form; this layer only changes where the existing node lives.
 */
@media (min-width: 768px) {
    html.rhs138-booking-modal-open,
    body.rhs138-booking-modal-open {
        overflow: hidden !important;
    }

    /* The permanent booking card is retired in V138. */
    body.rhs138-activity-detail-document .rhs135-booking-card {
        display: none !important;
    }

    .rhs138-booking-modal[hidden] {
        display: none !important;
    }

    .rhs138-booking-modal {
        position: fixed;
        inset: 0;
        z-index: 100200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
    }

    .rhs138-booking-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(4, 18, 43, .58);
        cursor: default;
    }

    .rhs138-booking-dialog {
        position: relative;
        z-index: 1;
        width: min(620px, calc(100vw - 56px));
        max-height: calc(100vh - 56px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #dce4ef;
        border-radius: 14px;
        background: #fff;
        box-shadow: none !important;
    }

    .rhs138-booking-dialog__header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 20px 22px 17px;
        border-bottom: 1px solid #e5ebf3;
        background: #fff;
    }

    .rhs138-booking-dialog__header > div {
        min-width: 0;
    }

    .rhs138-booking-dialog__header span {
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .rhs138-booking-dialog__header h2 {
        margin: 0;
        color: #0a2347;
        font-size: 21px;
        line-height: 1.25;
        font-weight: 800;
    }

    .rhs138-booking-close {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #d6e0ec;
        border-radius: 50%;
        background: #fff;
        color: #17345a;
        font-size: 25px;
        line-height: 1;
        cursor: pointer;
    }

    .rhs138-booking-close:hover,
    .rhs138-booking-close:focus-visible {
        border-color: #073b8f;
        background: #f4f8ff;
        color: #073b8f;
        outline: none;
    }

    .rhs138-booking-dialog__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 20px 22px 22px;
    }

    .rhs138-booking-dialog .rhs135-booking-slot {
        width: 100%;
        min-height: 60px;
    }

    .rhs138-total-preview {
        margin-top: 16px !important;
        padding-top: 15px !important;
        border-top: 1px solid #e5ebf3 !important;
    }

    .rhs138-booking-dialog .rhs135-secure-note {
        margin-top: 11px !important;
    }

    /* Traveler's own calendar/select overlays must stay above the modal. */
    body.rhs138-booking-modal-open .daterangepicker,
    body.rhs138-booking-modal-open .select2-container--open,
    body.rhs138-booking-modal-open .select2-dropdown {
        z-index: 100300 !important;
    }

    /* Keep the real Traveler submit visually identical to the platform CTA. */
    .rhs138-booking-dialog .rhs135-booking-slot .btn-book-ajax,
    .rhs138-booking-dialog .rhs135-booking-slot .submit-group > a.btn,
    .rhs138-booking-dialog .rhs135-booking-slot a.btn.btn-large.btn-full,
    .rhs138-booking-dialog .rhs135-booking-slot .st_send-mail-form .sent-email-st {
        background: #073b8f !important;
        border-color: #073b8f !important;
        color: #fff !important;
        box-shadow: none !important;
    }
}

@media (max-width: 767px) {
    .rhs138-booking-modal {
        display: none !important;
    }
}