/* ==========================================================================
   1) DESIGN TOKENS (palette, tipografia, spessori)
   --------------------------------------------------------------------------
   Modifica QUI per cambiare look & feel globale.
   ========================================================================== */
:root {
  --tpb-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Background complessivo pagina (attualmente bianco) */
  --tpb-bg: #FFFFFF;

  /* Colori base UI */
  --tpb-card: #F0F3FF;   /* sfondo card scure */
  --tpb-ink: #0E111B;    /* testo principale su scuro */
  --tpb-ink-muted: #0e111b; /* testo secondario */
  --tpb-stroke: #1f2a44; /* bordi */
  --tpb-accent: #0068D8; /* blu brand (bottoni primari) */
  --tpb-accent-2: #6366f1; /* indigo (outline stato/selected) */

  /* Stati */
  --tpb-success: #22c55e;
  --tpb-danger: #ef4444;

  /* Chips / badge */
  --tpb-chip-dark: #111827;
  --tpb-chip-light: #ffffff;
}

/* ==========================================================================
   2) BASE PAGE & CONTAINERS
   --------------------------------------------------------------------------
   Regole globali e larghezze massime coerenti per i contenitori principali.
   ========================================================================== */
body { background: var(--tpb-bg); }

.tpb6 {
  color: var(--tpb-ink);
  font-family: var(--tpb-font);
}

/* Stessa larghezza per: hero (step 1), layout (step 2/2.5/4), summary (step 4) */
.tpb6 .tpb6-hero-inner,
.tpb6 .tpb6-layout,
.tpb6 .tpb6-summary {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

/* ==========================================================================
   3) ATOMI / COMPONENTI RICORRENTI
   -------------------------------------------------------------------------- */

/* Card generica */
.tpb6 .tpb6-card {
  background: var(--tpb-card);
  border: 1px solid var(--tpb-stroke);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45);
}

/* Titoli (usa .tpb6-h3 per i titoli di sezione) */
.tpb6 h3.tpb6-h3,
.tpb6 h4,
.tpb6 h5 {
  margin: 8px 0 14px;
  font-weight: 800;
  letter-spacing: .2px;
}
.tpb6 h3.tpb6-h3 { font-size: 22px; }
.tpb6 h4         { font-size: 18px; }
.tpb6 h5         { font-size: 15px; opacity: .85; }

/* Label e meta (testi secondari) */
.tpb6 .tpb6-label { color: var(--tpb-ink-muted); font-size: 12px; margin: 2px 0 6px; }
.tpb6 .tpb6-meta  { color: var(--tpb-ink-muted); font-size: 12px; }

/* Inputs (date/time/select/textarea) */
.tpb6 .tpb6-input,
.tpb6 select.tpb6-input,
.tpb6 textarea.tpb6-input {
  width: 100%;
  background: #FFFFFF;            /* sfondo input su tema scuro */
  color: var(--tpb-ink);
  border: 1px solid #1a2540;
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tpb6 .tpb6-input:focus {
  border-color: var(--tpb-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.tpb6 textarea.tpb6-input { min-height: 110px; resize: vertical; }

/* Griglia interna 2 colonne (usa .tpb6-row + .tpb6-col) */
.tpb6 .tpb6-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.tpb6 .tpb6-col { display: flex; flex-direction: column; }

/* Bottoni */
.tpb6 .tpb6-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tpb-accent);
  color: #fff; border: 0; border-radius: 999px;
  padding: 12px 18px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(59,130,246,.8);
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease;
}
.tpb6 .tpb6-btn:hover { transform: translateY(-1px); }
.tpb6 .tpb6-btn.ghost {
  background: #FFFFFF; color: var(--tpb-ink);
  border: 1px solid var(--tpb-stroke);
  box-shadow: none;
}
.tpb6 .tpb6-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* Messaggi inline */
.tpb6 .tpb6-msg { color: #fbbf24; margin-top: 8px; min-height: 18px; }

.tpb6 .is-disabled { opacity:.6; pointer-events:none; }

/* ==========================================================================
   4) STEP 1 – HERO (mappa + box date/ore)
   -------------------------------------------------------------------------- */
.tpb6 .tpb6-hero { padding: 28px 0 8px; }

/* Griglia hero: mappa 1.25fr, box 1fr */
.tpb6 .tpb6-hero-inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.25fr 1fr;
}

/* Mappa */
.tpb6 .tpb6-hero-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 14px;
}

/* Box a destra con i campi data/ora */
.tpb6 .tpb6-hero-box {
  background: var(--tpb-card);
  border: 1px solid var(--tpb-stroke);
  border-radius: 14px;
  padding: 18px;
}

/* CTA “Calcola preventivo” centrata e distanziata dai campi */
button#tpb6-get-quote {
  display: block;
  margin: 20px auto 0; /* spazio sopra e centratura */
  position: relative;
  top: 10px;           /* piccolo offset verticale */
}

