﻿.form-search .form-select {font-size: 0.9em;padding: 0.5em 0.375em; font-weight: 500;}
.full-bleed {position: relative;left: 50%;right: 50%;width: 100vw;margin-left: -50vw;margin-right: -50vw;}
.section-divider {height: 1px;background: linear-gradient(to right, var(--bs-danger) 25%, #ccc 25%); opacity: 0.9 !important; padding: 0; margin: 0;}
.cursor-pointer {cursor: pointer;}
.hover-shadow:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transform: translateY(-5px); transition: all 0.2s; cursor: pointer;}
.section-content, .container-fluid {margin-top: -50px; padding: 0 !important;}
.container-fluid .btn.show-more{}
#scrollToTop {display: none;position: fixed;bottom: 20px;right: 20px;z-index: 99;border: none;outline: none;background-color: var(--bs-danger);color: var(--bs-white);cursor: pointer;padding: 10px 12px;border-radius: 50%;font-size: 1.4em;transition: all 0.3s ease;box-shadow: 0px 4px 10px rgba(0,0,0,0.2);}
#scrollToTop:hover {background-color: var(--bs-danger-hover); transform: translateY(-5px);}
/*part-wrapper*/
.part-wrapper { margin-bottom: 1.0rem;}
.part-wrapper .content-title{ border-bottom: 1px solid #ddd; font-weight: 500;}
.part-wrapper .content-title .active{ border-bottom: 1px solid var(--bs-danger); position: relative;top: 1px; color: var(--bs-danger);}
.part-wrapper .card .image-wrap {height: 125px; position: relative; --bs-aspect-ratio:calc(320 / 480 * 100%) height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.part-wrapper .card .image-wrap img {max-width: 100%;object-fit: cover;}
.part-wrapper .card .card-body.bg-light { background: var(--bs-light) !important;}
.part-wrapper .card .card-title { font-size: 0.875rem; line-height: inherit; margin-bottom: 0;}
.part-wrapper .badge { transform: skew(-20deg); left: 0.25rem; top: 0.25rem; background: var(--bs-danger);}
.part-wrapper .badge span, .section-newpart .badge::before, .section-newpart .badge::after {transform: skew(20deg); display: inline-block; }
.part-wrapper .card .card-body img{ width: 24px; height: 24px; border-radius: 3px; background: var(--bs-white);}
/*car category*/
.category-wrapper .section-button .scroll { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.category-wrapper .section-button .scroll::-webkit-scrollbar { display: none; }
.category-wrapper .section-button .scroll .btn {flex: 0 0 auto;font-weight: 500;padding: 0.5rem 1.0rem;}
.category-wrapper .btn-category{min-width: 100px; max-width: max-content; border: 1px solid var(--bs-secondary); }
.category-wrapper .btn-category img{ width: 24px; background: transparent; mix-blend-mode: multiply;}
.category-wrapper .btn-category.active,.btn-category.active:hover{ background: var(--bs-danger) !important; color: var(--bs-white);transition: 0.2s ease-in-out 0.1s;}
.category-wrapper .btn-category:hover{ background: var(--bs-secondary); color: var(--bs-white); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important}
.category-wrapper .category-grid {display: none; opacity: 0; transform: translateY(10px);}
.category-wrapper .category-grid.active {display: grid; text-align: center; opacity: 1; transform: translateY(0);transition: all 0.25s ease;}
.category-wrapper .category-grid {grid-template-columns: repeat(2, 1fr); gap: 1.0rem;}
.category-wrapper .category-grid .category-item {background: #E4E4E4; display: grid; grid-template-rows: auto auto; align-items: center; gap: 1.0rem; height: 100%;}
.category-wrapper .category-grid .category-item .part-icon img { mix-blend-mode: multiply;}
.category-wrapper .category-grid .category-item:hover {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transform: translateY(-5px);}
.category-wrapper .category-grid .category-item.active {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;transition: transform 0.3s ease; color: var(--bs-danger) !important;}
.category-wrapper .category-grid.active{transition: 0.3s ease-in-out 0.1s;}

@supports (width: 100dvw) {.full-bleed {width: 100dvw;margin-left: -50dvw;margin-right: -50dvw;}}
.select2-container--default .select2-selection--single {height: 38px !important;padding: 0.5em;font-size: 0.9em;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 22px !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left; font-weight: 500;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 38px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {display: none;}
.select2-container--default .select2-selection--single {position: relative;padding-right: 2rem;}
.select2-container--default .select2-selection--single::after {content: "";position: absolute;top: 50%;right: 0.75rem;width: 1rem;height: 1rem;pointer-events: none;background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat center;background-size: 1rem 1rem;transform: translateY(-50%);}
.select2-container--default .select2-search--dropdown {position: relative;}
.select2-container--default .select2-search--dropdown::before {content: "";position: absolute;top: 50%;left: 12px;width: 16px;height: 16px;transform: translateY(-50%);pointer-events: none;background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-search' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.656a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3e%3c/svg%3e") no-repeat center;background-size: 16px;}
.select2-container--default .select2-search__field {padding: 0.15em 0.25em 0.15em 2em !important; border-radius: 0.25em;}
.select2-container--default .select2-results > .select2-results__options { font-size: 0.9rem;}

.search-wrapper{ position: relative; text-align: center; padding: 0 0.75rem;}
.search-wrapper .form-search{ width: 100%;}
.search-wrapper .form-search .item-selected{padding: 0.05rem 0.75rem; font-size: 0.875rem; cursor: pointer;}
.search-wrapper .form-search .item-selected:after {content: "\f00d";font-family: "Font Awesome 5 Free";font-weight: 900;color: var(--bs-danger);padding-left: 0.5rem;position: relative;top: -1px; font-size: 0.7rem;}


@media(min-width: 768px) {
    .category-wrapper .category-grid {grid-template-columns: repeat(4, 1fr); gap: 1.0rem; }
    .search-wrapper .form-search{ width: 85%;}
    #scrollToTop {bottom: 15px;right: 15px;padding: 10px 14px;}
}

@media (min-width: 992px) {
    #scrollToTop {bottom: 50px;right: 20px;z-index: 99;padding: 10px 13px;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
    .select2-container--default .select2-selection--single {height: 40px !important;}
    .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 22px !important;}
    .select2-container--default .select2-selection--single .select2-selection__arrow {height: 40px !important;}
    .section-divider {height: 1px;background: linear-gradient(to right, var(--bs-danger) 10%, #ccc 10%);}
    .part-wrapper .card .image-wrap{ height: 200px;}
    .part-wrapper .card .card-title {margin-bottom: 0.25rem;}
    .category-wrapper .category-grid {grid-template-columns: repeat(5, 1fr);}
    .search-wrapper .form-search{ width: 80%;}
    .search-wrapper.category .form-search{ width: 70%;}
    .search-wrapper .form-search button.btn{ height: 40px;}
}