/* Mobile filters (digo-filters/mobile.php): fixed button bottom centre, the shop sidebar as an overlay.
   768px is Filter Everything's mobile width. */

.digo-filters-fab,
.digo-filters-overlay-head,
.digo-filters-overlay-foot {
    display: none;
}

@media only screen and (max-width: 768px) {
    /* The sidebar only appears as the overlay; the plugin's own collapse button is not used. */
    #widgets_left,
    .wpc-filters-open-button-container {
        display: none !important;
    }

    #products_right {
        padding-bottom: 88px; /* keep the last occasion clear of the button */
    }

    .digo-filters-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 99990;
        padding: 12px 24px;
        border: 0;
        border-radius: 999px;
        background-color: #e53935;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
        cursor: pointer;
    }

    /* The theme turns every button white on :hover, and a tap can leave :hover stuck on a phone. */
    .digo-filters-fab:hover,
    .digo-filters-fab:focus,
    .digo-filters-fab:active,
    .digo-filters-show:hover,
    .digo-filters-show:focus,
    .digo-filters-show:active {
        background-color: #c62828;
        color: #fff;
    }

    .digo-filters-close:hover,
    .digo-filters-close:focus,
    .digo-filters-close:active {
        background: none;
        color: #000;
    }

    .digo-filters-fab:focus-visible,
    .digo-filters-show:focus-visible,
    .digo-filters-close:focus-visible {
        outline: 3px solid #c62828;
        outline-offset: 3px;
    }

    /* The Trengo chat launcher sits on top of everything and would cover the overlay's buttons. */
    html.digo-filters-open #trengo-web-widget {
        display: none !important;
    }

    .digo-filters-fab .digo-filters-count {
        min-width: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background-color: #fff;
        color: #e53935;
        font-size: 13px;
        line-height: 22px;
        text-align: center;
    }

    html.digo-filters-open,
    html.digo-filters-open body {
        overflow: hidden;
    }

    html.digo-filters-open .digo-filters-fab {
        display: none;
    }

    html.digo-filters-open #widgets_left {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 100000;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background-color: #fff;
    }

    html.digo-filters-open #widgets_left .widget_wpc_filters_widget {
        padding: 8px 16px 16px;
    }

    /* The overlay head carries the title. */
    html.digo-filters-open #widgets_left .webshop-widget-title {
        display: none;
    }

    html.digo-filters-open .digo-filters-overlay-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 20; /* above the slider handles */
        padding: 12px 16px;
        border-bottom: 1px solid #e2e2e2;
        background-color: #fff;
        font-size: 20px;
        font-weight: 600;
    }

    .digo-filters-close {
        padding: 0 4px;
        border: 0;
        background: none;
        color: #333;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
    }

    html.digo-filters-open .digo-filters-overlay-foot {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        bottom: 0;
        z-index: 20; /* above the slider handles */
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e2e2e2;
        background-color: #fff;
    }

    .digo-filters-reset {
        padding: 12px 4px;
        color: #333;
        text-decoration: underline;
        white-space: nowrap;
    }

    .digo-filters-reset[hidden] {
        display: none;
    }

    .digo-filters-show {
        flex: 1;
        padding: 14px 12px;
        border: 0;
        border-radius: 4px;
        background-color: #e53935;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
}