/* Reality Rift — Slot-Auswahl + Weiter-Button im Buchungsflow (Befunde Vittorio 25.09.).
 * Lädt immer (layout.antlers.html), mit RR_ARCADE_THEME nach rr-arcade-backend.css.
 *
 *  - Gewählter Slot: Kernblau gefüllt + gelber Akzentstreifen wie .btn-primary,
 *    per Alpine sofort beim Klick (aria-pressed=true), nicht erst nach dem
 *    Livewire-Roundtrip.
 *  - Ladezustand: gewählter Slot pulsiert, solange selectTimeSlot läuft;
 *    Weiter-Button zeigt Spinner und ist gesperrt.
 *  - Weiter-Button: weiß auf #2f5bff → #1a3cff (Kontrast 5,2–6,7 : 1) statt
 *    #5e8bff → #3b6cff (3,2–4,4 : 1, AA verfehlt), Schrift 16 px.
 */

.rr-slot-picker .rr-slot {
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .08s ease, box-shadow .08s ease, transform .08s ease;
}

.rr-slot-picker .rr-slot:focus-visible {
  outline: 2px solid var(--rr-yellow, #f5b301) !important;
  outline-offset: 2px;
}

.rr-slot-picker .rr-slot.active,
.rr-slot-picker .rr-slot[aria-pressed="true"] {
  background: linear-gradient(135deg, #2f5bff 0%, #1a3cff 100%) !important;
  border-color: #1a3cff !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 var(--rr-yellow, #f5b301), 0 0 0 2px rgb(245 179 1 / .55), 0 3px 0 #041088 !important;
  transform: translateY(-1px);
}

@keyframes rr-slot-pulse {
  0%, 100% { box-shadow: inset 4px 0 0 var(--rr-yellow, #f5b301), 0 0 0 2px rgb(245 179 1 / .55), 0 3px 0 #041088; }
  50% { box-shadow: inset 4px 0 0 var(--rr-yellow, #f5b301), 0 0 0 5px rgb(245 179 1 / .25), 0 0 22px rgb(47 91 255 / .8); }
}

.rr-slot-grid.is-loading .rr-slot[aria-pressed="true"] {
  animation: rr-slot-pulse .8s ease-in-out infinite;
}

.rr-slot-grid.is-loading .rr-slot:not([aria-pressed="true"]) {
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .rr-slot-grid.is-loading .rr-slot[aria-pressed="true"] { animation: none; }
}

.rr-slot-summary {
  scroll-margin-bottom: 180px; /* bleibt über der fixierten Summenleiste sichtbar */
}

/* Weiter zur Buchung */
.btn-white.rr-btn-continue {
  background: linear-gradient(135deg, #2f5bff 0%, #1a3cff 100%) !important;
  background-color: #1a3cff !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.25;
  letter-spacing: .04em;
}

/* site.css `.btn-white span` malt den Text als Verlauf #5E8BFF → #0017D1 mit
 * transparenter Füllung (für den alten weißen Button). Auf dem blauen Arcade-Button
 * ergibt das blau auf blau = „Text nicht leserlich" (Befund 6). */
.btn-white.rr-btn-continue span {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

.btn-white.rr-btn-continue .rr-spinner {
  -webkit-text-fill-color: initial !important;
}

.btn-white.rr-btn-continue:disabled {
  opacity: .85 !important;
  cursor: progress;
}

.rr-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / .35);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: rr-spin .7s linear infinite;
}

@keyframes rr-spin { to { transform: rotate(360deg); } }

/* Befund Vittorio 26.09. (Mobile): Die feste Zusammenfassungsleiste unten (Preis, Termin,
 * Buttons) überdeckte die letzten Spielekarten. Die Blade trug `pb-[228px] lg:pb-[152px]`,
 * beide Utilities fehlen aber im kompilierten tailwind.css (nie neu gebaut) → 0 px Abstand.
 * Der Abstand kommt jetzt von hier und folgt der REALEN Leistenhöhe: das Inline-Script in
 * booking-process.blade.php misst die Leiste (ResizeObserver) und setzt --rr-booking-bar-h;
 * der Fallback deckt die gemessenen 207 px (390 px breit, zwei Buttons untereinander) ab. */
.rr-booking-content {
  padding-bottom: calc(var(--rr-booking-bar-h, 232px) + 24px) !important;
}

@media (min-width: 768px) {
  .rr-booking-content {
    padding-bottom: calc(var(--rr-booking-bar-h, 128px) + 24px) !important;
  }
}