/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
:root {
    --primary-color: #054c79;;
}

.mobile-filter {
    display: none;
}

.mobile-filter-close-btn{
    display: none;
}

#category.mobile-filter-open {
    overflow: hidden;
    #left-column {
        transform: translateX(0);

    }

}

@media (max-width: 767.98px) {
    body#category.mobile-filter-open:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 999;
    }

    #left-column {
        position: fixed;
        max-width: 350px;
        width: 100%;
        right: 0;
        height: calc(100dvh - 25px);
        top: 0;
        z-index: 999;
        bottom: 0;
        background: white;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        margin-top: 0;
        padding: 50px 15px 30px 15px;
        transition:ease 0.3s;
        transform: translateX(100%);
    }
    .mobile-filter-close-btn {
        display: flex;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: var(--primary-color);
        color: white;
    }

    .mobile-filter {
        display: block;
        padding: 15px;
        position: fixed;
        background: var(--primary-color);
        z-index: 999;
        width: 100%;
        bottom: 0;

        .mobile-filter__btn {
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            letter-spacing: 0.06rem;

        }

        .mobile-filter__nav {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}