/*
 * Stile personalizzato Amoruso Cars
 * Caricare DOPO bootstrap.min.css per sovrascriverne i default.
 */

:root {
  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Design spigoloso: azzera raggi e ombre globali di Bootstrap.
     Così ereditano il valore anche i componenti (card, bottoni,
     input, modal, dropdown, badge, alert...) che le derivano da qui. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;

  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;
}

/* Testi a dimensione FISSA: blocco la base dei rem a 16px, così nessun testo
   (nemmeno i default di Bootstrap) scala con le impostazioni del browser. */
html {
  font-size: 16px;
}

body {
  font-family: var(--bs-body-font-family);
  /* La navbar è fissa: lascio in alto uno spazio pari alla sua altezza,
     così il contenuto non le finisce sotto. */
  padding-top: var(--ac-navbar-h, 65px);
}

/* ============================================================
 * Regola di progetto: NIENTE angoli arrotondati, NIENTE ombre.
 * Tutto spigoloso. Rete di sicurezza contro i valori "hardcoded"
 * di Bootstrap (es. .rounded-circle, .rounded-pill, focus glow).
 * ============================================================ */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
 * Regola di progetto: NIENTE selezione del testo in tutto il progetto
 * (sito pubblico e gestionale, che carica anche questo file). Dà un aspetto
 * da app ed evita evidenziazioni accidentali. -webkit-user-select per Safari/iOS.
 * Eccezione: i campi editabili restano selezionabili, altrimenti non si
 * potrebbe correggere il testo digitato.
 * ============================================================ */
*,
*::before,
*::after {
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Il focus di Bootstrap è un alone morbido (box-shadow), che qui
   viene rimosso: lo ripristiniamo come contorno netto e squadrato,
   così restiamo accessibili da tastiera senza tradire lo stile. */
:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
}

/* ============================================================
 * Navbar: più alta, con voci di menu in MAIUSCOLO e dimensione
 * proporzionata al logo.
 * ============================================================ */
.navbar {
  --bs-navbar-padding-y: 15px; /* 15px sopra + 15px sotto: navbar 10px più alta */
  /* La classe .fixed-top (nell'HTML) rende la navbar fissa e fa gestire a
     Bootstrap la compensazione della scrollbar quando si apre l'offcanvas.
     Qui alziamo lo z-index sopra il backdrop (1040) e il pannello (1045). */
  z-index: 1050;
}

/* Layout a tutta larghezza: ogni .container-fluid ha 20px di padding per lato
   (navbar e sezioni allineate). */
.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

/* Ogni sezione ha 60px di margine sopra e sotto. */
section {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* Ancore: cliccando una voce del menu la sezione si ferma SOTTO la navbar
   fissa, non nascosta dietro. */
section[id] {
  scroll-margin-top: var(--ac-navbar-h, 65px);
}

/* Titolo di sezione: in maiuscolo come le voci della sidebar.
   font-size fisso: annulla gli RFS di Bootstrap (h2 = calc(rem + vw), fluido). */
.section-title {
  text-transform: uppercase;
  font-size: 32px;
}

/* ============================================================
 * Catalogo: griglia automatica. Ogni card parte da 320px e cresce
 * fino a 1fr per riempire la riga; le colonne si adattano da sole
 * (auto-fill). min(320px, 100%) evita overflow su schermi stretti.
 * ============================================================ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* Barra strumenti del catalogo (solo pagina intera): filtro carburante + campo
   di ricerca, ognuno con la sua icona a sinistra. Squadrata come il resto; occupa
   TUTTA la larghezza (come la griglia sotto): il filtro resta compatto a sinistra
   e la ricerca riempie tutto il resto. Il bordo dei campi si accende in blu quando
   sono attivi. Su schermi stretti filtro e ricerca vanno a capo a tutta larghezza
   (flex-wrap). */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin-top: 24px;
}
.catalog-filter {
  position: relative;
  flex: 1 1 200px;                  /* cresce poco: la ricerca ha la priorità */
}
.catalog-search {
  position: relative;
  flex: 999 1 240px;                /* cresce lei e riempie la riga */
}
/* Icone (imbuto e lente) sovrapposte a sinistra, trasparenti ai click. */
.catalog-filter-icon,
.catalog-search-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6c757d;
  pointer-events: none;             /* il click passa al campo sotto */
}
.catalog-filter .form-select,
.catalog-search .form-control {
  width: 100%;
  height: 100%;
  min-height: 48px;                 /* filtro e ricerca alti uguale */
  font-size: 16px;
  line-height: 1.4;
  color: #212529;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.catalog-search .form-control {
  padding: 12px 14px 12px 44px;     /* spazio a sinistra per la lente */
}
.catalog-filter .form-select {
  padding: 12px 32px 12px 44px;     /* freccia a destra, imbuto a sinistra */
}
.catalog-search .form-control::placeholder {
  color: #6c757d;
  opacity: 1;                       /* Firefox schiarisce i placeholder */
}
.catalog-filter .form-select:focus,
.catalog-search .form-control:focus {
  border-color: #0d6efd;            /* segnale di focus anche col tocco */
}
/* Anello di focus (2px) SOLO da tastiera: col puntatore main.js marca il campo
   con .is-focus-puntatore e qui l'anello si spegne (resta il bordo blu). */
