/* bs-offcanvas.css // Bootstrap 5.3 Offcanvas Template Styles */

/* ============================================================ */
/* CSS Variables                                                 */
/* ============================================================ */
:root {
	--footer-nav-link-color: #ffffff;
	--footer-nav-link-hover-color: #d0d0d0;
	--footer-nav-link-active-color: #eaeaea;
}

/* ============================================================ */
/* Debug: Display current bootstrap breakpoint                   */
/* ============================================================ */
/*
body::before { content: "XS"; color: red; font-size: 2rem; font-weight: bold; position: fixed; top: 0; right: 0; z-index: 1500; }
@media (min-width: 576px) { body::before { content: "SM"; }}
@media (min-width: 768px) { body::before { content: "MD"; }}
@media (min-width: 992px) { body::before { content: "LG"; }}
@media (min-width: 1200px) { body::before { content: "XL"; }}
@media (min-width: 1400px) { body::before { content: "XXL"; }}
*/

/* ============================================================ */
/* Layout: Account for fixed navbar + sticky footer              */
/* ============================================================ */
/* WebForms wraps everything in <form>, so the flex container    */
/* must live on the form, not on body.                           */
form#form1 { display: flex; flex-direction: column; min-height: 100vh; }
main { padding-top: 56px; margin: 30px 0; flex: 1 0 auto; }
footer { flex-shrink: 0; }
#Carousel { margin-top: 56px; }

/* ============================================================ */
/* Navbar                                                        */
/* ============================================================ */
#MainNavbar .navbar-brand { font-size: 1.1rem; min-width: 0; }
#MainNavbar .search-btn { max-width: 70px; }

/* ============================================================ */
/* Offcanvas: Shared Styles                                      */
/* ============================================================ */
.offcanvas { max-width: 320px; }
.offcanvas-header { padding: 0.75rem 1rem; }
.offcanvas-title { font-size: 1.1rem; }
.offcanvas-header.bg-dark .offcanvas-title { color: #fff; }

/* ============================================================ */
/* Offcanvas: Left Menu                                          */
/* ============================================================ */
.offcanvas-nav-section { border-bottom: 1px solid var(--bs-border-color); }

#offcanvasMenu .account-actions .btn { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
#offcanvasMenu .account-actions .btn .bi { font-size: 0.85rem; }

.offcanvas-nav-link {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--bs-body-color);
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.15s;
}
.offcanvas-nav-link:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.offcanvas-nav-header {
	padding: 0.75rem 1rem;
	font-weight: 600;
	color: var(--bs-secondary-color);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

/* Chevron rotation for collapsible sections */
.offcanvas-nav-link .chevron-toggle {
	transition: transform 0.2s;
}
.offcanvas-nav-link[aria-expanded="true"] .chevron-toggle {
	transform: rotate(180deg);
}

/* Categories and brands lists inside offcanvas */
#offcanvasMenu #CategoryNav,
#offcanvasMenu #BrandNav {
	background-color: transparent;
	border-radius: 0;
	margin-bottom: 0;
	padding: 0;
}

#offcanvasMenu #CategoryNav .title,
#offcanvasMenu #BrandNav .title { display: none; }

#offcanvasMenu .sidenav {
	background-color: transparent;
	text-shadow: none;
	margin-bottom: 0;
	padding: 0;
	border-radius: 0;
}
#offcanvasMenu .sidenav > li > a { padding: 0.5rem 1rem; font-weight: 400; font-size: 0.95rem; }
#offcanvasMenu .sidenav > li > a:hover { background-color: var(--bs-tertiary-bg); }
#offcanvasMenu .sidenav .subcat > a { padding: 0.35rem 1rem 0.35rem 2rem; }
#offcanvasMenu .sidenav > .active > a { font-weight: bold; }

/* ============================================================ */
/* Offcanvas: Vehicle Search (Right)                             */
/* ============================================================ */
#offcanvasVehicle .offcanvas-body { padding: 1rem; }
#offcanvasVehicle #ShopByVehicle dl { margin: 0; }
#offcanvasVehicle #ShopByVehicle dt { padding: 0.5rem 0 0.25rem; }
#offcanvasVehicle #ShopByVehicle select { margin-bottom: 0.5rem; }

#offcanvasVehicle #SelectedVehicle { padding: 0; }
#offcanvasVehicle #SelectedVehicle a { color: var(--bs-primary); }

/* ============================================================ */
/* Footer                                                        */
/* ============================================================ */
footer { background-color: #000000; color: #ffffff; padding: 25px 0; }
footer h5 { color: var(--footer-nav-link-color); }
footer .nav-link { color: var(--footer-nav-link-color); }
footer .nav-link:hover { color: var(--footer-nav-link-hover-color); }
footer .nav-link:active { color: var(--footer-nav-link-active-color); }
footer #PartsLogixBranding { margin-top: 50px; }
footer #PartsLogixBranding a { font-size: 0.65em; color: var(--footer-nav-link-color); }
footer #PartsLogixBranding a:hover { color: var(--footer-nav-link-hover-color); }
footer #PartsLogixBranding a:active { color: var(--footer-nav-link-active-color); }
footer .SiteSeals { float: right; list-style-type: none; padding: 0; }
footer .SiteSeals li { margin-bottom: 10px; }

/* ============================================================ */
/* Product Cards & Lists                                         */
/* ============================================================ */
#ProductList .card:hover, #CategoryList .card:hover, .thumbnail:hover, .img-thumbnail:hover { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15); border-color: var(--bs-primary); transition: box-shadow 0.3s, border-color 0.3s; }
#ProductList .prod-caption { background-color: #fafafa; height: 100% !important; font-size: 0.875em; line-height: 1.35em; }
#ProductList .no-price { display: none; }
#ProductList a { text-decoration: none; }
#ProductList a:hover { text-decoration: underline; }

.product-flag { position: absolute; width: 35%; top: 0; left: 0; }

/* ============================================================ */
/* Product Detail                                                */
/* ============================================================ */
.add-on-item { padding-left: 15px; }
.add-on-item label { font-size: .8rem; }
.NoPrice, .no-price { display: none; }
.upsell-pricing { padding-left: 15px; }
.img-thumbnail { margin-bottom: 3.5px; padding: .2rem; }
#ProductDescription { margin-top: 20px; }

/* Product Tabs: Hide scrollbar */
.nav-tabs { -ms-overflow-style: none; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs.overflow-auto { -webkit-overflow-scrolling: touch; }

.tooltip { font-size: .75em; line-height: .85em; }
.affirm-as-low-as { margin-bottom: 0.5em; }

/* ============================================================ */
/* Reviews                                                       */
/* ============================================================ */
.stars { float: left; }
#StarText { margin: 3px 0 0 15px; float: left; }
.star { display: inline-block; width: 80px; height: 16px; margin: 4px 8px 0 0; color: transparent; }
.star0 { background-image: url('../../images/stars_0_sm.png'); }
.star1 { background-image: url('../../images/stars_1_sm.png'); }
.star2 { background-image: url('../../images/stars_2_sm.png'); }
.star3 { background-image: url('../../images/stars_3_sm.png'); }
.star4 { background-image: url('../../images/stars_4_sm.png'); }
.star5 { background-image: url('../../images/stars_5_sm.png'); }
#ProductReviews { margin-top: 30px; }
.review h4 { margin: 0; }
.helpful { margin-bottom: 3px; }

/* FAQ */
.faq-cats { max-height: 120px; }
.faq-cats-links h4 { text-transform: uppercase; }