/* DM2 Takeaway — modal asporto + button cassa
 *
 * v1.0.6: tema interno cambiato da arancione a NERO/grigio scuro.
 * Il bottone "Nuovo asporto" nella toolbar resta scuro per coerenza con i
 * pulsanti cassa, e il modal interno usa una palette nera/grigia con accenti
 * bianco/grigio chiaro al posto dei vecchi #ff7a3a/#ff4f3a.
 *
 * Aggiunti gli stili per il pannello azioni a 4 pulsanti
 * (Invia in cucina, Pagato, Stampa, Annulla).
 */

/* ── Bottone "Nuovo asporto" dentro la toolbar .dm2c-actions ──
   v1.0.6: stile nero compatto, coerente con gli altri bottoni cassa. */
.dm2c .dm2c-actions .dm2tk-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #2a2a2a, #0d0d0d);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}
/* FIX v1.0.35: label desktop vs mobile per il bottone "Nuovo asporto".
   Su desktop mostra "🥡 Nuovo asporto", su mobile solo "🥡 Asporto" più compatto. */
.dm2tk-open-btn .dm2tk-open-label-short { display: none; }
.dm2tk-open-btn .dm2tk-open-label-full { display: inline; }
.dm2c .dm2c-actions .dm2tk-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  filter: brightness(1.15);
  border-color: rgba(255,255,255,0.25);
}
.dm2c .dm2c-actions .dm2tk-open-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* FIX v1.0.40: dropdown tavoli aperti al click sul carrello cassa.
   Posizionato fixed (calcolato via JS), nero coerente col tema. */
.dm2tk-cart-dropdown {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
  z-index: 99999990;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: dm2tk-fade-in 0.15s ease-out;
}
.dm2tk-cart-dd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d4d4d4;
}
.dm2tk-cart-dd-close {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 0;
}
.dm2tk-cart-dd-close:hover { background: rgba(255, 255, 255, 0.16); }
.dm2tk-cart-dd-body {
  overflow-y: auto;
  padding: 6px;
  max-height: calc(70vh - 50px);
}
.dm2tk-cart-dd-empty {
  padding: 24px 12px;
  text-align: center;
  opacity: 0.6;
  font-size: 13px;
}
.dm2tk-cart-dd-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.dm2tk-cart-dd-row + .dm2tk-cart-dd-row { margin-top: 2px; }
.dm2tk-cart-dd-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.dm2tk-cart-dd-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.dm2tk-cart-dd-sub {
  font-size: 11.5px;
  opacity: 0.65;
  line-height: 1.2;
}

/* Fallback se inserito fuori da .dm2c-actions (rendering edge case) */
.dm2c .dm2tk-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  margin: 12px 16px;
  background: linear-gradient(135deg, #2a2a2a, #0d0d0d);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 2;
  position: relative;
}

/* ── Overlay modal ── */
.dm2tk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: dm2tk-fade-in 0.18s ease-out;
}
@keyframes dm2tk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dm2tk-modal {
  background: #111;
  color: #fff;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dm2tk-scale-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dm2tk-scale-in {
  from { transform: scale(0.94) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Header modal ── */
.dm2tk-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #1a1a1a, #000);
  color: #fff;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dm2tk-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dm2tk-icon {
  font-size: 28px;
  line-height: 1;
}
.dm2tk-title {
  font-size: 18px;
  font-weight: 800;
}
.dm2tk-sub {
  font-size: 12.5px;
  opacity: 0.72;
  margin-top: 2px;
}
.dm2tk-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.dm2tk-close:hover { background: rgba(255, 255, 255, 0.14); }

/* ── Body modal: 2 colonne (sinistra prodotti, destra carrello) ── */
.dm2tk-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.dm2tk-left {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #141414;
}
.dm2tk-right {
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Input nome cliente ── */
.dm2tk-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm2tk-name-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #d4d4d4;
}
.dm2tk-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}
.dm2tk-name {
  width: 100%;
  padding: 11px 14px;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 15px;
}
.dm2tk-name:focus {
  outline: none;
  border-color: #fff;
}

