/* Compatibilità smartphone: box-sizing circoscritto al modulo. */
.tscorn-app, .tscorn-app *, .tscorn-app *::before, .tscorn-app *::after { box-sizing: border-box; }
.tscorn-app img, .tscorn-app canvas { max-width: 100%; }
/* Telastampa — Modulo FOTO CON CORNICE — Frontend CSS
 * [IMPL-002] PARANOID
 * Layout incorporabile (non a tutto schermo) e responsive. Namespaced .tscorn-*.
 */

.tscorn-app * { box-sizing: border-box; }
.tscorn-app {
  font-family: inherit;
  color: #222;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f6f6;
  max-width: 1100px;
  margin: 0 auto;
}
.tscorn-head {
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.tscorn-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #333; }
.tscorn-head p { margin: 4px 0 0; font-size: 12px; color: #888; }

/* Layout 3 colonne -> wrap su mobile */
.tscorn-layout { display: flex; flex-wrap: wrap; align-items: stretch; }

/* Desktop (>820px): TUTTI i comandi a sinistra (Carica/Formato/Colore + Strumenti impilati),
   anteprima a DESTRA e sticky (resta in vista) — stesso schema del collage. Mobile invariato. */
@media (min-width: 821px) {
  /* [v41.74] overflow:hidden sul contenitore disattiva position:sticky → su desktop lo apro. */
  .tscorn-app { overflow: visible; }
  .tscorn-layout { display: grid; grid-template-columns: 340px 1fr; align-items: start; }
  .tscorn-side  { grid-column: 1; grid-row: 1; width: auto; min-width: 0; border-right: 1px solid #eee; }
  .tscorn-tools { grid-column: 1; grid-row: 2; width: auto; min-width: 0; border-left: none; border-right: 1px solid #eee; border-top: 1px solid #eee; }
  .tscorn-work  { grid-column: 2; grid-row: 1 / span 2; min-width: 0; position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); }
}
.tscorn-side {
  width: 270px; flex: 1 1 240px; min-width: 230px;
  background: #fafafa; padding: 12px; overflow-y: auto;
  border-right: 1px solid #eee;
}
.tscorn-work {
  flex: 2 1 380px; min-width: 280px;
  display: flex; flex-direction: column; background: #2a2a2a;
}
.tscorn-tools {
  width: 280px; flex: 1 1 250px; min-width: 240px;
  background: #fafafa; padding: 12px; overflow-y: auto;
  border-left: 1px solid #eee;
}
.tscorn-work-canvas {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 10px; position: relative;
  min-height: 360px;
}
#crop-wrap { position: relative; max-width: 100%; max-height: 100%; }
#crop-canvas {
  display: block; max-width: 100%; max-height: 460px;
  cursor: grab; border-radius: 2px; box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
#crop-canvas.dragging { cursor: grabbing; }
.tscorn-work-bar {
  background: #1a1a1a; padding: 8px 12px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.tscorn-work-bar label { font-size: 12px; color: #aaa; }
.tscorn-work-bar button {
  padding: 4px 10px; font-size: 12px; border: 1px solid #555;
  border-radius: 5px; background: #333; color: #fff; cursor: pointer;
}
.tscorn-work-bar button:hover { background: #444; }
#zoom-slider { width: 120px; accent-color: #e8650a; }
#zoom-val { font-size: 12px; color: #ddd; min-width: 38px; }
#quality-badge { font-size: 11px; padding: 3px 10px; border-radius: 10px; }

/* Card */
.tscorn-card {
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 12px; margin-bottom: 10px;
}
.tscorn-card-title {
  font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 10px;
}
.tscorn-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.tscorn-field label { font-size: 11px; color: #888; }
.tscorn-field select, .tscorn-field input {
  font-size: 13px; padding: 6px 8px; border: 1px solid #ddd;
  border-radius: 5px; background: #fafafa; width: 100%;
}

/* Upload */
#drop-zone {
  border: 2px dashed #ccc; border-radius: 8px; padding: 18px;
  text-align: center; cursor: pointer;
}
#drop-zone:hover, #drop-zone.over { background: #fff9f6; border-color: #e8650a; }
#drop-zone .icon { font-size: 28px; margin-bottom: 4px; }
#drop-zone p { color: #666; font-size: 13px; margin: 0; }
#drop-zone small { color: #aaa; font-size: 11px; }

/* Tool rows (slider editing) */
.tscorn-tools p.tscorn-grp {
  font-size: 12px; font-weight: 600; color: #555; margin: 0 0 8px;
}
.tscorn-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tscorn-row label { font-size: 11px; color: #666; min-width: 78px; }
.tscorn-row input[type=range] { flex: 1; }
.tscorn-row span { font-size: 11px; color: #333; min-width: 28px; text-align: right; }
.tscorn-row button {
  font-size: 10px; padding: 2px 6px; border: 1px solid #ccc;
  border-radius: 3px; background: #fff; cursor: pointer;
}
.tscorn-tool-card {
  margin-bottom: 10px; background: #fff; border: 1px solid #eee;
  border-radius: 8px; padding: 12px;
}
.tscorn-btn-auto {
  padding: 7px; font-size: 12px; border: 1px solid #e8650a;
  border-radius: 6px; background: #fff9f6; color: #c8540a; cursor: pointer;
}
.tscorn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.tscorn-grid3 { display: grid; grid-template-columns: 1fr 1fr 60px; gap: 6px; margin-bottom: 6px; }

/* Colore cornice */
#cornice-colore { font-size: 13px; padding: 6px 8px; }

/* Carrello */
.tscorn-cart {
  padding: 14px 16px; background: #fff; border-top: 1px solid #eee;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#tscorn-prezzo { font-size: 20px; font-weight: 700; color: #e8650a; }
.tscorn-addcart {
  flex: 1; min-width: 200px; padding: 13px 18px; font-size: 15px; font-weight: 700;
  border: none; border-radius: 9px; background: #e8650a; color: #fff; cursor: pointer;
}
.tscorn-addcart:hover { background: #c8540a; }
#tscorn-cart-msg { font-size: 13px; }

/* Hidden helper inputs */
.tscorn-hidden { display: none !important; }

/* Mobile: una colonna */
@media (max-width: 820px) {
  .tscorn-side, .tscorn-tools, .tscorn-work {
    width: 100%; flex: 1 1 100%; border-left: none; border-right: none;
    border-top: 1px solid #eee;
  }
  #crop-canvas { max-height: 380px; }
}