/*********************************
** PARTS LOGIC SEARCH - DEC 2021
** Authored by: Ryan
*********************************/
/* SEARCH RESULTS PAGE: CLIENT UX SPECIFIC STYLING */
:root {
    --pl-color-primary: #E5B900;
    --pl-color-secondary: #050404;
    --pl-color-dark: #242424;
    --pl-color-light: #eeeeee;
    --pl-color-success: #84d384;
    --sui-border-radius: 3px;
}

/************************ CLIENT SPECIFIC *******************************************/
.Sui-facet-section--brands, .Sui-ProductListItem-Container--brand_name, .Sui-SearchBar--section-container-brand {display:none;}
.SuiButton.primary {color:var(--pl-color-dark) !important;background: var(--pl-color-primary)}
.Sui-Alert--action button {font-weight:initial;}
.Pl-Fitment-modal--title{z-index:0!important;}
#pl-searchbar-container form{background: #ffffff36;color: #fff;border-radius: 5px!important;/* height: 36px !important; */}
#pl-searchbar-container input#sui-search-bar-input{background: #363636;color: #fff;border-radius: 5px 0 0 5px!important;}
#pl-fitment-wrapper select{border-radius: 5px!important;}
.Sui-FitmentSelector--select-wrapper{flex:1;margin:0 5px 0 0;}
#pl-searchbar-container .Sui-SearchBar--search-button {border-radius: 0 5px 5px 0 !important;}
#pl-fitment-wrapper .Sui-FitmentSelector--actions{gap: 11px !important;}
.Sui-ProductListItem--availability_remarks {font-size:1.2rem !important}
@media (max-width:768px){
    #pl-searchbar-container {padding:5px;}
    #pl-searchbar-container input#sui-search-bar-input {background-color:#fff;}
}
ul[class*="facetFilter_list"] {display: flex;flex-direction: column;}
ul[class*="facetFilter_list"] .Sui-facet-section--Part.Type {order:-1;}

/************************ END CLIENT SPECIFIC *******************************************/


div[class*="searchBar_inputContainerStyled"] {border:none;box-shadow:none;}
input#sui-search-bar-input {margin:0 !important;}
div[class*="searchBar_styledFitmentContainer"]{background-color:var(--pl-color-secondary);}
[class*="Sui-ProductListItem--image"] img {max-height:150px !important;}

