/**
 * PishPet Filter Sheet 1.0.3
 * Desktop: normal in-flow content. Mobile/tablet: draggable bottom sheet.
 */

.ppfs {
    --ppfs-primary: var(--e-global-color-primary, #67b259);
    --ppfs-secondary: var(--e-global-color-secondary, #fda35e);
    --ppfs-accent: var(--e-global-color-accent, #f55a5a);
    --ppfs-text: var(--e-global-color-text, #141414);
    --ppfs-muted: #667085;
    --ppfs-border: #e8ebee;
    --ppfs-surface: #ffffff;
}

/* Desktop: only the nested filter output is shown in the normal document flow. */
.ppfs__trigger,
.ppfs__backdrop,
.ppfs__header {
    display: none;
}

.ppfs__sheet,
.ppfs__body {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}

@media (max-width: 1024px) {
    html.ppfs-lock,
    html.ppfs-lock body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .ppfs__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 18px;
        border: 1px solid color-mix(in srgb, var(--ppfs-primary) 32%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--ppfs-primary) 10%, #fff);
        color: var(--ppfs-text);
        font: inherit;
        font-weight: 600;
        line-height: 1.4;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .ppfs .ppfs__trigger:hover,
    .ppfs .ppfs__trigger:focus,
    .ppfs .ppfs__trigger:focus-visible {
        border-color: var(--ppfs-primary) !important;
        background: var(--ppfs-primary) !important;
        color: #fff !important;
        outline: 0 !important;
    }

    .ppfs .ppfs__trigger:focus,
    .ppfs .ppfs__trigger:focus-visible {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ppfs-primary) 22%, transparent) !important;
    }

    .ppfs__trigger-icon {
        flex: 0 0 auto;
    }

    .ppfs__backdrop {
        position: fixed;
        z-index: 100000;
        inset: 0;
        display: block;
        visibility: hidden;
        background: rgba(20, 20, 20, 0.44);
        opacity: 0;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        transition: opacity 240ms ease, visibility 240ms ease;
    }

    .ppfs__backdrop.is-visible {
        visibility: visible;
        opacity: 1;
    }

    .ppfs__sheet {
        --ppfs-offset: 100%;

        position: fixed;
        z-index: 100001;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-flow: column nowrap;
        gap: 0;
        width: min(100%, 680px);
        height: 92vh;
        height: 92dvh;
        max-height: 860px;
        min-height: 360px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        border-radius: 24px 24px 0 0;
        background: var(--ppfs-surface);
        box-shadow: 0 -18px 55px rgba(20, 20, 20, 0.2);
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, calc(100% + 24px), 0);
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
        will-change: transform;
        isolation: isolate;
        direction: rtl;
    }

    .ppfs__sheet.is-open {
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, var(--ppfs-offset), 0);
    }

    .ppfs__sheet.is-dragging {
        transition: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* This header never scrolls; only .ppfs__body does. */
    .ppfs__header {
        position: relative;
        z-index: 2;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 78px;
        margin: 0;
        padding: 28px 70px 14px;
        border-bottom: 1px solid var(--ppfs-border);
        background: var(--ppfs-surface);
    }

    .ppfs__handle {
        position: absolute;
        top: 0;
        left: 50%;
        width: 92px;
        height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: ns-resize;
        touch-action: none;
        transform: translateX(-50%);
    }

    .ppfs__handle-bar {
        position: absolute;
        top: 9px;
        left: 50%;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: #d7dce0;
        transform: translateX(-50%);
        transition: width 180ms ease, background-color 180ms ease;
    }

    .ppfs__handle:hover .ppfs__handle-bar,
    .ppfs__handle:focus-visible .ppfs__handle-bar,
    .ppfs__sheet.is-dragging .ppfs__handle-bar {
        width: 58px;
        background: var(--ppfs-primary);
    }

    /* Override Elementor's global button:focus on the draggable handle. */
    .ppfs .ppfs__handle:focus {
        border-color: transparent !important;
        background: transparent !important;
        color: inherit !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .ppfs .ppfs__handle:focus-visible {
        border-color: transparent !important;
        background: transparent !important;
        outline: 3px solid color-mix(in srgb, var(--ppfs-primary) 35%, transparent) !important;
        outline-offset: -2px;
        box-shadow: none !important;
    }

    .ppfs__title {
        margin: 0;
        color: var(--ppfs-text);
        font: inherit;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
    }

    .ppfs__close,
    .ppfs__clear {
        position: absolute;
        top: 34px;
        border: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
    }

    .ppfs__close {
        right: 20px;
        display: grid;
        width: 36px;
        height: 36px;
        padding: 0;
        place-items: center;
        border-radius: 50%;
        color: var(--ppfs-text);
        font-family: Arial, sans-serif;
        font-size: 29px;
        line-height: 1;
    }

    .ppfs__close:hover,
    .ppfs__close:focus-visible {
        background: #f2f4f5;
        outline: 0;
    }

    .ppfs__clear {
        left: 20px;
        min-height: 34px;
        padding: 0;
        color: var(--ppfs-primary);
        font-size: 14px;
        font-weight: 600;
    }

    .ppfs .ppfs__clear:hover {
        background: transparent !important;
        color: var(--ppfs-secondary) !important;
    }

    /* Override Elementor's global button:focus without leaving a pointer-focus ring. */
    .ppfs .ppfs__clear:focus {
        border-color: transparent !important;
        background: transparent !important;
        color: var(--ppfs-secondary) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .ppfs .ppfs__clear:focus-visible {
        border-radius: 6px;
        outline: 2px solid var(--ppfs-primary) !important;
        outline-offset: 3px;
        box-shadow: none !important;
    }

    .ppfs__body {
        position: relative;
        display: block;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 22px 20px calc(30px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        background: var(--ppfs-surface);
    }

    .ppfs__body > * {
        width: 100%;
        max-width: none;
    }

    .ppfs .jet-filter-label {
        margin-bottom: 14px;
        color: var(--ppfs-text);
        font-size: 15px;
        font-weight: 700;
    }

    .ppfs .jet-filter + .jet-filter {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--ppfs-border);
    }
}

@media (max-width: 480px) {
    .ppfs__sheet {
        border-radius: 20px 20px 0 0;
    }

    .ppfs__header {
        padding-inline: 60px;
    }

    .ppfs__body {
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppfs__sheet,
    .ppfs__backdrop {
        transition-duration: 0.01ms !important;
    }
}