/* ============================================================
   CASSA · TEMA "VERSIONE 3" (tile colorate) — look completo
   Caricato SOLO da index.html, dopo styles.css.
   Ridipinge TUTTA la cassa (header, colonna sinistra, colonna
   destra) per farla combaciare col mockup, senza toccare nessun
   id, nessuno script, né app.js. Non tocca le altre pagine.
   Tutto è sotto body.cassa-v3 e usa !important dove serve per
   vincere sugli stili inline esistenti.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body.cassa-v3 {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  background: #f4f2f6 !important;
  color: #241c33 !important;
  --v3-c1:#a855f7; --v3-c2:#ec4899; --v3-c3:#f59e0b; --v3-c4:#06b6d4;
  --v3-c5:#10b981; --v3-c6:#6366f1; --v3-c7:#f43f5e; --v3-c8:#8b5cf6;
  --v3-acc:#7c3aed; --v3-acc-soft:#f3e8ff; --v3-border:#ece3f0; --v3-text2:#6c6480;
}
body.cassa-v3 * { font-family: inherit; }

/* ════════ HEADER ════════ */
body.cassa-v3 .cassa-header {
  background: #ffffff !important;
  color: #241c33 !important;
  border-bottom: 1px solid var(--v3-border);
  box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
  padding: 14px 24px !important;
  position: sticky; top: 0; z-index: 50;
}
body.cassa-v3 .v3-title {
  color: #241c33 !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
  letter-spacing: -.3px;
}
body.cassa-v3 .cassa-header label { color: var(--v3-text2) !important; font-weight: 600; font-size: .78rem !important; }
body.cassa-v3 .cassa-header select {
  border: 1px solid var(--v3-border) !important;
  background: #f7f5fa !important;
  color: #241c33 !important;
  font-weight: 600; border-radius: 10px !important;
}
body.cassa-v3 .header-btn {
  background: #f4f2f6 !important;
  border: 1px solid var(--v3-border) !important;
  color: var(--v3-text2) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  transition: .15s !important;
}
body.cassa-v3 .header-btn:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
  transform: translateY(-1px) !important;
}

/* ════════ LAYOUT ════════ */
body.cassa-v3 .v3-layout {
  grid-template-columns: 1fr 520px !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  align-items: start !important;
}
/* colonna destra: niente altezza forzata (prima schiacciava a 0 la lista articoli) */
body.cassa-v3 .v3-right { gap: 14px !important; }
/* la lista articoli ha un'altezza ampia ma SEMPRE visibile e scrollabile */
body.cassa-v3 #receipt {
  max-height: 42vh !important;
  min-height: 90px !important;
  overflow-y: auto !important;
}

/* card bianche coerenti */
body.cassa-v3 .v3-card,
body.cassa-v3 #filters,
body.cassa-v3 #productsSection,
body.cassa-v3 .v3-fid,
body.cassa-v3 .v3-scontrino {
  background: #fff !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 12px rgba(80,40,120,.07) !important;
}

/* ════════ CATEGORIE: tile colorate ════════ */
body.cassa-v3 #categories { gap: 11px !important; }
body.cassa-v3 #categories .category-button {
  border-radius: 14px !important;
  padding: 18px 14px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(80,40,120,.12) !important;
  border: none !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  transition: transform .15s, box-shadow .15s !important;
}
body.cassa-v3 #categories .category-button:hover { transform: translateY(-2px) !important; }
body.cassa-v3 #categories .category-button:nth-of-type(8n+1){background:linear-gradient(135deg,var(--v3-c1),#7c3aed)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+2){background:linear-gradient(135deg,var(--v3-c2),#be1d6f)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+3){background:linear-gradient(135deg,var(--v3-c3),#d97706)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+4){background:linear-gradient(135deg,var(--v3-c4),#0e7490)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+5){background:linear-gradient(135deg,var(--v3-c5),#047857)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+6){background:linear-gradient(135deg,var(--v3-c6),#4338ca)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+7){background:linear-gradient(135deg,var(--v3-c7),#be123c)!important}
body.cassa-v3 #categories .category-button:nth-of-type(8n+8){background:linear-gradient(135deg,var(--v3-c8),#6d28d9)!important}
body.cassa-v3 #categories .category-button.active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--v3-acc) !important;
  transform: translateY(-1px) !important;
}