/*Search Results Page*/
#pl-components [class*="searchPage-module_fitmentVerifier"] {background-color: var(--pl-color-dark);border-color:rgba(0,0,0,.5);}
.Sui-modal .Pl-facet-modal--done-btn {background:var(--pl-color-primary);border:1px solid #00000073;}
#pl-components #pl-search-page-container div[class*="searchPage-module_fitmentVerifier"] button {margin:0 5px 0 0;border: 1px solid rgba(255,255,255, .5);font-size:1.3rem;text-transform:uppercase;border-radius: 3px;background-color: rgba(0,0,0,.5);}
#pl-components button[class*="searchPage-module_fitmentButton__1WGJ0"],
.Sui-modal .Sui-FitmentSelector--actions button.Sui-FitmentSelector--searchBtn {background-color:var(--pl-color-primary);color: var(--pl-color-dark);border-color: transparent;}
#pl-components [class*="searchPage-module_fitmentVerifier"] .Sui-Alert--text {font-size:2rem;}
#pl-components [class*="searchPage-module_fitmentVerifier"] .Sui-Alert--text:before {content:"";font-family:"font awesome 5 free";font-weight:normal;margin-right:5px}
#pl-components button.Pl-filter-results--button {background-color:grey;color:white;border-color:rgba(0,0,0,.5)}
#pl-components button[class*="searchPage-module_fitmentButton"] {background-color:var(--pl-color-primary);border:1px solid rgba(0,0,0,.25);color:var(--pl-color-dark);}
#pl-components .Sui-ListControls--container {font-size:1.5rem;border-radius:3px;background-color:var(--pl-color-light)}
#pl-components .Sui-ListControls--container button {font-size:2rem;margin-left:20px}
#pl-components .Sui-ListControls--container button>svg {color:#8e8e8e}
#pl-components .Sui-ListControls--container button>svg[class*="listControls_selected"] {color: var(--pl-color-primary);}
#pl-components li[class*="Sui-facet-section"], .Sui-modal li[class*="Sui-facet-section"] {border-radius:3px;}
#pl-components li[class*="Sui-facet-section"] h2, .Sui-modal li[class*="Sui-facet-section"] h2 {background-color:var(--pl-color-light)}
#pl-components li[class*="Sui-facet-section"] button[class*="facetSection_showMoreBtn"], .Sui-modal li[class*="Sui-facet-section"] button[class*="facetSection_showMoreBtn"] {color:black;background-color:var(--pl-color-light);font-size:1rem;border-radius:3px 0 0 0;text-transform:uppercase;float:right}
#pl-components .Sui-FacetSection-count, .Sui-modal .Sui-FacetSection-count {font-size:1.2rem}
/*Search Bar & Dropdown */
.Sui-modal button.Sui-SearchBar--search-button {background-color:var(--pl-color-primary);border-radius:0 5px 5px 0;}
button[class*="searchBarSuggestions_styledViewMoreBtn"]{font-size:1.75rem; padding:10px;height:initial;background-color:var(--pl-color-primary) !important;}


/* Fitment Selector */
#pl-fitment-wrapper {padding:10px}
#pl-fitment-wrapper select, #pl-fitment-wrapper button {height: 50px;font-size:16px;padding: 10px;margin:0;box-shadow: none;max-height: initial;margin:0 0 15px 0 ;}
#pl-fitment-wrapper select {width:100%;border: 1px solid rgba(0,0,0,.5);background-color: #fff;border-radius: 0;background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");}
#pl-fitment-wrapper .Sui-FitmentSelector--actions {display:flex;flex-direction: row;gap: 35px;}
#pl-fitment-wrapper .Sui-FitmentSelector--actions button {width:100%}
#pl-fitment-wrapper .Sui-FitmentSelector--actions button.Sui-FitmentSelector--clearBtn {background-color: var(--pl-color-secondary);color: rgba(255,255,255,1);border: 1px solid #ffffff;}
#pl-fitment-wrapper .Sui-FitmentSelector--actions button.Sui-FitmentSelector--clearBtn {order:-1}


/* Fitment Verifier */
#pl-fitment-verifier {margin-bottom: 15px;}
#pl-fitment-verifier .Sui-Alert--root[class*="alert_sucess"] {border-color:var(--pl-color-success)}
#pl-fitment-verifier .Sui-Alert--root[class*="alert_sucess"] .Sui-Alert--icon {background-color:var(--pl-color-success)}
#pl-fitment-verifier .Sui-FitmentSelectorVerifier--title {background-color:var(--pl-color-dark);}
#pl-fitment-verifier .Sui-FitmentSelector--actions {display:flex;flex-direction: row;justify-content: space-between;}
#pl-fitment-verifier .Sui-FitmentSelector--actions button {height:40px;}
#pl-fitment-verifier .Sui-FitmentSelector--searchBtn {background:var(--pl-color-primary);}
#pl-fitment-verifier .Sui-FitmentSelector--clearBtn {order:-1}


/* **************** END  SEARCH RESULTS PAGE: UX SPECIFIC STYLING *********** */

/* SEARCH BAR SKELETON */
#pl-searchbar-container {
    min-height: initial;
    position: relative;
    overflow: hidden;
}
#pl-searchbar-container::before {
    content: '';
    display: block;
    position: absolute;
    left: -150px;
    top: 0;
    height: 100%;
    width: 150px;
    background: linear-gradient(to right, #ffffff00 0%, #d3d3d3 50%, #e1e1e1fa 100%);
    animation: plLoad 1s cubic-bezier(0.4, 0.0, 0.2, 1) 1000ms;
}
@keyframes plLoad {
    from {
        left: -150px;
    }
    to   {
        left: 100%;
    }
}
/* NO SEARCH MESSAGE */
.Pl-SearchPage-no-query-message,
[class*="searchPage-module_noResultMsg"] {font-size:1.8rem;background-color: #f9af3f;padding:1rem;text-align:center;line-height:initial;}

/* All Devices */
.Sui-modal .Sui-Modal--root {z-index: 10000;}
#pl-searchbar-container form, 
#pl-searchbar-container input,
#pl-searchbar-container .Sui-SearchBar--search-button {margin:0;border-radius: 0;top: 0%;transform: initial;height: 45px;}
.Sui-SearchBar--search-button {font-size:2rem;}
.SuiButton, button.SuiButton, #pl-components button, .Sui-modal button {padding: 10px;}

/*HIDE ELEMENTS: Product List */
.Sui-ProductListItem-Container--stockid {display:none;}

/* FACET SEARCH: Mobile */
div[class*="facetFilterModal-module_modalHeader"] {border-bottom:1px solid #000;margin-bottom:10px;border-radius: 0 !important;margin: 0 0 15px 0;/* padding: 10px 20px 0 20px; */background: var(-pl-color-secondary);}
div[class*="facetFilterModal-module_modalFacetContainer"] {padding:15px 10px}
.Pl-facet-modal--title, .Pl-Fitment-modal--title {margin: 0 !important;}

/*FACET PANELS*/
.Sui-FacetSection--container button[class*="facetSection_showMoreBtn"] {font-size:1.3rem; text-decoration:none;}
.Sui-FacetFilter--expand-collapse-btn {padding:0 1rem;font-size:.5rem}

/* SEARCH RESULTS - PRODUCT LIST */
.Sui-ProductListItem--brand_name,
.Sui-ProductListItem--tag {font-size:1.2rem !important}
.Sui-ProductListItem-Container--tag .Sui-ProductListItem--tag {font-weight: initial;font-style: italic;}
.Sui-ProductListItem--dealerid {font-size:1.2rem; font-weight:700;}
.Sui-Modal--close-icon {top: -49px;right:-10px;}
.Sui-modal .Sui-Modal--root[class*="fitmentSelectorModal-module_modal"] .Sui-Modal--close-icon{top:initial;right:10px;}

/* SEARCH MODAL - RESULTS - CATEGORIES & BRANDS*/


/* SEARCH MODAL PRODUCT LIST */
.Sui-SearchBar--suggestions-container>div {width:100% !important;}
.Sui-ProductListItem--root {border-color:#ccc}
.Sui-ProductListItem--root ul li {margin:0;padding:0;}
.Sui-modal .Sui-CategoryList--title {text-align:center}
.Sui-modal .Sui-ProductListItem--root {border-width:0 0 1px 0;}

/* SEARCH BAR */

/*Options Button*/
a.Sui-ProductListItem--has_options {background-color: var(--sui-muted-color);color:white;text-decoration: none;text-transform:capitalize;}
.Sui-ProductListItem-Container--has_options {margin:10px 0 !important;}
.Sui-SearchBar--suggestions-container .Sui-ProductListItem-Container--has_options div[class*="productListItem_optionAvailableBtnContainer"]  {text-align:left; margin-top:10px;}
.Sui-SearchBar--suggestions-container .Sui-ProductListItem-Container--has_options div[class*="productListItem_optionAvailableBtnContainer"]  a {font-size:1.2rem}

/*Pagination*/
.Sui-PaginationWithRange--container {
    margin: 10px 0
}

.Sui-PaginationWithRange--container>div {
    margin-bottom: 10px
}

.Sui-PaginationWithRange--container button {
    padding: 5px 10px;
    font-size: 1.5rem;
    background-color: var(-pl-color-secondary);
    border-radius: 3px;
    margin: 0 5px
}

.Sui-PaginationWithRange--container button[disabled] {
    background-color: initial
}

.Sui-PaginationWithRange--container button[disabled][class*=pagination_active] {
    background-color: var(--pl-color-primary);
    color: #fff;
    text-decoration: none;
}