/* ==========================================================================
   5) STEP 2 / 2.5 – LAYOUT + RIEPILOGO LATERALE + LISTE/ADDON
   -------------------------------------------------------------------------- */

/* Layout a due colonne (sidebar a sinistra) solo da desktop */
@media (min-width: 1024px) {
  .tpb6 .tpb6-layout {
    display: grid;
    gap: 24px;
    align-items: start;
    grid-template-columns: 360px minmax(0, 1fr);
  }
  .tpb6 .tpb6-side { position: sticky; top: 20px; }
}

/* “Date prenotazione” nella sidebar */
.tpb6 .tpb6-datebox {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border: 1px dashed var(--tpb-stroke);
  border-radius: 10px;
  margin: 8px 0;
}
.tpb6 .tpb6-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: #FFFFFF; color: var(--tpb-ink-muted);
}
.tpb6 .tpb6-val { font-weight: 700; }

/* Righe riepilogo costo e totale nella sidebar */
.tpb6 .tpb6-rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.tpb6 .tpb6-total   { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--tpb-stroke); }
.tpb6 .tpb6-total strong { font-size: 18px; }

/* Lista risultati/veicoli */
.tpb6 .tpb6-results { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tpb6 .tpb6-result  { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; }
.tpb6 .tpb6-result .tpb6-thumb { width: 72px; height: 48px; border-radius: 8px; background: linear-gradient(180deg,#0e1533,#0a0f21); border: 1px solid var(--tpb-stroke); }
.tpb6 .tpb6-result .tpb6-title { font-weight: 700; margin-bottom: 2px; }
.tpb6 .tpb6-result .tpb6-price { font-weight: 800; }
.tpb6 .tpb6-result.is-picked   { outline: 2px solid var(--tpb-accent-2); }
.tpb6 .tpb6-model-results { background:#FFFFFF; }

/* Riga addon (lavaggio) */
.tpb6 .tpb6-addon { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.tpb6 .tpb6-addon-ctrls { display: flex; gap: 10px; align-items: center; }
.tpb6 .tpb6-qty {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--tpb-stroke);
  background: var(--tpb-accent); color: var(--tpb-ink); font-size: 18px; cursor: pointer;
}
.tpb6 .tpb6-num {
  width: 58px; height: 36px; text-align: center; border-radius: 10px;
  border: 1px solid var(--tpb-stroke); background: #0a0f21; color: var(--tpb-ink);
}

/* Quando addon è selezionato (feedback visivo) */
.tpb6-card.tpb6-addon.is-picked { outline: 2px solid #6366f1; }

button#tpb6-get-model ,
button#tpb6-get-wash  {
  background: var(--tpb-accent);
  color: #fff; border: 0; border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(59,130,246,.8);
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease;
}

div#tpb6-chip-ingresso{
  background: var(--tpb-ink);
  color: #FFFFFF;
}

/* --- THUMB GRANDE --- */
.tpb6 { --tpb6-thumb: 250px; }           /* desktop: 250x250 */

.tpb6 .tpb6-result{
  display: grid;
  grid-template-columns: var(--tpb6-thumb) 1fr auto;  /* thumb | testo | bottone */
  gap: 16px;
  align-items: center;
}

.tpb6 .tpb6-thumb{
  width: var(--tpb6-thumb);
  height: var(--tpb6-thumb);
  border-radius: 14px;
  overflow: hidden;
  background: #eef2ff;
  flex: 0 0 var(--tpb6-thumb);
}

.tpb6 .tpb6-body{ min-width: 0; }        /* evita overflow del testo */
.tpb6 .tpb6-right{ display:flex; align-items:center; }

/* --- RESPONSIVE: non sfascia su schermi piccoli --- */
@media (max-width: 900px){
  .tpb6 { --tpb6-thumb: 180px; }         /* tablet */
  .tpb6 .tpb6-result{
    grid-template-columns: var(--tpb6-thumb) 1fr;      /* bottone a riga sotto */
    grid-auto-rows: auto;
  }
  .tpb6 .tpb6-right{ grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 560px){
  .tpb6 { --tpb6-thumb: 130px; }         /* mobile */
}


/* ==========================================================================
   6) STEP 4 – RIEPILOGO FINALE (centratura + palette coerente)
   --------------------------------------------------------------------------
   - Nascondo la sidebar nello step 4
   - Centro il contenuto e uniformo i colori delle card (alcune avevano bg chiaro)
   ========================================================================== */

/* Sidebar non serve nello step 4 */
.tpb6 .tpb6-step[data-step="4"] .tpb6-side { display: none; }

/* Layout centrato (niente griglia a 2 colonne) */
.tpb6 .tpb6-step[data-step="4"] .tpb6-layout {
  display: block;
  width: min(1200px, 92vw);
  margin-inline: auto;
}

/* Massima larghezza del main in sicurezza */
.tpb6 .tpb6-step[data-step="4"] .tpb6-main {
  max-width: 1200px;
  margin-inline: auto;
}

/* Footer dello step 4: bottoni centrati */
.tpb6 .tpb6-step[data-step="4"] .tpb6-footer { justify-content: center; }

/* Griglia summary (due colonne da 900px in su) */
.tpb6 .tpb6-summary {
  display: grid;
  gap: 28px;
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .tpb6 .tpb6-summary { grid-template-columns: 1fr 1fr; }
}

/* Forza palette scura sulle card dello step 4 (alcuni bg bianchi inline) */
.tpb6 .tpb6-step[data-step="4"] .tpb6-summary .tpb6-card{
  background: var(--tpb-card) !important;
  border-color: var(--tpb-stroke) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45) !important;
}

/* Testi righe riepilogo a destra (label/value) */
.tpb6 .tpb6-step[data-step="4"] .tpb6-summary .tpb6-rowline span{ color: var(--tpb-ink-muted) !important; }
.tpb6 .tpb6-step[data-step="4"] .tpb6-summary .tpb6-rowline strong{ color: var(--tpb-ink) !important; }

/* Order summary (totali) */
.tpb6 .tpb6-step[data-step="4"] .tpb6-os-row span{ color: var(--tpb-ink-muted) !important; }
.tpb6 .tpb6-step[data-step="4"] .tpb6-os-total span:last-child{ color: var(--tpb-ink) !important; }

/* Date chips (dark / light) usate nello step 4 */
.tpb6 .tpb6-dates { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0 8px; }
@media (min-width: 900px) {
  .tpb6 .tpb6-dates { grid-template-columns: 1fr minmax(0,180px) 1fr; align-items: center; }
}
.tpb6 .tpb6-chip--dark {
  background: var(--tpb-chip-dark);
  color: #fff;
  border-radius: 10px;
  padding: 14px 12px;
}
.tpb6 .tpb6-chip--light {
  background: var(--tpb-chip-light) !important;
  color: #111827 !important;  /* testo scuro su chip chiaro */
  border: 1px solid #e5e7eb !important;
  border-radius: 10px;
  padding: 14px 12px;
}
.tpb6 .tpb6-chip-title { display: block; font-size: 12px; opacity: .85; margin-bottom: 6px; }
.tpb6 .tpb6-chip-val   { font-weight: 800; }

/* Connettore centrale (mappa) tra le due date nello step 4 */
.tpb6 .tpb6-connector { display: none; }
@media (min-width: 900px) {
  .tpb6 .tpb6-connector { display: block; }
  .tpb6 .tpb6-connector .tpb6-map iframe {
    width: 100%; height: 120px; border: 0; border-radius: 10px;
  }
}

/* Order Summary (blocchi + separatore) */
.tpb6 .tpb6-os      { margin-top: 8px; }
.tpb6 .tpb6-os-row  { display: flex; justify-content: space-between; padding: 8px 0; }
.tpb6 .tpb6-os-sep  { border: 0; border-top: 1px solid var(--tpb-stroke); margin: 6px 0 10px; }
.tpb6 .tpb6-os-total{ font-weight: 900; }

/* ==========================================================================
   7) THANK YOU
   -------------------------------------------------------------------------- */
.tpb6 .tpb6-thanks { text-align: center; padding: 60px 0 80px; }
.tpb6 .tpb6-thanks .tpb6-ico {
  width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 999px;
  background: rgba(34,197,94,.15); color: var(--tpb-success);
  display: grid; place-items: center; font-size: 42px; font-weight: 900;
}

/* ==========================================================================
   8) RESPONSIVE (mobile-first → override su breakpoint)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .tpb6 .tpb6-hero-inner { grid-template-columns: 1fr; }
  .tpb6 .tpb6-row        { grid-template-columns: 1fr; }
  .tpb6 .tpb6-footer     { justify-content: stretch; flex-wrap: wrap; }
  .tpb6 .tpb6-btn        { width: 100%; }
}

/* ==========================================================================
   9) WOOCOMMERCE OVERRIDES
   --------------------------------------------------------------------------
   Nasconde la riga “Subtotale” nel carrello/checkout.
   ========================================================================== */
.woocommerce-checkout-review-order-table .cart-subtotal,
.woocommerce-cart .cart_totals .cart-subtotal {
  display: none !important;
}

/* ===============================
   MODEL SEARCH: blocca ogni cambio colore
   =============================== */



/* Override globale del focus per gli input del widget */
.tpb6 .tpb6-input:focus {
  border-color: #1a2540 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;  /* niente cambio bg */
  outline: none !important;
}