/* ============================================================
   Autopool — Direzione A (SKIN). Solo aspetto.
   Layout e responsive = Bootstrap. Caricata DOPO Bootstrap.
   ============================================================ */
:root{
  --paper:#F6F3EC; --paper-2:#EDE6D5; --card:#FCFBF7;
  --ink:#17150F; --blue:#2F66C0; --blue-2:#5E93E0;
  --line:#E4DECF; --muted:#8F897C; --muted-2:#6B6659;

  /* aggancio al theming di Bootstrap */
  --bs-primary:#2F66C0; --bs-primary-rgb:47,102,192;
  --bs-link-color:#2F66C0; --bs-link-hover-color:#255499;
  --bs-body-color:#17150F; --bs-body-bg:#F6F3EC;
  --bs-body-font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  --bs-border-color:#E4DECF;
}
body{ font-family:'Public Sans',system-ui,sans-serif; color:var(--ink); background:var(--paper); }
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.card-title{
  font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
a{ text-decoration:none; }
.text-primary{ color:var(--blue)!important; }
.text-muted{ color:var(--muted-2)!important; }
.bg-ink{ background:var(--ink)!important; }
.text-paper{ color:var(--paper)!important; }
.section-paper2{ background:var(--paper-2); }
.eyebrow{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); }

.btn{ border-radius:9px; font-weight:700; }
.btn-primary{ --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue);
  --bs-btn-hover-bg:#255499; --bs-btn-hover-border-color:#255499; }
.btn-ink{ background:var(--ink); color:#fff; border:0; }
.btn-ink:hover{ background:#000; color:#fff; }
.btn-pill{ border-radius:999px; }

.card{ border-radius:12px; border:1px solid var(--line); background:var(--card); }

.topbar{ background:var(--ink); color:#CFC9BC; font-size:.75rem; }
.topbar a{ color:#fff; }
.topbar .dot{ color:var(--blue-2); }

.dira-navbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.dira-navbar .nav-link{ font-weight:600; color:var(--ink); }
.dira-navbar .nav-link.active, .dira-navbar .nav-link:hover{ color:var(--blue); }
/* Pulsante "Chiama" mobile accanto all'hamburger */
.nav-icon-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:40px; border:1px solid var(--line); border-radius:.5rem;
  color:var(--blue); background:transparent; font-size:1.25rem; line-height:1; text-decoration:none; }
.nav-icon-btn:hover, .nav-icon-btn:focus{ background:var(--blue); color:#fff; }

.hero-a{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; }
/* Sfondo hero come background-image: cover non distorce mai (nemmeno durante il load). */
.hero-a .hero-bg{ position:absolute; inset:0; z-index:0;
  background:var(--ink) url(../images/hero.jpg) center center / cover no-repeat; }
.hero-a .hero-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(20,18,13,.95),rgba(20,18,13,.82) 42%,rgba(20,18,13,.4)); }
.hero-a .hero-content{ position:relative; z-index:2; }
.hero-a .hero-stat{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.75rem; }

.search-card{ background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.4); }
.search-card label{ font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2); display:block; line-height:1; }
/* Label piccola uppercase (filtri catalogo + form) */
.filter-label{ font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2); display:block; line-height:1; }
/* Titolo di sezione nei form: heading scuro con divisore, distinto dalle label */
.form-section{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-.01em;
  color:var(--ink); padding-bottom:.55rem; margin-bottom:1rem; border-bottom:1px solid var(--line); }
/* Conferma invio form (stile Direzione A) */
.notice-ok{ display:flex; align-items:flex-start; gap:14px; background:#ECF6EF; border:1px solid #C9E6D2;
  border-radius:12px; padding:16px 18px; margin-bottom:1.5rem; }
