/* MotorLane-style NZ car portal theme - scoped to the Cars pages via body.motorlane */

body.motorlane .sp-crumb,
body.motorlane .sp-side { display: none; }
body.motorlane .sp-grid { display: block; }
body.motorlane .ml-side { display: none; }
body.motorlane .sp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px 40px; }

.ml-hero { position: relative; overflow: hidden; background: #14264c; padding: 26px 0 26px; }
.ml-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 640px;
  background-image: linear-gradient(135deg, rgba(14,28,56,.90) 0%, rgba(20,38,76,.84) 55%, rgba(27,48,87,.80) 100%);
  background-size: cover; background-position: center bottom; z-index: 0; }
.ml-hero-inner { position: relative; z-index: 1; }
.ml-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.ml-h { color: #fff; font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 0 0 6px; }
.ml-sub { color: #c3cfe2; font-size: 16px; margin: 0 0 20px; }

.ml-card { background: #fff; border-radius: 10px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ml-fld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 130px; position: relative; }
.ml-fld > label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #66707a; text-transform: uppercase; }
.ml-sel, .ml-inp { height: 44px; border: 1px solid #d6dbe3; border-radius: 8px; padding: 0 10px; font-size: 15px; background-color: #fff; color: #222; width: 100%; }
.ml-sel:disabled { background-color: #f3f5f8; color: #99a; }
.ml-fld-loc { flex: 1.4 1 190px; }
.ml-fld-btn, .ml-fld-filt { flex: 0 0 auto; }
.ml-search { height: 44px; padding: 0 22px; background: #f7a600; border: none; border-radius: 8px; color: #14264c; font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap; }
.ml-search:hover { background: #e79a00; }
.ml-filters-btn { height: 44px; padding: 0 18px; background: #fff; border: 1px solid #d6dbe3; border-radius: 8px; color: #14264c; font-weight: 700; font-size: 14px; cursor: pointer; }
.ml-filters-btn.on, .ml-filters-btn:hover { border-color: #f7a600; color: #b57800; }

.ml-morefilters { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; border-top: 1px solid #eef1f6; padding-top: 12px; margin-top: 4px; }
.ml-morefilters[hidden] { display: none; }
.ml-range { display: flex; gap: 8px; }
@media (max-width: 980px) { .ml-morefilters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ml-morefilters { grid-template-columns: 1fr; } .ml-h { font-size: 30px; } }

.ml-stats { display: flex; gap: 44px; margin-top: 22px; }
.ml-stats > div { display: flex; flex-direction: column; }
.ml-stats b { color: #fff; font-size: 26px; font-weight: 800; }
.ml-stats span { color: #b9c5d8; font-size: 13px; }

.ml-ticks { background: #fff; border-bottom: 1px solid #eef1f6; }
.ml-ticks-inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ml-ticks-inner span { font-size: 13.5px; color: #333; }

.ml-makes { max-width: 1280px; margin: 26px auto 6px; padding: 0 20px; }
.ml-makes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ml-makes-head h2 { font-size: 24px; font-weight: 800; color: #16213a; margin: 0; }
.ml-makes-head a { color: #2563eb; font-size: 14px; text-decoration: none; }
.ml-makes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ml-make-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 9px; padding: 14px 16px; text-decoration: none; display: flex; flex-direction: column; gap: 3px; }
.ml-make-card:hover { border-color: #2563eb; }
.ml-make-card b { color: #16213a; font-size: 15px; }
.ml-make-card span { color: #778; font-size: 12.5px; }


/* Results mode: header band + left Filter-results sidebar */
.ml-results-head { background: transparent; }
.ml-results-head-inner { max-width: 1280px; margin: 0 auto; padding: 22px 20px 8px; }
.ml-results-head h1 { color: #16213a; font-size: 28px; font-weight: 800; margin: 0 0 2px; }
.ml-results-head p { color: #66707a; font-size: 14px; margin: 0; }

body.motorlane.mlsearch-mode .sp-grid { display: block; } /* top-search only: results full width, no side search */
.ml-side-box { background: #fff; border: 1px solid #e5e8ee; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ml-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ml-side-head h3 { font-size: 17px; font-weight: 800; color: #16213a; margin: 0; }
.ml-side-head a { font-size: 13px; color: #2563eb; text-decoration: none; }
.ml-side-lbl { font-size: 12px; font-weight: 700; color: #66707a; margin-top: 9px; }
/* Sidebar fields mirror .sp-side-search / .sp-input from the marketplace sidebar:
   same padding-driven height, #ccc border, 5px radius, 15px text and the global chevron. */
.ml-side-box .ml-sel, .ml-side-box .ml-inp {
  height: auto; padding: 9px 12px; border: 1px solid #ccc; border-radius: 5px;
  font-size: 15px; color: #333; background-color: #fff; background-image: none;
}
.ml-side-box select.ml-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
  padding-right: 26px;
}
.ml-side-box .ml-sel:disabled { background-color: #f3f5f8; color: #99a; }
.ml-side-box .ml-sel:focus, .ml-side-box .ml-inp:focus {
  outline: none; border-color: #337ab7; box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.18);
}
.ml-side-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ml-side-apply { margin-top: 14px; width: 100%; }
@media (max-width: 900px) { body.motorlane.mlsearch-mode .sp-grid { display: block; } .ml-side { margin-bottom: 16px; display: block; } }

/* motors hero: guaranteed dropdown chevron (beats .ml-sel background) + wide car-parts search */
.ml-card select.ml-sel, .ml-side-box select.ml-sel {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 12px 12px !important;
  padding-right: 30px;
}
.ml-card .ml-fld-search { flex: 3 1 360px; }

/* car-parts hero: 6-col grid so fields align between the two rows (7.png) */
.ml-card-cp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ml-card-cp .ml-fld { min-width: 0; }
.ml-card-cp .ml-fld-search { grid-column: 1 / 4; }
.ml-card-cp .ml-fld-loc { grid-column: 1; }
.ml-card-cp .ml-cp-break { display: none; }
@media (max-width: 920px) {
  .ml-card-cp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-card-cp .ml-fld-search { grid-column: 1 / -1; }
  .ml-card-cp .ml-fld-loc { grid-column: auto; }
}
@media (max-width: 560px) {
  .ml-card-cp { grid-template-columns: 1fr; }
  .ml-card-cp .ml-fld-search, .ml-card-cp .ml-fld-loc { grid-column: 1; }
}

.ml-latest-head { font-size: 18px; font-weight: 700; color: #23272f; margin: 16px 0 12px; }

/* wrecked-cars hero: 4-col grid so both rows share the same columns */
.ml-card-wrecked { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ml-card-wrecked .ml-fld { min-width: 0; }
.ml-card-wrecked .ml-cp-break { display: none; }
.ml-card-wrecked .ml-fld-btn .ml-search { width: 100%; }
@media (max-width: 900px) { .ml-card-wrecked { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ml-card-wrecked { grid-template-columns: 1fr; } }

/* generic motor sections (motorbikes, boats...): one unified grid, no divider line, aligned columns */
.ml-card-moto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.ml-card-moto .ml-fld { min-width: 0; }
.ml-card-moto .ml-morefilters { display: contents; }
.ml-card-moto .ml-fld-btn .ml-search { width: 100%; }
@media (max-width: 900px) { .ml-card-moto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ml-card-moto { grid-template-columns: 1fr; } }

/* car listing cards: key spec line (Year / Km / Transmission / Fuel) */
body.motorlane .sp-card-specs { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 13px; color: #5a6572; line-height: 1.5; }
body.motorlane .sp-card-specs span:not(:last-child)::after { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #c3c9d2; margin: 0 8px; vertical-align: middle; }

/* size-filter fields toggle with the hidden attribute; .ml-fld display:flex must not override it */
.ml-card .ml-fld[hidden] { display: none; }

/* Car Parts hero tabs: All parts / Tyres / Wheels (6.png) */
.cp-tabs { flex: 1 1 100%; display: flex; gap: 8px; margin-bottom: 2px; }
.cp-tab { white-space: nowrap; padding: 7px 20px; border: 1px solid #d7dbe2; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #2b3648; text-decoration: none; background: #fff; }
.cp-tab:hover { border-color: #2563eb; color: #2563eb; }
.cp-tab.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.cp-tab.on:hover { color: #fff; }

/* Tyres/Wheels mode (5.png #3): the hero is a 6-col grid. Row 1 = part box
   (3 cols) + the three size selects; row 2 = Max price, Location, Distance,
   Condition, Search together (Location loses its forced first-column). */
.ml-card-cp .cp-tabs { grid-column: 1 / -1; }
.ml-card-cp.cp-sized .ml-fld-loc { grid-column: auto; }

/* Side filter checkbox dropdown (10.png): native details styled like a select */
.ml-multi { position: relative; }
.ml-multi summary { list-style: none; cursor: pointer; }
.ml-multi summary::-webkit-details-marker { display: none; }
.ml-multi-sum { display: block; line-height: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fixed, body-relative: .ml-hero has overflow:hidden and would clip an
   absolutely-positioned panel behind the listings below it (5.png) */
.ml-multi-panel { position: fixed; z-index: 60; background: #fff; border: 1px solid #e5e8ee; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.ml-multi-check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #23272f; cursor: pointer; white-space: nowrap; }
.ml-multi-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #2563eb; cursor: pointer; flex: 0 0 auto; }