/** FiboSearch - AJAX Search for WooCommerce integration */
.dgwt-wcas-search-input {
    border-radius: 20px !important;
}

/*
 * Mobile FiboSearch integration.
 * Foundation styles FiboSearch's native mobile bar in place. Native Back,
 * form/input and AJAX/results lifecycles remain plugin-owned.
 */
@media (max-width: 767px) {
    html.dgwt-wcas-overlay-mobile-on {
        --ra-fibo-mobile-chrome-height: 68px;
        --ra-fibo-mobile-control-size: 40px;
        --ra-fibo-mobile-icon-size: 34px;
        --ra-fibo-mobile-outer-gap: 20px;
        --ra-fibo-mobile-column-gap: 12px;
        --ra-fibo-mobile-field-height: 48px;
    }

    html.dgwt-wcas-overlay-mobile-on .js-dgwt-wcas-overlay-mobile,
    html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-overlay-mobile {
        width: 100vw !important;
        max-width: none !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar {
        position: relative !important;
        z-index: 20 !important;
        display: grid !important;
        grid-template-columns: var(--ra-fibo-mobile-control-size) minmax(0, 1fr) var(--ra-fibo-mobile-control-size) !important;
        align-items: center !important;
        column-gap: var(--ra-fibo-mobile-column-gap) !important;
        width: 100vw !important;
        min-height: var(--ra-fibo-mobile-chrome-height) !important;
        margin: 0 !important;
        padding: 10px var(--ra-fibo-mobile-outer-gap) !important;
        background: #303a50 !important;
        box-sizing: border-box !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar .dgwt-wcas-om-return.ra-foundation-fibo-back {
        grid-column: 1 !important;
        justify-self: center !important;
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--ra-fibo-mobile-control-size) !important;
        min-width: var(--ra-fibo-mobile-control-size) !important;
        height: var(--ra-fibo-mobile-control-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* FiboSearch's native Solaris rule absolutely positions its Back SVG at
       23x23 / 12px / 12px. Neutralise that rule so the configured Foundation
       icon remains centred inside the 40px grid control. */
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar
    .dgwt-wcas-om-return.ra-foundation-fibo-back .ra-foundation-fibo-icon,
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar
    .dgwt-wcas-om-return.ra-foundation-fibo-back .ra-foundation-fibo-icon svg {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--ra-fibo-mobile-icon-size) !important;
        height: var(--ra-fibo-mobile-icon-size) !important;
        min-width: var(--ra-fibo-mobile-icon-size) !important;
        max-width: var(--ra-fibo-mobile-icon-size) !important;
        margin: 0 !important;
        transform: none !important;
    }


    /* Back/Close parity: the Back SVG artwork has a larger intrinsic circular
       footprint than the approved Close artwork. Keep both 40px control boxes,
       but render Back at 26px so its visible outer circle matches the 32px Close. */
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar
    .dgwt-wcas-om-return.ra-foundation-fibo-back .ra-foundation-fibo-icon,
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar
    .dgwt-wcas-om-return.ra-foundation-fibo-back .ra-foundation-fibo-icon svg {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-bar .ra-foundation-fibo-native-search {
        grid-column: 2 !important;
        position: relative !important;
        display: block !important;
        align-self: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search .dgwt-wcas-sf-wrapp,
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search .dgwt-wcas-search-form {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: var(--ra-fibo-mobile-field-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search input[type="search"].dgwt-wcas-search-input {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: var(--ra-fibo-mobile-field-height) !important;
        height: var(--ra-fibo-mobile-field-height) !important;
        margin: 0 !important;
        padding: 0 16px 0 54px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #f4f5f6 !important;
        color: #303a50 !important;
        box-shadow: none !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        line-height: var(--ra-fibo-mobile-field-height) !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search input[type="search"].dgwt-wcas-search-input::placeholder {
        color: #8f9daf !important;
        opacity: 1 !important;
        font-style: italic !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search .ra-foundation-fibo-search-visual {
        position: absolute !important;
        z-index: 3 !important;
        top: 50% !important;
        left: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        color: #8f9daf !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-search-visual svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        fill: currentColor !important;
        stroke: none !important;
    }

    /* Hide FiboSearch's visual submit/preloader only; AJAX stays plugin-owned. */
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search .dgwt-wcas-search-submit,
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-native-search .dgwt-wcas-preloader {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Foundation clear control occupies the real third grid column. */
    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-clear {
        grid-column: 3 !important;
        justify-self: center !important;
        appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--ra-fibo-mobile-control-size) !important;
        min-width: var(--ra-fibo-mobile-control-size) !important;
        height: var(--ra-fibo-mobile-control-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-clear[hidden] {
        visibility: hidden !important;
        display: inline-flex !important;
        pointer-events: none !important;
    }

    .ra-foundation-fibo-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ra-fibo-mobile-icon-size);
        height: var(--ra-fibo-mobile-icon-size);
        pointer-events: none;
    }

    .ra-foundation-fibo-icon svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ra-foundation-fibo-icon svg.ra-icon--fill {
        fill: currentColor;
        stroke: none;
    }

    .ra-foundation-fibo-icon svg.ra-icon--stroke {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Results content remains FiboSearch-owned, but the mobile viewport geometry
       belongs to Foundation: full width, below the bar, through the bottom of
       the visible viewport. This prevents the input wrapper from clipping it. */
    html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp {
        position: fixed !important;
        z-index: 19 !important;
        top: var(--ra-fibo-mobile-chrome-height) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    html.dgwt-wcas-overlay-mobile-on .ra-foundation-fibo-chrome {
        display: none !important;
    }
}