/* ════════ FILTRI: chip calmi a livelli (niente muro di pillole colorate) ════════ */
/* spazio tra un gruppo di filtri e l'altro + sottile linea divisoria */
body.cassa-v3 #filters { padding: 16px 18px !important; }
body.cassa-v3 #filter2Section, body.cassa-v3 #filter3Section, body.cassa-v3 #letterSection {
  margin-top: 12px !important; padding-top: 12px !important;
  border-top: 1px solid var(--v3-border) !important;
}
/* TUTTI i filtri: pillole bianche outline, leggere e uniformi */
body.cassa-v3 .filter1-button, body.cassa-v3 .filter2-button,
body.cassa-v3 .pietra-button, body.cassa-v3 .misura-button,
body.cassa-v3 .letter-filter-button {
  border-radius: 99px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  background: #fff !important;
  color: #4a4458 !important;
  border: 1px solid #e2d9ec !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.cassa-v3 .filter1-button:hover, body.cassa-v3 .filter2-button:hover,
body.cassa-v3 .pietra-button:hover, body.cassa-v3 .misura-button:hover,
body.cassa-v3 .letter-filter-button:hover {
  border-color: var(--v3-acc) !important; color: var(--v3-acc) !important;
}
/* le misure (0.4/0.6/0.8) ancora più piccole e tenui */
body.cassa-v3 .misura-button { font-size: 12px !important; padding: 5px 12px !important; color: var(--v3-text2) !important; }
/* il filtro SELEZIONATO in ogni livello: pieno viola, ben visibile */
body.cassa-v3 .filter1-button.active, body.cassa-v3 .filter2-button.active,
body.cassa-v3 .pietra-button.active, body.cassa-v3 .misura-button.active,
body.cassa-v3 .letter-filter-button.active {
  background: var(--v3-acc) !important;
  color: #fff !important;
  border-color: var(--v3-acc) !important;
}
/* misura CON PREZZO impostato: tessera lilla, due righe (misura + prezzo), tocca per aggiungere */
body.cassa-v3 .misura-button.con-prezzo {
  background: linear-gradient(135deg,#b89cf0,#9b7bea) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 11px 20px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.15 !important;
  box-shadow: 0 3px 10px rgba(155,123,234,.28) !important;
  transition: transform .12s !important;
}
body.cassa-v3 .misura-button.con-prezzo:hover { transform: translateY(-2px) !important; color:#fff !important; }
body.cassa-v3 .misura-button .mis-m { font-weight: 800; font-size: 15px; }
body.cassa-v3 .misura-button .mis-p { font-size: 12px; opacity: .92; margin-top: 2px; }
/* misura toccata = evidenziata (il prezzo si compila sotto) */
body.cassa-v3 .misura-button.scelta { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--v3-acc) !important; }

/* ════════ TABELLA PREZZI (tocca invece di scrivere) ════════ */
body.cassa-v3 .v3-griglia-prezzi { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--v3-border); }
body.cassa-v3 .v3-griglia-prezzi .gp-lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--v3-text2); margin-bottom: 9px; }
body.cassa-v3 .gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; }
body.cassa-v3 .prezzo-rapido {
  border: 1px solid var(--v3-border); background: #fff; border-radius: 9px;
  padding: 10px 6px; font-weight: 700; font-size: 14px; color: #3a3346; cursor: pointer; transition: .1s;
}
body.cassa-v3 .prezzo-rapido:hover { border-color: var(--v3-acc); color: var(--v3-acc); }
body.cassa-v3 .prezzo-rapido.on { background: var(--v3-acc); color: #fff; border-color: var(--v3-acc); }

/* ════════ PRODOTTI ════════ */
body.cassa-v3 #products .product-card,
body.cassa-v3 #products button {
  border-radius: 12px !important;
  border: 1px solid var(--v3-border) !important;
  font-weight: 600 !important;
  transition: .15s !important;
}
body.cassa-v3 #products .product-card:hover,
body.cassa-v3 #products button:hover {
  border-color: var(--v3-acc) !important;
  transform: translateY(-2px) !important;
}

