@import url('../../vendors/ui-kit/range-slider/range-slider.css');

.pal_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #F1F1F1;

    font-family: var(--font-family-1);
}

/***
    Filters
 */
.pal_filters {
    display: none;
    flex-direction: column;
    background-color: #FFFFFF;    
    transition: height 0.5s ease-out;
    padding: 1.25rem .75rem;
}
.pal_filters.show-on-mobile {
    display: flex;
}

.pal_filters__counter[template] {
    display: none;
}
.pal_filters__counter {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 1.09375rem 0;
    margin: 0;
    border-bottom: 1px solid #CCCCCC;
}
.pal_filters__counter__span {
    font-weight: 700;
    font-size: 1.25rem;
}
.pal_filters__counter__span--close {
    width: 1.23625rem;
    height: 1.23625rem;
    cursor: pointer;
}

.pal_options__option.hidden {
    display: none;
}

.pal_filters__dropdown_accordion[template],
.pal_dropdown_accordion[template] {
    display: none;    
}

.pal_filters__dropdown_accordion,
.pal_dropdown_accordion {
    display: flex;
    flex-direction: column; 
    transition: height 0.5s ease-out;
    overflow: hidden;
}

.pal_dropdown_accordion__header {
    display: flex;
    justify-content: space-between;
    padding: 1.1875rem 0;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
}

.pal_dropdown_accordion__header__title {
    all: unset;

}

.pal_dropdown_accordion__header__icon svg {
    width: 1.625rem;
    height: .625rem;

    transform: rotate(180deg);
    transform-origin: center;
    transition: transform 0.5s ease;
}
.pal_dropdown_accordion__header__icon.show svg {
    transform: rotate(0deg);
    transform-origin: center;
}
.pal_dropdown_accordion__wrapper {
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
}
.pal_dropdown_accordion__wrapper.show {
    height: 100%;
    border-bottom: 1px solid #CCCCCC;
}
.pal_dropdown_accordion__searcher {
    height: 3rem;
    background-color: #F1F1F1;
    border: none;
    border-bottom: 1px solid #4D4D4D;
    padding: 0 .75rem;
    
    font-size: 1rem;
    font-weight: 300;
    color: #4D4D4D;
}
.pal_dropdown_accordion__searcher:focus {
    outline: none;
}

.pal_dropdown_accordion__options,
.pal_options {
    display: flex;
    flex-direction: column;
    height: 19.75rem;

    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #B3B3B3 #E5E5E5;

}
.pal_dropdown_accordion__options::-webkit-scrollbar,
.pal_options::-webkit-scrollbar {
    width: .375rem;
}

.pal_dropdown_accordion__options::-webkit-scrollbar-track,
.pal_options::-webkit-scrollbar-track {
    background: #E5E5E5;
}

.pal_dropdown_accordion__options::-webkit-scrollbar-thumb,
.pal_options::-webkit-scrollbar-thumb {
    background: #B3B3B3;
}
.pal_dropdown_accordion__options::-webkit-scrollbar-thumb:hover,
.pal_options::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.pal_options__option {
    display: flex;
    gap: .5rem;
    padding: 1.1875rem 1.25rem;
    font-weight: 300;
    font-size: 1.125rem;
    color: #4D4D4D;


}
.pal_options__option__checkbox {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* Ranges */
.pal_ranges__wrapper {
    transition: all 0.5s ease;
    /*No more code here*/
}
.pal_ranges__wrapper.show {
    padding: 1.125rem 0  2.5rem;
}
.pal_range__values {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.75rem;
}
.pal_range__values__min_value,
.pal_range__values__max_value {
    width: 50%;
    padding: .90625rem .75rem;
    background-color: #F1F1F1;
    border-bottom: 1px solid #4D4D4D;
    color:#000;
}

/***
    Vehicle Parts Grid
*/
.pal_grid_parts {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
}

.pal_grid_parts__cards,
.pal_cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    background-color: #F1F1F1;
    padding-bottom: 2rem;
    width: 100%;
    max-width: 22.5rem;
}

.pal_cards__card[template],
.pal_card[template] {
    display: none;
}
.pal_cards__card,
.pal_card {
    display: flex;
    flex: 1 1 22rem;
    flex-direction: column;
    padding: 0 .75rem 1.25rem;
    background-color: #FFFFFF;
    width: max(100%, 23rem);
    align-self: stretch;
}
.pal_card__image_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10.625rem;
    width: 100%;
}
.pal_card__image {
    max-height: 100%;
    width: auto;
}
.pal_card__brand {
    font-weight: 300;
    font-size: .75rem;
    margin-bottom: .25rem;
}

