/*
 * SparkleMode v1.9.13
 * Mobile header / product search responsive fix.
 *
 * Scope: <= 767px only.
 * Targets the ElementsKit search markup used in the header, while also
 * covering common WooCommerce/AJAX product-search wrappers.
 */

@media (max-width: 767px) {

    /* ---------------------------------------------------------
       Never allow the header/search wrappers to create horizontal
       overflow or push the search form outside the mobile viewport.
       --------------------------------------------------------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    header,
    .elementor-location-header,
    .elementskit-navbar-nav,
    .elementskit-menu-container,
    .ekit-template-content-header {
        max-width: 100vw;
    }

    /* ---------------------------------------------------------
       ElementsKit search popup/panel
       --------------------------------------------------------- */
    .ekit-search-panel,
    .elementskit-search-panel,
    .ekit-search-popup,
    .elementskit-search-popup {
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ekit-search-panel .ekit-search-group,
    .elementskit-search-panel .ekit-search-group,
    .ekit-search-popup .ekit-search-group,
    .elementskit-search-popup .ekit-search-group,
    .ekit-search-group {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }

    .ekit-search-panel form,
    .elementskit-search-panel form,
    .ekit-search-popup form,
    .elementskit-search-popup form,
    .ekit-search-group form {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .ekit-search-panel input[type="search"],
    .elementskit-search-panel input[type="search"],
    .ekit-search-popup input[type="search"],
    .elementskit-search-popup input[type="search"],
    .ekit-search-group input[type="search"],
    .ekit-search-group .ekit_search-field,
    .ekit-search-group input[type="text"] {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 10px !important;
    }

    /* Search title / heading must begin inside the viewport. */
    .ekit-search-panel h1,
    .ekit-search-panel h2,
    .ekit-search-panel h3,
    .ekit-search-panel .ekit-search-title,
    .elementskit-search-panel h1,
    .elementskit-search-panel h2,
    .elementskit-search-panel h3,
    .elementskit-search-panel .ekit-search-title {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    /* ---------------------------------------------------------
       Generic AJAX/WooCommerce product-search popup fallbacks.
       These rules only affect search-result panels in the header.
       --------------------------------------------------------- */
    .elementor-location-header .search-form,
    .elementor-location-header .woocommerce-product-search,
    .elementor-location-header [class*="product-search"] form,
    .elementor-location-header [class*="search-form"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-location-header .search-form input,
    .elementor-location-header .woocommerce-product-search input,
    .elementor-location-header [class*="product-search"] input[type="search"],
    .elementor-location-header [class*="product-search"] input[type="text"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .elementor-location-header .dgwt-wcas-suggestions-wrapp,
    .elementor-location-header .aws-search-result,
    .elementor-location-header [class*="search-results"],
    .elementor-location-header [class*="suggestion"] {
        box-sizing: border-box !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    /* Keep search content above the My Account/sidebar content. */
    .ekit-search-panel,
    .elementskit-search-panel,
    .ekit-search-popup,
    .elementskit-search-popup,
    .elementor-location-header .dgwt-wcas-suggestions-wrapp,
    .elementor-location-header .aws-search-result {
        z-index: 999999 !important;
    }

    /* Header icon rows must not shrink the search popup based on the icon column. */
    .elementor-location-header .elementor-widget,
    .elementor-location-header .elementor-widget-container {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .ekit-search-panel,
    .elementskit-search-panel,
    .ekit-search-popup,
    .elementskit-search-popup {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .elementor-location-header .dgwt-wcas-suggestions-wrapp,
    .elementor-location-header .aws-search-result,
    .elementor-location-header [class*="search-results"],
    .elementor-location-header [class*="suggestion"] {
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
}