/* Team pages: the seat slider, and the landing page's few bespoke bits.
   Everything else is Tailwind. No inline styles, because the content
   security policy forbids them, so the slider's filled track is driven by
   a custom property that team-pricing.js sets. */

.seat-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  background: transparent;
  cursor: pointer;
}

/* The track, filled to the thumb. --seat-fill is a percentage. */
.seat-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(to right,
    #C8700A 0%, #C8700A var(--seat-fill, 0%),
    #D8E7DF var(--seat-fill, 0%), #D8E7DF 100%);
}
.seat-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: #D8E7DF;
}
.seat-slider::-moz-range-progress {
  height: 0.5rem;
  border-radius: 9999px;
  background: #C8700A;
}

.seat-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid #C8700A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.seat-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid #C8700A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Keyboard focus has to be obvious: this control is the price. */
.seat-slider:focus-visible::-webkit-slider-thumb { outline: 3px solid #1C1C1C; outline-offset: 2px; }
.seat-slider:focus-visible::-moz-range-thumb     { outline: 3px solid #1C1C1C; outline-offset: 2px; }

/* The stepper buttons either side of the slider. */
.seat-step {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  color: #1C1C1C;
}
.seat-step:hover:not(:disabled) { border-color: #1C1C1C; }
.seat-step:disabled { opacity: 0.35; cursor: not-allowed; }

@media (prefers-reduced-motion: no-preference) {
  .seat-step { transition: border-color 150ms ease; }
}