/**
 * Moto — couche « vie + finition » partagée (Taxi + Pro).
 *
 * Règle d'or : animer UNIQUEMENT les moments essentiels (empty states,
 * mode en ligne, matching, CTA principaux, feedback, pastilles live,
 * micro-interactions) — le reste = finition statique impeccable.
 *
 * Perf Bamako : transform + opacity seulement (jamais box-shadow/layout),
 * durées courtes, tout est coupé par prefers-reduced-motion.
 */

:root {
  --moto-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --moto-tracking-label: 0.055em;
  /* Anneau focus par défaut (Taxi corail→violet) ; Pro le surcharge. */
  --moto-focus-ring: rgba(123, 57, 183, 0.45);
}

/* ============================================================
   FINITION — états focus visibles (clavier / accessibilité)
   ============================================================ */
.btn-uber-black:focus-visible,
.confirm-order-btn:focus-visible,
.btn-trip-action:focus-visible,
.moto-tabbar__tab:focus-visible,
.driver-online-toggle:focus-visible,
.express-toggle__input:focus-visible ~ .express-toggle__track,
.moto-seg-btn:focus-visible,
.moto-locate-fab:focus-visible,
.moto-map-zoom__btn:focus-visible,
.moto-maptype-fab:focus-visible,
.notifs-filter:focus-visible,
.ride-sheet-handle:focus-visible,
.trip-sheet-handle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--white, #fff),
    0 0 0 4px var(--moto-focus-ring);
}

/* ============================================================
   FINITION — cohérence des libellés majuscules
   ============================================================ */
.dock-search__title,
.driver-online-toggle__label,
.moto-tabbar__label,
.drawer-prefs-title {
  letter-spacing: var(--moto-tracking-label);
}

/* ============================================================
   FINITION — toasts unifiés (même rayon, même ombre, 2 apps)
   ============================================================ */
.toast {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 10, 40, 0.28);
  /* Entrée ressort : vivante mais jamais brusque. */
  transform: translateY(16px) scale(0.95);
  transition:
    transform 0.42s var(--moto-ease-spring),
    opacity 0.28s ease;
}

.toast--visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   VIE — CTA principaux : reflet lumineux discret (toutes les ~6 s)
   + appui ressort. Uniquement quand le bouton est actionnable.
   ============================================================ */
#btn-estimate:not(:disabled),
.confirm-order-btn:not(:disabled),
.btn-trip-action:not(:disabled),
#btn-complete:not(:disabled) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#btn-estimate:not(:disabled)::after,
.confirm-order-btn:not(:disabled)::after,
.btn-trip-action:not(:disabled)::after,
#btn-complete:not(:disabled)::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-160%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  animation: moto-cta-sheen 6.2s ease-in-out infinite;
  animation-delay: 1.4s;
  z-index: 1;
}

@keyframes moto-cta-sheen {
  0% {
    transform: translateX(-160%) skewX(-18deg);
    opacity: 0;
  }
  6% {
    opacity: 0.9;
  }
  16% {
    transform: translateX(420%) skewX(-18deg);
    opacity: 0;
  }
  100% {
    transform: translateX(420%) skewX(-18deg);
    opacity: 0;
  }
}

/* Appui ressort homogène sur les CTA. */
#btn-estimate:not(:disabled):active,
.confirm-order-btn:not(:disabled):active,
.btn-trip-action:not(:disabled):active,
#btn-complete:not(:disabled):active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* CTA désactivé : mat, sans ombre — hiérarchie limpide. */
.btn-uber-black:disabled,
.confirm-order-btn:disabled,
.btn-trip-action:disabled {
  opacity: 0.55;
  box-shadow: none;
}

/* ============================================================
   VIE — Mode en ligne (Pro) : halo qui respire quand actif
   ============================================================ */
.driver-online-box {
  position: relative;
}

.driver-online-box.is-online::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* fallback inset */
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(34, 197, 94, 0.55);
  pointer-events: none;
  animation: moto-online-ring 2.8s ease-out infinite;
}

@keyframes moto-online-ring {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  70% {
    transform: scale(1.04);
    opacity: 0;
  }
  100% {
    transform: scale(1.04);
    opacity: 0;
  }
}

/* Curseur du switch en ligne : course ressort. */
.driver-online-toggle__thumb {
  transition: transform 0.34s var(--moto-ease-spring);
}

/* ============================================================
   VIE — barre d'onglets (Pro) : icône qui « pop » sur l'actif
   ============================================================ */
.moto-tabbar__tab .moto-tabbar__icon {
  transition: transform 0.3s var(--moto-ease-spring);
}

.moto-tabbar__tab.is-active .moto-tabbar__icon {
  transform: translateY(-1.5px) scale(1.1);
}

.moto-tabbar__tab:active .moto-tabbar__icon {
  transform: scale(0.88);
  transition-duration: 0.09s;
}

/* ============================================================
   VIE — empty states : flottement doux de l'icône (jamais agité)
   ============================================================ */
.empty-state .empty-state-icon,
.schedule-empty-state svg,
.notifs-empty .moto-robot,
.dock-search__empty .moto-robot {
  animation: moto-empty-float 3.6s ease-in-out infinite;
  display: inline-block;
  will-change: transform;
}

@keyframes moto-empty-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Entrée douce du bloc vide (une seule fois). */
.dock-search__empty,
.empty-state,
.notifs-empty {
  animation: moto-empty-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes moto-empty-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   VIE — micro-interactions segments & poignées
   ============================================================ */
.moto-seg-btn {
  transition:
    transform 0.24s var(--moto-ease-spring),
    background 0.2s ease,
    color 0.2s ease;
}

.moto-seg-btn:active {
  transform: scale(0.94);
}

/* ============================================================
   Accessibilité : tout se fige si l'utilisateur le demande
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #btn-estimate::after,
  .confirm-order-btn::after,
  .btn-trip-action::after,
  #btn-complete::after,
  .driver-online-box.is-online::after,
  .empty-state .empty-state-icon,
  .schedule-empty-state svg,
  .notifs-empty .moto-robot,
  .dock-search__empty .moto-robot,
  .dock-search__empty,
  .empty-state,
  .notifs-empty {
    animation: none !important;
  }

  .toast,
  .moto-tabbar__tab .moto-tabbar__icon,
  .driver-online-toggle__thumb,
  .moto-seg-btn {
    transition-duration: 0.01s !important;
  }

  /* Pastille live : halo statique (le pulse est coupé). */
  .moto-live-status__dot::after {
    animation: none !important;
  }
}