/* ── Tab categorie ── */
.dm2tk-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}
.dm2tk-cat {
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dm2tk-cat:hover { background: rgba(255, 255, 255, 0.1); }
.dm2tk-cat.is-active {
  background: #fff;
  color: #1a1a1a;
  border-color: #fff;
}

/* ── Lista prodotti (FIX v1.0.32: layout LISTA come cameriere, no immagini) ──
 * FIX v1.0.33: layout VERTICALE compatto. Controlli qty/aggiungi su una RIGA
 * SOTTO al nome+descrizione+prezzo, così su desktop a 2 colonne tutto entra
 * senza overflow. Larghezza minima delle colonne abbassata a 280px per
 * adattarsi meglio a modal stretti. */
.dm2tk-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.dm2tk-product {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s ease;
  font-family: inherit;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}
.dm2tk-product:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
/* Riga principale: layout VERTICALE — nome/descrizione/prezzo sopra,
 * controlli sotto. Evita overflow orizzontale su card strette. */
.dm2tk-prow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dm2tk-pmain {
  min-width: 0;
}
.dm2tk-pname {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  word-break: break-word;
}
.dm2tk-pdesc {
  font-size: 11.5px;
  opacity: 0.6;
  line-height: 1.3;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.dm2tk-pprice-line {
  margin-top: 4px;
}
.dm2tk-pprice {
  font-size: 16px;
  font-weight: 800;
  color: #f0f0f0;
}
/* Controlli qty/aggiungi: riga sotto, non più a destra del nome */
.dm2tk-addwrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  width: 100%;
}
.dm2tk-step {
  width: 32px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
  padding: 0;
}
.dm2tk-step:hover { background: rgba(255, 255, 255, 0.10); }
.dm2tk-step:disabled { opacity: 0.4; cursor: not-allowed; }
.dm2tk-pqty {
  width: 50px;
  height: 34px;
  flex: 0 0 50px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  -moz-appearance: textfield;
  padding: 0;
  box-sizing: border-box;
}
.dm2tk-pqty::-webkit-outer-spin-button,
.dm2tk-pqty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dm2tk-pqty:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }
.dm2tk-add-btn {
  background: linear-gradient(135deg, #2a2a2a, #0d0d0d);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0 12px;
  height: 34px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: filter 0.12s ease, border-color 0.12s ease;
  flex: 1 1 auto; /* riempie lo spazio rimanente nella riga controlli */
  min-width: 0;
}
.dm2tk-add-btn:hover {
  filter: brightness(1.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.dm2tk-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* FIX v1.0.29: stili per prodotti multi-misura (Bruschette 3p/6p, ecc.)
 * FIX v1.0.32: ora i sizes sono in fondo alla riga lista (non più card a parte) */
.dm2tk-pprice-multi {
  font-size: 12px;
  font-weight: 700;
  color: #aaa;
  font-style: italic;
}
.dm2tk-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.dm2tk-size-btn {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.dm2tk-size-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.4);
}
.dm2tk-size-btn:active { filter: brightness(0.95); }
.dm2tk-size-label {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.1;
}
.dm2tk-size-price {
  font-size: 13px;
  color: #f0f0f0;
  font-weight: 800;
  line-height: 1.1;
}

/* Variante nel carrello (es. "3 pezzi") */
.dm2tk-cart-variant {
  font-size: 12px;
  opacity: 0.7;
  font-weight: 500;
}

/* FIX v1.0.30: stati di disponibilità (come nel cameriere)
 * FIX v1.0.31: badge a TUTTA LARGHEZZA SOTTO al prezzo (non più inline). */
.dm2tk-stock-row {
  margin-top: auto; /* spinge il badge in fondo alla card flex-column */
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
}
.dm2tk-stock-row-out {
  background: rgba(220, 60, 60, 0.22);
  border: 1px solid rgba(220, 60, 60, 0.55);
  color: #ffb0b0;
}
.dm2tk-stock-row-low {
  background: rgba(220, 160, 60, 0.20);
  border: 1px solid rgba(220, 160, 60, 0.55);
  color: #ffd089;
}
/* Card non disponibile: cursore proibito + opacity sui contenuti
 * (NON sul badge "Non disponibile" che deve restare leggibile) */
.dm2tk-product-unavail {
  cursor: not-allowed !important;
}
/* Grigio l'intera card tranne il badge "Non disponibile" che resta leggibile */
.dm2tk-product-unavail .dm2tk-prow,
.dm2tk-product-unavail .dm2tk-sizes {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.dm2tk-product-unavail:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dm2tk-product-unavail .dm2tk-size-btn,
.dm2tk-product-unavail .dm2tk-step,
.dm2tk-product-unavail .dm2tk-add-btn,
.dm2tk-product-unavail .dm2tk-pqty {
  cursor: not-allowed;
}
.dm2tk-product-unavail .dm2tk-size-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
/* Card sotto soglia: bordo arancione tenue ma cliccabile */
.dm2tk-product-low {
  border-color: rgba(220, 160, 60, 0.4) !important;
}

.dm2tk-empty {
  text-align: center;
  padding: 24px;
  opacity: 0.6;
  font-size: 13.5px;
}

/* ── Carrello ── */
.dm2tk-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d4d4d4;
}
.dm2tk-cart-count {
  background: #fff;
  color: #000;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
/* FIX v1.0.35: bottone toggle carrello (mostrato SOLO su mobile via media). */
.dm2tk-cart-toggle {
  display: none;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  padding: 0;
}
.dm2tk-cart-toggle:hover { background: rgba(255, 255, 255, 0.15); }
.dm2tk-cart {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 16px;
}
.dm2tk-cart-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dm2tk-cart-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.dm2tk-cart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm2tk-qty-minus,
.dm2tk-qty-plus,
.dm2tk-cart-del {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.dm2tk-qty-minus:hover,
.dm2tk-qty-plus:hover { background: rgba(255, 255, 255, 0.14); }
.dm2tk-cart-del:hover { background: rgba(255, 80, 80, 0.2); }
.dm2tk-qty {
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.dm2tk-cart-price {
  margin-left: auto;
  font-weight: 700;
  color: #f0f0f0;
}
.dm2tk-empty-cart {
  text-align: center;
  opacity: 0.6;
  font-size: 13px;
  padding: 30px 14px;
}

/* ── Footer + griglia 4 azioni (v1.0.6) ── */
.dm2tk-foot {
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dm2tk-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
.dm2tk-total {
  color: #fff;
  font-size: 22px;
}

.dm2tk-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* v1.0.7: layout a 3 colonne quando i pulsanti sono Invia / Pagato / Annulla */
.dm2tk-actions-grid.is-3cols {
  grid-template-columns: 1fr 1fr 1fr;
}
.dm2tk-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  background: #1e1e1e;
  color: #fff;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: inherit;
}
.dm2tk-act:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
  border-color: rgba(255,255,255,0.25);
}
.dm2tk-act:active:not(:disabled) { transform: translateY(0); }
.dm2tk-act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dm2tk-act-ico {
  font-size: 18px;
  line-height: 1;
}
.dm2tk-act-lbl { line-height: 1.1; }

/* Variazioni di colore per ogni azione */
.dm2tk-act-send {
  background: linear-gradient(135deg, #2a2a2a, #111);
  border-color: rgba(255,255,255,0.14);
}
.dm2tk-act-pay {
  background: linear-gradient(135deg, #1f3a1f, #0d1f0d);
  border-color: rgba(120,200,120,0.25);
  color: #d8f5d8;
}
.dm2tk-act-pay:hover:not(:disabled) {
  border-color: rgba(120,200,120,0.5);
}
.dm2tk-act-print {
  background: linear-gradient(135deg, #1a1a1a, #000);
  border-color: rgba(255,255,255,0.18);
}
.dm2tk-act-cancel {
  background: linear-gradient(135deg, #3a1f1f, #1f0d0d);
  border-color: rgba(220,90,90,0.25);
  color: #f5d8d8;
}
.dm2tk-act-cancel:hover:not(:disabled) {
  border-color: rgba(220,90,90,0.55);
}

.dm2tk-msg {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}

/* ── Sub-prompt "Vuoi stampare lo scontrino?" (v1.0.7) ── */
.dm2tk-subprompt {
  position: fixed;
  inset: 0;
  z-index: 100010; /* sopra il modal takeaway */
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dm2tk-fade-in 0.16s ease-out;
}
.dm2tk-subprompt-box {
  background: #141414;
  color: #fff;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  padding: 22px 22px 18px;
  text-align: center;
  animation: dm2tk-scale-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.dm2tk-subprompt-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 8px;
}
.dm2tk-subprompt-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}
.dm2tk-subprompt-sub {
  font-size: 13.5px;
  opacity: 0.78;
  margin-bottom: 18px;
  line-height: 1.4;
}
.dm2tk-subprompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dm2tk-sp-btn {
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s ease, filter 0.12s ease, border-color 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dm2tk-sp-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.dm2tk-sp-btn:active { transform: translateY(0); }
.dm2tk-sp-no {
  background: linear-gradient(135deg, #2a2a2a, #111);
  color: #ddd;
}
.dm2tk-sp-no:hover { border-color: rgba(255,255,255,0.3); }
.dm2tk-sp-yes {
  background: linear-gradient(135deg, #1f3a1f, #0d1f0d);
  color: #e8fbe8;
  border-color: rgba(120,200,120,0.35);
}
.dm2tk-sp-yes:hover { border-color: rgba(120,200,120,0.65); }

/* ── Mobile ── */
@media (max-width: 760px) {
  .dm2tk-overlay { padding: 0; }
  /* FIX v1.0.37: dvh (dynamic viewport height) invece di vh, così l'altezza
     del modal si adatta automaticamente quando il browser mobile mostra/nasconde
     la barra indirizzi (Chrome Android, Safari iOS). Fallback a vh per browser
     vecchi che non supportano dvh. */
  .dm2tk-modal {
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    max-width: 100%;
    border-radius: 0;
  }
  .dm2tk-body {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    min-height: 0; /* important per flex+overflow su mobile */
  }

  /* FIX v1.0.37: header modal compatto su mobile.
     Prima font 18px + padding 14px×18px → occupava troppi pixel verticali.
     Adesso font 15px e padding ridotto, sottotitolo più piccolo. */
  .dm2tk-head {
    padding: 10px 14px;
  }
  .dm2tk-icon { font-size: 22px; }
  .dm2tk-title { font-size: 15px; line-height: 1.2; }
  .dm2tk-sub { font-size: 11px; line-height: 1.2; opacity: 0.7; }
  .dm2tk-close { width: 32px; height: 32px; font-size: 18px; }

  /* FIX v1.0.38: categorie SU PIÙ RIGHE (wrap) ben visibili.
     PRIMA (v1.0.37): provato scroll-x ma su alcuni telefoni le categorie
     non si vedevano perché lo scroll orizzontale non era percepibile.
     ADESSO: wrap con padding+font ridotti così entrano in 2-3 righe massimo
     e tutte sono visibili senza dover fare swipe. */
  .dm2tk-cats {
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
    padding-bottom: 8px;
  }
  .dm2tk-cat {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.2;
    min-height: 30px;
  }

  /* Input nome cliente compatto su mobile */
  .dm2tk-name { padding: 9px 12px; font-size: 14px; }
  .dm2tk-name-label { font-size: 11px; }

  /* Padding sinistra ridotto su mobile per dare più spazio ai contenuti */
  .dm2tk-left { padding: 12px 14px; gap: 10px; }

  /* FIX v1.0.40: bottone "Comanda" mobile con dimensione NATURALE come Suono.
     PRIMA (v1.0.39): flex:1 1 0 lo faceva espandere troppo, sovrastando Suono.
     ADESSO: niente flex-grow → larghezza si adatta al contenuto come Suono.
     padding/border-radius/font identici a .dm2c-btn (Suono). Simmetria perfetta. */
  .dm2tk-open-btn .dm2tk-open-label-full { display: none; }
  .dm2tk-open-btn .dm2tk-open-label-short { display: inline; }
  .dm2c .dm2c-actions .dm2tk-open-btn {
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    line-height: 1.2;
    box-shadow: none;
    flex: 0 1 auto;
    justify-content: center;
  }
  .dm2c .dm2c-actions .dm2tk-open-btn .dm2tk-open-icon {
    font-size: 14px;
    line-height: 1;
  }

  /* FIX v1.0.41: bottone "Suono" come ICONA piccola su mobile, allineato a
     destra. Lascia più spazio al bottone Comanda nella stessa riga.
     - text-indent: -9999px nasconde il testo "Suono"/"Suono ON" (cambiato
       dinamicamente dal core via textContent) senza romperlo.
     - ::before mostra emoji altoparlante (🔇 off, 🔊 on quando is-active).
     - margin-left:auto spinge il bottone a destra della toolbar, dando
       respiro a Comanda.
     - Funzionamento del bottone (toggle audio) NON modificato: solo aspetto. */
  .dm2c .dm2c-actions .dm2c-sound {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    height: 38px;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    border-radius: 12px;
    flex: 0 0 38px;
  }
  .dm2c .dm2c-actions .dm2c-sound::before {
    content: '🔇';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    font-size: 18px;
    line-height: 1;
  }
  .dm2c .dm2c-actions .dm2c-sound.is-active::before {
    content: '🔊';
  }

  /* FIX v1.0.35: pannello carrello COLLASSATO di default su mobile.
     FIX v1.0.36: max-height aumentato a 64px così la freccia toggle (▲) è
     SEMPRE visibile (anche su browser mobile con header che riduce viewport).
     Prima era 52px ma il padding cart-head 14px×2 + freccia 32px = 60px → la
     freccia veniva clippata su schermi stretti. */
  .dm2tk-right {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 64px;
    flex: 0 0 auto;
    transition: max-height 0.25s ease;
    overflow: hidden;
  }
  .dm2tk-right.is-open {
    max-height: 70vh;
    overflow: visible;
  }
  /* Header carrello mobile: padding ridotto per garantire freccia sempre
     dentro la riga visibile (anche se viewport molto stretto). */
  .dm2tk-cart-head {
    padding: 10px 14px;
  }
  /* Carrello body + footer nascosti quando collassato (per non flickerare durante transition) */
  .dm2tk-right .dm2tk-cart,
  .dm2tk-right .dm2tk-foot {
    display: none;
  }
  .dm2tk-right.is-open .dm2tk-cart,
  .dm2tk-right.is-open .dm2tk-foot {
    display: block;
  }
  .dm2tk-right.is-open .dm2tk-foot { display: block; }
  .dm2tk-right.is-open .dm2tk-cart { display: block; flex: 1 1 auto; overflow-y: auto; max-height: calc(70vh - 200px); }
  /* FIX v1.0.36: bottone toggle SEMPRE visibile, dimensione fissa che entra
     anche su schermi piccolissimi. flex-shrink:0 evita che venga compresso
     se il count del carrello è grande. */
  .dm2tk-cart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  /* Lascio il left col flex 1 1 auto per occupare tutto lo spazio rimanente */
  .dm2tk-left { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .dm2tk-products {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  /* FIX v1.0.37: card prodotto più compatte su mobile */
  .dm2tk-product { padding: 10px; gap: 6px; }
  .dm2tk-pname { font-size: 14px; line-height: 1.2; }
  .dm2tk-pdesc { font-size: 11.5px; -webkit-line-clamp: 1; }
  .dm2tk-pprice { font-size: 14px; }
  .dm2tk-pprice-line { margin-top: 2px; }
  .dm2tk-step { width: 28px; height: 30px; font-size: 14px; }
  .dm2tk-pqty { width: 38px; height: 30px; font-size: 13px; }
  .dm2tk-add-btn { padding: 0 8px; height: 30px; font-size: 11px; }
  .dm2tk-actions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .dm2tk-act {
    padding: 10px 6px;
    font-size: 11.5px;
  }
}