/* Destination : assets/css/suivi-reservation.css */

.nh-suivi-search { margin-bottom: 1.5rem; }

.nh-form-success-inline {
  display: flex; align-items: center; gap: 0.7rem;
  background: #E8F7EE; color: var(--nh-success);
  border-radius: var(--nh-radius-md);
  padding: 1rem 1.3rem;
  font-size: 0.88rem; font-weight: 600;
  margin-bottom: 1.5rem;
}

/* ---------- Résultat ---------- */
.nh-suivi-result { background: var(--nh-white); border-radius: var(--nh-radius-lg); box-shadow: var(--nh-shadow-md); padding: 2rem; }

.nh-suivi-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--nh-grey-300); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.nh-suivi-ref-label { font-size: 0.72rem; text-transform: uppercase; color: var(--nh-grey-600); margin: 0; }
.nh-suivi-header h2 { font-size: 1.3rem; margin: 0.2rem 0; }
.nh-suivi-property { font-size: 0.86rem; color: var(--nh-grey-600); margin: 0; }

.nh-status-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem; border-radius: 50px;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.nh-status-badge-sm { padding: 0.3rem 0.8rem; font-size: 0.75rem; }
.nh-status-info { background: #E3F2FD; color: #1565C0; }
.nh-status-warning { background: #FFF3E0; color: #E17800; }
.nh-status-success { background: #E8F7EE; color: var(--nh-success); }
.nh-status-danger { background: #FDECEC; color: var(--nh-danger); }

/* ---------- Timeline ---------- */
.nh-suivi-timeline { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2rem; position: relative; }
.nh-suivi-timeline::before {
  content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--nh-grey-300);
}
.nh-timeline-item { display: flex; gap: 1rem; position: relative; }
.nh-timeline-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0; z-index: 1;
}
.nh-timeline-item strong { display: block; font-size: 0.92rem; color: var(--nh-dark); }
.nh-timeline-item p { font-size: 0.82rem; color: var(--nh-grey-600); margin: 0.2rem 0; }
.nh-timeline-item time { font-size: 0.74rem; color: var(--nh-grey-600); }

/* ---------- Paiement ---------- */
.nh-suivi-payment-block, .nh-suivi-upload-block {
  background: var(--nh-cream); border-radius: var(--nh-radius-md); padding: 1.5rem; margin-bottom: 1.2rem;
}
.nh-suivi-payment-block h3, .nh-suivi-upload-block h3 { font-size: 1rem; margin-bottom: 0.8rem; }
.nh-suivi-payment-block h3 i, .nh-suivi-upload-block h3 i { color: var(--nh-rose); margin-right: 0.5rem; }
.nh-suivi-payment-block p { font-size: 0.88rem; color: var(--nh-grey-600); margin: 0.3rem 0; }
.nh-suivi-upload-block p { font-size: 0.86rem; color: var(--nh-grey-600); margin-bottom: 1rem; }

.nh-suivi-accord-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 700; color: var(--nh-rose-dark); margin-top: 0.4rem;
}
.nh-suivi-accord-link:hover { color: var(--nh-rose); }
.nh-suivi-accord-link i { color: var(--nh-danger); }

.nh-suivi-upload-form { display: flex; flex-direction: column; gap: 1rem; }
.nh-suivi-upload-fields { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.nh-suivi-upload-field { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.4rem; }
.nh-suivi-upload-field span { font-size: 0.8rem; font-weight: 700; color: var(--nh-dark); }
.nh-suivi-upload-field input[type="file"] {
  border: 2px dashed var(--nh-grey-300); border-radius: 12px;
  padding: 0.7rem; font-size: 0.85rem; background: var(--nh-white);
}
.nh-suivi-upload-form > button { align-self: flex-start; }

.nh-suivi-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }

@media (max-width: 575.98px) {
  .nh-suivi-result { padding: 1.4rem; }
  .nh-suivi-upload-fields { flex-direction: column; }
  .nh-suivi-upload-form > button { align-self: stretch; }
}