/* ==========================================================================
   SEEYOUSOON — the time strip (js/core/wheel.js; C8 «Önskad tidpunkt», the owner's rounds 3 and 4, 2026-10-24)
   The design's row of times, swiped sideways: [data-wheel-pair] is the design's row with its band
   ([data-part="wheel-band"]); [data-wheel] scrolls natively across it and snaps a cell to the centre, so the phone's own
   drag, flick and momentum move it. Every cell has one width, so the chosen slot can grow inside its cell without moving
   the others. The strip runs in the page's direction (Arabic: the first time at the right); each time reads left to
   right with Latin digits. Its ends fade softly where the card cuts them.
   ========================================================================== */
[data-wheel-pair] {
  --wheel-cell: 70px;
}
[data-wheel] {
  position: relative;
  z-index: 10;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* half the strip's width less half a cell on each side, so the first and the last time can rest in the middle */
  padding-inline: calc(50% - var(--wheel-cell) / 2);
  padding-block: 6px;   /* room for the chosen slot's glow */
  scrollbar-width: none;
  outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
[data-wheel]::-webkit-scrollbar { display: none; }
[data-wheel]:focus-visible { box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.6); border-radius: 12px; }
[data-wheel] > [data-part="wheel-row"] {
  flex: 0 0 var(--wheel-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
[data-wheel] [data-part="slot"] { white-space: nowrap; }

/* ==========================================================================
   «Nu | Senare» (the owner's round 4, item 3, 2026-10-24): booking for later is a choice the rider can take back. C8's
   switch goes to C2 with the same places and class; C1's «Boka senare» is pressed while the next destination is for later
   (js/flows/taxi/c-taxi.js). The look is C2's own segmented control (Resa | Bud): a dark track, the chosen side violet.
   ========================================================================== */
[data-part="when-switch"] {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(20, 26, 41, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
[data-part="when-switch"][hidden] { display: none; }
[data-part="when-switch"] > button {
  flex: 1 1 0;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms ease-out;
}
[data-part="when-switch"] > button[aria-checked="true"] {
  background: #8b5cf6;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-part="when-switch"] > button:active { transform: scale(0.97); }
/* in a header's middle (C8), as an iOS bar's segmented control: compact, never wider than the title it replaces */
[data-part="when-switch"][data-size="bar"] { width: 176px; padding: 3px; border-radius: 12px; }
[data-part="when-switch"][data-size="bar"] > button { min-height: 34px; border-radius: 9px; }
[data-screen] h1[hidden] { display: none; }
[data-part="when-switch"] > button:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }
/* C1: «Boka senare» pressed while the destination being chosen is for later */
[data-action="schedule-ride"][aria-pressed="true"] {
  border-color: rgba(139, 92, 246, 0.75) !important;
  background-color: rgba(139, 92, 246, 0.18) !important;
  color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-part="when-switch"] > button { transition: none; }
  [data-part="when-switch"] > button:active { transform: none; }
}