.notice-ok__icon{ width:38px; height:38px; border-radius:999px; background:#2F9E5B; color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.notice-ok__title{ font-family:'Archivo',sans-serif; font-weight:800; color:var(--ink); line-height:1.2; }
.notice-ok__text{ font-size:.9rem; color:var(--muted-2); margin-top:2px; }
/* Toggle "Più filtri" con chevron che ruota all'apertura */
.filter-toggle{ min-height:38px; display:inline-flex; align-items:center; gap:.4rem; line-height:1.2; }
.filter-caret{ font-size:.8em; transition:transform .15s ease; }
.filter-toggle[aria-expanded="true"] .filter-caret{ transform:rotate(180deg); }

/* Card veicolo cliccabile per intero (stretched-link su "Dettagli") + hover di feedback */
.car-card{ position:relative; transition:transform .15s ease, box-shadow .15s ease; }
.car-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px rgba(0,0,0,.4); }
.car-card .car-photo{ aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .3s ease; }
.car-card:hover .car-photo{ transform:scale(1.04); }
.car-card .price{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.15rem; white-space:nowrap; }
/* Griglia 2-up stretta su mobile: prezzo e link non si spezzano mai a metà;
   se non stanno in riga vanno a capo come unità intere. */
@media (max-width:575.98px){
  .car-card .card-body{ padding:.75rem !important; }
  .car-card .price{ font-size:1rem; }
  .car-card .detail-link{ font-size:.85rem; }
  .car-card .card-title{ font-size:.95rem; }
}
.chip{ font-size:.72rem; color:var(--muted-2); background:#EEE9DD; padding:3px 8px; border-radius:5px; display:inline-block; }
.badge-novita{ background:var(--blue); color:#fff; font-size:.65rem; font-weight:700; }

.cat-card .cat-photo{ height:120px; object-fit:cover; width:100%; }
.cat-card .cat-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; }
.cat-card .cat-count{ font-size:12px; color:#8B8474; }

/* Catalogo: la card riempie la colonna ma lascia posto al bottone "Confronta"
   (h-100 da sola faceva traboccare il bottone nella riga sotto). */
.car-cell > .car-card{ height:auto !important; flex:1 1 auto; }

/* Sezione servizi (Direzione A) — due card di pari altezza, bottone full-width in fondo */
.svc-card{ border-radius:14px; padding:30px; display:flex; flex-direction:column; height:100%; }
.svc-card.svc-dark{ background:var(--ink); color:var(--paper); }
.svc-card.svc-light{ background:var(--card); border:1px solid var(--line); color:var(--ink); }
.svc-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.svc-dark  .svc-eyebrow{ color:var(--blue-2); }
.svc-light .svc-eyebrow{ color:var(--blue); }
.svc-title{ font-family:'Archivo',sans-serif; font-weight:800; font-size:22px; letter-spacing:-.02em; margin-bottom:18px; }
.svc-list{ display:flex; flex-direction:column; gap:13px; margin-bottom:24px; }
.svc-item{ display:flex; gap:11px; align-items:flex-start; }
.svc-check{ width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; line-height:1; flex:none; margin-top:1px; }
.svc-dark  .svc-check{ background:var(--blue); color:#fff; }
.svc-light .svc-check{ background:#EEF3FB; color:var(--blue); }
.svc-item .svc-t{ font-weight:700; font-size:14.5px; }
.svc-item .svc-d{ font-size:13px; line-height:1.5; }
.svc-dark  .svc-item .svc-d{ color:#9C968A; }
.svc-light .svc-item .svc-d{ color:var(--muted-2); }
.svc-btn{ margin-top:auto; display:block; width:100%; text-align:center; font-weight:700; font-size:14px;
  padding:13px 22px; border-radius:9px; text-decoration:none; }
.svc-btn-solid{ background:var(--blue); color:#fff; }
.svc-btn-solid:hover{ background:#2657a8; color:#fff; }
.svc-btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.svc-btn-outline:hover{ background:var(--ink); color:#fff; }

/* Dettaglio auto */
.veh-badge{ background:rgba(255,255,255,.10); color:var(--paper); border:1px solid rgba(255,255,255,.18);
  font-size:.8rem; font-weight:600; padding:4px 12px; border-radius:999px; }
.veh-price{ font-family:'Archivo',sans-serif; font-weight:800; line-height:1;
  font-size:clamp(1.8rem, 4vw, 2.6rem); color:var(--paper); }
.cmp-price{ font-family:'Archivo',sans-serif; font-weight:800; font-size:1.4rem; color:var(--ink); line-height:1; }
/* Icona servizio (pagine informative) */
.svc-icon{ width:48px; height:48px; border-radius:12px; background:#EEF3FB; color:var(--blue); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
/* Numeri "Chi siamo" */
.chi-stat{ font-family:'Archivo',sans-serif; font-weight:800; font-size:2.4rem; color:var(--ink); line-height:1; }
.chi-stat-label{ font-size:.9rem; color:var(--muted-2); margin-top:6px; }
/* Barra confronto flottante: dock con scrim sfumato + pill centrata */
.compare-dock{ position:fixed; left:0; right:0; bottom:0; z-index:1080; pointer-events:none;
  display:flex; justify-content:center; padding:56px 12px 20px;
  background:linear-gradient(to top, var(--paper) 22%, rgba(246,243,236,0)); }
.compare-fab{ pointer-events:auto; display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.35); border-radius:999px; padding:8px 8px 8px 20px;
  max-width:calc(100vw - 24px); }
.compare-fab #compare-count{ color:var(--ink); white-space:nowrap; }
@media (min-width:768px){
  .compare-dock{ padding:76px 12px 28px; }
  .compare-fab{ gap:24px; padding:12px 12px 12px 30px; box-shadow:0 22px 55px -12px rgba(0,0,0,.5); }
  .compare-fab #compare-count{ font-size:1.15rem; }
  .compare-fab .btn{ font-size:1.05rem; padding:.65rem 1.75rem; }
}
.spec-row{ padding:.55rem 0; border-bottom:1px solid var(--line); }
.spec-k{ font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px; }
.spec-v{ font-weight:600; color:var(--ink); }
.thumb-img{ transition:border-color .12s ease, opacity .12s ease; opacity:.72; }
.thumb-img:hover{ opacity:1; }
.thumb-img.active{ opacity:1; border-color:var(--blue)!important; box-shadow:0 0 0 1px var(--blue); }

.cta-blue{ background:var(--blue); color:#fff; }
.cta-blue .cta-inner{ position:relative; z-index:2; max-width:520px; padding:52px 0; }
.cta-blue .cta-title{ font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(1.7rem, 3.2vw, 34px); line-height:1.05; letter-spacing:-.02em; }
.cta-blue .cta-photo{ position:absolute; top:0; right:0; bottom:0; width:42%; z-index:1; }
.cta-blue .cta-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
/* raccordo morbido tra la fascia blu e la foto */
.cta-blue .cta-photo::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--blue), rgba(47,102,192,0) 45%); }

.footer-a{ background:var(--ink); color:#B9B2A3; }
.footer-a h6{ color:var(--paper); }
.footer-a a{ color:#B9B2A3; }
.footer-a a:hover{ color:#fff; }

@media (max-width: 991.98px){
  .hero-a .hero-overlay{ background:linear-gradient(180deg,rgba(20,18,13,.7),rgba(20,18,13,.92)); }
}

/* Titolo hero — Direzione A: Archivo 800, tight leading/tracking (non il display-4 di BS a peso 300). */
.hero-a .hero-title{ font-family:'Archivo',sans-serif; font-weight:800;
  font-size:clamp(2.1rem, 5.2vw, 52px); line-height:1.02; letter-spacing:-.03em; }
.hero-a .hero-inner{ max-width:600px; }
/* Solo padding verticale: quello orizzontale resta quello di .container,
   così il blocco hero si allinea al bordo della card di ricerca (stesso container). */
.hero-a .hero-content{ position:relative; z-index:2; padding-top:60px; padding-bottom:128px; }
/* La search card sborda dall'hero sulla fascia beige sottostante:
   metà alta sul dark, metà bassa sul beige (come nel mockup). */
.search-lift{ margin-top:-44px; position:relative; z-index:3; }

/* Logo brand navbar — mark + freccia + "autopool" in Anton (riferimento Direzione A). */
.brand-a{ gap:5px; }
.brand-a .brand-arrow{ margin:-2px 2px 0 -4px; }
.brand-a .brand-word{ font-family:'Anton',Impact,sans-serif; font-size:28px;
  letter-spacing:-.01em; color:#2F66C0; line-height:1; }
/* Stessa lockup in bianco per il footer (sfondo scuro) → spaziatura identica alla navbar */
.brand-a.brand-light img{ filter:brightness(0) invert(1); }
.brand-a.brand-light .brand-word{ color:var(--paper); }