.catalog-filter .form-select.is-focus-puntatore:focus-visible,
.catalog-search .form-control.is-focus-puntatore:focus-visible {
  outline: none;
}

.car-card {
  border: 1px solid #dee2e6;
  background: #fff;
}

.car-card-media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #ced4da;
  font-size: 48px;
  border-bottom: 1px solid #dee2e6;
  position: relative;               /* ancora per l'etichetta sovrapposta */
}

/* Card recensioni: la card riempie l'altezza della riga così il nome del
   cliente resta sempre allineato in fondo, qualunque sia la lunghezza del testo. */
.review-card {
  display: flex;
  flex-direction: column;
}
.review-card .car-card-body {
  flex: 1;                          /* il corpo occupa lo spazio rimanente */
}

/* Immagine panoramica 16:9 invece del quadrato del catalogo. */
.review-card .car-card-media {
  aspect-ratio: 16 / 9;
}

/* Corpo recensione: stelle gialle, testo, nome. */
.review-stars {
  display: flex;
  gap: 2px;
  color: #b8860b;
  font-size: 16px;
  line-height: 1;
}

.review-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #495057;
}

.review-name {
  margin: 0;
  margin-top: auto;                 /* nome sempre ancorato in fondo alla card */
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #212529;
}

/* Etichetta "neo patentati": sovrapposta in basso a sinistra dell'immagine. */
.car-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background: #198754;
  z-index: 1;                       /* sopra l'eventuale copertina */
}

/* Copertina reale dell'auto: riempie il riquadro quadrato (che senza foto
   ospita solo il segnaposto/icona). */
.car-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stelle vuote in grigio nelle card recensione (le piene restano gialle da
   .review-stars). */
.review-card .review-stars .bi-star {
  color: #8a9199;   /* grigio leggibile: #ced4da era quasi invisibile su bianco */
}

/* Messaggio di elenco vuoto (catalogo/recensioni senza risultati). */
.catalog-empty {
  margin-top: 24px;
  font-size: 16px;
  color: #6c757d;
}

/* "Vedi tutto" sotto la griglia del catalogo in home: centrato, porta al
   catalogo completo (catalogo.php). */
.catalog-all {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.catalog-all .btn {
  min-width: 200px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 500;
}

/* ============================================================
 * "Perché sceglierci": griglia di card (icona blu + titolo), prima delle
 * recensioni. Le card le compila il gestionale (Impostazioni). Squadrate come
 * il resto del sito; si adattano da sole in riga (auto-fill).
 * ============================================================ */
.perche-grid {
  display: grid;
  /* auto-FIT (non auto-fill): con poche card le colonne vuote si azzerano e le
     card si allargano fino a riempire TUTTA la larghezza. min(240px,100%) evita
     l'overflow su schermi stretti (una colonna a tutta larghezza). */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
  margin-top: 24px;
}
.perche-card {
  /* Bordo/sfondo/testo/icone: variabili scelte dal gestionale (uguali per tutte
     le card), col default come ripiego se non impostate. La larghezza del bordo
     è 0 quando dal gestionale si sceglie "senza bordo". */
  border: var(--perche-bordo-width, 1px) solid var(--perche-bordo, #dee2e6);
  background: var(--perche-bg, #fff);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.perche-icona {
  color: var(--perche-icona, #0d6efd);
  font-size: 44px;
  line-height: 1;
}
.perche-titolo {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--perche-testo, #212529);
}

/* Banner del finanziamento: riquadro BLU col messaggio scritto dal gestionale
   (Impostazioni → Banner finanziamento). Modulare e adattivo: l'icona resta a
   sinistra e il testo va a capo da solo, per messaggi corti o lunghi; su schermi
   stretti icona e testo si impilano. */
.finanz-banner {
  margin-top: 24px;
  padding: 20px 24px;
  background: #0d6efd;
  color: #fff;
}
/* Testa del banner: icona + messaggio in evidenza. */
.finanz-banner-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.finanz-banner-head > i {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
}
.finanz-banner-testo {
  margin: 0;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}
.finanz-banner-para p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
/* Paragrafo DENTRO il banner blu: staccato dal messaggio da una linea chiara e
   20px sopra e sotto. La linea c'è solo se sopra c'è il messaggio del banner. */
.finanz-banner-head + .finanz-banner-para {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}
@media (max-width: 479.98px) {
  .finanz-banner-head {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* ============================================================
 * Loader riutilizzabile: <i class="bi bi-arrow-clockwise ac-loader"></i>
 * (in PHP: <?= loader_icon() ?>). La dimensione si regola con il
 * font-size del contenitore o dell'icona stessa.
 * Box quadrato 1em x 1em con line-height 1: l'asse di rotazione
 * coincide col centro del glifo, così gira su se stesso senza
 * oscillare (con l'altezza di riga di default il box era
 * rettangolare e l'icona "orbitava").
 * ============================================================ */
.ac-loader {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  animation: acSpin 900ms linear infinite;
}

@keyframes acSpin {
  to { transform: rotate(360deg); }
}

.car-card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

/* Titolo dell'auto: una riga, tronca con i puntini se troppo lungo. */
.car-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
 * Specifiche in evidenza nella card: griglia 2x2, icona + dato.
 * Le icone sono SVG inline (currentColor) con viewBox diversi: il box
 * quadrato + preserveAspectRatio le adatta senza deformarle.
 * ------------------------------------------------------------ */
.car-card-specs {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.car-spec {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;                 /* consente il troncamento del dato lungo */
  font-size: 16px;
  color: #495057;
}

.car-spec-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;          /* icona centrata verticalmente */
  justify-content: center;      /* icona centrata orizzontalmente */
  background: transparent;      /* contenitore trasparente */
  color: #6c757d;               /* icone grigie: seguono currentColor */
}
.car-spec-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.car-spec-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Riga prezzo + rata mensile, sulla stessa linea. */
.car-card-pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

/* Prezzo in euro: verde. */
.car-card-price {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #198754;
}

/* Rata mensile: accanto al prezzo, più piccola e discreta, in maiuscolo,
   centrata verticalmente. */
.car-card-rate {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6c757d;
  text-transform: uppercase;
}

/* La rata resta accanto al prezzo, ma è il BLOCCO DEL FINANZIAMENTO a essere su
   due righe: sopra l'importo ("DA € 120 AL MESE"), sotto la durata ("PER 12
   MESI") più piccola. Le due righe sono allineate a destra come il blocco, che
   sta all'estremità destra della riga del prezzo.
   Così la frase non è mai lunga: la riga più larga è quella dell'importo, cioè
   quanto si leggeva prima dei mesi — nessun rischio di stringere il prezzo o di
   andare a capo da sola su schermi stretti. La durata compare solo con
   l'interruttore delle Impostazioni accesso. */
.car-card-rate {
  text-align: right;
}

/* Seconda riga: la durata. Più piccola dell'importo (14 → 12px) perché è il
   dettaglio, non il numero che il cliente cerca. 2px di stacco: sono due righe
   della stessa frase, non due blocchi. */
.car-card-rate-mesi {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
}

/* ============================================================
 * Hero above-the-fold: pieno schermo sotto la navbar.
 * Ospita un video in loop, un carosello di foto, oppure tutti e due a turno
 * (scelta dal gestionale).
 * ============================================================ */
.hero {
  width: 100svw;
  max-width: 100%;                                  /* niente scroll orizzontale con la scrollbar */
  height: calc(100svh - var(--ac-navbar-h, 65px));  /* pieno schermo meno la navbar */
  margin: 0;                                        /* niente margini di sezione */
  position: relative;
  overflow: hidden;
  background: #111;
}

/* Media (video o slide) riempiono il contenitore */
.hero .hero-media,
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
  width: 100%;
  height: 100%;
}

.hero .hero-media {
  object-fit: cover;
  display: block;
}

/* Foto E video a turno: i due riquadri stanno uno SOPRA l'altro nello stesso
   spazio. Si vede quello di turno; l'altro è spento (.is-spento, lo accende e
   spegne main.js). Senza il posizionamento assoluto starebbero in colonna e
   l'above the fold sarebbe alto il doppio.
   Il cambio è in DISSOLVENZA come tra una foto e l'altra, con la stessa durata
   del carosello di Bootstrap (0,6s). Come fa Bootstrap, NON si sfuma via quello
   che esce (si vedrebbe il nero dello sfondo in mezzo): quello che ENTRA sfuma
   SOPRA, mentre l'altro resta acceso sotto, coperto. */
.hero--doppio .hero-media,
.hero--doppio .carousel {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

/* Quello di turno sta davanti (le frecce e il velo scuro in fondo restano sopra
   a tutti e due: hanno z-index più alto o vengono disegnati dopo). */
.hero--doppio .is-sopra {
  z-index: 1;
}

/* Punto di partenza della dissolvenza: trasparente e SENZA transizione, così
   scatta a zero all'istante; togliendo la classe risale a 1 in 0,6s. */
.hero--doppio .is-trasparente {
  opacity: 0;
  transition: none;
}

.hero .carousel-item {
  background-size: cover;
  background-position: center;
}

/* Zoom-in lento (Ken Burns) sulla slide attiva: dura quanto l'immagine resta
   a schermo (6s, allineato all'intervallo del carosello) e riparte a ogni slide. */
.hero .carousel-item.active {
  animation: heroZoom 6s linear both;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* Gradiente nero sul fondo dell'hero: dà contrasto alle frecce
   anche sopra immagini chiare. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
  z-index: 1;
  pointer-events: none;
}

/* Frecce animate al centro in basso: indicano lo scroll (solo icone, senza testo) */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 60px; /* spazio dal fondo dell'above-the-fold */
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* frecce attaccate */
  color: #fff;
  pointer-events: none;
}

.hero-scroll svg {
  display: block;
}

.hero-scroll svg:nth-child(1) {
  animation: heroScrollPulse 1.6s ease-in-out infinite;
}

.hero-scroll svg:nth-child(2) {
  animation: heroScrollPulse 1.6s ease-in-out 0.2s infinite;
}

.hero-scroll svg:nth-child(3) {
  animation: heroScrollPulse 1.6s ease-in-out 0.4s infinite;
}

@keyframes heroScrollPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}

/* Rispetta la preferenza di sistema per meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .hero .carousel-item.active,
  .hero-scroll svg,
  .ac-loader {
    animation: none;
  }
}

/* ============================================================
 * Contattaci: recapiti + orari + recensioni Google e mappa.
 * ============================================================ */
/* Layout in flex (niente grid): la colonna info ha larghezza fissa e la mappa
   si espande sullo spazio rimanente. Su mobile si impila con la mappa PRIMA
   (column-reverse); su desktop torna in riga (info a sinistra, mappa a destra). */
.contatti-layout {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  margin-top: 20px;
}

.contatti-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .contatti-layout {
    flex-direction: row;
    align-items: stretch;
  }
  .contatti-info {
    flex: 0 0 340px;              /* colonna info a larghezza fissa */
  }
  .contatti-map {
    flex: 1;                      /* la mappa riempie lo spazio rimanente */
  }
}

/* Recapiti */
.contatti-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contatti-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  color: #495057;
  margin-bottom: 10px;
}
.contatti-list li:last-child { margin-bottom: 0; }
.contatti-list i { color: #0d6efd; }
.contatti-list a { color: #495057; text-decoration: none; }
.contatti-list a:hover,
.contatti-list a:focus-visible { color: #0d6efd; }

/* Sottotitolo di blocco */
.contatti-subtitle {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: #212529;
}

/* Orari di apertura: righe separate solo dalla spaziatura, senza bordi. */
.orari-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orari-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 16px;
}
.orari-giorni { color: #212529; }
.orari-ore { color: #6c757d; }

/* Bottone recensioni Google */
.google-reviews {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 12px 16px;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  text-decoration: none;
}
.google-reviews:hover,
.google-reviews:focus-visible {
  border-color: #0d6efd;
  background: #f8f9ff;
}
.google-reviews > .gr-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: block;                 /* logo "G" ufficiale a 4 colori (vedi contatti.php) */
}
.gr-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gr-title {
  font-size: 15px;
  font-weight: 600;
}
.gr-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gr-score {
  font-size: 14px;
  font-weight: 600;
  color: #6c757d;
}
.gr-count {
  font-size: 13px;
  color: #6c757d;
}
/* Stelle nel bottone Google: piene e mezza dorate (.review-stars le colora),
   le vuote grigie così si legge subito il voto reale (es. 4,5 su 5). */
.gr-rating .review-stars .bi-star {
  color: #dee2e6;
}

/* "Installa l'app": il collegamento rapido sul telefono o sul computer, ultimo
   blocco della colonna dei contatti, subito sotto il bottone Google. Nasce
   nascosto (attributo hidden nel PHP) e lo scopre assets/js/installa-app.js solo
   quando il browser è pronto a installare davvero (Android e Windows).

   Misure prese da .google-reviews qui sopra — stesso padding, stesso gap, stesso
   align-self, testo come .gr-title — perché i due bottoni si vedono uno sotto
   l'altro: due larghezze diverse impilate sembrerebbero un errore. Cambia solo il
   colore, blu: installare è l'azione, guardare le recensioni è un rimando. */
.contatti-installa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 12px 16px;
  border: 1px solid #0d6efd;
  background: #0d6efd;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.contatti-installa:hover,
.contatti-installa:focus-visible {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}
/* Riquadro di 28×28 come il logo "G" del bottone sopra, così i due bottoni hanno
   la STESSA altezza anche quando il voto Google non c'è.
   Il display:flex non è un vezzo: le icone Bootstrap portano un
   vertical-align:-.125em che allungava la riga di 2px, e il bottone finiva 56px
   contro i 54 di quello Google. Da flex il vertical-align non conta più e
   l'altezza è quella dichiarata. */
.contatti-installa i {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 1;
}

/* Mappa: placeholder finché non si integra una mappa reale/immagine statica */
.contatti-map { min-height: 260px; }
.map-placeholder {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid #dee2e6;
  background: #f1f3f5;
  color: #6c757d;
}
.map-placeholder i { font-size: 40px; color: #adb5bd; }
.map-placeholder span { font-size: 14px; }
/* Mappa reale (iframe Google Maps): riempie il riquadro come il placeholder. */
.contatti-map-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 1px solid #dee2e6;
}

/* ============================================================
 * Footer a colonne (bianco)
 * ============================================================ */
.site-footer {
  background: #fff;
  color: #212529;
  border-top: 1px solid #dee2e6;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Social */
.footer-socials {
  display: flex;
  gap: 20px;
  font-size: 26px;
  line-height: 1;
}

.footer-socials a {
  color: #212529;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: #0d6efd;
}

/* Barra footer: su desktop copyright a sinistra e social a destra sulla stessa
   riga; su mobile si impila con i social SOPRA e il copyright sotto. */
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (max-width: 575.98px) {
  .footer-bar {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

.footer-copy {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
  text-align: left;
}

/* ============================================================
 * Bottone WhatsApp flottante (tutte le pagine pubbliche).
 * Reso da footer.php solo se il numero WhatsApp è impostato.
 * Verde ufficiale WhatsApp, con gli angoli arrotondati (unica ECCEZIONE
 * voluta da Marco al design squadrato del sito), fisso in basso a destra
 * a 20px dai bordi. Sta sopra i contenuti
 * ma sotto la navbar (1050) e il visore foto a schermo intero (2000).
 * ============================================================ */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1030;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366; /* verde WhatsApp */
  color: #fff;
  font-size: 32px;
  line-height: 1;
  text-decoration: none;
  border-radius: 16px !important;   /* angoli arrotondati: eccezione al design
                                       squadrato; !important per battere il reset
                                       globale `* { border-radius: 0 !important }` */
  transition: background-color 0.15s ease-in-out;
}

.wa-fab:hover,
.wa-fab:focus-visible {
  background: #1da851; /* verde più scuro al passaggio/focus */
  color: #fff;
}

.wa-fab i {
  display: block;
}

/* Con l'hamburger visibile (sotto lg) il padding destro lo porta il pulsante,
   quindi togliamo quello destro della navbar per non sommarli: l'icona resta
   a 20px esatti dal bordo. */
@media (max-width: 991.98px) {
  .navbar > .container-fluid {
    padding-right: 0;
    flex-wrap: nowrap; /* niente a-capo: il brand si restringe accanto all'hamburger */
  }
}

.navbar-brand {
  padding: 0;
  margin-right: 10px; /* piccolo stacco tra logo e pulsante hamburger */
}

/* Sotto lg il brand prende tutto lo spazio fino all'hamburger, così il logo
   lo riempie e resta separato solo dal padding del pulsante (niente aria in
   mezzo). Usa lo spazio reale, quindi nessun problema con la scrollbar. */
@media (max-width: 991.98px) {
  .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Logo: 25px d'altezza fissa (desktop, dove il brand è dimensionato al logo). */
.navbar-brand img {
  display: block;
  height: 25px;
  width: auto;
  max-width: 100%;
}

/* Sotto lg il brand riempie lo spazio: il logo non supera la sua larghezza e
   si riduce da solo, restando in riga con l'hamburger (solo padding in mezzo). */
@media (max-width: 991.98px) {
  .navbar-brand img {
    height: auto;
    max-height: 25px;
  }
}

.navbar .nav-link {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* Hamburger: senza bordo, icona grande. z-index sopra il backdrop (1040)
   e il pannello (1045) dell'offcanvas, così la X resta cliccabile e chiude
   la sidebar quando è aperta. */
.navbar-toggler {
  border: 0;
  padding: 1px 20px; /* verticale minimo: l'icona da 32px non deve gonfiare la navbar */
  font-size: 32px; /* icone hamburger/X (32px) */
  line-height: 1;
  color: #212529;
  position: relative;
  z-index: 1046;
}

/* Icone hamburger/X: SVG a tratto squadrato, senza estremità arrotondate.
   La X sostituisce l'hamburger quando la sidebar è aperta (.is-open). */
.navbar-toggler .ac-ico {
  display: block;
}
.navbar-toggler .ac-ico-close {
  display: none;
}
.navbar-toggler.is-open .ac-ico-menu {
  display: none;
}
.navbar-toggler.is-open .ac-ico-close {
  display: block;
}

/* Sidebar: larghezza ridotta e partenza SOTTO la navbar (non a tutta altezza).
   --ac-navbar-h viene impostata via JS (su :root) con l'altezza reale della navbar. */
#sidebarNav {
  --bs-offcanvas-width: 280px;
  top: var(--ac-navbar-h, 65px);
}

/* Su schermi molto stretti (≤358px) la sidebar occupa tutta la larghezza.
   A tutta larghezza tolgo il border-left di Bootstrap, che lasciava una
   linea/striscia scura sul lato sinistro. */
@media (max-width: 358px) {
  #sidebarNav {
    --bs-offcanvas-width: 100%;
    border: 0;
  }
}

/* Voci della sidebar: testo a misura fissa; se non entra nella larghezza
   non va a capo ma si tronca con i puntini (…). */
#sidebarNav .nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Anche il backdrop parte sotto la navbar: così scurisce solo il contenuto
   della pagina e lascia la navbar in chiaro (Bootstrap lo aggancia dentro la
   navbar, quindi senza questo offset ne coprirebbe lo sfondo). */
.offcanvas-backdrop {
  top: var(--ac-navbar-h, 65px);
  height: calc(100% - var(--ac-navbar-h, 65px));
}

/* Sul mobile la sidebar è a colonna: le voci in alto, il tasto "Chiudi" in
   fondo (spinto giù da mt-auto sul bottone). */
@media (max-width: 991.98px) {
  #sidebarNav .offcanvas-body {
    display: flex;
    flex-direction: column;
  }
}

/* ============================================================
 * Card del catalogo come link alla scheda pubblica (/automobile/{slug}):
 * il testo eredita i suoi colori, niente sottolineatura; al passaggio
 * (e col focus da tastiera) il bordo della card si scurisce.
 * ============================================================ */
.car-card-link {
  display: block;
  height: 100%;              /* riempie l'altezza della riga della griglia:
                                così la card interna può stirarsi anch'essa e
                                le righe restano allineate (card senza prezzo). */
  color: inherit;
  text-decoration: none;
}
.car-card-link .car-card {
  height: 100%;
}
.car-card-link:hover .car-card,
.car-card-link:focus-visible .car-card {
  border-color: #212529;
}

/* ============================================================
 * Scheda pubblica dell'auto (automobile.php): galleria a sinistra,
 * pannello informazioni a destra; una colonna sotto i 992px.
 * ============================================================ */
.car-detail-back {
  /* Allineato al bordo SINISTRO della griglia centrata (galleria + specifiche):
     stesso ingombro del contenuto del grid (traccia galleria + 20px di gap +
     370px delle specifiche) e margini automatici, così il link "Catalogo" parte
     esattamente sopra la foto invece che al bordo della pagina. I valori seguono
     i breakpoint di .car-detail-grid qui sotto. */
  max-width: 850px;             /* 460 galleria + 20 gap + 370 specifiche */
  margin: 0 auto 20px;
  font-size: 16px;
}
.car-detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #495057;
  text-decoration: none;
}
.car-detail-back a:hover {
  color: #212529;
  text-decoration: underline;
}

.car-detail-grid {
  display: grid;
  /* Galleria a larghezza massima fissa (460px, cresce su schermi larghi: la
     copertina è quadrata 1:1, con una colonna proporzionale in fr crescerebbe
     troppo) e colonna specifiche fissa (370px). Il blocco NON si stira: con
     `justify-content: center` galleria + specifiche restano CENTRATE nella pagina,
     invece di stare a sinistra lasciando spazio vuoto a destra sugli schermi
     larghi. Il resto del sito resta a piena larghezza. */
  grid-template-columns: minmax(0, 460px) minmax(0, 370px);
  justify-content: center;
  gap: 20px;
  align-items: start;
}
@media (max-width: 991.98px) {
  .car-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Da staccati (una colonna) la galleria e il pannello "scheda tecnica" vanno a
     LARGHEZZA PIENA: i cap 460px / 370px valgono solo nel layout a due colonne.
     Selettori più specifici (via .car-detail-grid) così vincono sui cap base
     anche se questa media query viene prima nel file. */
  .car-detail-grid .car-detail-gallery,
  .car-detail-grid .car-detail-col {
    max-width: none;
  }
}

/* Galleria: foto grande sopra, miniature sotto. Il max-width vale anche
   nella vista a una colonna (tablet/mobile), dove la griglia non limita. */
.car-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 460px;
}

/* Schermi larghi: il container media (galleria) si allarga per riempire meglio
   lo spazio e mostrare foto più grandi. Vanno alzati INSIEME la traccia del grid
   e il max-width della galleria (sennò la griglia limita a 460 comunque). La
   colonna "scheda tecnica" resta 370px. Queste regole stanno DOPO quelle base,
   così vincono per ordine (i selettori .car-detail-grid ... battono comunque per
   specificità il cap della galleria). */
@media (min-width: 1200px) {
  .car-detail-grid {
    grid-template-columns: minmax(0, 560px) minmax(0, 370px);
  }
  .car-detail-grid .car-detail-gallery {
    max-width: 560px;
  }
  .car-detail-back {
    max-width: 950px;           /* 560 galleria + 20 gap + 370 specifiche */
  }
}
@media (min-width: 1600px) {
  .car-detail-grid {
    grid-template-columns: minmax(0, 680px) minmax(0, 370px);
  }
  .car-detail-grid .car-detail-gallery {
    max-width: 680px;
  }
  .car-detail-back {
    max-width: 1070px;          /* 680 galleria + 20 gap + 370 specifiche */
  }
}

.car-detail-cover {
  margin: 0;
  /* Sempre quadrata, come .car-card-media del catalogo: le foto delle auto
     sono pensate 1:1 (anche la scheda tecnica è 1080×1080). */
  aspect-ratio: 1 / 1;
  position: relative;       /* ancora per il badge "Neopatentati" sovrapposto */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #ced4da;          /* segnaposto (icona auto) quando mancano foto */
  font-size: 64px;
}
.car-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La foto grande si apre a schermo intero con un click. */
.car-detail-cover img {
  cursor: pointer;
}

/* Niente drag nativo (fantasma) sulle immagini della vetrina; il JS mette
   anche draggable=false (per Firefox, che ignora questa proprietà CSS). */
.car-card-media img,
.car-detail-cover img,
.car-thumb img,
.car-lightbox img {
  -webkit-user-drag: none;
}

/* Visore a schermo intero (lightbox): sfondo scuro, foto centrata, X in alto
   a destra. Sta sopra la navbar (z-index 1050). */
.car-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
}
.car-lightbox.is-open {
  display: flex;
}
.car-lightbox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.car-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.car-lightbox-close svg {
  display: block;
}

/* Frecce foto precedente/successiva, sovrapposte ai lati della foto grande
   (solo quando le foto sono più di una). */
.car-cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  cursor: pointer;
  z-index: 1;
}
.car-cover-prev { left: 10px; }
.car-cover-next { right: 10px; }
.car-cover-nav:hover {
  border-color: #212529;
}
.car-cover-nav svg {
  display: block;
}

/* Miniature su UNA riga sola: nastro scorrevole tra due frecce. L'overflow
   del nastro è NASCOSTO: su desktop si scorre soltanto con le frecce (scroll
   programmato da main.js, con animazione), mai con rotellina o barra; sui
   dispositivi touch il JS aggiunge is-touch e si può scorrere anche col dito
   (barra comunque invisibile). Le frecce compaiono solo quando le miniature
   non entrano tutte (classe has-overflow, dal JS) e si spengono a fine corsa. */
.car-detail-thumbs {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.car-thumbs-scroller {
  position: relative;        /* offsetLeft delle miniature relativo al nastro */
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
}
.car-detail-thumbs.is-touch .car-thumbs-scroller {
  overflow-x: auto;
  scrollbar-width: none;
}
.car-detail-thumbs.is-touch .car-thumbs-scroller::-webkit-scrollbar {
  display: none;
}
.car-thumbs-nav {
  display: none;             /* con has-overflow diventa flex */
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dee2e6;
  background: #fff;
  color: #212529;
  cursor: pointer;
}
.car-detail-thumbs.has-overflow .car-thumbs-nav {
  display: flex;
}
.car-thumbs-nav:hover:not([disabled]) {
  border-color: #212529;
}
.car-thumbs-nav[disabled] {
  color: #ced4da;            /* a inizio/fine corsa la freccia si spegne */
  cursor: default;
}
.car-thumbs-nav svg {
  display: block;
}
.car-thumb {
  position: relative;        /* ancora per il velo con l'occhio */
  flex: 0 0 72px;            /* larghezza FISSA: è lei a decidere l'overflow */
  width: 72px;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #dee2e6;
  background: #fff;
  cursor: pointer;
}
/* L'anello di focus globale (2px FUORI dal box) verrebbe tagliato
   dall'overflow del nastro: sulle miniature lo si porta dentro il riquadro. */
.car-thumb:focus-visible {
  outline-offset: -3px;
}

/* Indicatore della foto IN VISIONE: la miniatura della foto mostrata nel
   riquadro grande porta un leggero velo nero al 50% con l'occhio al centro
   (fisso, non è un effetto al passaggio: dice "stai guardando questa"). */
.car-thumb-view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;      /* il click resta alla miniatura sotto */
}
.car-thumb.is-active .car-thumb-view {
  opacity: 1;
}
.car-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.car-thumb.is-active {
  border-color: #212529;
}

/* Colonna destra: la card delle informazioni e, sotto, le card accessorie
   (es. passaggio di proprietà), impilate a 20px. Il tetto di larghezza è lo
   STESSO delle card del gestionale (370px, come .gest-editor-col e le colonne
   dei form): la card delle specifiche non si allarga mai a tutto lo spazio. */
.car-detail-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 370px;
}

/* Pannello informazioni: stessa "carta" delle card del catalogo. */
.car-detail-info {
  border: 1px solid #dee2e6;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Card accessoria: stessa cornice del pannello, contenuto libero. */
.car-detail-box {
  border: 1px solid #dee2e6;
  background: #fff;
  padding: 20px;
}

/* Note pubbliche: il testo scritto nel gestionale, nella sua card sotto il
   pannello informazioni. Solo testo, niente titolo: gli a-capo li porta il
   nl2br del PHP. */
.car-detail-note p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
}

/* Il banner del finanziamento sta FUORI dalla card del passaggio: è un figlio
   diretto della colonna .car-detail-col, impilato dagli altri box col gap 20px
   della colonna → via il suo margine-alto autonomo (sennò si sommerebbe al gap). */
.car-detail-col > .finanz-banner {
  margin-top: 0;
}

.car-detail-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: #212529;
}

/* Specifiche complete: griglia 2 colonne, icona + etichetta piccola + dato. */
.car-detail-specs {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  width: 100%;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.car-spec-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;             /* consente il troncamento del dato lungo */
}
.car-spec-label {
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  color: #6c757d;
}
.car-spec-dato {
  font-size: 16px;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prezzo e rata: la riga riusa per intero .car-card-pricing/.car-card-price/
   .car-card-rate del catalogo. Qui solo la larghezza: nel pannello (flex
   column con align-items:flex-start) senza width il blocco si stringerebbe
   e lo space-between non porterebbe la rata a destra. */
.car-detail-pricing {
  width: 100%;
}