/* ========== LAYOUT BASE ========== */
body {
  font-family: "Segoe UI", Roboto, Helvetica Neue, sans-serif;
  margin: 20px;
}

header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  max-width: 230px;
  height: auto;
}

h1 {
  font-size: 2em;
  margin: 0;
}

.nota-rossa {
  color: red;
  font-size: 14px;
  font-weight: bold;
  margin-top: 2px;
  margin-bottom: 0;
}

/* ========== FILTRI E BOTTONI ========== */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.filters input[type="text"] {
  width: 300px;
  max-width: 100%;
  padding: 8px;
  font-size: 16px;
}

.filters button {
  padding: 6px 14px;
  font-size: 15px;
  height: 34px;
  background-color: #45AC49;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  min-width: 80px;
}

.filters button:hover {
  background-color: #39933e;
}

/* ========== TABELLA ========== */
.tabella-scroll {
  overflow-x: auto;                 /* default: se serve, può scorrere */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  vertical-align: middle;
  white-space: nowrap;              /* base: niente a capo, gestito per device sotto */
}

th {
  background-color: #45AC49;
  color: white;
  text-align: left;
}

/* Sticky head (solo a schermo) */
@media screen {
  #tabella-prodotti thead th {
    position: sticky;
    top: 0;
    background-color: #45AC49;
    color: white;
    z-index: 2;
  }
}

/* Stampa */
@media print {
  .no-print { display: none !important; }
  #tabella-prodotti thead th { position: static !important; }
}

/* Evita spezzature riga in PDF */
#tabella-prodotti tr { page-break-inside: avoid; }

/* Colonne desktop (tabella rigida, descrizione a capo) */
#tabella-prodotti { table-layout: fixed; width: 100%; }

#tabella-prodotti th:nth-child(1), #tabella-prodotti td:nth-child(1) { width: 12%; white-space: nowrap; }     /* Codice */
#tabella-prodotti th:nth-child(2), #tabella-prodotti td:nth-child(2) { 
  width: 38%;
  white-space: normal;            /* consenti a capo solo alla descrizione su desktop */
  word-break: break-word;
  overflow-wrap: anywhere;
}
#tabella-prodotti th:nth-child(3), #tabella-prodotti td:nth-child(3) { width: 10%; text-align: right; }       /* Prezzo */
#tabella-prodotti th:nth-child(4), #tabella-prodotti td:nth-child(4) { width: 10%; text-align: right; }       /* Prezzo Promo */
#tabella-prodotti th:nth-child(5), #tabella-prodotti td:nth-child(5) { width: 10%; text-align: right; }       /* Conai */
#tabella-prodotti th:nth-child(6), #tabella-prodotti td:nth-child(6) { width: 12%; text-align: center; }      /* Quantità */
#tabella-prodotti th:nth-child(7), #tabella-prodotti td:nth-child(7) { width: 8%;  text-align: center; }      /* Foto */

/* Colonna foto uniforme */
#tabella-prodotti td:last-child {
  width: 120px;
  text-align: center;
}

/* ========== IMMAGINI E ZOOM ========== */
td img.zoomable {
  width: 100px;
  height: 100px;
  object-fit: contain;
  cursor: zoom-in;
  display: block;
  margin: 0 auto;
}

#zoomOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#zoomedImg {
  max-width: 90%;
  max-height: 90%;
}

/* ========== EVIDENZIAZIONI ========== */
tr.evidenziato {
  background-color: #45AC49 !important;
  color: white;
  font-weight: bold;
}

mark {
  background-color: #8ab783 !important;
  padding: 0 2px;
  border-radius: 2px;
}

/* ========== CATEGORIE ========== */
.btn-categoria {
  background-color: #05539c !important;
  color: white !important;
  border: none;
  padding: 6px 16px;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  font-size: 11px;
  min-width: 120px;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  box-sizing: border-box;
}
.btn-categoria:hover { background-color: #000000; }

#categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
}

