/* ==========================================================================
   UncleTrips — Chauffeur (hourly hire) specifics
   Card frame and route aside come from vehicles.css; this file adds what is
   unique to hourly packages: duration presets, "good for", extra-hour rate
   and the hours meter.
   ========================================================================== */

.chauffeur-search .sf-field--hours {
  flex: 0.8 1 0;
  min-width: 128px;
}

.chauffeur-search .sf-field--pax {
  flex: 0.9 1 0;
}

.hour-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}

.good-for {
  font-size: var(--fs-13);
  color: var(--c-grey-600);
}

.extra-rate {
  margin-block-start: -6px;
  font-size: var(--fs-13);
  color: var(--c-grey-600);
}

.extra-rate [data-price] {
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

.hours-meter {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-grey-100);
  overflow: hidden;
}

.hours-meter span {
  display: block;
  width: calc(var(--h) / 12 * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--c-orange-400);
  transition: width var(--dur) var(--ease);
}

@media (max-width: 1023px) {
  .chauffeur-search .sf-field--grow {
    flex-basis: 100%;
  }
}

@media (max-width: 767px) {
  .chauffeur-card .vehicle-price .price-unit {
    flex-basis: 100%;
  }

  .extra-rate {
    order: 3;
    flex-basis: 100%;
    margin: 0;
  }
}