/* ════════ PREZZO / QUANTITÀ ════════ */
body.cassa-v3 #price, body.cassa-v3 #quantity { border-radius: 10px !important; }
body.cassa-v3 #addBtn {
  background: linear-gradient(135deg,#10b981,#059669) !important;
  border-radius: 10px !important;
}

/* ════════ COLONNA DESTRA — FIDELITY ════════ */
body.cassa-v3 .v3-fid { border: 1px solid var(--v3-border) !important; padding: 16px !important; }
body.cassa-v3 .v3-fid h3 { color: var(--v3-acc) !important; font-weight: 800 !important; }
body.cassa-v3 .v3-fid input {
  border: 1px solid var(--v3-border) !important;
  border-radius: 10px !important;
  background: #faf8fc !important;
}
body.cassa-v3 .v3-fid input:focus { border-color: var(--v3-acc) !important; outline: none; }

/* ════════ COLONNA DESTRA — SCONTRINO ════════ */
body.cassa-v3 .v3-scontrino h3 { color: var(--v3-acc) !important; font-weight: 800 !important; font-size: 1.15rem !important; }
/* riga articolo: tutto su UNA riga (testo · prezzo · ❌), ben leggibile */
body.cassa-v3 #receiptList li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid var(--v3-border) !important;
  padding: 13px 2px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #241c33 !important;
}
/* il campo prezzo: largo abbastanza da mostrare i centesimi (es. 134,90) */
body.cassa-v3 #receiptList li > input {
  width: 92px !important;
  margin-left: auto !important;
  padding: 8px 10px !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 8px !important;
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  flex: 0 0 auto !important;
}
body.cassa-v3 #receiptList li > button {
  flex: 0 0 auto !important;
  width: 30px !important; height: 30px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--v3-acc-soft) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
body.cassa-v3 #receiptList li > button:hover { background: #fde8ec !important; }
body.cassa-v3 #total {
  color: var(--v3-acc) !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -.5px;
}

/* bottoni pagamento: grandi, arrotondati */
body.cassa-v3 .v3-pays { flex-wrap: wrap !important; gap: 8px !important; }
body.cassa-v3 #invioFiscaleBtn { background: linear-gradient(135deg,#a855f7,#7c3aed) !important; }
body.cassa-v3 #invioContantiBtn { background: linear-gradient(135deg,#10b981,#059669) !important; }
body.cassa-v3 #invioCartaBtn { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; }
body.cassa-v3 .v3-pays > button { border-radius: 11px !important; font-weight: 700 !important; }
/* Preconto NON è un pagamento: va nella riga bianca secondaria, stesso stile di cestino e fattura */
body.cassa-v3 #borsePreconto {
  background: #fff !important;
  color: var(--v3-text2) !important;
  border: 1px solid var(--v3-border) !important;
  font-weight: 700 !important;
}
body.cassa-v3 #borsePreconto:hover { border-color: var(--v3-acc) !important; color: var(--v3-acc) !important; }

/* riga secondaria: Preconto · cestino · fattura → bianchi e sotto (come nel mockup) */
body.cassa-v3 .v3-pays2 > button {
  background: #fff !important;
  color: var(--v3-text2) !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: .15s !important;
}
body.cassa-v3 .v3-pays2 > button:hover {
  border-color: var(--v3-acc) !important;
  color: var(--v3-acc) !important;
}

