/* The make and model pickers, and the filter bar, on the Price Guide.
   One sheet for both views: it is included by the desktop page and the phone page, and it leans
   on each theme's own variables with a fallback, so it inherits whichever page it lands on. */

.combo { position: relative; flex: 1; min-width: 0; }

/* The Price Guide form is two stacked rows, not one flex line: the make and model pickers with
   the button, and the filter bar under them. */
form.search.pg { display: block; }
.pg-row { display: flex; gap: 10px; align-items: center; }
.pg-row .btn { flex: none; }

.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: min(46vh, 340px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--grey, #dfe3e8); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 30, 54, .16);
}

.combo-opt {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 11px 13px; min-height: 44px;            /* a thumb needs 44px, a mouse does not mind */
  cursor: pointer; border-bottom: 1px solid var(--grey, #eef1f4);
  font-size: 14.5px; line-height: 1.25;
}
.combo-opt:last-child { border-bottom: 0; }
.combo-opt.on, .combo-opt:hover { background: var(--blue-bg, #eef6ff); }
.combo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              color: var(--ink, #14243a); }
.combo-name b { font-weight: 800; color: var(--blue-dk, #0b5cad); }
.combo-note { color: var(--ink2, #667); }
.combo-n { flex: none; font-size: 12.5px; color: var(--ink2, #667); font-variant-numeric: tabular-nums; }

/* A select that has been replaced by the in-app list. The native control stays in the page as
   the value the form submits, and is hidden only once its replacement is actually built, so a
   page with no JavaScript still shows a working select. */
.combo.picked.ready > select { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.combo-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font: inherit; font-size: 14px; text-align: left; padding: 8px 10px; min-height: 40px;
  border: 1px solid var(--grey, #dfe3e8); border-radius: 8px; background: #fff;
  color: var(--ink2, #667); cursor: pointer;
}
.combo-btn.set { color: var(--ink, #14243a); font-weight: 700; border-color: var(--blue, #0073cf); }
.combo-btn::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .55;
}
.combo-btn[aria-expanded="true"] { border-color: var(--blue, #0073cf); }
.combo-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* A filter control is only as wide as its column, but its options are not: let the list grow to
   whatever the longest option needs rather than truncating "4 Wheel Drive" to "4 Wheel ...". */
.combo.picked .combo-list { width: max-content; min-width: 100%; max-width: min(280px, 86vw); }
.m-filters .combo.picked .combo-list { max-width: 100%; }

.combo-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The filter labels are uppercased, and the control sits inside its own <label>, so the list
   and the button have to say plainly that they are not. */
.combo-btn, .combo-list, .combo-opt, .combo-name, .combo-n { text-transform: none;
  letter-spacing: normal; }
.combo-opt.picked .combo-name { font-weight: 800; color: var(--blue-dk, #0b5cad); }

/* ---------- filter bar ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 12px 0 0; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
                 font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
                 color: var(--ink2, #667); }
.filters input, .filters select {
  font: inherit; font-size: 14px; padding: 8px 10px; min-height: 40px;
  border: 1px solid var(--grey, #dfe3e8); border-radius: 8px; background: #fff;
  color: var(--ink, #14243a);
}
.filters .go { align-self: flex-end; }
.filters .clear { align-self: center; font-size: 13px; color: var(--ink2, #667); }

.filter-count { margin: 10px 0 0; font-size: 13px; color: var(--ink2, #667); }

/* On a phone the bar becomes two columns inside the panel that holds it. */
@media (max-width: 560px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters input, .filters select { width: 100%; min-height: 44px; }
  .filters .go, .filters .wide { grid-column: 1 / -1; }
}

/* ---------- the filter panel on the phone ---------- */

.m-filters { padding: 0; }
.m-filters > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 15px 16px; min-height: 52px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 800; color: var(--ink, #14243a);
}
.m-filters > summary::-webkit-details-marker { display: none; }
.m-filters > summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: auto;
  border-right: 2.2px solid var(--ink2, #667); border-bottom: 2.2px solid var(--ink2, #667);
  transform: rotate(45deg) translate(-2px, -2px);
}
.m-filters[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.m-filters > summary .n {
  margin-left: 8px; margin-right: auto; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 11px; background: var(--blue, #0073cf); color: #fff;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.m-filters .filters { padding: 0 16px 14px; }
.m-filters .filters label { font-size: 11px; }
.m-filters .filters input, .m-filters .filters select, .m-filters .filters .combo-btn {
  width: 100%; min-height: 46px; font-size: 16px;   /* 16px or iOS zooms the page on focus */
  border-color: var(--line, #dfe3e8);
}
.m-filters .combo-opt { min-height: 48px; font-size: 16px; }
.m-filters .m-btn.go { grid-column: 1 / -1; min-height: 48px; margin-top: 2px; }
.m-filters .clear { grid-column: 1 / -1; text-align: center; padding: 6px 0 0;
                    font-size: 14px; color: var(--blue-dk, #0b5cad); }
.m-filters .filter-count { padding: 0 16px 14px; margin: 0; }

/* ---------- the price line ----------
   The spread of asking prices as one line rather than four tiles. Shared by both views, so it
   leans on each theme's variables with a fallback. The band is the middle half of the cars, the
   dot is the median, and the numbers under the ends are the extremes the band deliberately is
   not. */

.prange { margin: 18px 0 4px; }
.prange-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.prange-head b { font-size: 27px; font-weight: 800; letter-spacing: -.6px; color: var(--ink, #14243a);
                 line-height: 1; }
.prange-head small { font-size: 13px; color: var(--ink2, #667); }

.prange-track {
  position: relative; height: 10px; border-radius: 5px;
  background: var(--line, #e4e9ef); margin: 0 0 9px;
}
.prange-band {
  position: absolute; top: 0; bottom: 0; border-radius: 5px;
  background: var(--blue, #0073cf);
}
.prange-med {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: #fff; border: 3.5px solid var(--blue-dk, #0b5cad);
  box-shadow: 0 1px 4px rgba(16, 30, 54, .3);
}

.prange-ends {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink2, #667); font-variant-numeric: tabular-nums;
}
.prange-half { color: var(--ink, #14243a); font-weight: 700; text-align: center;
               font-variant-numeric: normal; }
.prange-note { margin: 9px 0 0; font-size: 12.5px; color: var(--ink2, #667); }
.prange.one .prange-head { margin-bottom: 2px; }

@media (max-width: 560px) {
  .prange-head b { font-size: 25px; }
  .prange-ends { font-size: 12px; }
  /* On a phone the three labels do not fit on one line, so the middle-half sentence takes its
     own row under the two ends rather than shoving them out of position. */
  .prange-half { flex: 1 1 100%; order: 3; text-align: left; margin-top: 7px; font-size: 13px; }
}