/*
 * FetePass365 Mobile Layout Stabilizer 1.0.0
 * Mobile/tablet only. Desktop layouts are intentionally left untouched.
 */

@media screen and (max-width: 1024px) {
    html.fp365-layout-stabilized,
    html.fp365-layout-stabilized body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    @supports (overflow: clip) {
        html.fp365-layout-stabilized,
        html.fp365-layout-stabilized body {
            overflow-x: clip !important;
        }
    }

    html.fp365-layout-stabilized body.fp365-layout-stabilizer {
        position: relative;
        min-width: 0;
    }

    html.fp365-layout-stabilized body.fp365-layout-stabilizer *,
    html.fp365-layout-stabilized body.fp365-layout-stabilizer *::before,
    html.fp365-layout-stabilized body.fp365-layout-stabilizer *::after {
        box-sizing: border-box;
    }

    /* Main page shells and common WordPress / Elementor / Event marketplace wrappers. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        #page,
        .site,
        .site-content,
        .content-area,
        .site-main,
        main,
        article,
        .entry-content,
        .page-content,
        .container,
        .container-fluid,
        .row,
        .elementor,
        .elementor-section,
        .elementor-container,
        .elementor-column,
        .elementor-widget-wrap,
        .e-con,
        .e-con-inner,
        .woocommerce,
        .woocommerce-page,
        .vendor_wrap,
        .vendor-content,
        .vendor-content-wrapper,
        .el_wrap_site,
        .el_main_content
    ) {
        min-width: 0;
        max-width: 100%;
    }

    /* Flex/grid children are a very common source of mobile horizontal drift. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        .row,
        .elementor-row,
        .elementor-container,
        .elementor-column,
        .elementor-widget-wrap,
        .e-con,
        .e-con-inner,
        [class*="grid"],
        [class*="flex"]
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Keep media inside the visible page canvas. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        img,
        video,
        canvas,
        svg,
        iframe,
        embed,
        object
    ) {
        max-width: 100%;
    }

    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(img, video) {
        height: auto;
    }

    /* Forms should never widen the entire page. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        form,
        fieldset,
        input,
        select,
        textarea,
        button
    ) {
        max-width: 100%;
    }

    /* Long URLs, codes and labels should wrap instead of pushing the viewport. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        .entry-content,
        .page-content,
        .woocommerce,
        .vendor_wrap,
        .el_main_content
    ) :where(p, a, span, strong, small, label, td, th) {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Wide tables scroll locally instead of moving the whole webpage. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
        .woocommerce,
        .woocommerce-page,
        .vendor_wrap,
        .el_main_content,
        .entry-content
    ) table {
        max-width: 100%;
    }

    /* Do not let negative-width utility rules create a page-wide sideways canvas. */
    html.fp365-layout-stabilized body.fp365-layout-stabilizer .fp365-overflow-clamp {
        max-width: 100vw !important;
    }
}

/* iPhone Safari zooms focused fields smaller than 16px, which can make the page appear to jump sideways. */
@media screen and (max-width: 767px) {
    @supports (-webkit-touch-callout: none) {
        html.fp365-layout-stabilized body.fp365-layout-stabilizer :where(
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
            select,
            textarea
        ) {
            font-size: max(16px, 1em);
        }
    }
}