/* Find transport / Find cargo. Filters in a sticky sidebar on desktop,
   a collapsible panel above the results on smaller screens. */

.page-section--search { padding-block: var(--space-8) var(--space-16); }
@media (min-width: 1024px) { .page-section--search { padding-block: var(--space-10) var(--space-20); } }

.search-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .search-layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-8); }
  .search-layout__filters { position: sticky; top: calc(64px + var(--space-6)); }
}

/* --- Filter panel ------------------------------------------------------------ */
.filter-panel { background: var(--gm-white); border: var(--hairline); border-radius: var(--radius-control); }
.filter-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: var(--text-md);
}
.filter-panel__summary::-webkit-details-marker { display: none; }
.filter-panel__summary::after {
  content: "";
  width: 10px; height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--gm-steel);
  border-bottom: 2px solid var(--gm-steel);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.filter-panel[open] .filter-panel__summary::after { transform: translateY(2px) rotate(-135deg); }
.filter-panel[open] .filter-panel__summary { border-bottom: var(--hairline); }
@media (min-width: 1024px) {
  /* Always open on desktop — the summary becomes a plain heading. */
  .filter-panel__summary { pointer-events: none; }
  .filter-panel__summary::after { display: none; }
}
.filter-panel__count {
  padding: 2px var(--space-2);
  background: var(--gm-green-tint);
  color: var(--gm-green);
  border-radius: var(--radius-chip);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
}
.filter-panel__form { padding: var(--space-5); }
.filter-panel__form .field { margin-bottom: var(--space-5); }
.filter-panel__group { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.filter-panel__group legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); padding: 0; }
.filter-panel__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--hairline); }
.filter-panel__clear { text-align: center; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.filter-panel__clear:hover { text-decoration: underline; }

.input-suffix { position: relative; }
.input-suffix input { padding-right: 76px; }
.input-suffix__unit {
  position: absolute; right: var(--space-4); top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}

.checkbox-row { display: flex; align-items: center; gap: var(--space-3); margin: 0; min-height: 44px; font-weight: 500; font-size: var(--text-sm); cursor: pointer; }

/* Vehicle type as picture chips — the silhouettes the spec asked for on
   this filter. The radio stays in the DOM (keyboard + screen readers),
   visually replaced by the chip's own selected state. */
.vehicle-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 480px) and (max-width: 1023px) { .vehicle-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vehicle-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 72px;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--gm-white);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.vehicle-chip--any { grid-column: 1 / -1; min-height: 44px; }
.vehicle-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vehicle-chip .vehicle-icon svg { max-width: 64px; }
.vehicle-chip__text { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); line-height: 1.2; }
.vehicle-chip:hover { border-color: var(--gm-steel); }
.vehicle-chip:has(input:checked) { border-color: var(--gm-green); background: var(--gm-green-tint); box-shadow: inset 0 0 0 1px var(--gm-green); }
.vehicle-chip:has(input:focus-visible) { outline: 3px solid var(--gm-signal); outline-offset: 2px; }

/* --- Results toolbar ------------------------------------------------------------- */
.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.results-toolbar__count { margin: 0; font-size: var(--text-lg); }
.results-toolbar__sort { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.results-toolbar__sort label { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.results-toolbar__sort select { width: auto; min-width: 200px; background-color: var(--gm-white); }

.filter-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3);
  background: var(--gm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.filter-chip span { font-size: 1.1em; line-height: 1; color: var(--color-text-muted); }
.filter-chip:hover { border-color: var(--gm-green); color: var(--gm-green); }

/* --- Result cards ------------------------------------------------------------------ */
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.result-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--gm-white);
  border: var(--hairline);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.result-card:hover { border-color: var(--gm-steel); }
.result-card--cargo { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .result-card { grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-5); padding: var(--space-5); align-items: center; }
  .result-card--cargo { grid-template-columns: minmax(0, 1fr) auto; }
}

.result-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--gm-paper);
  border-radius: var(--radius-control);
  padding: var(--space-2);
}
.result-card__visual .vehicle-icon svg { max-width: 76px; }

.result-card__heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.result-card__title { margin: 0; font-size: var(--text-md); }
.result-card__title a { color: var(--color-text); text-decoration: none; }
.result-card__title a:hover { color: var(--gm-green); text-decoration: underline; text-underline-offset: 0.2em; }

.result-card__meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.result-card__meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.result-card__meta .icon { color: var(--gm-steel); }

.result-card__operator { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 500; }

.result-card__side {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline);
}
@media (min-width: 768px) {
  .result-card__side { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; padding-top: 0; border-top: 0; text-align: right; }
}

.result-card__price { display: grid; margin: 0; }
.result-card__price-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.result-card__price-main { font-size: var(--text-md); font-weight: 500; color: var(--color-text); }
.result-card__price-alt { font-size: var(--text-xs); color: var(--color-text-muted); }

.badge-verified .icon { width: 14px; height: 14px; }

/* Registration plates and tonnage — machine data, set like a plate. */
.plate {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: var(--gm-paper);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* Origin -> destination, drawn as a line between two named places. */
.route-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.route-inline__place { font-weight: 600; color: var(--color-text); }
.route-inline__line { position: relative; flex: 0 1 64px; min-width: 32px; height: 2px; background: var(--gm-green); opacity: 0.55; }
.route-inline__line::after {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--gm-green);
  border-right: 2px solid var(--gm-green);
  transform: translateY(-50%) rotate(45deg);
}
.route-inline__km { font-size: var(--text-xs); color: var(--color-text-muted); }

/* --- Empty state ----------------------------------------------------------------------- */
.results-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  background: var(--gm-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-control);
  text-align: center;
}
.results-empty__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gm-green-tint); color: var(--gm-green); }
.results-empty h3 { margin: 0; }
.results-empty p { margin: 0 auto; max-width: 48ch; color: var(--color-text-muted); }
.results-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }