/* ==========================================================================
   NOSTAL CARS PUB — assets/css/comparateur.css
   Styles spécifiques au comparateur de véhicules
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   SÉLECTEUR DE VÉHICULES
   -------------------------------------------------------------------------- */
.cmp-selector{ background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius-lg); padding: 1.8rem; }
.cmp-selector-grid{ display:grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1rem; align-items:end; }
@media(max-width:767px){ .cmp-selector-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   ÉTAT VIDE
   -------------------------------------------------------------------------- */
.cmp-empty{ text-align:center; padding: 4rem 1.5rem; }
.cmp-empty i{ font-size: 3rem; color: var(--nc-gray-300); margin-bottom:1.3rem; display:block; }

/* --------------------------------------------------------------------------
   TABLEAU COMPARATIF
   -------------------------------------------------------------------------- */
.cmp-table-wrap{ overflow-x:auto; }
.cmp-table{ width:100%; border-collapse:collapse; min-width: 720px; }
.cmp-table th, .cmp-table td{ padding: 1rem; border-bottom: 1px solid var(--nc-gray-300); vertical-align:top; }
.cmp-table td:first-child, .cmp-table th:first-child{
  width: 210px; color: var(--nc-gray-500); font-size: var(--nc-fs-sm); font-weight:700;
  position: sticky; left:0; background:#fff; z-index:1;
}
.cmp-table td:first-child i{ color: var(--nc-blue); margin-right:.5rem; width:16px; }

.cmp-col-head{ text-align:center; min-width:220px; position:relative; }
.cmp-col-remove{
  position:absolute; top:0; right:0; background: var(--nc-gray-100); border:none;
  width:28px; height:28px; border-radius:50%; color: var(--nc-gray-500); font-size:.8rem;
}
.cmp-col-remove:hover{ background: var(--nc-red); color:#fff; }
.cmp-col-media{ height:130px; border-radius: var(--nc-radius); overflow:hidden; margin-bottom:.9rem; }
.cmp-col-media img{ width:100%; height:100%; object-fit:cover; }
.cmp-col-head h4{ font-size: var(--nc-fs-md); margin-bottom:.2rem; }
.cmp-col-head .cmp-col-price{ font-size: var(--nc-fs-xl); font-weight:900; color: var(--nc-blue); margin-bottom:.8rem; }

.cmp-table td.is-best{ background: var(--nc-green-light); border-radius:8px; position:relative; }
.cmp-table td.is-best::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  color: var(--nc-green); margin-right:.4rem; font-size:.75rem;
}
.cmp-table-actions{ text-align:center; padding-top:1.4rem; }

.cmp-empty-slot{
  border: 1.5px dashed var(--nc-gray-300); border-radius: var(--nc-radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding: 1.6rem; min-width:220px; color: var(--nc-gray-500);
}
.cmp-empty-slot i{ font-size:1.6rem; }