/* ===========================================
   BARTOLI ANGULAR THEME
   Tutte le list view: usati / nuovi / ricambi
   =========================================== */

/* Variabili globali modificabili */
:root {
  --bartoli-title-size: 16px;           /* dimensione titoli */
  --bartoli-title-weight: 600;          /* peso titoli */
  --bartoli-price-size: 18px;           /* dimensione prezzo */
  --bartoli-accent: #0a7cff;            /* colore accento (es. prezzo) */
}

/* ===========================================
   IMMAGINI LISTING (tutti: usati / nuovi / ricambi)
   =========================================== */

#htmlOfPage img,
#htmlOfPage img.imgRimorchioNoleggio {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* FIX FORZATO per gli usati (e in generale tutte le card con col-md-4) */
#htmlOfPage .col-md-4 img.imgRimorchioNoleggio {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover;
}

/* ===========================================
   TITOLI VEICOLI (usati / nuovi / ricambi)
   newTitoloElemento + newTitoloElemento3
   =========================================== */

#htmlOfPage h2.newTitoloElemento,
#htmlOfPage h2.newTitoloElemento3,
#htmlOfPage h3,
#htmlOfPage h3 a {
  font-size: var(--bartoli-title-size) !important;
  font-weight: var(--bartoli-title-weight);
  line-height: 1.25;
  margin-top: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uniformo l'allineamento dei titoli nelle card degli usati */
#htmlOfPage h2.newTitoloElemento3,
#htmlOfPage .newTitoloElemento3 a {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ===========================================
   QUANTITÀ + PULSANTE "AGGIUNGI" (e-commerce)
   Per ora nascosti ovunque
   =========================================== 

#htmlOfPage .quantity,
#htmlOfPage a.btn.btn-primary {
  display: none !important;
}*/

/* ===========================================
   PREZZO (se presente)
   =========================================== */

#htmlOfPage .price {
  margin-top: auto;
  font-size: var(--bartoli-price-size);
  font-weight: 800;
  color: var(--bartoli-accent);
}

/* ===========================================
   RICAMBI – nascondi riga del prezzo
   (ultima p.ng-binding dentro infoRimorchioNoleggio)
   =========================================== 

#sezioneElencoRicambi .infoRimorchioNoleggio p.ng-binding:last-of-type {
  display: none !important;
}*/

/* ===========================================
   RICAMBI – immagine full-width + fix doppione
   =========================================== */

/* 1) Il link wrapper occupa tutta la colonna */
#htmlOfPage a.rimorchioLink {
  display: block !important;
  width: 100% !important;
}

/* 2) L’immagine dentro il link è full width */
#htmlOfPage a.rimorchioLink > img.imgRimorchioNoleggio {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
  aspect-ratio: 4 / 3;   /* togli se non vuoi forzare il 4:3 */
}

/* 3) Se il template stampa una seconda immagine subito dopo il link, nascondila */
#htmlOfPage a.rimorchioLink + img.imgRimorchioNoleggio,
#htmlOfPage a.rimorchioLink + img.imgRimorchioNoleggio.type3 {
  display: none !important;
}

/* ===========================================
   CARD – padding solo sul TESTO
   (vale per usati / nuovi / ricambi)
   =========================================== */

/* Il contenitore non ha più padding laterale, così la foto può andare a filo */
#htmlOfPage .infoRimorchioNoleggio {
  padding: 0 0 16px;   /* niente padding left/right, solo bottom per aria sotto il testo */
}

/* Titolo e paragrafi hanno il padding interno */
#htmlOfPage .infoRimorchioNoleggio h2,
#htmlOfPage .infoRimorchioNoleggio h2 a,
#htmlOfPage .infoRimorchioNoleggio h3,
#htmlOfPage .infoRimorchioNoleggio h3 a,
#htmlOfPage .infoRimorchioNoleggio p {
  padding: 0 18px;
}


/* Margini verticali dei paragrafi come prima */
#htmlOfPage .infoRimorchioNoleggio p {
  margin: 2px 0;
}

/* ===========================================
   DISPLAY BUTTONS (view + select per pagina)
   =========================================== */

