/* ══════════════════════════════════════════════════════════════
   TPM 77 – Simulateur de prix (type Uber / Heetch)
   Fichier additif : n'écrase aucun style existant de style.css
   v2 : correctif scroll + autocomplétion adresse + carte + surge
   ══════════════════════════════════════════════════════════════ */

/* ── Correctif : le formulaire pouvait dépasser la hauteur du hero
   (100vh, overflow:hidden) et le bouton "Envoyer" devenait invisible
   et impossible à atteindre en scrollant. On rend la carte de
   réservation scrollable en interne, sans toucher au design global. ── */
.booking-card{
  max-height:min(82vh,760px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--green,#2D7A3A) var(--off-white,#F7FAF8);
}
.booking-card::-webkit-scrollbar{width:6px}
.booking-card::-webkit-scrollbar-track{background:var(--off-white,#F7FAF8);border-radius:6px}
.booking-card::-webkit-scrollbar-thumb{background:var(--green,#2D7A3A);border-radius:6px}
@media(max-width:1000px){.booking-card{max-height:min(78vh,640px)}}
@media(max-width:580px){.booking-card{max-height:72vh}}

/* ── Champ adresse + autocomplétion + géolocalisation ── */
.sim-addr-wrap{position:relative}
.sim-addr-input-row{display:flex;gap:6px;align-items:stretch}
.sim-addr-input-row input{flex:1 1 auto}
.sim-geoloc-btn{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:38px;border:1.5px solid var(--gray-light,#D8E4DA);border-radius:var(--radius,6px);
  background:#fff;color:var(--green,#2D7A3A);cursor:pointer;transition:all .2s ease;
}
.sim-geoloc-btn:hover{border-color:var(--green,#2D7A3A);background:var(--green-pale,#E8F5EB)}
.sim-geoloc-btn.loading{animation:sim-pulse 1s infinite}
.sim-geoloc-btn svg{width:16px;height:16px}
@keyframes sim-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.sim-suggest{
  position:absolute;top:100%;left:0;right:0;z-index:60;
  background:#fff;border:1.5px solid var(--gray-light,#D8E4DA);border-radius:var(--radius,6px);
  box-shadow:var(--shadow-lg,0 12px 48px rgba(0,0,0,.16));
  margin-top:4px;max-height:220px;overflow-y:auto;display:none;
}
.sim-suggest.open{display:block}
.sim-suggest-item{
  padding:9px 12px;font-size:.8rem;color:var(--dark,#111A13);cursor:pointer;
  border-bottom:1px solid var(--off-white,#F7FAF8);line-height:1.35;
}
.sim-suggest-item:last-child{border-bottom:none}
.sim-suggest-item:hover,.sim-suggest-item.active{background:var(--green-pale,#E8F5EB)}
.sim-suggest-item small{display:block;color:var(--gray,#6B7A6D);font-size:.68rem;margin-top:1px}
.sim-suggest-empty{padding:10px 12px;font-size:.76rem;color:var(--gray,#6B7A6D)}
.sim-suggest-loading{padding:10px 12px;font-size:.76rem;color:var(--gray,#6B7A6D);font-style:italic}

.sim-field-status{font-size:.66rem;margin-top:3px;display:block;min-height:14px}
.sim-field-status.ok{color:var(--green,#2D7A3A)}
.sim-field-status.err{color:#C0392B}

/* ── Options enfant / bagages ── */
.sim-options{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.sim-check{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border:1.5px solid var(--gray-light,#D8E4DA);
  border-radius:var(--radius,6px);cursor:pointer;
  font-size:.8rem;font-weight:500;color:var(--dark,#111A13);
  transition:border-color .2s ease,background .2s ease;
  user-select:none;flex:1 1 auto;
}
.sim-check:hover{border-color:var(--green,#2D7A3A)}
.sim-check input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--green,#2D7A3A);cursor:pointer;flex-shrink:0;
}
.sim-check.checked{background:var(--green-pale,#E8F5EB);border-color:var(--green,#2D7A3A)}
.sim-check-icon{display:flex;align-items:center;color:var(--green,#2D7A3A);flex-shrink:0}

.sim-bagages-qty{display:flex;align-items:center;gap:6px;margin-left:auto}
.sim-bagages-qty select{
  width:auto;padding:4px 8px;font-size:.78rem;border:1.5px solid var(--gray-light,#D8E4DA);
  border-radius:4px;background:#fff;color:var(--dark,#111A13);
}

/* ── Carte itinéraire (Leaflet / OpenStreetMap) ── */
.sim-map{
  width:100%;height:0;overflow:hidden;border-radius:var(--radius,6px);
  margin:10px 0;transition:height .3s ease;background:var(--off-white,#F7FAF8);
}
.sim-map.visible{height:180px;border:1.5px solid var(--gray-light,#D8E4DA)}
.sim-map .leaflet-container{border-radius:var(--radius,6px);font-family:var(--font)}

/* ── Bloc estimation de prix ── */
.sim-price-box{
  margin:6px 0 16px;padding:16px 18px;border-radius:var(--radius,6px);
  background:var(--dark,#111A13);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.sim-price-box.sim-empty{background:var(--off-white,#F7FAF8);color:var(--gray,#6B7A6D);border:1.5px dashed var(--gray-light,#D8E4DA)}
.sim-price-box.sim-loading{background:var(--off-white,#F7FAF8);color:var(--gray,#6B7A6D);border:1.5px dashed var(--green,#2D7A3A)}
.sim-price-left{display:flex;flex-direction:column;gap:2px}
.sim-price-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;opacity:.75;font-weight:700}
.sim-price-detail{font-size:.72rem;opacity:.75}
.sim-price-amount{font-size:1.55rem;font-weight:800;color:#fff;line-height:1}
.sim-price-box.sim-empty .sim-price-amount,.sim-price-box.sim-loading .sim-price-amount{color:var(--gray,#6B7A6D);font-size:.85rem;font-weight:600}
.sim-price-range{display:flex;gap:8px;flex-wrap:wrap}
.sim-price-chip{
  padding:5px 10px;border-radius:20px;font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
}
.sim-price-chip.active{background:var(--green,#2D7A3A);border-color:var(--green,#2D7A3A)}
.sim-price-note{width:100%;font-size:.66rem;opacity:.65;margin-top:2px}
.sim-surge-badge{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;
  padding:3px 9px;border-radius:20px;font-size:.66rem;font-weight:700;
  background:rgba(230,126,34,.18);color:#F0A868;border:1px solid rgba(230,126,34,.35);
}
.sim-live-tag{
  display:inline-block;margin-left:8px;font-weight:700;font-size:.62rem;
  color:#4CD97B;letter-spacing:.02em;vertical-align:middle;
}

/* ── Suivi temps réel (client/track.php) ─────────────────────────── */
.track-wrap{max-width:760px;margin:100px auto 60px;padding:0 20px}
.track-status-line{display:flex;justify-content:space-between;gap:6px;margin:24px 0 32px}
.track-step{flex:1;text-align:center;font-size:.72rem;color:#9AA79C;position:relative;padding-top:22px}
.track-step::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#D8E4DA;border:2px solid #D8E4DA}
.track-step.done::before{background:var(--green,#2D7A3A);border-color:var(--green,#2D7A3A)}
.track-step.done{color:var(--green,#2D7A3A);font-weight:700}
.track-map{width:100%;height:340px;border-radius:14px;overflow:hidden;margin-bottom:20px;background:#eef2ee}
.track-card{background:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 4px 20px rgba(0,0,0,.06);margin-bottom:16px}
.track-driver{display:flex;align-items:center;gap:14px}
.track-driver-avatar{width:52px;height:52px;border-radius:50%;background:var(--green,#2D7A3A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}

@media(max-width:580px){
  .sim-price-box{flex-direction:column;align-items:flex-start}
  .sim-bagages-qty{margin-left:0;margin-top:6px}
}