/**
 * Moto — couche polish globale (passager + chauffeur).
 * Chargée EN DERNIER : uniquement des raffinements visuels et tactiles.
 * Aucune propriété de layout (dimensions/padding structurels intouchés).
 */

/* ———————————————————— 1. Retour tactile universel ————————————————————
   Toute surface tapable répond au doigt : légère compression + ombre qui
   se rapproche. Transform uniquement (compositeur GPU, zéro re-layout). */
.btn-uber-black,
.confirm-order-btn,
.btn-request-accept,
.btn-uber-confirm,
.moto-call-box__btn,
.btn-cancel-ride,
.confirm-schedule-btn,
.btn-clear-trip,
.where-go,
.uber-field,
.service-tile,
.chrome-btn,
.map-float-btn,
.moto-locate-fab,
.moto-maptype-fab,
.moto-map-zoom__btn,
.request-other-card,
.ride-offer-card,
.history-item,
.profile-menu-item,
.moto-maptype-option,
.price-offer__step,
.lang-option,
.driver-online-toggle {
  transition:
    transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-uber-black:active:not(:disabled),
.confirm-order-btn:active:not(:disabled),
.btn-request-accept:active:not(:disabled),
.btn-uber-confirm:active:not(:disabled),
.moto-call-box__btn:active,
.btn-cancel-ride:active,
.confirm-schedule-btn:active,
.where-go:active,
.uber-field:active,
.request-other-card:active,
.ride-offer-card:active,
.history-item:active,
.profile-menu-item:active,
.lang-option:active {
  transform: scale(0.975);
}

.chrome-btn:active,
.map-float-btn:active,
.moto-locate-fab:active,
.moto-maptype-fab:active,
.moto-map-zoom__btn:active,
.price-offer__step:active:not(:disabled) {
  transform: scale(0.9);
}

/* ———————————————————— 2. Lumière réaliste ————————————————————
   Deux sources : ambiante large + directe courte. Feuilles et panneaux
   posés sur la carte gagnent une vraie profondeur. */
.uber-sheet,
.trip-sheet {
  box-shadow:
    0 -22px 60px rgba(45, 27, 78, 0.12),
    0 -3px 14px rgba(45, 27, 78, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.uber-dock {
  box-shadow:
    0 -18px 52px rgba(45, 27, 78, 0.16),
    0 -2px 10px rgba(45, 27, 78, 0.08);
}

.request-sheet {
  box-shadow:
    0 -26px 70px rgba(45, 27, 78, 0.26),
    0 -4px 18px rgba(45, 27, 78, 0.1);
}

.moto-locate-fab,
.moto-maptype-fab,
.chrome-btn,
.map-float-btn,
.moto-map-zoom {
  box-shadow:
    0 10px 26px rgba(45, 27, 78, 0.16),
    0 2px 6px rgba(45, 27, 78, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* ———————————————————— 3. CTA : reflet vivant ————————————————————
   Un léger éclat en haut du bouton (verre bombé) + assombrissement doux
   à l'appui. Le dégradé de marque reste la vedette. */
.btn-uber-black--home,
.confirm-order-btn,
.btn-request-accept,
.moto-pin-picker__confirm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-uber-black--home::before,
.confirm-order-btn::before,
.btn-request-accept::before,
.moto-pin-picker__confirm::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}

.btn-uber-black--home:active:not(:disabled),
.confirm-order-btn:active:not(:disabled),
.btn-request-accept:active:not(:disabled) {
  filter: brightness(0.94) saturate(1.06);
}

.btn-uber-black--home:disabled,
.confirm-order-btn:disabled {
  filter: saturate(0.25);
}

/* ———————————————————— 4. Étapes de course ————————————————————
   L'étape active respire (halo doux), les étapes passées se teintent
   au dégradé de marque au lieu du gris neutre. */
#screen-ride .ride-step {
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

#screen-ride .ride-step--active {
  box-shadow:
    0 6px 20px rgba(232, 50, 122, 0.36),
    0 0 0 4px rgba(232, 50, 122, 0.1);
}

#screen-ride .ride-step--done {
  background: linear-gradient(90deg, rgba(255, 95, 77, 0.14), rgba(123, 57, 183, 0.14));
  color: var(--moto-violet, #7b39b7);
}

/* Barre de progression : dégradé animé fluide. */
.ride-progress-fill {
  background: var(--moto-gradient, linear-gradient(90deg, #ff5f4d, #e8327a, #7b39b7));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ———————————————————— 5. Champs et saisie ————————————————————
   Focus/appui : anneau au dégradé de marque, subtil et net. */
.uber-field--active {
  box-shadow:
    inset 0 0 0 1.5px rgba(232, 50, 122, 0.4),
    0 4px 14px rgba(232, 50, 122, 0.08);
}

.field-input:focus,
.search-input:focus,
.profile-field-input:focus {
  outline: none;
  border-color: rgba(232, 50, 122, 0.45);
  box-shadow: 0 0 0 3px rgba(232, 50, 122, 0.12);
}

/* ———————————————————— 6. Cartes d'information ————————————————————
   Bordure-cheveu encrée + micro-relief : contenu « posé » sur la feuille. */
.driver-card,
.moto-ride-driver,
.ride-status-card,
.moto-call-box__btn {
  border: 1px solid rgba(45, 27, 78, 0.07);
  box-shadow:
    0 3px 14px rgba(45, 27, 78, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Badge « motos à proximité » : liseré dégradé discret. */
.uber-badge-live {
  border: 1px solid rgba(232, 50, 122, 0.22);
  box-shadow: 0 3px 12px rgba(232, 50, 122, 0.1);
}

/* ———————————————————— 7. Écrans : glissement soyeux ———————————————————— */
.moto-capacitor-native .screen {
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    visibility 0.24s;
}

/* Feuilles d'overlay (recherche, programmation, aide…) : arrivée en ressort. */
.overlay--sheet .overlay-panel,
.schedule-panel--modern {
  transition: transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1), opacity 0.3s ease;
}

/* ———————————————————— 8. Mode en ligne chauffeur ————————————————————
   L'état « En ligne » rayonne doucement — repère immédiat. */
.driver-online-box.is-online {
  box-shadow:
    0 0 0 1.5px rgba(34, 197, 94, 0.35),
    0 6px 22px rgba(34, 197, 94, 0.18);
  border-radius: 16px;
}

/* ———————————————————— 9. Thème sombre ———————————————————— */
html[data-theme="dark"] .uber-sheet,
html[data-theme="dark"] .trip-sheet,
html[data-theme="dark"] .uber-dock,
html[data-theme="dark"] .request-sheet {
  box-shadow:
    0 -22px 60px rgba(0, 0, 0, 0.6),
    0 -3px 14px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

html[data-theme="dark"] .driver-card,
html[data-theme="dark"] .moto-ride-driver,
html[data-theme="dark"] .ride-status-card,
html[data-theme="dark"] .moto-call-box__btn {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .moto-locate-fab,
html[data-theme="dark"] .moto-maptype-fab,
html[data-theme="dark"] .chrome-btn,
html[data-theme="dark"] .map-float-btn,
html[data-theme="dark"] .moto-map-zoom {
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* ———————————————————— 10. Accessibilité mouvement ———————————————————— */
@media (prefers-reduced-motion: reduce) {
  .btn-uber-black:active,
  .confirm-order-btn:active,
  .btn-request-accept:active,
  .chrome-btn:active,
  .moto-locate-fab:active {
    transform: none;
  }
}