#displayButtons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* il select non deve occupare tutta la riga */
#displayButtons select {
  display: inline-block;
  width: auto !important;
  max-width: 120px;
  min-width: 60px;
}

/* ===========================================
   NASCONDI VECCHIA RIGA ICONE
   "FRANCESE / SPONDE / ..." gestita da Angular
   =========================================== */

#htmlOfPage [ng-controller="semirimorchiNavCtrl"] {
  display: none !important;
}

/* ===========================================
   PAGINAZIONE ANGULAR – stile pulito, centrato
   (dirPagination + ul.pagination)
   =========================================== */

#htmlOfPage .noleggioPagination {
  display: block !important;      /* annulla eventuale flex di altri CSS */
  text-align: center;
  margin: 24px 0 16px;
  padding: 0;
}

/* dir-pagination-controls come blocco inline */
#htmlOfPage .noleggioPagination dir-pagination-controls {
  display: inline-block !important;
}

/* ul centrale */
#htmlOfPage .noleggioPagination ul.pagination {
  display: inline-flex !important;     /* tutti in riga */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

/* ogni LI è un bottoncino in linea, senza flex strani */
#htmlOfPage .noleggioPagination ul.pagination > li {
  display: inline-block !important;
  margin: 0;
  padding: 0;
  float: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* link numeri e frecce */
#htmlOfPage .noleggioPagination ul.pagination > li > a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 32px;
  height: 32px;
  padding: 0 8px;

  font-size: 14px;
  line-height: 1;
  text-decoration: none;

  color: #2581c4;
  background-color: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 999px;                /* pillolina netta */
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);

  transition: background-color .15s ease,
              color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease;
}

/* hover */
#htmlOfPage .noleggioPagination ul.pagination > li > a:hover {
  color: #0c1c40;
  border-color: #0c1c40;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* pagina attiva */
#htmlOfPage .noleggioPagination ul.pagination > li.active > a,
#htmlOfPage .noleggioPagination ul.pagination > li.active > a:focus,
#htmlOfPage .noleggioPagination ul.pagination > li.active > a:hover {
  color: #ffffff;
  background-color: #0c1c40;
  border-color: #0c1c40;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  cursor: default;
}

/* disabilitati (‹ quando sei alla pagina 1, › all’ultima) */
#htmlOfPage .noleggioPagination ul.pagination > li.disabled > a,
#htmlOfPage .noleggioPagination ul.pagination > li.disabled > a:focus,
#htmlOfPage .noleggioPagination ul.pagination > li.disabled > a:hover {
  color: #bbb;
  background-color: #fdfdfd;
  border-color: #e0e0e0;
  box-shadow: none;
  cursor: default;
}

/* Mobile: un filo più compatti ma sempre in riga */
@media (max-width: 640px) {
  #htmlOfPage .noleggioPagination {
    margin-top: 18px;
  }

  #htmlOfPage .noleggioPagination ul.pagination > li > a {
    min-width: 28px;
    height: 28px;
    font-size: 13px;
    padding: 0 6px;
  }
}

/* ===========================================
   FIX LAYOUT CARD: IMMAGINE SOPRA, TESTO SOTTO
   (vale per usati / nuovi / ricambi dentro #htmlOfPage)
   =========================================== */

/* La "row" interna che contiene col-md-4 (img) + col-md-8 (testo)
   diventa un blocco verticale invece che un layout a due colonne */
#htmlOfPage div.row > .row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Le due colonne (immagine + testo) diventano full-width una sotto l'altra */
#htmlOfPage div.row > .row > .col-md-4,
#htmlOfPage div.row > .row > .col-md-8 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Spazio fra immagine e testo */
#htmlOfPage div.row > .row > .col-md-8.infoRimorchioNoleggio {
  padding-top: 12px;
}

/* Immagine sempre full width dentro la colonna */
#htmlOfPage div.row > .row > .col-md-4 img.imgRimorchioNoleggio,
#htmlOfPage div.row > .row > .col-md-4 a.rimorchioLink > img.imgRimorchioNoleggio {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  object-fit: cover;
}

/* ===========================================
   FIX DEFINITIVO PER "VEICOLI USATI"
   annulla centramento e max-width imposti da .risveglio
   =========================================== */

