/* ═══════════════════════════════════════════════════════════════════
   Funnel Atlas — /prenota e /checkout, 2026
   Deroghe al brand valide SOLO dentro il funnel (vedi
   atlas-brand/PALETTE.txt § Deroghe funnel): chip a pillola e fondo
   radiale dietro la foto dell'auto.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Una sola barra in testa ──
   Dentro il funnel la nav del sito sparisce e il logo entra nella barra nera:
   logo, ricerca fatta, lingua, area clienti e telefono su una riga sola. La
   nav resta nel DOM (è il partial condiviso col sito e tiene il selettore
   lingua che Atlas.lang usa), qui è solo nascosta. */
.nav { display: none !important; }

.fn-summary { background: #000; color: #FFF; }
.fn-summary-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 0;
}
.fn-brand { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; text-decoration: none; }
.fn-brand .logo-word { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.04em; color: #FFF; }
.fn-brand .logo-word b { color: #D4FF00; font-weight: 800; }
.fn-brand .logo-dash { display: flex; gap: 3px; }
.fn-brand .logo-dash i { display: block; width: 14px; height: 3px; background: #D4FF00; }
.fn-brand .logo-dash i:last-child { width: 7px; }

.fn-summary-box {
  flex: 0 1 auto;
  margin: 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #262626;
  background: #0A0A0A;
  padding: 11px 18px;
}
.fn-summary-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fn-summary-place {
  font-size: 16px;
  font-weight: 600;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fn-summary-when { font-size: 14px; color: #A5A5A0; }
.fn-summary-when:empty { display: none; }
.fn-summary-edit {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #D4FF00;
  text-decoration: none;
  cursor: pointer;
}
.fn-summary-edit:hover { color: #B8DD00; }

/* I due select restano nel DOM come sorgente di verita' dei filtri, ma non
   si vedono: [hidden] da solo perde contro il display della barra in
   atlas.css, quindi serve dirlo qui. */
.result-filters-bar[hidden] { display: none !important; }

/* ── Titoli del funnel: la domanda, grande e in maiuscolo ── */
.fn-head { padding: 34px 0 0; }
.fn-title,
.fn-h2 {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #000;
}
.fn-title { font-size: clamp(30px, 5vw, 46px); }
.fn-h2 { font-size: clamp(26px, 4vw, 38px); }
.fn-h3 {
  margin: 40px 0 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.02em;
  color: #000;
}
.fn-sub-title,
.fn-lead { margin: 14px 0 24px; font-size: 16px; color: #55554F; max-width: 640px; }

/* Barra filtri: pillole a sinistra (scorrono su mobile), conteggio a destra. */
.fn-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #E6E6E1;
}
.fn-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fn-chips::-webkit-scrollbar { display: none; }
.fn-chip {
  flex: 0 0 auto;
  border: 1px solid #D8D8D2;
  border-radius: 999px;
  background: #FFF;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 15px;
  color: #55554F;
  cursor: pointer;
}
.fn-chip:hover { border-color: #000; color: #000; }
.fn-chip[aria-pressed="true"] { background: #D4FF00; border-color: #D4FF00; color: #000; font-weight: 600; }
.fn-count { flex: 0 0 auto; margin: 0; padding: 0; font-size: 14px; color: #55554F; white-space: nowrap; }

/* Massimo 3 per riga: quando una card si apre, il pannello prende il suo
   stesso posto in griglia (grid-column:1/-1 in funnel-panel.css) e le card
   successive scendono da sole, senza calcoli in JS.
   Selettore #results.fn-grid (non solo .fn-grid): atlas.css definisce anche
   lui #results per la stessa griglia (lavoro in corso su un'altra sessione,
   redesign ispirato a SIXT) — l'ID vince sulla sola classe, quindi qui la
   regola funnel-specific deve avere la stessa specificità per prevalere. */
#results.fn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 28px 0 40px;
}
@media (max-width: 1000px) {
  #results.fn-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Lo skeleton di attesa (atlas.css) eredita il tema chiaro del body: senza
   questo override, per l'attimo del caricamento si vede un box chiaro/vecchio
   stile invece dell'anteprima nera della card che sta per arrivare. */
#results.fn-grid .skeleton {
  background: linear-gradient(90deg, #0A0A0A 25%, #1A1A1A 50%, #0A0A0A 75%);
  background-size: 200% 100%;
  border: 1px solid #262626;
  border-radius: 16px;
}

.fn-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #262626;
  border-radius: 16px;
  overflow: hidden;
  background: #0A0A0A;
  color: #FFF;
  text-decoration: none;
}
.fn-card:hover { border-color: #3A3A3A; }
.fn-card:focus-visible { outline: 3px solid #D4FF00; outline-offset: 2px; }

/* Titolo = categoria (City, SUV compatto…): e' la scelta che il cliente sta
   facendo. Il modello, che e' un esempio, sta nel sottotitolo. */
.fn-card-head { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 5px; }
.fn-card-name {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #FFF;
}
.fn-card-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #A5A5A0;
}

.fn-specs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px 0; margin: 0; list-style: none; }
.fn-spec { border: 1px solid #262626; border-radius: 999px; padding: 6px 12px; font-size: 12px; color: #A5A5A0; }

/* Fascia foto: fondo scuro e sagoma dentro, come nel mockup. Vale perche' le
   foto in cars.photo_url sono scontornate su PNG trasparente; se una foto
   arriva col fondo bianco si vedra' il rettangolo, e va riesportata. */
.fn-photo {
  position: relative;
  margin-top: 16px;
  height: 210px;
  border-top: 1px solid #1C1C1C;
  border-bottom: 1px solid #1C1C1C;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Deroga al brand, solo nel funnel: il radiale stacca la sagoma dal nero. */
  background: radial-gradient(ellipse 70% 80% at 50% 58%, #2E2E2C 0%, #171716 55%, #0A0A0A 100%);
}
.fn-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fn-photo-ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5C5C58;
}
.fn-badge {
  position: absolute;
  top: 14px;
  left: 0;
  background: #D4FF00;
  color: #000;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  z-index: 1;
}

.fn-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; padding: 18px 20px 0; }
.fn-price-day { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.03em; color: #FFF; }
.fn-price-unit { font-size: 15px; font-weight: 600; color: #FFF; }
.fn-price-total { font-size: 14px; color: #8A8A85; }
.fn-price-note { padding: 8px 20px 0; margin: 0; font-size: 13px; color: #A5A5A0; }

/* La riga gialla è la promessa del noleggio (da cars.description) e chiude la
   card: nessun pulsante, e' la card intera il link al checkout. Il markup del
   pulsante resta solo per lo stato "prenotazioni sospese". */
.fn-foot { margin: 18px 0 0; border-top: 1px solid #262626; padding: 16px 20px; font-size: 13px; font-weight: 600; color: #D4FF00; }
.fn-cta:not(.fn-cta--off) { display: none; }
.fn-cta--off {
  margin-top: auto;
  background: #262626;
  color: #A5A5A0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 16px;
  text-align: center;
}

@media (max-width: 1000px) {
  .fn-summary-inner { flex-wrap: wrap; }
  .fn-summary-box { order: 3; flex: 1 1 100%; }
}
@media (max-width: 720px) {
  .fn-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fn-chips { width: 100%; }
  #results.fn-grid { grid-template-columns: 1fr; }
  .fn-photo { height: 230px; }
}