/* Car selection screen.

   Written against tokens only. The filter pill's 42px height and the cream
   fill are authored values from the source. */

/* This screen leads with a heading rather than a hero, so it opens tighter
   than a full band. */
.kssk-band--tight { padding-top: var(--space-56); }

.kssk-select__heading { margin-bottom: var(--space-32); }

.kssk-select__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.kssk-select__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.kssk-select__count {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

/* FilterButton */

.kssk-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  /* 42px is the authored height; the 44px floor wins where they disagree. */
  min-height: 44px;
  padding: 0 var(--space-16);
  box-sizing: border-box;
  /* Transparent until open, so the layout does not shift when the hairline
     appears. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-cream);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.kssk-filter:hover { background: var(--orange-100); }

/* The open filter is one of the few places a border appears, and it does
   exactly one job. */
.kssk-filter[aria-expanded="true"] {
  background: var(--orange-100);
  border-color: var(--kssk-orange);
}

.kssk-filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kssk-filter__count {
  font-weight: var(--weight-bold);
  color: var(--kssk-orange);
}

.kssk-filter__caret { transition: transform var(--duration-fast) var(--ease-standard); }
.kssk-filter[aria-expanded="true"] .kssk-filter__caret { transform: rotate(180deg); }

/* Filter panel */

.kssk-filter-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background: var(--surface-panel);
  border-radius: var(--radius-sm);
}

.kssk-select__notice { margin-bottom: var(--space-32); }

/* Compare bar. Appears once something is selected and tops out at three. */

.kssk-compare-bar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-16) var(--space-24);
  margin-bottom: var(--space-32);
  background: var(--surface-cream);
  border-radius: var(--radius-sm);
}

.kssk-compare-bar__count {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-primary);
}

.kssk-compare-bar__names {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

.kssk-compare-bar__cta { flex-shrink: 0; }

/* Empty state. Composed, and it says the fleet is still there, because the
   whole point is that filters hide nothing real. */

.kssk-select__empty {
  padding: var(--space-56) var(--space-24);
  text-align: center;
  background: var(--surface-panel);
  border-radius: var(--radius-sm);
}

.kssk-select__empty-text {
  margin: 0 0 var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-primary);
}

/* A disabled compare button means the third slot is taken, not that the car is
   unavailable. 45% opacity is the system's disabled treatment. */
.kssk-car-card__compare[disabled] { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 767px) {
  .kssk-select__bar { align-items: flex-start; }
  .kssk-compare-bar__names { flex: 1 0 100%; order: 3; }
}