/* Booking service page - responsive + mobile scroll fixes (shared by EN / AR) */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ROOT CAUSE of "page won't scroll": Booking_Services.css (mobile block) makes <body> an
   overflow:auto scroll container and sets overscroll-behavior:none on it, so wheel/touch
   scrolling never chains up to the viewport. Only the viewport (html) may scroll. */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    overscroll-behavior: auto !important;
}

body {
    overflow: visible !important;
    height: auto !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto;
}

main.wp-block-group {
    overflow: visible !important;
    overflow-x: clip !important;
}

/* NOTE: never set overflow on html/body here - it turns body into a scroll
   container and breaks page scrolling on mobile. "clip" does not create one. */
.wp-site-blocks {
    max-width: 100%;
    overflow-x: clip;
}

img, picture, video {
    max-width: 100%;
}

/* ---------- time slots: real grid (replaces display:ruby) ---------- */
.time-slots-container {
    display: flex !important;
    flex-wrap: wrap;
    margin: 10px -4px 0;
    padding: 0;
}

    .time-slots-container > .time-slot {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        box-sizing: border-box;
        padding: 0 4px;
    }

    .time-slots-container > .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 4px;
    }

    .time-slots-container .cell {
        margin: 3px 0;
        padding: 10px 4px;
        text-align: center;
        font-size: 14px;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

.card.border-0 .card-body {
    padding: 0 !important;
}

/* faster reveal (was 1.9s) */
#formContainer, #timeSlotsContainer, #additionalInfoContainer, #CreateBtn {
    transition: opacity .4s;
}

/* long date / error text must never overflow */
.fluentform .text-danger, .ff-custom_html p {
    overflow-wrap: anywhere;
}

.swal2-popup {
    width: min(32em, 92vw) !important;
    max-width: 92vw;
    font-size: 1rem;
}

.flatpickr-calendar {
    max-width: 96vw;
}

@media (min-width: 768px) {
    .time-slots-container > .time-slot {
        flex-basis: 16.6667%;
        max-width: 16.6667%;
    }
}

@media (max-width: 781px) {
    .wp-block-columns {
        display: block !important;
        margin: 0 !important;
    }

        .wp-block-columns > .wp-block-column {
            width: 100%;
            max-width: 100%;
            margin: 0 !important;
        }

    /* image becomes a short banner above the form instead of a full-screen square */
    /*.mobile-aspect-ratio-1,
    .wp-block-column .fullheight {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .wp-block-cover.fullheight {
        min-height: 200px !important;
        padding-top: 88px !important;
        padding-bottom: 24px !important;
    }*/

    .wp-block-column.is-vertically-aligned-center > .wp-block-group {
        padding: 20px 16px 40px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }

    .fluentform h1 {
        font-size: 26px;
        line-height: 1.25;
    }

    .fluentform .ff-el-form-control,
    .fluentform select.ff-el-form-control,
    .fluentform input.ff-el-form-control {
        width: 100%;
        min-height: 46px;
        font-size: 16px !important; /* stops iOS zoom-on-focus */
        box-sizing: border-box;
    }

    .fluentform .ff_submit_btn_wrapper .ff-btn,
    .fluentform .ff-btn.ff-btn-submit {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .time-slots-container > .time-slot {
        flex-basis: 50%;
        max-width: 50%;
    }

    .fluentform h1 {
        font-size: 22px;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .wp-block-cover.fullheight {
        min-height: 120px !important;
        padding-top: 70px !important;
    }
}

/* title row: h1 + language switch on one line, paragraphs always full width below
   (some browsers ignore the old invalid "flex-wrap: balance" and squeezed everything in one row) */
.lang-row {
    display: flex !important;
    flex-wrap: wrap !important;
}

    .lang-row > h1 {
        flex: 1 1 0 !important;
        min-width: 0;
        word-break: normal;
        overflow-wrap: normal;
    }

    .lang-row > p {
        flex: 0 0 100% !important;
        width: 100%;
        max-width: 100%;
    }