/* ========== TESTATA E IMMAGINI SHOCK ========== */
.testata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}
.blocco-titolo { display: flex; align-items: center; gap: 20px; margin-top: 3px; }
.titolo-testo { display: flex; flex-direction: column; }

.immagine-shock { max-height: 250px; max-width: 179px; }

.img-shock { display: block; width: 150px; height: auto; margin: 0 auto; }
.txt-shock { width: 150px; margin: 6px auto 0; text-align: center; line-height: 1.35; }

.blocco-shock { display: inline-block; text-align: center; }
.blocco-shock img { display: block; width: 120px; height: auto; }
.testo-shock { max-width: 120px; margin: 5px auto 0; font-size: 14px; line-height: 1.4; }

/* ========== COMBO CATEGORIE (MOBILE) ========== */
#combo-categorie { display: none; }
#select-categoria {
  background-color: #125ca2;
  color: #ffffff;
  border: 1px solid #0d4377;
  padding: 8px;
  border-radius: 5px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#select-categoria option {
  background-color: #ffffff;
  color: #000000;
}

/* ========== QUANTITÀ ========== */
.testo-quantita { font-size: 15px; font-weight: bold; color: #444; margin: 2px 0 3px; }
.qty-wrap { display: flex; flex-direction: column; align-items: center !important; gap: 3px; line-height: 1.2; }
.qty-label { font-size: 12px; color: #555; }
.qty-value { font-size: 14px; font-weight: bold; }
.qty-input {
  width: 80px;
  text-align: center !important;
  padding: 3px 6px;
}
.qty-input::placeholder { opacity: 1; transition: opacity .15s; }
.qty-input:focus::placeholder { opacity: 0; }
.qty-input::-webkit-input-placeholder { opacity: 1; }
.qty-input:focus::-webkit-input-placeholder { opacity: 0; }

/* ========== PULSANTI AZIONE ========== */
#invia-proposta {
  background: #c92c3a !important;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}
#invia-proposta:hover { background: #a82431; }

/* ========== FOOTER ========== */
.footer {
  border-top: 1px solid #ccc;
  margin-top: 30px;
  padding: 15px 10px;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  text-align: left;
}
.footer-content p {
  margin: 0;
  font-size: 14px;
  color: #444;
}
.footer .certificazioni {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer .certificazioni img {
  height: 100px !important;
  width: auto;
  vertical-align: middle;
}

/* ========== TORNA SU ========== */
#btnTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  width: 45px; height: 45px;
  border: none; border-radius: 50%;
  font-size: 18px; cursor: pointer;
  background: #05539c !important;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .3s ease;
}
#btnTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#btnTop:hover { background: #05539c !important; transform: translateY(-1px); }
@supports (bottom: env(safe-area-inset-bottom)) { #btnTop { bottom: calc(20px + env(safe-area-inset-bottom)); } }
@media print { #btnTop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #btnTop { transition: none; } }

/* ========== RESPONSIVE: MOBILE (<=768px) ========== */
@media (max-width: 768px) {
  /* Logo più grande su mobile (come richiesto) */
  .logo { max-width: 250px !important; }

  header { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 1.5em; }

  .filters { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .filters input[type="text"], .filters button { width: 100% !important; display: block; box-sizing: border-box; }
  .filters button { min-width: 0 !important; }

  /* Combo categorie ON, bottoni OFF */
  #categorie { display: none !important; }
  #combo-categorie { display: block !important; }
  #select-categoria { width: 100%; text-align: center; }
  #select-categoria { text-align-last: center; }

  th, td { font-size: 14px; padding: 6px; }
  td img.zoomable { width: 80px; height: auto; }

  .testata { flex-direction: column; align-items: center; text-align: center; }
  .blocco-titolo { flex-direction: column; align-items: center; }
  .immagine-shock { margin-top: 15px; }

  /* Tabella: su mobile permetti scroll orizzontale */
  .tabella-scroll {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #tabella-prodotti {
    width: auto;             /* può superare la larghezza del contenitore */
    min-width: 900px;        /* base comoda */
    table-layout: auto;      /* calcolo naturale delle colonne */
  }
  #tabella-prodotti th, #tabella-prodotti td {
    white-space: nowrap;     /* niente a capo su mobile: si scorre */
  }

  .blocco-shock img { width: 150px; }
  .blocco-shock p { font-size: 13px; }

  .testo-quantita { text-align: center !important; }
}

/* Footer su mobile */
@media (max-width: 768px) {
  .footer-content p { margin: 0 auto; text-align: center !important; }
  .footer .certificazioni { justify-content: center; gap: 20px; flex-wrap: wrap; }
  .footer .certificazioni img { height: 60px !important; }
}

/* ========== RESPONSIVE: TABLET (iPad/Android) ==========
   NIENTE SCROLL ORIZZONTALE, ETICHETTE A CAPO
   (pointer:coarse = input dito, range tipico tablet)
========================================================= */
@media (pointer:coarse) and (min-width:768px) and (max-width:1366px) {
  .tabella-scroll{
    overflow-x: hidden !important;   /* niente scroll orizzontale */
  }

  #tabella-prodotti{
    width: 100% !important;
    table-layout: fixed !important;  /* consente a capo nelle celle */
  }

  #tabella-prodotti th,
  #tabella-prodotti td{
    white-space: normal !important;  /* va a capo */
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* leggero compattamento per far entrare tutto */
  #tabella-prodotti th{
    font-size: 12.5px;
    line-height: 1.2;
    padding: 6px 6px;
  }
  #tabella-prodotti td{
    font-size: 13px;
    padding: 6px 6px;
  }

  /* larghezze guida per distribuire lo spazio */
  #tabella-prodotti th:nth-child(1), #tabella-prodotti td:nth-child(1){ width: 12%; } /* Codice */
  #tabella-prodotti th:nth-child(2), #tabella-prodotti td:nth-child(2){ width: 34%; } /* Descrizione */
  #tabella-prodotti th:nth-child(3), #tabella-prodotti td:nth-child(3){ width: 12%; text-align:right; } /* Prezzo */
  #tabella-prodotti th:nth-child(4), #tabella-prodotti td:nth-child(4){ width: 14%; text-align:right; } /* Prezzo Promo (€) */
  #tabella-prodotti th:nth-child(5), #tabella-prodotti td:nth-child(5){ width: 14%; text-align:right; } /* Conai x collo (€) */
  #tabella-prodotti th:nth-child(6), #tabella-prodotti td:nth-child(6){ width: 8%;  text-align:center; } /* Q.tà */
  #tabella-prodotti th:nth-child(7), #tabella-prodotti td:nth-child(7){ width: 6%;  text-align:center; } /* Foto */

  /* immagini un po' più piccole per stare comodi */
  #tabella-prodotti td img.zoomable{
    max-width: 56px;
    height: auto;
  }
}

/* ========== SMALL PHONES (<=480px) ========== */
@media (max-width: 480px) {
  th, td { font-size: 13px; }
  td img.zoomable { width: 60px; }
  .filters input[type="text"] { font-size: 14px; }
}

/* ========== iOS SAFARI BOOST ========== */
@supports (-webkit-touch-callout: none) {
  .tabella-scroll{ -webkit-overflow-scrolling: touch; }
}

/* === FIX TABLET: l'input quantità non esce dalla colonna === */
@media (pointer:coarse) and (min-width:768px) and (max-width:1366px) {
  /* la cella quantità: un po' meno padding per guadagnare spazio */
  #tabella-prodotti td:nth-child(6) {
    padding: 4px 4px;
  }

  /* contenitore quantità a tutta larghezza della cella */
  .qty-wrap {
    width: 100%;
    align-items: center;
  }

  .qty-label,
  .qty-value {
    line-height: 1.1;
    max-width: 100%;
    text-align: center;
  }

  /* riduci l'input e fallo adattare alla cella */
  .qty-input {
    width: 100% !important;     /* prende la larghezza disponibile della colonna */
    max-width: 54px !important; /* più piccolo dei ~60–70px della colonna su iPad piccoli */
    min-width: 48px;
    box-sizing: border-box;
    padding: 3px 4px;
    margin: 0 auto;             /* centrato */
  }
}

