/*
 * Riquadro "Dettagli veicolo" del calcolatore - versione PREMIUM.
 * Agisce solo sulle classi .blx-modal-* di quel riquadro. Caricato dopo
 * layout-wide.css per correggere le sue regole !important. Palette del
 * calcolatore: navy #091922 + accento teal #21d7e9 su pannello bianco.
 */

/* ---- pannello: piu respiro e angoli morbidi ---- */
.blx-modal-panel { border-radius: 20px !important; }
.blx-modal-content { padding: 8px 34px 6px !important; }

/* X in alto: pulsante tondo discreto */
.blx-modal-x {
  width: 38px !important; height: 38px !important; border-radius: 50% !important;
  background: #f2f5f7 !important; color: #091922 !important; border: 0 !important;
  font-size: 20px !important; line-height: 1 !important; top: 18px !important; right: 18px !important;
  transition: background .2s ease !important;
}
.blx-modal-x:hover { background: #e3e9ec !important; }

/* occhiello "Dettagli" + nome classe grande con filo d'accento */
#blx-modal-title {
  font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 2px !important;
  color: #8aa0ab !important; font-weight: 800 !important; margin: 8px 0 2px !important;
}
.blx-modal-class {
  font-size: 22px !important; font-weight: 850 !important; color: #091922 !important;
  margin: 0 !important; letter-spacing: .2px !important;
}
.blx-modal-class::after {
  content: "" !important; display: block !important; width: 46px !important; height: 3px !important;
  border-radius: 3px !important; background: #21d7e9 !important; margin: 12px 0 2px !important;
}

/* immagine del veicolo: cornice morbida su sfondo tenue */
.blx-modal-image {
  display: block !important; margin: 18px auto !important; max-height: 210px !important;
  width: auto !important; max-width: 100% !important; border-radius: 14px !important;
  background: linear-gradient(180deg, #f7fafb, #eef3f5) !important; padding: 12px 18px !important;
}

/* divisori sottili */
.blx-modal-content hr { border: 0 !important; border-top: 1px solid #e9eef1 !important; margin: 18px 0 !important; }

/* etichette di sezione eleganti */
.blx-modal-content h3 {
  margin: 24px 0 10px !important; font-size: 12px !important; text-transform: uppercase !important;
  letter-spacing: 1.4px !important; color: #5b7480 !important; font-weight: 800 !important;
}

/* capienza: righe icona + testo */
.blx-modal-capacity-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 13px !important; }
.blx-modal-capacity-list li { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 15px !important; color: #1c2b33 !important; }
.blx-modal-capacity-list li svg, .blx-modal-capacity-list li img { flex: 0 0 auto !important; }

/* "Inclusi": card tenue con spunte teal disegnate (cerchio + segno) */
.blx-modal-included {
  list-style: none !important; margin: 6px 0 !important; padding: 16px 18px !important;
  background: #f6fbfc !important; border: 1px solid #e2f1f4 !important; border-radius: 14px !important;
  display: grid !important; gap: 12px !important;
}
.blx-modal-included li { position: relative !important; padding-left: 30px !important; font-size: 14.5px !important; line-height: 1.4 !important; color: #17262e !important; }
.blx-modal-included li::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important;
  width: 19px !important; height: 19px !important; border-radius: 50% !important; background: #21d7e9 !important;
}
.blx-modal-included li::after {
  content: "" !important; position: absolute !important; left: 6px !important; top: 4px !important;
  width: 5px !important; height: 9px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* eventuale testo del veicolo (modelli "o simili") come nota, e descrizione */
.blx-modal-features { margin: 12px 2px 0 !important; color: #5b7480 !important; font-size: 13.5px !important; font-style: italic !important; }
.blx-modal-description { color: #38505b !important; font-size: 14px !important; line-height: 1.6 !important; }

/* prezzo: extra in righe leggere, TOTALE in una barra scura */
.blx-modal-price { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 0 !important; font-size: 14.5px !important; color: #38505b !important; }
.blx-modal-price.blx-modal-price-detail { border-top: 1px solid #eef2f4 !important; }
.blx-modal-price.blx-modal-price-detail small { display: block !important; color: #8aa0ab !important; font-size: 12px !important; margin-top: 2px !important; }
.blx-modal-price:not(.blx-modal-price-detail) {
  margin-top: 10px !important; padding: 15px 18px !important; background: #091922 !important;
  color: #fff !important; border-radius: 12px !important; font-size: 15px !important;
}
.blx-modal-price:not(.blx-modal-price-detail) strong { font-size: 22px !important; font-weight: 850 !important; color: #fff !important; }

/* barra azioni: via "Chiudi", "Seleziona questo veicolo" premium a tutta larghezza */
.blx-modal-actions { grid-template-columns: 1fr !important; padding: 18px 34px 24px !important; border-top: 1px solid #eef3f5 !important; }
.blx-modal-actions .blx-modal-close { display: none !important; }
.blx-modal-select {
  width: 100% !important; min-height: 56px !important; border: 0 !important; border-radius: 14px !important;
  background: linear-gradient(135deg, #0c2632, #091922) !important; color: #fff !important;
  font-weight: 850 !important; font-size: 15px !important; letter-spacing: .4px !important;
  box-shadow: 0 10px 24px rgba(9, 25, 34, .26) !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
}
.blx-modal-select:hover {
  background: #21d7e9 !important; color: #091922 !important;
  box-shadow: 0 12px 30px rgba(33, 215, 233, .34) !important; transform: translateY(-1px) !important;
}

/* su schermi piccoli: un filo meno padding */
@media (max-width: 560px) {
  .blx-modal-content { padding: 6px 20px 4px !important; }
  .blx-modal-actions { padding: 14px 20px 20px !important; }
  .blx-modal-class { font-size: 20px !important; }
}