/* Shop filter sidebar (mobile)
   Moved out of the inline <style> in resources/views/front/filter_category/filter_category_mobile.blade.php
   Shared partial: included by shop-left-sidebar. */

/* The two mobile sheets were a 90%-black overlay while the desktop filter is
   a light card stack. These bring them onto the same design, using ID
   selectors so they beat the .overlay rules pushed from shop-left-sidebar
   regardless of stylesheet order. Both sheets are restyled together - only
   recolouring the filter would just move the inconsistency to Sort. */
#myNav.overlay,
#myNavSort.overlay {
    background-color: var(--ivory, #FBF7F1);
}

#myNav .rep_title,
#myNavSort .rep_title {
    color: var(--ink, #152B39);
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

#myNav .close_sort,
#myNavSort .close_sort {
    color: var(--ink, #152B39);
}

#myNav .sheet_panel,
#myNavSort .sheet_panel {
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(21, 43, 57, .06), 0 1px 3px rgba(21, 43, 57, .04);
    padding: 20px;
    margin-bottom: 18px;
}

#myNav .widget_categories {
    margin-bottom: 0;
    padding-left: 0;
}

#myNav .custom-control-label {
    color: #55606a;
    font-size: 15px;
    cursor: pointer;
}

#myNav .custom-control-input:checked ~ .custom-control-label {
    color: var(--ink, #152B39);
    font-weight: 500;
}

#myNav .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gold, #B58A46);
    border-color: var(--gold, #B58A46);
}

/* .overlay a is #818181 on the dark sheet - too faint on a light one. */
#myNav .overlay-content a,
#myNavSort .overlay-content a {
    color: #55606a;
}

#myNavSort .category_sort {
    color: #55606a;
    cursor: pointer;
    margin-bottom: 0;
    font-size: 15px;
}

#myNavSort .sortcategory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 2px;
    border-bottom: 1px solid var(--hairline, #ECE4D8);
}

#myNavSort .sortcategory:last-child {
    border-bottom: 0;
}

#myNav .btn_filter.btn-fill-out {
    border-radius: 14px;
    border-color: var(--ink, #152B39);
    text-transform: none;
    font-weight: 500;
}

#myNav .btn-fill-out::before,
#myNav .btn-fill-out::after {
    background-color: var(--ink, #152B39);
}

#myNav .resetfilter {
    color: #7d7468 !important;
    font-size: 15px;
}

#myNav .resetfilter i {
    margin-right: 6px;
}