/* opzionale: sicurezza globale per evitare overflow in altri casi */
.qty-input { max-width: 100%; }

/* === FIX TABLET (iPad/Android): l'input quantità non deve sbordare === */
@media (pointer:coarse) and (min-width:768px) and (max-width:1366px) {
  /* mantieni layout fisso e vai a capo dove serve */
  #tabella-prodotti{
    table-layout: fixed !important;
    width: 100% !important;
  }
  #tabella-prodotti th,
  #tabella-prodotti td{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
  }

  /* ridistribuisci un po' di spazio alle colonne per dare aria alla Q.tà */
  #tabella-prodotti th:nth-child(2), #tabella-prodotti td:nth-child(2){ width: 32% !important; } /* Descrizione (leggermente meno) */
  #tabella-prodotti th:nth-child(4), #tabella-prodotti td:nth-child(4){ width: 13% !important; } /* Prezzo Promo */
  #tabella-prodotti th:nth-child(5), #tabella-prodotti td:nth-child(5){ width: 13% !important; } /* Conai */
  #tabella-prodotti th:nth-child(6), #tabella-prodotti td:nth-child(6){ width: 10% !important; padding: 4px !important; } /* Q.tà più larga */
  /* le altre colonne restano come sono */

  /* la cella quantità contiene tutto e non fa overflow */
  #tabella-prodotti td:nth-child(6){ overflow: hidden; }

  .qty-wrap{
    width: 100%;
    align-items: stretch !important;   /* input prende tutta la larghezza */
    gap: 3px;
  }
  .qty-label, .qty-value{
    text-align: center;
    line-height: 1.1;
    font-size: 11.5px;
  }
  .qty-input{
    display: block;
    width: 100% !important;    /* si adatta alla colonna */
    max-width: none !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    box-sizing: border-box;
    margin: 0 auto;
  }
}

/* cintura e bretelle: evita overflow in qualsiasi contesto residuo */
.qty-input{ max-width: 100%; }


/* === Freccia "Torna su" centrata nel pallino (fix iPad/tablet) === */
#btnTop{
  display: inline-flex !important;   /* usa flex per centrare */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;             /* niente padding che la sposta */
  line-height: 1 !important;         /* evita sfasamenti verticali del glifo */
  text-align: center !important;
}

/* Safari/iOS: rimuovi eventuali stili nativi */
@supports (-webkit-touch-callout: none) {
  #btnTop{
    -webkit-appearance: none;
  }
}

/* Se dentro usi un'icona SVG, assicurati sia centrata */
#btnTop svg{
  width: 1em;
  height: 1em;
  display: block;                    /* elimina lo spazio inline sotto l'SVG */
}

/* (opzionale) micro-nudge solo su tablet se la vedi ancora leggermente alta/bassa */
@media (pointer:coarse) and (min-width:768px) and (max-width:1366px){
  /* scommenta una delle due righe se serve un ritocco fine */
  /* #btnTop{ transform: translateY(-0.5px); }  */
  /* #btnTop{ transform: translateY(0.5px); }   */
}
/* === CENTRATURA FORTE: freccia "Torna su" perfettamente al centro === */
#btnTop{
  display: grid !important;          /* più robusto di flex per il testo */
  place-items: center !important;    /* centro orizzontale + verticale */
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Se dentro c'è un'icona <svg> o <i>, centrala comunque */
#btnTop > *{
  margin: 0 !important;
  display: block !important;
}

/* iOS/WebKit: niente stili nativi che possono spostare il glifo */
@supports (-webkit-touch-callout: none) {
  #btnTop{ -webkit-appearance: none; }
}

/* ====== PIANO B (usa SOLO se la vedi ancora spostata) ======
   Sblocca le 3 righe qui sotto: disattiva il testo originale
   e disegna la freccia centrata con un pseudo-elemento.      */
/*
#btnTop{ color: transparent !important; position: relative !important; }
#btnTop::after{
  content: "↑";
  color: #fff;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
*/