#htmlOfPage .risveglio .col-md-4 {
  text-align: left !important;
}

#htmlOfPage .risveglio .col-md-4 img,
#htmlOfPage .risveglio .col-md-4 a.rimorchioLink > img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover !important;
}

/* ===========================================
   SCHEDE DETTAGLIO (usati / nuovi / ricambi)
   layout tipo tabella (stile Bridge)
   =========================================== */

/* Contenitore scheda: centrato */
#htmlOfPage #schedaRimorchioNoleggio,
#htmlOfPage #schedaRimorchio {
  max-width: 1160px;
  margin: 20px auto 40px;
}

/* Spazio sopra/sotto il titolo della scheda (h2) */
#htmlOfPage #schedaRimorchioNoleggio #titoloScheda,
#htmlOfPage #schedaRimorchio #titoloScheda {
  margin: 20px 0;
}

/* Spazio sotto la gallery di immagini */
#htmlOfPage #schedaNoleggioGallery {
  margin: 0 0 18px;
}

/* ---------- RIGHE TABELLA (DESKTOP) ---------- */

#htmlOfPage #schedaRimorchioNoleggio .row,
#htmlOfPage #schedaRimorchio .row {
  display: table;           /* layout a tabella */
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border-top: 1px solid #e2e2ef;
}

#htmlOfPage #schedaRimorchioNoleggio .row:last-child,
#htmlOfPage #schedaRimorchio .row:last-child {
  border-bottom: 1px solid #e2e2ef;
}

/* Colonna etichetta (Codice, Modello, Allestimento, …)
   NB: col-md-1 per usati/noleggio, col-md-2 per altre schede */
#htmlOfPage #schedaRimorchioNoleggio .col-md-1,
#htmlOfPage #schedaRimorchio .col-md-2 {
  float: none !important;
  display: table-cell;
  width: 190px;                  /* larghezza fissa per TUTTE le righe */
  padding: 8px 12px;
  border-right: 1px solid #e2e2ef;
  background: #f7f7fb;
  font-weight: 600;
  color: #0c1c40;
  vertical-align: top;
  box-sizing: border-box;
}

/* Colonna valore (tutto il testo lungo) */
#htmlOfPage #schedaRimorchioNoleggio .col-md-11,
#htmlOfPage #schedaRimorchio .col-md-11 {
  float: none !important;
  display: table-cell;
  width: auto;
  padding: 8px 12px;
  background: #ffffff;
  vertical-align: top;
  box-sizing: border-box;
  /* importantissimo per far andare a capo i testi lunghi */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Testi dentro la tabella */
#htmlOfPage #schedaRimorchioNoleggio p,
#htmlOfPage #schedaRimorchio p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Righe “speciali” a larghezza piena (titolo video, video, ecc.) */
#htmlOfPage #schedaRimorchioNoleggio .row > .col-md-12,
#htmlOfPage #schedaRimorchio .row > .col-md-12 {
  float: none !important;
  display: block;
  width: 100%;
  border-right: none;
  background: transparent;
}
/* Nasconde il blocco "Trova ricambio" SOLO nella pagina Ricambi */
body.page-id-16464 #ricercaElementi {
    display: none !important;
}

/* Blocco video */
#htmlOfPage #videoRimorchioNoleggio {
  text-align: center;
  background-color: #fff !important;
}

/* ---------- MOBILE: etichetta sopra, valore sotto ---------- */

@media (max-width: 767px) {

  #htmlOfPage #schedaRimorchioNoleggio .row,
  #htmlOfPage #schedaRimorchio .row {
    display: block;          /* niente tabella su mobile */
  }

  #htmlOfPage #schedaRimorchioNoleggio .col-md-1,
  #htmlOfPage #schedaRimorchio .col-md-2,
  #htmlOfPage #schedaRimorchioNoleggio .col-md-11,
  #htmlOfPage #schedaRimorchio .col-md-11 {
    display: block;
    width: 100%;
    max-width: 100%;
    border-right: none;
  }

  #htmlOfPage #schedaRimorchioNoleggio .col-md-1,
  #htmlOfPage #schedaRimorchio .col-md-2 {
    border-bottom: 1px solid #e2e2ef;  /* separa etichetta e valore */
  }
}