.elementor-20944 .elementor-element.elementor-element-88d6f4f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-20944 .elementor-element.elementor-element-6098666{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-3bea412 *//* --- Mobile Styles for WooCommerce Order Tracking Form (v2) --- */

/* This media query applies the styles only to screens 768px wide or smaller */
@media (max-width: 768px) {

    /*
     * Target the <p> tags that wrap the input fields.
     * By using a more specific .elementor-20944 .elementor-element.elementor-element-3bea412 and changing the display property,
     * we can force them to stack vertically.
    */
    .woocommerce-form-track-order p.form-row {
        display: block; /* Change from inline-block or float to block */
        width: 100%;    /* Make the container take up the full width */
        float: none;    /* Remove any float that might be applied by the theme */
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Add some space below the "Order Number" field to separate it from the "Email" field.
    */
    .woocommerce-form-track-order p.form-row-first {
        margin-bottom: 1em; /* Adjust as needed for desired spacing */
    }


    /*
     * Target the actual input fields to ensure they are full-width
     * so the text inside is not cut off.
    */
    .woocommerce-form-track-order .form-row .input-text {
        width: 100%;
        box-sizing: border-box; /* Ensures padding and border are included in the total width */
    }

    /*
     * The theme might be using a 'clear' element for spacing with floats.
     * We can hide it since we are no longer using floats.
    */
    .woocommerce-form-track-order .clear {
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6098666 *//* --- Mobile Styles for WooCommerce Order Tracking Form --- */

/* This media query applies the styles only to screens 768px wide or smaller (common for tablets and phones) */
@media (max-width: 768px) {

    /*
     * Target the containers for the 'Order Number' and 'Email' fields.
     * By default, WooCommerce might float them next to each other.
     * We'll make them full-width to stack them vertically.
    */
    .woocommerce-form-track-order .form-row-first,
    .woocommerce-form-track-order .form-row-last {
        width: 100%; /* Make each field container take up the full width */
        float: none;   /* Remove the float property that places them side-by-side */
        margin-right: 0; /* Remove any right margin that might exist for spacing */
    }

    /*
     * Target the actual input fields for 'Order Number' and 'Email'.
     * This ensures the text box itself expands to the full width of its container.
     * This will prevent the typed text from being cut off.
    */
    .woocommerce-form-track-order .form-row .input-text {
        width: 100%;
        box-sizing: border-box; /* Ensures padding and border are included in the total width */
    }
}/* End custom CSS */