.pal_card__part_name {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.pal_card__version {
    font-weight: 300;
    font-size: 0.75rem;
    color: #000;
    margin-bottom: .75rem;
}

.pal_card__price_label {
    font-weight: 300;
    font-size: 0.75rem;
    color: #4D4D4D;
    margin-bottom: 0rem;
}

.pal_card__price {
    font-weight: 600;
    font-size: 1.875rem;
    margin-bottom: 1.375rem;
    color: #000;
}

.pal_card__buttons {
    display: flex;
    border-top: 1px solid #CCCCCC;
    padding: 1.25rem;
}

.pal_card__buttons__button {
    text-decoration: none;
    font-size: 1.25rem;
    color: white;
    background-color: #16BAE7;
    padding: 1.03125rem;
    width: 100%;
    text-align: center;
    outline: none;
}
.pal_card__buttons__button:focus,
.pal_card__buttons__button:hover {
    background-color: var(--brand, #00233A);
    color: var(--brand-white, #FFFFFF);
}
.pal_card__buttons__button:disabled {
    background-color: #00000066;
    color: var(--brand-white, #FFFFFF);
}
.pal_card__buttons__button--secondary {
    border: 2px solid var(--brand-light, #16BAE7);
    background-color: var(--brand-white, #FFFFFF);
    color: var(--brand-light, #16BAE7);
}
.pal_card__buttons__button--secondary:focus,
.pal_card__buttons__button--secondary:hover {
    background-color: var(--brand, #00233A);
    color: var(--brand-white, #FFFFFF);
    border-color: var(--brand, #00233A);
}
.pal_card__buttons__button--secondary:disabled {
    background: #FFFFFF66;
    color: linear-gradient(0deg, #000000, #000000),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));

    border: 2px solid;
    border-image-source: linear-gradient(0deg, #000000, #000000),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));



}

.pal_card__buttons__disclaimer {
    font-weight: 300;
    font-size: .75rem;
    color: #6C6C6C;
}

/* Pagination */
.pal_grid_parts__pagination,
.pal_pagination {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1.875rem 1.25rem;
    background-color: var(--brand-white);
    width: 100%;
    line-height: normal;
}

.pal_pagination__previous {}

.pal_pagination__dots,
.pal_dots {
    display: flex;
    gap: 1rem;
}

.pal_pagination__previous {
    transform: rotate(180deg);
}

.pal_pagination__next.disabled,
.pal_pagination__previous.disabled {
    border: 1px solid #CCCCCC;
    background-color: var(--brand-white);
    cursor: not-allowed;
}

.pal_pagination__previous.disabled svg path,
.pal_pagination__next.disabled svg path {
    fill: #CCCCCC
}

.pal_pagination__next,
.pal_pagination__previous,
.pal_dots__dot {
    border: 1px solid #4D4D4D;
    border-radius: 50%;
    background: var(--brand-white);
    padding: 0.375rem 0.4375rem;

    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
    width: 2rem;
    height: 2rem;
    cursor: pointer;

}

.pal_pagination__next,
.pal_pagination__previous {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F1F1;
    border-color: #F1F1F1;
}

.pal_dots__dot.active {
    border: 1px solid var(--brand);
    font-weight: 700;
    background-color: var(--brand);
    color: var(--brand-white);
}

/***
    Movible Filter Bar
*/
.pal_mobile_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-white);
    width: 100%;
    padding: .375rem; 
    margin: 0 0 1rem;
    box-shadow: 12px 0px 24px 0px #00000033;
    z-index: 2;
}
.pal_mobile_wrapper.disabled {
    display: none;
}
.pal_mobile_wrapper__button {
    display: flex;
    border: none;
    background: transparent;
    padding: .8125rem 2.5rem;
    transition: all .5s ease;
}
.pal_mobile_wrapper__button:hover {
    background-color: #F1F1F1;
}



/**
    Media Screen
 */
@media screen and (min-width: 768px) {    
    .pal_grid_parts__cards,
    .pal_cards {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1.2rem;
        width: 100vw;
        max-width: 48rem;
    }

    .pal_cards__card,
    .pal_card {
        max-width: 22.25rem;
    }
    .pal_filters {
        padding: 1.25rem;
    }
}

@media screen and (min-width: 1366px) {
    .pal_filters__counter__span--close,
    .pal_mobile_wrapper {
        display: none;
    }
    .pal_container {
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
        background-color: #FFFFFF;
    }

    .pal_filters {
        display: flex;
        padding: 3.125rem 3rem;
        width: 30%;
    }

    .pal_grid_parts__cards,
    .pal_cards {
        /* width: 88%; */
        width: 64.8vw;
        max-width: 56rem;
        background-color: #FFFFFF;
    }
    .pal_cards__card,
    .pal_card {
        max-width: 16.9375rem;
        border: 1px solid #E5E5E5;
        border-radius: .5rem;
    }
    .pal_card__image_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7.875rem;
        width: 100%;
        min-width: 15.5rem;
    }
    .pal_card__image {
        max-height: 100%;
        width: auto;
    }
}

@media screen and (min-width: 1920px) {
    .pal_grid_parts {
        width: 68vw;
        padding: 3.125rem 0 11.864375rem;
    }

    .pal_grid_parts__cards,
    .pal_cards {
        max-width: 77rem;
    }

    .pal_cards__card,
    .pal_card {
        width: 23.875rem;
        max-width: 23.875rem;
        padding: 2rem 1.5rem;
    }

    .pal_card__brand {
        margin-bottom: 0;
    }

    .pal_card__part_name {
        margin-bottom: 0;
    }

    .pal_card__buttons {
        padding: 1.25rem 0;
    }

    .pal_card__buttons__disclaimer {
        color: #4D4D4D;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 2560px) {}