/* Pagato/Resto inline: NASCOSTO (c'è il popup Contanti). Gli elementi
   #pagato e #resto restano nel DOM così openapi-scontrino-veloce.js per
   Montebelluna non si rompe; semplicemente non si vedono più. */
body.cassa-v3 .v3-resto { display: none !important; }
/* Scontrino Regalo: solo una riga discreta con la spunta, niente box che stona */
body.cassa-v3 .v3-regalo {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  margin-top: 10px !important;
}
body.cassa-v3 .v3-regalo label { color: var(--v3-text2) !important; font-weight: 600 !important; font-size: 13.5px !important; }
body.cassa-v3 .v3-codici {
  background: #fafafc !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 12px !important;
}
body.cassa-v3 .v3-codici label { color: var(--v3-text2) !important; }
body.cassa-v3 .v3-codici input { border-radius: 10px !important; border: 1px solid var(--v3-border) !important; }

/* ════════ FIDELITY COMPATTA (più vicina al mockup) ════════ */
body.cassa-v3 .v3-fid { padding: 14px 16px !important; }
/* header "🌟 Cliente Fidelity" più piccolo e pulito */
body.cassa-v3 .v3-fid h3 { font-size: .98rem !important; gap: 6px !important; }
/* i tre bottoncini tondi (gestione, scheda, nota): più piccoli e tenui */
body.cassa-v3 .v3-fid h3 button,
body.cassa-v3 .v3-fid > div:first-child button {
  width: 30px !important; height: 30px !important;
  padding: 0 !important; font-size: 14px !important;
  box-shadow: none !important;
}
/* nome / cognome / email: campi compatti e tenui */
body.cassa-v3 .v3-fid input[id="fname"],
body.cassa-v3 .v3-fid input[id="lname"],
body.cassa-v3 .v3-fid input[id="email"] {
  padding: 8px 10px !important; font-size: 12.5px !important;
}
/* il bottone "Carica" coordinato all'accento */
body.cassa-v3 .v3-fid button[onclick="checkClient()"] {
  background: var(--v3-acc) !important; border-radius: 10px !important; font-weight: 700 !important;
}

/* ════════ SCONTRINO: foot (totale + pulsanti) coeso in fondo ════════ */
/* il blocco con border-top che contiene totale, pulsanti e box */
body.cassa-v3 .v3-scontrino > div[style*="border-top"] {
  border-top: 1px solid var(--v3-border) !important;
  padding-top: 14px !important;
  margin-top: 4px !important;
}
/* riga totale: etichetta a sinistra, importo grande a destra */
body.cassa-v3 .v3-scontrino #total { font-size: 1.9rem !important; }

/* scontrino vuoto: un filo d'aria così la card non sembra rotta */
body.cassa-v3 #receiptList { min-height: 40px; }

/* responsive: sotto i 1100px la colonna destra torna sotto, a tutta larghezza */
@media (max-width: 1100px) {
  body.cassa-v3 .v3-layout { grid-template-columns: 1fr !important; min-height: 0 !important; }
  body.cassa-v3 .v3-right { position: static !important; height: auto !important; }
  body.cassa-v3 #receipt { flex: none !important; max-height: 320px !important; }
}

/* ════════ FIDELITY: solo la riga del telefono quando è vuota ════════
   Nome/Cognome/Email VUOTI sono spreco di spazio: spariscono.
   Ricompaiono da soli quando un cliente viene caricato (campi pieni) o
   quando la fata ci scrive dentro. Niente JS: uso :placeholder-shown +
   :has(). Protetto da @supports: sui browser senza :has() i campi
   restano SEMPRE visibili (mai nascosti per errore). */
@supports selector(:has(*)) {
  body.cassa-v3 .v3-fid-nomi { display: none !important; }
  body.cassa-v3 .v3-fid-nomi:has(input:not(:placeholder-shown)) { display: grid !important; }
  body.cassa-v3 .v3-fid-email:placeholder-shown { display: none !important; }
}