/**
 * Classic monochrome — front-end theme overlay for Cars.com.cm
 * Loaded after style.css / custom-style.css. Does not alter markup or PHP output.
 */

:root {
  --tc-ink: #0a0a0a;
  --tc-ink-soft: #2a2a2a;
  --tc-muted: #5c5c5c;
  --tc-line: #d0d0d0;
  --tc-line-strong: #1a1a1a;
  --tc-paper: #ffffff;
  --tc-canvas: #f4f4f2;
  --tc-panel: #ececea;
  --tc-inverse: #ffffff;
  --tc-accent: #0a0a0a;
  --tc-accent-hover: #3d3d3d;
  --tc-shadow: 0 1px 0 rgba(10, 10, 10, 0.06), 0 12px 40px rgba(10, 10, 10, 0.06);
  --tc-font-display: "Newsreader", "Georgia", "Times New Roman", serif;
  --tc-font-ui: "DM Sans", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Base typography & canvas --- */
body {
  color: var(--tc-ink-soft);
  background-color: var(--tc-canvas);
  font-family: var(--tc-font-ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section_title h2,
.widgets_container h3,
.filter-tabs form h2 {
  font-family: var(--tc-font-display);
  color: var(--tc-ink);
  letter-spacing: 0.02em;
}

p, span, li, td, th, label, input, button, select, textarea,
.section_title p {
  font-family: var(--tc-font-ui) !important;
}

a {
  color: var(--tc-ink-soft);
}

a:hover,
a:focus {
  color: var(--tc-accent-hover) !important;
}

/* --- Header stack --- */
.main_header {
  background: var(--tc-ink) !important;
  border-bottom: 1px solid var(--tc-line-strong);
}

.h_middle_two {
  background: var(--tc-paper) !important;
}

.h_middle_two .search_container form {
  border: 1px solid var(--tc-line) !important;
  border-radius: 0;
  box-shadow: none;
}

.h_middle_two .search_box input {
  color: var(--tc-ink);
}

.search_box button,
.h_middle_two .search_box button {
  background: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
  border-radius: 0 !important;
}

.search_box button:hover,
.h_middle_two .search_box button:hover {
  background: var(--tc-ink-soft) !important;
  color: var(--tc-inverse) !important;
}

.h_bottom_two {
  background: var(--tc-panel) !important;
  border-top: 1px solid var(--tc-line) !important;
  border-bottom: 1px solid var(--tc-line) !important;
}

.h_bottom_two.sticky-header.sticky {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: saturate(0) blur(6px);
  border-bottom: 1px solid var(--tc-line) !important;
  box-shadow: var(--tc-shadow);
}

.menu_two nav > ul > li > a {
  color: var(--tc-ink) !important;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.main_menu nav > ul > li:hover > a {
  color: var(--tc-muted) !important;
}

.offcanvas_two .canvas_open a {
  color: var(--tc-ink) !important;
  border: 1px solid var(--tc-ink) !important;
}

.offcanvas_two .canvas_open a:hover {
  color: var(--tc-muted) !important;
  border-color: var(--tc-muted) !important;
}

/* Dropdowns & mega menu */
.main_menu nav > ul > li ul.sub_menu,
.main_menu nav > ul > li .mega_menu {
  background: var(--tc-paper) !important;
  border: 1px solid var(--tc-line) !important;
  box-shadow: var(--tc-shadow);
}

.main_menu nav > ul > li ul.sub_menu li a:hover,
.mega_menu_inner > li > a:hover,
.mega_menu_inner > li ul li a:hover {
  color: var(--tc-ink) !important;
}

.offcanvas_menu_wrapper,
.offcanvas_menu_area,
.off_canvars_overlay.active {
  background: var(--tc-paper);
}

.offcanvas_main_menu li a {
  color: var(--tc-ink-soft);
}

.offcanvas_main_menu li a:hover {
  color: var(--tc-ink) !important;
}

/* --- Home filter tabs (was navy) --- */
.filter-tabs .nav-pills {
  background-color: var(--tc-ink) !important;
  border: 1px solid var(--tc-line-strong);
}

.filter-tabs .nav-pills .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.filter-tabs .nav-pills .nav-link.active {
  background-color: var(--tc-paper) !important;
  color: var(--tc-ink) !important;
  box-shadow: inset 0 -2px 0 var(--tc-ink);
}

.filter-tabs .tab-content {
  background-color: var(--tc-ink-soft) !important;
  border: 1px solid var(--tc-line-strong);
  border-top: none;
}

.filter-tabs form h2 {
  color: var(--tc-inverse) !important;
  font-weight: 400;
}

.filter-tabs form .form-select,
.filter-tabs form .form-control {
  border: 1px solid var(--tc-line) !important;
  border-radius: 0 !important;
  background-color: var(--tc-paper);
  color: var(--tc-ink);
}

.find-car-btn {
  background-color: var(--tc-paper) !important;
  color: var(--tc-ink) !important;
  border: 1px solid var(--tc-paper) !important;
  border-radius: 0 !important;
  letter-spacing: 0.08em;
}

.find-car-btn:hover {
  background-color: transparent !important;
  color: var(--tc-inverse) !important;
  border-color: var(--tc-inverse) !important;
}

/* --- Sections & cards --- */
.products_section_bg,
.home_section_bg,
.custom-pad-sec {
  background-color: var(--tc-canvas) !important;
}

.sidebar-sec {
  background-color: var(--tc-paper) !important;
  border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow);
}

.sidebar-sec h3 {
  color: var(--tc-ink) !important;
  border-bottom: 1px solid var(--tc-line);
  padding-bottom: 10px;
}

.sidebar-sec .border-box {
  border-color: var(--tc-line) !important;
}

.white-box {
  background-color: var(--tc-paper) !important;
  border: 1px solid var(--tc-line) !important;
  box-shadow: var(--tc-shadow) !important;
}

.wd-dealers-listing,
.wd-dealers-listing .wd-dealers-city .wd-city-blog {
  background: var(--tc-paper) !important;
  border: 1px solid var(--tc-line) !important;
  box-shadow: none !important;
}

.wd-dealers-listing .wd-dealers-city .wd-city-blog:hover {
  border-color: var(--tc-line-strong) !important;
  box-shadow: var(--tc-shadow) !important;
}

/* Pills / tabs used across listings & blogs */
.car-list-sidebar .nav-pills,
.car-variants-table-sec .nav-pills,
.cust-nav-pills.nav-pills,
.blogs-card-area .nav-pills {
  border-bottom-color: var(--tc-line) !important;
}

.car-list-sidebar .nav-pills .nav-link,
.car-variants-table-sec .nav-pills .nav-link,
.cust-nav-pills.nav-pills .nav-link,
.blogs-card-area .nav-pills .nav-link {
  color: var(--tc-muted) !important;
}

.car-list-sidebar .nav-pills .nav-link.active,
.car-variants-table-sec .nav-pills .nav-link.active,
.cust-nav-pills.nav-pills .nav-link.active,
.blogs-card-area .nav-pills .nav-link.active,
.car-list-sidebar .nav-pills .show > .nav-link,
.car-variants-table-sec .nav-pills .show > .nav-link,
.cust-nav-pills.nav-pills .show > .nav-link,
.blogs-card-area .nav-pills .show > .nav-link {
  color: var(--tc-ink) !important;
  border-bottom-color: var(--tc-ink) !important;
}

/* Sticky section nav on detail pages */
.my-section-links nav ul.menu {
  background-color: var(--tc-ink) !important;
}

.my-section-links nav ul.menu li a {
  color: rgba(255, 255, 255, 0.92) !important;
}

.my-section-links nav ul.menu li:hover a,
.my-section-links nav ul.menu li.active a {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.my-section-links nav ul.menu li:after {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Spec tiles */
.icon-spef-box.border-box {
  border-color: var(--tc-line) !important;
  background-color: var(--tc-paper) !important;
}

.icon-spef-box:hover svg {
  fill: var(--tc-ink) !important;
}

/* Range slider */
#range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--tc-ink) var(--range-progress), #e2e2e0 var(--range-progress)) !important;
}

#range::-webkit-slider-thumb {
  border-color: var(--tc-ink) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

#tooltip span,
#tooltip span:before {
  background: var(--tc-ink) !important;
  border-top-color: var(--tc-ink) !important;
}

/* CTA buttons on product / offer blocks */
.product_offer .button,
.product_offer .offerbutton {
  background-color: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
  border-radius: 0 !important;
}

.product_offer .button:hover,
.product_offer .offerbutton:hover {
  background-color: var(--tc-ink-soft) !important;
}

.product_offer .custcontact {
  background-color: var(--tc-paper) !important;
  color: var(--tc-ink) !important;
  border: 1px solid var(--tc-ink) !important;
}

.product_offer .custcontact:hover {
  background-color: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
}

/* Star ratings — monochrome (still readable) */
.star-ratings .star i {
  color: var(--tc-ink) !important;
}

/* Brand grid hover */
.new-cars-by-brands .brand-list li:hover {
  box-shadow: inset 0 0 0 2px var(--tc-ink) !important;
}

/* Tables */
.table-bordered,
.table {
  border-color: var(--tc-line) !important;
}

.table thead th {
  background: var(--tc-panel);
  color: var(--tc-ink);
  border-color: var(--tc-line) !important;
}

.table td,
.table th {
  border-color: var(--tc-line) !important;
}

/* Breadcrumbs */
.breadcrumbs_area,
.breadcrumb_content,
.breadcrumb_content ul li,
.breadcrumb_content ul li a {
  color: var(--tc-muted);
}

.breadcrumb_content ul li a:hover {
  color: var(--tc-ink) !important;
}

/* Footer */
.footer_widgets {
  background: var(--tc-ink) !important;
  color: rgba(255, 255, 255, 0.88);
}

.footer_top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.widgets_container h3 {
  color: var(--tc-inverse) !important;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.footer_menu ul li a,
.footer_contact > p,
.copyright_area,
.copyright_area a {
  color: rgba(255, 255, 255, 0.78) !important;
}

.footer_menu ul li a:hover,
.copyright_area a:hover {
  color: var(--tc-inverse) !important;
  text-decoration: underline !important;
}

.footer_bottom {
  background: var(--tc-ink);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Flash message */
.alert.alert-success {
  background: var(--tc-paper) !important;
  color: var(--tc-ink) !important;
  border: 1px solid var(--tc-line-strong) !important;
  box-shadow: var(--tc-shadow);
}

/* Search suggestions */
#suggesstion-box,
#suggesstion-box2 {
  background-color: var(--tc-paper) !important;
  border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow);
}

#filter-list li {
  background: var(--tc-panel) !important;
  border-bottom-color: var(--tc-line) !important;
}

/* Slick carousel — neutral chrome */
.slick-prev:before,
.slick-next:before {
  color: var(--tc-ink) !important;
}

.slick-dots li button:before {
  color: var(--tc-ink) !important;
  opacity: 0.25;
}

.slick-dots li.slick-active button:before {
  opacity: 0.85;
}

/* Section titles — editorial spacing */
.section_title h2 {
  color: var(--tc-ink);
  font-weight: 400;
  letter-spacing: 0.14em;
}

.section_title h2 span {
  font-weight: 600;
}

/* Blog read more links (inline style override in footer) */
.readmore_box a {
  color: var(--tc-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.readmore_box a:hover {
  color: var(--tc-muted) !important;
}

/* Forms */
input.form-control,
select.form-select,
textarea.form-control {
  border-color: var(--tc-line) !important;
  border-radius: 0;
}

.btn-primary,
.btn-dark {
  background-color: var(--tc-ink) !important;
  border-color: var(--tc-ink) !important;
  border-radius: 0;
}

.btn-primary:hover,
.btn-dark:hover {
  background-color: var(--tc-ink-soft) !important;
  border-color: var(--tc-ink-soft) !important;
}

/* Utility: keep vehicle photography in colour for recognition;
   optional editorial frame on listing thumbs only */
.car-list-sidebar .car-list-box .det-left img {
  border: 1px solid var(--tc-line);
}

/* Dealer / filter UI (custom-style accents) */
.btn-filter-search,
.btn-dealer {
  background-color: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
  border-radius: 0 !important;
}

.btn-filter-search:hover,
.btn-dealer:hover {
  background-color: var(--tc-ink-soft) !important;
  color: var(--tc-inverse) !important;
}

.top-page-banner .form-area form button {
  background-color: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
}

.wd-car-different-budget {
  background: var(--tc-panel) !important;
  box-shadow: var(--tc-shadow) !important;
  border: 1px solid var(--tc-line);
}

.wd-car-different-budget a {
  background: var(--tc-paper) !important;
  color: var(--tc-ink) !important;
  border: 1px solid var(--tc-line) !important;
  box-shadow: none !important;
}

.wd-car-different-budget a:hover {
  border-color: var(--tc-line-strong) !important;
}

a .car-select:hover i {
  color: var(--tc-ink) !important;
}

.car-dealer-box h4 a {
  color: var(--tc-ink) !important;
}

ul.showroom-cities li:hover a {
  color: var(--tc-muted) !important;
}

/* Wishlist / cart count chips (orange in base theme) */
.h_middle_two .header_wishlist a span.wishlist_count,
.h_middle_two .mini_cart_wrapper a span.cart_count {
  background: var(--tc-ink) !important;
  color: var(--tc-inverse) !important;
}