/* ==========================================================================
   NOSTAL CARS PUB — assets/css/formulaires-rdv.css
   Styles partagés par les pages de formulaires de rendez-vous :
   essai-vehicule.php et vendre-votre-vehicule.php
   (structures très similaires : hero + étapes + formulaire + sidebar info)
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOUTONS RADIO EN PASTILLES (créneaux horaires, choix rapides)
   -------------------------------------------------------------------------- */
.rdv-radio-group{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.rdv-radio-group label{
  flex:1; min-width:110px; text-align:center; padding: .85rem .6rem; border-radius: var(--nc-radius-sm);
  border: 1.5px solid var(--nc-gray-300); font-size: var(--nc-fs-sm); font-weight:700; cursor:pointer;
  transition: all var(--nc-transition);
}
.rdv-radio-group input{ display:none; }
.rdv-radio-group label i{ display:block; margin-bottom:.4rem; color: var(--nc-gray-500); }
.rdv-radio-group label.is-checked{ border-color: var(--nc-blue); background: var(--nc-blue-light); color: var(--nc-blue); }
.rdv-radio-group label.is-checked i{ color: var(--nc-blue); }

/* --------------------------------------------------------------------------
   CARTES D'ÉTAT DU VÉHICULE (page reprise)
   -------------------------------------------------------------------------- */
.rdv-condition-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.9rem; margin-bottom:1.8rem; }
@media(max-width:575px){ .rdv-condition-grid{ grid-template-columns: repeat(2,1fr); } }
.rdv-condition-grid label{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding: 1.1rem .6rem; border-radius: var(--nc-radius); border: 1.5px solid var(--nc-gray-300);
  font-size: var(--nc-fs-xs); font-weight:700; text-align:center; cursor:pointer; transition: all var(--nc-transition);
}
.rdv-condition-grid input{ display:none; }
.rdv-condition-grid label i{ font-size:1.3rem; color: var(--nc-gray-500); }
.rdv-condition-grid label.is-checked{ border-color: var(--nc-green); background: var(--nc-green-light); }
.rdv-condition-grid label.is-checked i{ color: var(--nc-green); }

/* --------------------------------------------------------------------------
   ZONE DE DÉPÔT DE PHOTOS
   -------------------------------------------------------------------------- */
.rdv-upload-zone{
  border: 2px dashed var(--nc-gray-300); border-radius: var(--nc-radius-lg);
  padding: 2.4rem 1.5rem; text-align:center; cursor:pointer; transition: all var(--nc-transition);
  position:relative;
}
.rdv-upload-zone:hover, .rdv-upload-zone.is-dragover{ border-color: var(--nc-blue); background: var(--nc-blue-light); }
.rdv-upload-zone i{ font-size:2rem; color: var(--nc-blue); margin-bottom:.8rem; display:block; }
.rdv-upload-zone input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.rdv-upload-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.rdv-upload-list span{
  background: var(--nc-gray-100); padding:.4rem .8rem; border-radius:20px; font-size: var(--nc-fs-xs); font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}

/* --------------------------------------------------------------------------
   BANDEAU D'ESTIMATION (page reprise)
   -------------------------------------------------------------------------- */
.rdv-value-teaser{
  background: linear-gradient(135deg, var(--nc-dark), var(--nc-dark-3));
  color:#fff; border-radius: var(--nc-radius-lg); padding: 2rem; text-align:center;
}
.rdv-value-teaser .icon{ font-size:2rem; color: var(--nc-green); margin-bottom:.8rem; }
.rdv-value-teaser h4{ color:#fff; }
.rdv-value-teaser p{ color: rgba(255,255,255,.6); margin-bottom:0; }

/* --------------------------------------------------------------------------
   FICHE VÉHICULE SÉLECTIONNÉ (sidebar, page essai)
   -------------------------------------------------------------------------- */
.rdv-vehicle-preview{ display:flex; gap:1rem; align-items:center; padding:1.1rem; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius); margin-bottom:1.6rem; }
.rdv-vehicle-preview .thumb{ width:76px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.rdv-vehicle-preview .thumb img{ width:100%; height:100%; object-fit:cover; }
.rdv-vehicle-preview h6{ margin-bottom:.2rem; font-size: var(--nc-fs-sm); }
.rdv-vehicle-preview span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

/* --------------------------------------------------------------------------
   MINI ACCORDÉON (FAQ contextuelle essai / reprise)
   -------------------------------------------------------------------------- */
.rdv-accordion-item{ border-bottom: 1px solid var(--nc-gray-300); }
.rdv-accordion-item:first-child{ border-top: 1px solid var(--nc-gray-300); }
.rdv-accordion-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; text-align:left; padding: 1.2rem .2rem;
  font-weight:700; font-size: var(--nc-fs-sm); color: var(--nc-dark);
}
.rdv-accordion-q i{ color: var(--nc-blue); transition: transform var(--nc-transition); flex-shrink:0; margin-left:1rem; }
.rdv-accordion-item.is-open .rdv-accordion-q i{ transform: rotate(45deg); }
.rdv-accordion-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.rdv-accordion-item.is-open .rdv-accordion-a{ max-height:260px; }
.rdv-accordion-a p{ padding: 0 .2rem 1.2rem; margin:0; font-size: var(--nc-fs-sm); }

/* --------------------------------------------------------------------------
   LISTE D'INFORMATIONS PRATIQUES (sidebar)
   -------------------------------------------------------------------------- */
.rdv-info-list li{ display:flex; gap:.8rem; margin-bottom:1.2rem; align-items:flex-start; }
.rdv-info-list li:last-child{ margin-bottom:0; }
.rdv-info-list i{ color: var(--nc-blue); font-size:1.1rem; margin-top:.15rem; width:20px; }
.rdv-info-list strong{ display:block; font-size: var(--nc-fs-sm); }
.rdv-info-list span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }