/*
 * Final horizontal-overflow containment.
 * Loaded after every other stylesheet.
 */

html,
body {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 699px) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: clip !important;
        overscroll-behavior-x: none;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip !important;
        overscroll-behavior-x: none;
    }

    .site-viewport-frame {
        position: relative;
        display: block;

        width: 100%;
        max-width: 100vw;
        min-width: 0;

        margin: 0;
        padding: 0;

        overflow-x: clip !important;
        overflow-y: visible;

        box-sizing: border-box;
        contain: inline-size;
    }

    .site-viewport-frame *,
    .site-viewport-frame *::before,
    .site-viewport-frame *::after {
        box-sizing: border-box;
        min-width: 0;
    }

    .site-viewport-frame > header,
    .site-viewport-frame > main,
    .site-viewport-frame > footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    main,
    main > *,
    .booking-shell,
    .booking-card,
    .customer-login-hint,
    .customer-booking-banner,
    .form-step,
    .form-grid,
    .booking-date-control,
    .time-slots,
    .segmented,
    .site-footer {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100% !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    /* Native form controls can otherwise retain large intrinsic widths. */
    input[type="date"],
    input[type="email"],
    input[type="text"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        min-width: 0 !important;
    }
}