/* MAPLE BID AUCTION — Modern Canadian vehicle marketplace interface.
 * Presentation-only layer. No PHP, payment, auction or admin logic changed.
 * To roll back: remove the stylesheet link in includes/header.php.
 */
:root {
  --bg:#f7f9fc!important;
  --surf:#fff!important;
  --surf2:#f0f4f8!important;
  --border:rgba(17,35,59,.11)!important;
  --border2:rgba(17,35,59,.21)!important;
  --red:#d51f35!important;
  --red2:#ae1427!important;
  --teal:#d51f35!important;
  --teal2:#ae1427!important;
  --gold:#d51f35!important;
  --gold2:#ae1427!important;
  --amber:#d51f35!important;
  --amber2:#ae1427!important;
  --ink:#17243a!important;
  --muted:#586b80!important;
  --body:#f7f9fc!important;
  --dark:#0e1828!important;
  --shadow:0 10px 24px rgba(15,28,48,.08)!important;
  --shadow-md:0 18px 40px rgba(15,28,48,.10)!important;
  --shadow-lg:0 24px 60px rgba(15,28,48,.16)!important;
}
html {scroll-padding-top:88px;}
body {background:#f7f9fc!important;color:#17243a!important;}
button,a,input,select {touch-action:manipulation;}
/* Header */
.util-bar {background:#0c1b2d!important;border-bottom:1px solid rgba(255,255,255,.1)!important;}
#mainNav {background:#101c2e!important;border-bottom:2px solid rgba(213,31,53,.65)!important;backdrop-filter:none!important;box-shadow:0 5px 25px rgba(11,21,38,.17)!important;}
#mainNav .tb-nav-row {height:84px!important;}
#mainNav .tb-site-logo-img {height:78px!important;max-height:78px!important;width:auto!important;max-width:230px!important;object-fit:contain!important;}
#mainNav .nav-link {font-weight:650!important;font-size:13px!important;}
#mainNav .nav-link.nav-active {color:#fff!important;background:rgba(213,31,53,.21)!important;}
#mainNav .nav-link.nav-inactive:hover {background:rgba(255,255,255,.10)!important;}
#mainNav .tb-lang-select {border-color:rgba(255,255,255,.22)!important;}
#mobileSearchBar {top:84px!important;}
/* Buttons and general cards */
.btn-buy,.btn-primary {background:#d51f35!important;color:#fff!important;border-color:#d51f35!important;border-radius:11px!important;box-shadow:0 7px 20px rgba(213,31,53,.18)!important;}
.btn-buy:hover,.btn-primary:hover {background:#b8172c!important;color:#fff!important;}
.btn-outline {color:#17243a!important;border:1px solid #c7d2df!important;background:#fff!important;}
.card {background:#fff!important;border:1px solid #e3e9f1!important;border-radius:15px!important;box-shadow:0 7px 22px rgba(16,30,50,.06)!important;overflow:hidden!important;}
.card:hover {box-shadow:0 18px 42px rgba(16,30,50,.12)!important;border-color:#c7d2df!important;}
.pg-header {background:#fff!important;border-bottom:1px solid #e4eaf2!important;}
.pg-title {color:#152339!important;}
/* Homepage hero: actual featured vehicle photo selected by PHP if one exists */
.hm-hero {background:#101c2f!important;min-height:600px!important;border-bottom:0!important;isolation:isolate;}
.hm-hero .maplebid-hero-photo {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 52%;opacity:.32;pointer-events:none;z-index:0;filter:brightness(.76) saturate(.92);}
.hm-hero .hm-hero-bg {inset:0!important;z-index:0!important;background:linear-gradient(90deg,rgba(8,19,35,.98) 0%,rgba(8,19,35,.89) 44%,rgba(8,19,35,.63) 100%),radial-gradient(circle at 80% 0,rgba(213,31,53,.20),transparent 45%)!important;animation:none!important;}
.hm-hero .hm-hero-inner {position:relative;z-index:2;min-height:595px!important;grid-template-columns:minmax(0,1fr) minmax(300px,370px)!important;gap:clamp(24px,5vw,78px)!important;align-items:center!important;padding:66px 0 44px!important;}
.hm-hero .hm-hero-cards {display:none!important;}
.hm-hero .koa-kicker {display:inline-flex!important;align-items:center;gap:9px!important;margin-bottom:22px!important;padding:9px 14px!important;color:#ffe9ec!important;background:rgba(213,31,53,.24)!important;border:1px solid rgba(255,195,205,.3)!important;border-radius:40px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.1em!important;}
.hm-hero .koa-title {font-family:'Bricolage Grotesque',system-ui,sans-serif!important;font-size:clamp(3.1rem,6.5vw,6.4rem)!important;font-weight:800!important;line-height:1.02!important;letter-spacing:-.052em!important;text-shadow:0 3px 22px rgba(0,0,0,.15)!important;color:#fff!important;max-width:780px!important;text-transform:none!important;}
.hm-hero .koa-title > span {display:block!important;color:#fff!important;}
.hm-hero .koa-title .maplebid-headline-accent {color:#fff!important;}
.hm-hero .koa-title .maplebid-headline-dot {display:inline!important;color:#ff5265!important;}
.hm-hero .koa-intro {font-size:clamp(1rem,1.3vw,1.13rem)!important;color:#d7e1ed!important;max-width:560px!important;line-height:1.72!important;}
.hm-hero .koa-notice {background:rgba(9,21,37,.5)!important;color:#dce7f2!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;backdrop-filter:blur(5px);max-width:570px;}
.hm-hero .koa-notice i {color:#ff546c!important;}
.hm-hero .hm-hero-inner > div:first-child > div[style*="flex-wrap:wrap"][style*="margin-bottom:28px"] > span {background:rgba(255,255,255,.1)!important;color:#eef5fd!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:7px!important;padding:7px 10px!important;}
.hm-hero .hm-hero-inner > div:first-child > div[style*="flex-wrap:wrap"] > a:not(.btn-buy) {color:#fff!important;border-color:rgba(255,255,255,.5)!important;background:rgba(255,255,255,.08)!important;border-radius:11px!important;}
/* Bright, prominent search widget */
.hm-hero .hm-search-card {padding:26px!important;border-radius:19px!important;background:#fff!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 24px 65px rgba(0,0,0,.3)!important;backdrop-filter:none!important;}
.hm-hero .hm-search-card > div:first-child > div:first-child {color:#182b45!important;font-size:21px!important;text-transform:none!important;letter-spacing:-.035em!important;}
.hm-hero .hm-search-card > div:first-child > div:nth-child(2) {color:#66788e!important;}
.hm-hero .hm-tab-row {background:#f0f3f8!important;border-radius:11px!important;padding:4px!important;}
.hm-hero .hm-tab {border-radius:9px!important;color:#51637b!important;}
.hm-hero .hm-tab.active {background:#fff!important;color:#cc1b31!important;box-shadow:0 2px 9px rgba(11,30,50,.08)!important;}
.hm-hero .hm-sf input,.hm-hero .hm-sf select {background:#f7f9fc!important;border:1px solid #e1e8f0!important;border-radius:9px!important;color:#17243a!important;-webkit-text-fill-color:#17243a!important;font-weight:600!important;}
.hm-hero .hm-sf input::placeholder {color:#6e7e8f!important;-webkit-text-fill-color:#6e7e8f!important;}
.hm-hero .hm-sf input:focus,.hm-hero .hm-sf select:focus {border-color:#d51f35!important;box-shadow:0 0 0 3px rgba(213,31,53,.08)!important;}
.hm-hero .hm-sf .sf-ico {color:#6c7c91!important;}
.hm-hero .hm-price-block [style*="color:var(--muted)"] {color:#57687c!important;}
.hm-hero .hm-price-val {color:#17243a!important;}
.hm-hero .hm-price-track {background:#d8e1eb!important;}
.hm-hero .hm-price-fill {background:#d51f35!important;}
.hm-hero .hm-stats {position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.2)!important;margin-top:0!important;padding:24px 0 28px!important;}
.hm-hero .hm-stat {border-color:rgba(255,255,255,.18)!important;}
.hm-hero .hm-stat-val {color:#fff!important;}
.hm-hero .hm-stat [style*="color:var(--muted)"],.hm-hero .hm-stat span {color:#c6d3e4!important;}
/* Trust strip, brands, sections */
.hm-trust-strip,.hm-brands-strip {background:#fff!important;border-color:#e9eef4!important;}
.hm-trust-badge {border-color:#e4e9f1!important;}
.hm-trust-badge:hover {background:#f5f7fa!important;}
.hm-trust-text strong {color:#21344d!important;}
.hm-trust-text span {color:#60718b!important;}
.hm-trust-ico,.hm-why-ico {background:#fef0f2!important;}
.hm-h2 {color:#14253c!important;text-transform:none!important;letter-spacing:-.04em!important;line-height:1.13!important;}
.hm-viewall {color:#cf1c32!important;}
body .hm-sec[style*="background:#FFFFFF"],body .hm-sec-sm[style*="background:#FFFFFF"] {background:#fff!important;}
body .hm-sec[style*="background:#F5F5F3"],body .hm-sec-sm[style*="background:#F5F5F3"] {background:#f5f7fa!important;}
body section[style*="background:#0A0A0A"] {background:#13233a!important;}
.koa-home-products {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;}
.koa-home-product {min-width:0;}
.koa-home-product > .card {width:100%!important;}
.koa-home-product .card-img-wrap img {height:235px!important;object-fit:cover!important;}
.koa-home-product .product-card-title,.koa-home-product .product-card-content {color:#17243a!important;}
.koa-home-product .product-card-auction {background:#f8fafe!important;border-color:#e3e9f0!important;}
.hm-steps {background:#f5f7fa!important;border-color:#e3e9f1!important;}
.hm-step {background:#fff!important;border-color:#e5ebf1!important;}
.hm-step h3,.hm-step [style*="color:var(--ink)"] {color:#182942!important;}
.hm-step p,.hm-step [style*="color:var(--muted)"] {color:#64758a!important;}
.hm-step-num {color:#c41b31!important;}
.hm-why-c,.hm-testi-summary,.hm-testi-c {background:#fff!important;border-color:#e4eaf2!important;}
.hm-why-c:hover,.hm-testi-c:hover {border-color:#ced8e2!important;}
/* Listing browsing */
.inventory-products {gap:20px!important;}
.inventory-products .card {border-radius:15px!important;}
.inventory-products .card-img-wrap img {transition:transform .28s ease;}
.inventory-products .card:hover .card-img-wrap img {transform:scale(1.035);}
.inv-layout .inv-sidebar {border-color:#e1e8ee;}
.ff-chip {background:#fff!important;border-color:#d7e0e9!important;color:#415571!important;}
.ff-chip.ff-on,.ff-lt-on {background:#fff0f2!important;border-color:#d51f35!important;color:#c71930!important;}
.ff-select {background-color:#fff!important;color:#17243a!important;border-color:#d4dfeb!important;}
/* Dark footer remains distinct, but matches MapleBid red */
footer {--red:#d51f35!important;background:#0c182a!important;border-color:#28394d!important;}
footer .ft-main i {color:#f14c61!important;}
/* Layout on tablets / phones */
@media(max-width:1100px) {
  .hm-hero .hm-hero-inner {grid-template-columns:minmax(0,1fr) minmax(285px,345px)!important;gap:25px!important;}
  .hm-hero .koa-title {font-size:clamp(3rem,6vw,5.15rem)!important;}
}
@media(max-width:900px) {
  .koa-home-products {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
}
@media(max-width:767px) {
  #mainNav .tb-nav-row {height:82px!important;gap:4px!important;}
  #mobileSearchBar {top:82px!important;}
  #mainNav .tb-site-logo {max-width:170px!important;min-width:0!important;flex:1 1 auto!important;}
  #mainNav .tb-site-logo-img {height:auto!important;max-width:160px!important;max-height:73px!important;}
  .hm-hero {min-height:0!important;}
  .hm-hero .hm-hero-inner {grid-template-columns:1fr!important;gap:27px!important;padding:43px 0 27px!important;min-height:0!important;}
  .hm-hero .koa-title {font-size:clamp(2.6rem,9vw,4.25rem)!important;line-height:1.04!important;}
  .hm-hero .koa-intro {font-size:15px!important;}
  .hm-hero .hm-search-card {padding:19px!important;border-radius:15px!important;}
  .hm-hero .hm-stats {grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:22px 0 28px!important;}
  .hm-hero .hm-stat {text-align:left!important;padding:12px!important;border:0!important;}
  .hm-hero .hm-stat-val {font-size:26px!important;}
  .hm-hero .maplebid-hero-photo {opacity:.21;}
  .koa-home-products {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .koa-home-product .card-img-wrap img {height:175px!important;}
}
@media(max-width:480px) {
  .koa-home-products {grid-template-columns:1fr!important;}
  .koa-home-product .card-img-wrap img {height:220px!important;}
  .hm-hero .koa-title {font-size:clamp(2.45rem,10.1vw,3.35rem)!important;}
  .hm-hero .hm-hero-inner > div:first-child > div[style*="flex-wrap:wrap"][style*="margin-bottom:28px"] {gap:5px!important;}
  .hm-hero .hm-hero-inner > div:first-child > div[style*="flex-wrap:wrap"][style*="margin-bottom:28px"] > span {padding:6px 7px!important;font-size:10px!important;}
}
@media(max-width:390px) {
  #mainNav .tb-site-logo {max-width:126px!important;}
  #mainNav .tb-site-logo-img {max-width:123px!important;max-height:61px!important;}
  .hm-hero .hm-hero-inner {padding-top:34px!important;}
}
@media(max-width:340px) {
  #mainNav .tb-site-logo {max-width:103px!important;}
  #mainNav .tb-site-logo-img {max-width:100px!important;max-height:55px!important;}
}
@media(prefers-reduced-motion:reduce) {
  .hm-hero,.hm-hero .hm-hero-bg,.card,.hm-hero .koa-kicker {animation:none!important;transition:none!important;}
}

/* ================================================================
   MAPLE BID — homepage background update (2026-10-23)
   Show the approved illustrated Maple Auto / four-vehicle scene.
   Desktop: readable headline at left; full photo visible at right.
   Mobile: photograph fills available hero space without stretching.
   No alterations to site functionality, admin, auctions or search.
   ================================================================ */
.hm-hero .maplebid-hero-photo {
    opacity: 1 !important;
    filter: brightness(.98) saturate(1.06) !important;
    object-fit: cover !important;
    object-position: center 43% !important;
}
.hm-hero .hm-hero-bg {
    background: linear-gradient(90deg,
        rgba(7,18,33,.91) 0%,
        rgba(7,18,33,.84) 22%,
        rgba(7,18,33,.65) 42%,
        rgba(7,18,33,.21) 69%,
        rgba(7,18,33,.06) 100%) !important;
}
@media (max-width: 767px) {
    .hm-hero .maplebid-hero-photo {
        opacity: .85 !important;
        object-position: 60% center !important;
    }
    .hm-hero .hm-hero-bg {
        background: linear-gradient(90deg,
            rgba(7,18,33,.84) 0%,
            rgba(7,18,33,.76) 56%,
            rgba(7,18,33,.53) 100%) !important;
    }
}